CSS中的随机性：利用`cicada principle`（蝉原则）与素数实现伪随机背景

CSS 中的随机性：利用蝉原则与素数实现伪随机背景

大家好！今天我们来探讨一个有趣的话题：如何在 CSS 中模拟随机性，具体来说，我们将深入研究如何利用“蝉原则”（Cicada Principle）结合素数来实现伪随机的背景效果。

为什么要在 CSS 中模拟随机？

CSS 本身是一种声明式语言，主要负责样式描述，不具备真正的随机数生成能力。然而，在许多场景下，我们需要一些视觉上的变化来增加界面的趣味性和活力。例如：

• 纹理背景: 创造自然的、非重复的纹理效果。
• 动画效果: 控制动画的延迟、速度等参数，使其产生微妙的变化。
• 元素位置: 在一定范围内随机调整元素的位置，模拟自然分布。
• 配色方案: 基于某种算法生成一系列相关的颜色。

虽然 JavaScript 可以轻松生成随机数并动态修改 CSS，但完全依赖 JavaScript 会增加复杂性，并且可能影响性能。如果能找到一种纯 CSS 的方法来实现伪随机，就能在一定程度上简化开发流程，并提升用户体验。

蝉原则 (Cicada Principle) 的数学原理

蝉原则是一种利用周期性现象来模拟随机性的方法。它的核心思想是：选择两个周期长度相差较大的周期函数，将它们组合在一起，就可以得到一个更长的周期。在这个较长的周期内，数据分布会呈现出一种看似随机的特性。

具体来说，假设我们有两个周期分别为 p1 和 p2 的函数。如果 p1 和 p2 互质（即它们的最大公约数为 1），那么这两个函数的组合周期将是 p1 * p2。当 p1 和 p2 足够大，且它们之间的差异也足够大时，在一个较短的范围内，这个组合周期的重复性就不容易被察觉，从而产生一种“随机”的感觉。

素数是实现蝉原则的理想选择。素数是指只能被 1 和自身整除的自然数。相邻的素数之间通常没有明显的规律，而且素数分布相对稀疏，这使得它们可以有效地延长组合周期的长度，从而提高伪随机性的质量。

利用 CSS 自定义属性和 calc() 函数实现蝉原则

CSS 自定义属性（也称为 CSS 变量）允许我们在 CSS 中存储和使用变量。calc() 函数则允许我们进行数值计算。结合这两者，我们就可以在 CSS 中实现一些简单的数学运算，从而模拟蝉原则。

以下是一个简单的示例：

:root {
  --seed: 123; /* 种子值 */
  --prime1: 37; /* 第一个素数 */
  --prime2: 61; /* 第二个素数 */
}

.element {
  /* 计算一个伪随机值 */
  --random: calc( (var(--seed) * var(--prime1) + var(--prime2)) % 100 );
  /* 使用伪随机值来设置背景颜色 */
  background-color: hsl(calc(var(--random) * 3.6), 80%, 50%);
}

在这个例子中：

• --seed 是一个种子值，用于初始化伪随机数生成器。
• --prime1 和 --prime2 是两个素数，用于延长周期。
• --random 使用 calc() 函数计算一个伪随机值。计算公式是：(seed * prime1 + prime2) % 100。% 是取模运算符，用于将结果限制在 0 到 99 的范围内。
• background-color 使用 hsl() 函数根据 --random 的值来设置背景颜色。hsl() 函数接受三个参数：色相 (Hue)、饱和度 (Saturation) 和亮度 (Lightness)。我们将 --random 乘以 3.6，将其转换为 0 到 360 之间的色相值。

这个例子虽然简单，但展示了如何利用 CSS 自定义属性和 calc() 函数来实现基本的伪随机数生成。通过调整种子值和素数，可以改变伪随机数的分布。

更高级的伪随机背景实现

上面的例子只是一个简单的演示。为了生成更复杂的背景效果，我们需要更高级的技巧。

1. 多层蝉原则

我们可以将多个蝉原则组合在一起，以进一步延长周期。例如：

:root {
  --seed: 456;
  --prime1: 73;
  --prime2: 97;
  --prime3: 101;
  --prime4: 103;
}

.element {
  --random1: calc((var(--seed) * var(--prime1) + var(--prime2)) % 100);
  --random2: calc((var(--random1) * var(--prime3) + var(--prime4)) % 100);
  /* 使用 random2 来生成更复杂的背景 */
  background-image: linear-gradient(45deg,
    hsl(calc(var(--random2) * 3.6), 80%, 50%) 25%,
    transparent 25%),
    linear-gradient(135deg,
    hsl(calc(var(--random2) * 3.6 + 90), 80%, 50%) 25%,
    transparent 25%),
    linear-gradient(225deg,
    hsl(calc(var(--random2) * 3.6 + 180), 80%, 50%) 25%,
    transparent 25%),
    linear-gradient(315deg,
    hsl(calc(var(--random2) * 3.6 + 270), 80%, 50%) 25%,
    transparent 25%);
  background-size: 20px 20px;
}

在这个例子中，我们使用了两层蝉原则。--random1 是第一层的结果，--random2 是第二层的结果。我们将 --random2 用于生成一个更复杂的条纹背景。

2. 利用 CSS transform 和 filter

除了背景颜色，我们还可以利用 CSS transform 和 filter 属性来创建更多样化的效果。例如，我们可以随机旋转和缩放元素，或者应用模糊、对比度等滤镜。

:root {
  --seed: 789;
  --prime1: 107;
  --prime2: 109;
}

.element {
  --random: calc((var(--seed) * var(--prime1) + var(--prime2)) % 100);
  --rotation: calc(var(--random) * 3.6deg); /* 随机旋转角度 */
  --scale: calc(1 + var(--random) / 100); /* 随机缩放比例 */
  --blur: calc(var(--random) / 20px); /* 随机模糊半径 */

  transform: rotate(var(--rotation)) scale(var(--scale));
  filter: blur(var(--blur));
}

在这个例子中，我们随机旋转和缩放元素，并应用模糊滤镜。

3. 结合 CSS Grid 或 Flexbox

我们可以结合 CSS Grid 或 Flexbox 来创建更复杂的布局，并随机调整元素的位置和大小。

<div class="grid-container">
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
</div>

:root {
  --seed: 1011;
  --prime1: 113;
  --prime2: 127;
}

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
}

.grid-item {
  --random: calc((var(--seed) * var(--prime1) + var(--prime2)) % 100);
  /* 随机调整 grid-column 和 grid-row 的起始位置 */
  grid-column-start: calc(1 + var(--random) % 3);
  grid-row-start: calc(1 + (var(--random) + 10) % 3);
  background-color: hsl(calc(var(--random) * 3.6), 80%, 50%);
  height: 50px;
}

在这个例子中，我们使用 CSS Grid 创建了一个网格布局，并随机调整每个网格项的起始位置。

性能考量与局限性

虽然纯 CSS 实现伪随机背景有很多优点，但也存在一些局限性：

• 性能: calc() 函数的计算可能会影响性能，尤其是在复杂的场景下。应尽量避免过度使用。
• 复杂性: 复杂的伪随机算法可能难以在 CSS 中实现。
• 可维护性: 大量的 CSS 自定义属性和 calc() 函数可能会降低代码的可读性和可维护性。
• 真正的随机性: 纯 CSS 只能实现伪随机，不能生成真正的随机数。如果需要高度随机的效果，仍然需要使用 JavaScript。

在使用纯 CSS 实现伪随机背景时，需要权衡性能、复杂性和可维护性。

实际应用示例

以下是一些实际应用示例，展示了如何利用蝉原则和素数来创建各种伪随机背景效果。

1. 随机斑点背景

:root {
  --seed: 2345;
  --prime1: 131;
  --prime2: 137;
}

body {
  background-color: #f0f0f0;
  background-image:
    radial-gradient(circle, rgba(0, 0, 0, 0.1) 2px, transparent 2px);
  background-size: 20px 20px;
}

.element {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.3);
  /* 随机调整位置 */
  left: calc(var(--x) * 1px);
  top: calc(var(--y) * 1px);
}

/* 使用 JavaScript 创建多个 .element 元素，并设置 --x 和 --y 属性 */
<script>
  const container = document.body;
  const numElements = 100;

  for (let i = 0; i < numElements; i++) {
    const element = document.createElement('div');
    element.classList.add('element');

    const seed = Math.random();
    const prime1 = 131;
    const prime2 = 137;
    const random = (seed * prime1 + prime2) % 100;

    element.style.setProperty('--x', Math.random() * window.innerWidth);
    element.style.setProperty('--y', Math.random() * window.innerHeight);

    container.appendChild(element);
  }
</script>

这个例子使用 JavaScript 生成了大量的.element 元素，并随机设置了它们的位置。这些元素会形成一个随机的斑点背景。

2. 随机条纹背景

:root {
  --seed: 3456;
  --prime1: 139;
  --prime2: 149;
}

body {
  background-color: #fff;
  background-image: linear-gradient(
    to right,
    hsl(calc(var(--random) * 3.6), 80%, 50%) 0%,
    hsl(calc(var(--random) * 3.6 + 30), 80%, 50%) 50%,
    hsl(calc(var(--random) * 3.6 + 60), 80%, 50%) 100%
  );
  background-size: 200% auto;
  animation: stripe-animation 10s linear infinite;
}

@keyframes stripe-animation {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: -200% 0;
  }
}

/* 使用 JavaScript 更新 --random 属性 */
<script>
  function updateRandom() {
    const seed = Math.random();
    const prime1 = 139;
    const prime2 = 149;
    const random = (seed * prime1 + prime2) % 100;

    document.body.style.setProperty('--random', random);
  }

  setInterval(updateRandom, 1000); // 每秒更新一次
</script>

这个例子创建了一个随机的条纹背景，并使用 CSS 动画使其滚动。JavaScript 用于周期性地更新 --random 属性，使条纹颜色发生变化。

3. 随机形状背景

:root {
  --seed: 4567;
  --prime1: 151;
  --prime2: 157;
}

body {
  background-color: #eee;
  position: relative;
  overflow: hidden;
  height: 100vh;
}

.shape {
  position: absolute;
  width: 30px;
  height: 30px;
  background-color: hsl(calc(var(--random) * 3.6), 80%, 50%);
  border-radius: calc(var(--random) % 2 * 50%); /* 随机圆形或方形 */
  /* 随机调整位置和大小 */
  left: calc(var(--x) * 1px);
  top: calc(var(--y) * 1px);
  animation: float 5s linear infinite;
}

@keyframes float {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(calc(var(--float-distance) * 1px));
  }
}

/* 使用 JavaScript 创建多个 .shape 元素，并设置 --x, --y, --random 和 --float-distance 属性 */
<script>
  const container = document.body;
  const numShapes = 50;

  for (let i = 0; i < numShapes; i++) {
    const shape = document.createElement('div');
    shape.classList.add('shape');

    const seed = Math.random();
    const prime1 = 151;
    const prime2 = 157;
    const random = (seed * prime1 + prime2) % 100;

    shape.style.setProperty('--x', Math.random() * window.innerWidth);
    shape.style.setProperty('--y', Math.random() * window.innerHeight);
    shape.style.setProperty('--random', random);
    shape.style.setProperty('--float-distance', Math.random() * 50 - 25); // 随机上下浮动

    container.appendChild(shape);
  }
</script>

这个例子创建了一个随机形状的背景，这些形状在页面上随机浮动。JavaScript 用于生成形状并设置其属性。

总结：创造性地运用CSS，实现视觉上的随机感

总而言之，虽然 CSS 本身不具备真正的随机数生成能力，但我们可以利用蝉原则、素数、CSS 自定义属性和 calc() 函数等技巧来模拟随机性，从而创建各种有趣的背景效果。需要注意的是，纯 CSS 实现伪随机背景存在一些局限性，需要权衡性能、复杂性和可维护性。希望今天的分享能给大家带来一些启发，激发大家在 CSS 中创造更多有趣的效果。

更多IT精英技术系列讲座，到智猿学院