利用噪声构建美妙的 CSS 图形

,在平时，我非常喜欢利用 CSS 去构建一些有意思的图形。,我们首先来看一个简单的例子。首先，假设我们实现一个 10x10 的格子：,,此时，我们可以利用一些随机效果，优化这个图案。譬如，我们给它随机添加不同的颜色：,,虽然利用了随机，随机填充了每一个格子的颜色，看着有那么点意思，但是这只是一幅杂乱无章的图形，并没有什么艺术感。,这是为什么呢？因为这里的随机属于完全随机，属于一种白噪声。,噪声（Noise）实际上就是一个随机数生成器。,那么，什么是白噪声呢？如果从程序员的角度去理解的话，可以理解为我们在 JavaScript 中使用的 random() 函数，生成的数大致在 0~1 内是完全随机的。,而噪声的基础是随机数，譬如我们给上述的图形每一个格子添加了一个随机颜色，得到的就是一幅杂乱无章的图形块，没有太多美感可言。,因为，利用白噪声产生的图形，看起不自然，也不太具备美感。,观察现实生活中的自然噪声，它们不会长成上面的样子。例如木头的纹理、山脉的起伏，它们的形状是趋于分形状（fractal）的，即包含了不同程度的细节，这些随机的成分并不是完全独立的，它们之间有一定的关联。和显然，白噪声没有做到这一点。,这样，我们就自然而然的引入了柏林噪声。,Perlin 噪声 ( Perlin noise ) 指由 Ken Perlin 发明的自然噪声生成算法。,在介绍它之前，我们先看看，上述的图形，如果我们不使用白噪声（完全随机），而是使用柏林噪声，会是什么样子呢？,它可能是这样：,,这里我制作了一张动图，大家可以感受下，每次点击都是一次利用了柏林噪声随机，赋予每个格子不同随机颜色的结果：,,可以看到，利用柏林噪声随机效果产生的图形，彼此之间并非毫无关联，它们之间的变化是连续的，彼此之间并没有发生跳变。这种随机效果，类似于自然界中的随机效果，譬如上面说的，木头纹理、山脉起伏的变化。,上面说的，噪声实际上就是一个随机数生成器。而这里：,具体的实现方式在这里 Improved Noise reference implementation[4]，可以看看，源码其实不是很多：,当然，本文不是专门来论述柏林噪声如何实现的，上述代码谁看了都头大。我们只需要知道，我们可以借助柏林噪声去构建更有规律的图形效果。让我们的图形更具美感。,那么，在 CSS 中我们如何去使用柏林噪声呢？,一种方式是找一些现成的库，譬如 p5.js 里面的 noise 函数。,当然，这里，我习惯使用 CSS-doodle[5]，这个 CSS 图形构建库我在多篇文章中已经都有介绍过。,简单而言，CSS-doodle 它是一个基于 Web-Component 的库。允许我们快速的创建基于 CSS Grid 布局的页面，并且提供各种便捷的指令及函数（随机、循环等等），让我们能通过一套规则，得到不同 CSS 效果。可以简单看看它的主页 -- Home Page of CSS-doodle[6]，只需要 5min 也许就能快速上手。,譬如上述的图形，它的全部代码：,没错，只需要这么寥寥几句，就可以勾勒出这样一幅图案：,,CSS Pattern -- CSS Doodle[7]。,简单解释下：,当然，最新的 CSS-doodle[8] 文档上暂时还查不到 @rn() function 的用法。为此我特意请假了下该库的作者袁川[9]老师。,得到的回复是，官网近期会重构，所以目前没有更新最新的语法。同时，@rn() 的实现使用的就是柏林噪声的实现。同时，函数相当于是类似 p5.js 里面的 noise 函数同时做了 map，map 到前面函数参数设定的 from 到 to 范围内。,这里的 @rn() 柏林噪声随机会根据 Grid 网格，Map 到每一个网格上，使之相邻的 Grid item 之间的值，存在一定的关联。,举个栗子，我们有个 10x10 的 Grid 布局，给其每个 Grid item，添加一个伪元素，伪元素的内容，使用 @r(100)​ 进行填充，注意，@r() 函数是没有规律的完全随机，那么生成的数字大概是这样的：,,可以看到，它们每个各自之间的数字，是完全随机毫无关联的。,如果我们使用有关联的柏林噪声随机呢？使用 @rn(100) 填充每个格子的话，大概是这样：,,观察一下，很容易发现，相邻的盒子之间，或者多个连续的格子之间，存在一定的关联性，这就使得，我们利用它创造出来的图形，会具备一定的规律。,可以简单看看源码的实现，当前，前提是你需要对 CSS-doodle 的用法有一定的了解：,语法大概是 @rn(from, to, frequency, amplitude)​，其中 from、to​ 表示随机范围，而 frequency​ 表示噪声的频率，amplitude 表示噪声的振幅。这两个参数可以理解为控制随机效果的频率和幅度。,其中 new Perlin(shuffle) 即运用到了柏林噪声算法。,OK，上文介绍了很多与噪声和 CSS-doodle 相关的知识，下面我们回归 CSS，回归本文的主体。,在上述图形的基础上，我们可以再添加上随机的 scale()​、以及 skew()。如果是完全随机的话，代码是这样的：,上述代码表示的是一个 20x20 的 Grid 网格，每个 Grid item 都设置了完全随机的背景色、scale()​ 以及 skew()​。当然，这里我们用的是 @r()​而不是 @rn()，每个格子的每个属性的随机，没有任何的关联，那么我们会得到这样一幅图案：,,好吧，这是什么鬼，毫无美感可言。我们只需要在上述代码的基础上，将普通的完全随机，改为柏林噪声随机 @rn()：,此时，就能得到完全不一样的效果：,,这是由于，每个 Grid item 的随机效果，都基于它们在 Grid 布局中的位置，彼此存在关联，这就是柏林噪声随机的效果。,我可以再添加上 hue-rotate 动画：,看看效果，并且，在 CSS-doodle 中，由于随机效果，每次刷新，都可以得到不一样的图案：,,源码，你可以戳这里：CSS Doodle - CSS Pattern2[10]。,当然，这个样式还可以搭配各式各样其他的 idea，像是这样：,,​CSS Doodle - CSS Pattern 3[11]。,又或者是这样：,,CSS Doodle - CSS Pattern 4[12]​。,emmm，又或者这样：,,CSS Doodle - CSS Pattern 5[13]。,是的，我们可以把柏林噪声随机应用在各种属性上，我们可以放飞想象，去尝试各种不一样的搭配。下面这个， 就是把柏林噪声运用在点阵定位上：,,CodePen Demo -- CSS Doodle - CSS Pattern6[14]。,亦或者配合运用在 transform: rotate() 上：,效果如下：,,当然，每一次随机，都会是不一样的结果：,,CodePen Demo -- CSS doodle - CSS Pattern7[15]。,好吧，我个人想象力有限，大家可以自行找到任一 DEMO，Fork 后自己去尝试碰撞出不一样的火花。,[1]谱密度: https://baike.baidu.com/item/%E8%B0%B1%E5%AF%86%E5%BA%A6。,[2]信号: https://baike.baidu.com/item/%E4%BF%A1%E5%8F%B7。,[3]功率谱: https://baike.baidu.com/item/%E5%8A%9F%E7%8E%87%E8%B0%B1。,[4]Improved Noise reference implementation: https://mrl.cs.nyu.edu/~perlin/noise/。,[5]CSS-doodle: https://css-doodle.com/。,[6]Home Page of CSS-doodle: https://css-doodle.com/。,[7]CSS Pattern -- CSS Doodle: https://codepen.io/Chokcoco/pen/eYMNWNq。,[8]CSS-doodle: https://css-doodle.com/。,[9]袁川: https://yuanchuan.dev/。,[10]CSS Doodle - CSS Pattern2: https://codepen.io/Chokcoco/pen/mdxJrGR。,[11]CSS Doodle - CSS Pattern 3: https://codepen.io/Chokcoco/pen/wvmazOy。,[12]CSS Doodle - CSS Pattern 4: https://codepen.io/Chokcoco/pen/dymoOGN。,[13]CSS Doodle - CSS Pattern 5: https://codepen.io/Chokcoco/pen/PoRqdYP。,[14]CodePen Demo -- CSS Doodle - CSS Pattern6: https://codepen.io/Chokcoco/pen/GRxJXVE。,[15]CodePen Demo -- CSS doodle - CSS Pattern7: https://codepen.io/Chokcoco/pen/ZExGjoy。,[16]Github -- iCSS: https://github.com/chokcoco/iCSS。