更为自然的随机行为，Perlin Noise柏林噪音 | p5.js系列

先看两张动图的对比，一张是简单的随机取值，另一张是使用perlin noise产生的随机值。

具体代码示例可以参考nature-of-code的p5.js示例。

值得学习的几个要点：

不同的参数写法是如何做到的？

在使用p5.js的时候，最大的感受就是传参方式多种多样，比如fill的传参：

fill(v1, v2, v3, [alpha])
fill(value)
fill(gray, [alpha])
fill(values)
fill(color)

查看源码发现：

p5.Renderer2D.prototype.fill = function(...args) {
//关键是这行代码，把参数传到color来进行计算
const color = this._pInst.color(...args);
this._setFill(color.toString());
};

原来是通过判断color的传参数量来实现的：

const numArgs = arguments.length;

if (numArgs >= 3) {
// Argument is a list of component values.

} else if (numArgs === 1
&& typeof r === 'string') {
//...
} else if ((numArgs === 1
|| numArgs === 2)
&& typeof r === 'number') {
// 'Grayscale' mode.
}else {
throw new Error(
`${arguments}is not a valid color representation.`);
}

如何把一个值从一个范围内映射到另一个范围内？

p5.js主要通过map方法来实现，内部的实现主要是按照比例进行转化：

//map(value, start1, stop1, start2, stop2, [withinBounds])

const newval = (n - start1) / (stop1 - start1) * (stop2 - start2) + start2;

多尝试下各种范围的映射：

n=random()
//0.6659798731369693

map(n,0,1,-1,0)
//-0.33402012686303073

map(n,0,1,8,10)
//9.331959746273938

map(n,0,1,0,100)
//66.59798731369693

柏林噪声

PERLIN NOISE，译作柏林噪声，是指KEN PERLIN发明的噪声算法。KEN PERLIN早在1983年就提出了PERLIN NOISE，当时他正在参与制作迪士尼的动画电影《电子世界争霸战》（TRON），但是他不满足于当时计算机产生的那种非常不自然的纹理效果，因此提出了PERLIN噪声。

柏林噪声是个用来生成比 random() 所能生成更自然及更谐波的随机数字系列。柏林噪声至今常被用在图形应用程序中生成程序纹理、自然运动、形状、地形等等。

主要原理是随机产生一些点，然后选取合适的插值函数进行插值计算。比如采用一种更为平滑，非线性的插值函数：fade函数，通常也被称为ease curve。这样插值变化不再是单调的线性变化，而是非线性的过程：初始变化慢，中间变化快，结尾变化又慢下来。

p5.js里使用非常简单：

noise(x)

练习可参考官方示例：

欢迎与我交流~