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

最新推荐文章于 2024-10-13 17:00:37 发布

u012804784

最新推荐文章于 2024-10-13 17:00:37 发布

阅读量206

点赞数

分类专栏： android 文章标签： css flask 前端计算机

本文链接：https://blog.csdn.net/u012804784/article/details/125761406

版权

本文介绍了如何利用柏林噪声（Perlin Noise）在CSS中构建更美观的图形。通过对比白噪声和柏林噪声的区别，展示了柏林噪声如何通过连续变化和自然的随机效果提升图形的美感。通过CSS-doodle库，演示了如何使用柏林噪声生成不同图案，以及如何通过调整参数和结合其他CSS属性创造出多样化的视觉效果。

摘要由CSDN通过智能技术生成

🚀 优质资源分享 🚀

学习路线指引（点击解锁）	知识定位	人群定位
🧡 Python实战微信订餐小程序 🧡	进阶级	本课程是python flask+微信小程序的完美结合，从项目搭建到腾讯云部署上线，打造一个全栈订餐系统。
💛Python量化交易实战💛	入门级	手把手带你打造一个易扩展、更安全、效率更高的量化交易系统

在平时，我非常喜欢利用 CSS 去构建一些有意思的图形。

我们首先来看一个简单的例子。首先，假设我们实现一个 10x10 的格子：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UEP9pPDp-1657687323676)(https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/6211a28d255e4a9aaa4fda4cffd1f46a~tplv-k3u1fbpfcp-zoom-1.image)]

此时，我们可以利用一些随机效果，优化这个图案。譬如，我们给它随机添加不同的颜色：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GXsAsDEK-1657687323681)(https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a1f2fc694e8d4dba82272e1dae609574~tplv-k3u1fbpfcp-zoom-1.image)]

虽然利用了随机，随机填充了每一个格子的颜色，看着有那么点意思，但是这只是一幅杂乱无章的图形，并没有什么艺术感。

这是为什么呢？因为这里的随机属于完全随机，属于一种白噪声。

什么是白噪声？

噪声（Noise）实际上就是一个随机数生成器。

那么，什么是白噪声呢？如果从程序员的角度去理解的话，可以理解为我们在 JavaScript 中使用的 random() 函数，生成的数大致在 0~1 内是完全随机的。

而噪声的基础是随机数，譬如我们给上述的图形每一个格子添加了一个随机颜色，得到的就是一幅杂乱无章的图形块，没有太多美感可言。

白噪声或白杂讯，是一种功率谱密度为常数的随机信号。换句话说，此信号在各个频段上的功率谱密度是一样的，由于白光是由各种频率（颜色）的单色光混合而成，因而此信号的这种具有平坦功率谱的性质被称作是“白色的”，此信号也因此被称作白噪声。

因为，利用白噪声产生的图形，看起不自然，也不太具备美感。

观察现实生活中的自然噪声，它们不会长成上面的样子。例如木头的纹理、山脉的起伏，它们的形状是趋于分形状（fractal）的，即包含了不同程度的细节，这些随机的成分并不是完全独立的，它们之间有一定的关联。和显然，白噪声没有做到这一点。

柏林噪声

这样，我们就自然而然的引入了柏林噪声。

Perlin 噪声 ( Perlin noise ) 指由 Ken Perlin 发明的自然噪声生成算法。

在介绍它之前，我们先看看，上述的图形，如果我们不使用白噪声（完全随机），而是使用柏林噪声，会是什么样子呢？

它可能是这样：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jcv8MwPB-1657687323682)(https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/6c655ac088b84ba4adfaa229e70264d2~tplv-k3u1fbpfcp-zoom-1.image)]

这里我制作了一张动图，大家可以感受下，每次点击都是一次利用了柏林噪声随机，赋予每个格子不同随机颜色的结果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zWY3aNzH-1657687323683)(https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/2cdad1ca404d4e078a9b267cb20e2dd3~tplv-k3u1fbpfcp-zoom-1.image)]

可以看到，利用柏林噪声随机效果产生的图形，彼此之间并非毫无关联，它们之间的变化是连续的，彼此之间并没有发生跳变。这种随机效果，类似于自然界中的随机效果，譬如上面说的，木头纹理、山脉起伏的变化。

上面说的，噪声实际上就是一个随机数生成器。而这里：

白噪声的问题在于，它实在太过于随机，毫无规律可言
而柏林噪声基于随机，并在此基础上利用缓动曲线进行平滑插值，使得最终得到噪声效果更加趋于自然

具体的实现方式在这里 Improved Noise reference implementation，可以看看，源码其实不是很多：

// This code implements the algorithm I describe in a corresponding SIGGRAPH 2002 paper.
// JAVA REFERENCE IMPLEMENTATION OF IMPROVED NOISE - COPYRIGHT 2002 KEN PERLIN.

public final class ImprovedNoise {
   static public double noise(do