不知道各位有没有见过这样歪歪扭扭的动画效果，非常有趣不是么：......


## 前言

不知道各位有没有见过这样歪歪扭扭的动画效果，非常有趣不是么：

![wow](https://p3zihuryc.bkt.clouddn.com/blogImg/twisted_line.gif)

所以要如何实现这样的效果呢——“随机！”，是的，我反正是这么想的，于是一个Math.random()怼上去，结果是线条像抽风一样扭成一团.....自然，线条是由控制点连接起来的，对其叠加一个随机数，前后联系的线条自然会显得支离破碎，或者说：“不自然”。就如同现实中的海浪、云朵、山脉地形一样，他们看起来都是**随机**的，却又有一种**连续性**！但是，为了应用到计算机图像中，我们要如何抽象这样的现象呢！

## 柏林噪声（perlin noise）与分形噪声！

如果你想看的话，这里是[柏林噪声的定义](https://zh.wikipedia.org/wiki/Perlin%E5%99%AA%E5%A3%B0)！

看得懂吗？看不懂吧，到了俺的画画时间！

![一维曲线](https://hukua-blog.oss-cn-beijing.aliyuncs.com/markdown-imgs/%E4%B8%80%E7%BB%B4%E6%9B%B2%E7%BA%BF.png)

上面有三张图，姑且称为图一（左上）图二（左下）图三（右）好了（画的时候怎么不标好啊！）。

图一是这样画出来的：**在一维坐标轴上，选择等距的无穷个点（这里就假设为整数啦），将空间划分为等长的线段，为每个点随机指定一个值（这个值的范围就是振幅amplitude）和一个梯度（在一维上，梯度就是斜率没错！）**。然后“对于坐标值为整数的点，将该点对应的值作为噪声图像上该点的值；对于坐标值不为整数的点，将相邻两点的值和**根据梯度进行[插值](https://zh.wikipedia.org/wiki/%E6%8F%92%E5%80%BC)运算**，获得该点的值”——这个图像在地球人看来，就是一堆点舒舒服服地给他们平滑连接起来。而这，就是一维柏林噪声图像，全剧终。

喂等等！标题不是这么写的啊！！

好吧，图二也一样是柏林噪声的一维图像，只不过取点的间隔更小（也就是频率更高），振幅也更小而已，但是你也看到那张融合卡了吧！没错，通过叠加更高频率的柏林噪声，我们就可以得到图三那样效果更复杂的图像，也更加符合自然界中海岸线，地形，海浪等特征，顺带一提，我们一直形容的很模糊的特征有个术语，叫[自相似](https://zh.wikipedia.org/wiki/%E8%87%AA%E7%9B%B8%E4%BC%BC)！

![自相似科赫曲线](https://upload.wikimedia.org/wikipedia/commons/6/65/Kochsim.gif)

## 二维

关于具体算法，仍是在一维的基础上进行衍生：

1. 为所有坐标为`(x, y)` 且`x, y`都是整数的点指定一个值，同时指定一个[梯度](https://zh.wikipedia.org/wiki/%E6%A2%AF%E5%BA%A6)，这些点将空间分成方格；
2. 对于坐标轴为整数的点，即上述方格的顶点，将为它指定的值作为该点的值；对于某个方格内部的点`(x, y)`，用所在方格四个顶点的值和[梯度](https://zh.wikipedia.org/wiki/%E6%A2%AF%E5%BA%A6)进行插值。

但没人看得懂这玩意儿不是么，那直接感受下：

<p data-height="265" data-theme-id="0" data-slug-hash="LdzLXR" data-default-tab="js,result" data-user="padfoot_07" data-embed-version="2" data-pen-title="perlin noise-two dimensional" class="codepen">See the Pen <a href="https://codepen.io/padfoot_07/pen/LdzLXR/">perlin noise-two dimensional</a> by Zhouyi (<a href="https://codepen.io/padfoot_07">@padfoot_07</a>) on <a href="https://codepen.io">CodePen</a>.</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

左侧是二维柏林噪声，右侧是纯随机，所以二维图像中的每个点看起来都**受其周围点的影响**，这有些类似于云不是么233

## 让我见识一下吧，noise的性能

不要被上述图像束缚了思考，经典柏林噪声建议使用![{\displaystyle 6t^{5}-15t^{4}+10t^{3}}](https://wikimedia.org/api/rest_v1/media/math/render/svg/ed5b799e7d9cd423db6f533050ddfda181b4850b)作为插值函数，但这并不妨碍俺们使用其他函数，如（图像来源：[不只是噪音](https://zhuanlan.zhihu.com/p/22337544)）：

使用**指数**插值

![指数插值](https://hukua-blog.oss-cn-beijing.aliyuncs.com/markdown-imgs/%E6%8F%92%E5%80%BC1.jpg)

使用**三角函数**插值

![三角函数插值](https://hukua-blog.oss-cn-beijing.aliyuncs.com/markdown-imgs/%E6%8F%92%E5%80%BC2.jpg)

我们还可以对其进行**叠加**，总之可能性是无限的啊！

## 实际运用

以上我们仅仅是对噪声数值本身进行了可视化，事实上对于其特性的使用，完全可以放飞自我啊！

（以下建议使用pc浏览）

比如将其作为速度场影响粒子流动：

<p data-height="265" data-theme-id="0" data-slug-hash="XEePJb" data-default-tab="js,result" data-user="padfoot_07" data-embed-version="2" data-pen-title="perlin noise-flow" class="codepen">See the Pen <a href="https://codepen.io/padfoot_07/pen/XEePJb/">perlin noise-flow</a> by Zhouyi (<a href="https://codepen.io/padfoot_07">@padfoot_07</a>) on <a href="https://codepen.io">CodePen</a>.</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

模拟波浪：

<p data-height="265" data-theme-id="0" data-slug-hash="dXzmYQ" data-default-tab="js,result" data-user="arnaudrocca" data-embed-version="2" data-pen-title="Water shader" class="codepen">See the Pen <a href="https://codepen.io/arnaudrocca/pen/dXzmYQ/">Water shader</a> by Arnaud Rocca (<a href="https://codepen.io/arnaudrocca">@arnaudrocca</a>) on <a href="https://codepen.io">CodePen</a>.</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

浮夸的滤镜：

<p data-height="265" data-theme-id="0" data-slug-hash="YePWqG" data-default-tab="js,result" data-user="Thibka" data-embed-version="2" data-pen-title="Fun with perlin" class="codepen">See the Pen <a href="https://codepen.io/Thibka/pen/YePWqG/">Fun with perlin</a> by Thibaut (<a href="https://codepen.io/Thibka">@Thibka</a>) on <a href="https://codepen.io">CodePen</a>.</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

为了各位的流量考虑就不再多放辣，总之是很有搞头，相信都get到那个点了。

------

当初想要实现这样的效果折腾了几天也没搞定，到底还是没能摸清其本质特征啊orz，好个大坑慢慢填......

LWDW!