Simplex noise 是一种流畅且无规律的噪声算法，常用于生成自然风景、材质和动画效果等。npm 上有一个名为 simplex-noise 的包提供了该算法的实现。本文将会介绍如何使用这个包来在前端项目中生成 Simplex noise。
安装
首先，在你的项目中安装 simplex-noise 包：
npm install simplex-noise
使用
导入
在你的 JavaScript 文件中导入 simplex-noise 包：
import SimplexNoise from 'simplex-noise';
现在就可以使用 SimplexNoise 类来创建 Simplex noise 了。
创建 Simplex noise
const simplex = new SimplexNoise();
上面的代码创建了一个 Simplex noise 实例。你可以传入 seed 参数来改变随机数发生器的状态，从而得到不同的结果。例如：
const simplex = new SimplexNoise('mySeed');这里使用字符串 'mySeed' 作为种子值，从而产生一个特定的随机数序列。如果 omit 该参数，则使用默认种子值。
生成噪声值
一旦创建了 Simplex noise 实例，就可以使用它的 noise2D() 方法来生成噪声值。这个方法接受两个参数，分别是 x 和 y 坐标。例如：
const value = simplex.noise2D(x, y);
这里 value 将会是一个范围在 -1 到 1 之间的数字。你可以传入不同的 x 和 y 值来获得不同的噪声值。
实际应用
下面是一个使用 Simplex noise 创建随机地形的例子：
-- -------------------- ---- -------
----- ------ - ---------------------------------
----- --- - ------------------------
----- ------- - --- ---------------
------------- - --------
--------------- -- ------------- ---------------
--- ---- - - -- - - -------------- ---- -
--- ---- - - -- - - ------------- ---- -
----- ----- - ----------------- - ---- - - -----
----- ----- - ----- - - - ------- - --------
------------- - ------
--------------- -- -- ---
-
-上面的代码创建了一个 100x100 的随机地形图像。它将每个像素的 Simplex noise 值与零进行比较，然后使用黑色填充整个画布并根据 Simplex noise 值绘制颜色。如果 Simplex noise 值大于零，则使用白色，否则使用绿色。
总结
simplex-noise 是一个非常有用的包，提供了一种简单而有效的方式来生成流畅和自然的噪声效果。希望本文对您有所帮助，可以通过阅读 Simplex noise 算法的更多资料来深入了解此算法。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/37400