创造性编码中的噪音

噪声是创意编码的不可或缺的工具。我们用它来产生云，景观和轮廓等各种有机效果。或者以更逼真的行为移动和扭曲对象。

在表面上，噪音似乎很简单，但是，它有这么多的层。这篇文章深入潜入噪音是它的变体，如何在Web上使用它及其应用。和很多例子。这么多例子！

想象一下，你想在屏幕周围移动一个物体。动画师将使用关键帧和TWEENS来描述确切的运动。生成艺术家依赖于算法。

不完全是。随机性太不自然。看看那个粉红色的球，在这个地方弹跳。这是令人生意的♥

我们需要的是更平滑的，更有机的随机性。这就是噪声功能产生的（黄球）。更美观地愉悦！

在创意编码中，这种有机随机性的想法再次出现。例如，在生成纹理时，移动物体或扭曲它们。我们经常达到噪声功能。

Ken Perlin在20世纪80年代初在Tron开发的同时开发了第一，并获得了那些特效的奥斯卡🏆。然后他用单纯克噪音改善了它，并使它更快。我将专注于后者并为我的示例使用单纯克噪声库。

噪声功能占据了几个输入（驱动输出）并返回-1和1之间的值。输出是math.sin（）和math.random（）的混合。随机波是我如何形容的。

从＆＃39导入simplexnoise; simplex噪声＆＃39; ; const simplex = new（）; const y = simplex。 Coke2d（x *频率，0）*幅度;

潜在的力学类似于波浪的工作。您可以通过调整频率和幅度来控制如何快速或振荡振荡。

可以为多个维度实现噪声算法。将这些视为噪声发生器的输入数量 - 两个用于2D，3个用于3D的输入。

您选择的维度取决于您想要使用的变量。让我们来看看一些例子。

💡从这里开始，每个示例都嵌入在源卡中。通过链接到实际源代码，在某些情况下，您可以调整的变量。

从技术上讲，没有噪音。您可以通过将零作为Simplex.Noise2d的第二个参数传递零来获得1D噪声。让我们说你想用有机振荡运动移动一个球。递增其x坐标并使用它来生成y值。

通过在z方向上移动其顶点，我们可以将平板2D平面变成丘陵地形。使用x和y坐标生成z位置。

你可能已经看到这些扭曲的球体在野外。它们是通过移位球体的顶点而创建的。使用顶点坐标（x，y，z）生成失真量。然后径向使顶点取代顶点。

const dist变形= simplex。 Coke3d（x *频率，y *频率，z *频率）*幅度; repposition =位置。正常化（）。多颅裂（变形）;

我们可以通过使用4D噪声为失真的球体进行动画。输入将是顶点坐标（x，y，z）和时间。这种技术用于在其他方面创造火球。

const dist变形= simplex。 Coke4d（x *频率，y *频率，z *频率，时间*频率）*幅度; repposition =位置。正常化（）。多颅裂（变形）;

注意我们在上述示例中使用幅度。这是一种使噪声输出扩展到应用程序的方便方式。您还可以使用插值来将噪声输出映射到您选择的指定范围内。

现在我们有基础知识让我们来看看更多的噪音应用。

for（让y = 0; y

我们可以使用游行方块算法将2D噪声数据转换为轮廓。使用Canavas，SVG，WebGL或您更喜欢的其他任何东西。我最近使用这种技术使用SVG来创建生成配置文件卡。有关这一教程的完整教程，请查看创建生成图像服务📸

关于噪声的很酷的事情是您可以在时间上升起一层，并为图像设置动画。

老实说，这款噪声数据的这款2D电网是超级功利主义。这是我对各种东西的转移。其中一个是噪音字段 - 我的特定最爱。

让我们回到初始灰度输出。将其映射到更有趣的颜色刻度，而且你得到了等离子体♥

或者，从矩形的网格开始。然后使用噪声将其转换为矢量字段，以控制颜色和旋转角度。

矢量字段很酷，但流场是一个更令人兴奋的可视化。这是我去年制作的情节。

注意笔迹线的路径。通过将粒子丢弃到矢量场上来产生这些笔划中的每一个。然后跟踪它的路径。 💫

步骤1，创建矢量字段。和之前一样。但这一次，我们不会动画矢量字段。

步骤2，将一堆颗粒滴在帆布上。他们的运动方向是基于底层的矢量领域。前进，获得新的方向并重复。

功能moveparticle（粒子）{//从噪声const角度= simplex计算方向。噪声2D（粒子.x *频率，粒子.Y *频率）*幅度; //基于方向粒子.vx + =数学更新粒子//的速度。 cos（角）*步;粒子.vy + =数学。罪（角度）*步; //移动粒子粒子.x + =粒子.vx;粒子.Y + =粒子.vy; //使用阻尼减慢粒子（思维摩擦）粒子.vx * =阻尼;粒子.vy * =阻尼;颗粒.line。推（[粒子.x，粒子.y]）; }

谈到颗粒，噪音也显示在粒子系统中。对于像雨，雪或五彩纸屑这样的效果，您正在寻求模拟自然运动。想象一下漂浮在地球上的五彩纸屑颗粒。颗粒不会直线移动。它们由于空气阻力而浮动和蠕动。噪音是添加该有机变异性的一个非常好的工具。

const wiggle = {x：simplex。 Coke2D（粒子.x *频率，时间）*幅度，Y：单面。 Coke2D（粒子.Y *频率，时间）*幅度，};粒子.x + =蠕虫.x;粒子.Y + =蠕虫.Y;

让我们一直圈回那些动画的斑点。操纵和动画3D几何形状与着色器更有效。但着色器是一个完整的世界。对于初学者，有一个特殊的WebGL版本的噪声，GLSL噪声。我们需要使用glslify将其导入到我们的着色器中。

上面的动画与我们早先看的轮廓非常相似。它实现为片段着色器。这意味着我们为画布的每个像素运行相同的程序。

注意Pragma系列？这是我们导入WebGL噪声。然后使用它来为每个像素位置Vuv生成噪声数据。

精密高效浮子;漂浮时间均匀;均匀的浮子密度;改变Vec2 VUV; ＃定义3.141592653589793 #pragma glslify：噪声=需要（glsl -noise / simplex / 3d）;浮动图案化（Float V）{float d = 1.0 /密度; float s = - cos（v / d * pi * 2.）;返回SmotsceStep（.0，.1 * D，.1 * S / FWIDTH（S））; void main（）{//生成噪声数据浮动幅度= 1.0;浮动频率= 1.5; Float Noisevalue =噪声（VEC3（VUV *频率，时间））*幅度; //将噪声数据转换为环Float T = Patternzebra（Noisevalue）; vec3颜色=混合（vec3（1.，0.4,0.369），vec3（0.824,0.318,0.369），t）; //将环夹到圆浮子Dist =长度（Vuv - Vec2（0.5,0.5））; Float Alpha = SmootchStep（0.250,0.2482，Dist）; gl_fragcolor = vec4（颜色，alpha）; }

片段着色器具有用于绘制形状的距离函数的这种概念。图案化BRA是将噪声数据转换为环的这样的示例。基本上它返回0或1.然后我们用来使用混合来选择颜色。最后，使用另一个距离功能来剪辑圆形边界。

嗯，关于着色器的惊人的事情是您可以将它们转换为材料并将其应用于更复杂的几何形状。

我们可以从上面采取相同的2D火星着色器。将其转换为ThreeJS着色器材料。然后使用顶点位置VPORION来生成噪声而不是VUV。

const material = new（{扩展：{arivation：true，}，统一：{time：{value：0}，密度：{value：1.0}，vertexshader：/ * glsl * /`不同的vec3 vposition; void main （）{vposition = position; gl_position = proigntmatrix * modelviewmatrix * vec4（位置，1.0）;}`，fragmentshader：glslify（/ * glsl * /`precision highp float;改变vec3 vposition;均匀的浮动时间;＃ pragma glslify：噪声=需要（glsl-noise / simplex / 4d）; #define pi 3.141592653589793浮动图案化（float v）{float d = 1.0 /密度; float s = -cos（v / d * pi * 2.）;返回SmoothStep（.0，.1 * D，.1 * S / FWIDTH（S））; void main（）{浮动频率= .6;浮动幅度= 1.5; float v =噪声（vec4（vposition *频率， SIN（PI *时间）））*幅度; float t = patternzebra（v）; vec3 fragcolor = mix（vec3（1.，0.4,0.369），vec3（0.824,0.318,0.369），t）; gl_fragcolor = vec4（ Fragcolor，1.）;}`），}）;

这是诚实的只是一个开始。着色器打开了许多可能性。就像下面的例子一样

顶点位移背后的想法非常相似。而不是片段着色器，我们编写一个转换球体的每个顶点的顶点着色器。再次使用着色器材料施加。

精密高效浮子;不同的vec3 vnormal; ＃pragma glslify：snoise4 =要求（glsl -noise / simplex / 4d）均匀浮动u_time;均匀浮动u_amplitude;均匀浮动U_FREQUENCY; void main（）{vnormal = normalmatrix *正常化（正常）; float dist变形= snoise4（vec4（正常* u_frequency，u_time））* u_amplitude; vec3 newposition =位置+（正常*失真）; gl_position = proigntmatrix * modelviewmatrix * vec4（newPosition，1.0）; }

哦，扔一些matcap，你有一些光泽的动画斑点。

这是一个很多旅程。运动，纹理，字段，粒子系统和位移噪声可以全部完成。它真的是创意编码世界的主教。

我把一份小型入门代码放在一起。它旋转噪音网格，并将其映射到一系列字形。刚刚首先修改数组并查看您可以接受的程度。

const glyphs = [＆＃39;¤＆＃39; ，＆＃39;✳＆＃39; ，＆＃39;●＆＃39; ，＆＃39;◔＆＃39; ，＆＃39;○＆＃39; ，＆＃39;◕＆＃39; ，＆＃39;◐＆＃39; ，＆＃39;◑＆＃39; ，＆＃39;◒＆＃39; ];

或者如果您正在寻找更高级的东西，请查看Noisedeck.app。 它就像一个合成器，但适合视觉效果。