【译】创意编码之噪音

原文:https://varun.ca/noise/
作者:Ahmad Shadeed
译者:NSGUF

1.gif

噪音是一种创意编码中不可或缺的工具。我们使用它来生成各种各样的仿自然形态的效果,如云,风景以及轮廓等;或者以更逼真的行为移动和扭曲对象;

表面上看,噪音似乎很容易使用,但是它有非常多层次,这篇文章深入研究了什么是噪音,它的变种有哪些,如何在网络和应用程序上使用;也会展示很多的例子,非常多的例子!

噪音是什么?

假设你想在屏幕上移动一个物体。动画师会使用关键帧和补帧来描述这个确切的运动。生成类似这个动画师的艺术家依赖于算法;

那么,math.random()可以实现吗?

不行,随机就太不自然了,看下面这个粉红色的球,到处弹跳,这就很恶心了🥴;

我们需要更平滑,更自然的随机性,这个(黄色的球)就是噪音函数生成的,美观多了;

2.gif

自然随机的想法在创意编码中出现了一遍又一遍。例如:我们经常使用噪音函数生成纹理,移动或扭曲物体;

在网络上生成噪音

两种类型噪音——Perlin和Simplex

在1980年初期,Ken Perlin在做Tron时开发了Perlin噪音并因这个特效获得奥斯卡奖。然后他在此这种特效上改进开发了Simplex,这种新算法运行速度更快。我将会专注于后者,并在我的例子中使simplex-noise库;

噪音函数接受两个输入(用于生成输出)并且返回一个-1到1的值。这个输出结合了Math.sin()Math.random(),随机波就是我描述他的方式;

import SimplexNoise from 'simplex-noise';

const simplex = new SimplexNoise();
const y = simplex.noise2D(x * frequency, 0) * amplitude;

基础力学和波浪的工作原理相似,你可以通过调整频率和振幅来控制波浪的速度和幅度;

3.gif

emm,二维噪音,发生了什么?

噪音维度

噪音算法可以实现多维度。这里是将维度视为噪音生成器的输入数量,2个输入为2D,三个是3D,以此类推;

选择哪种维度,取决于使用的生成器的变量,让我们看几个例子:

💡 从这里开始,每个例子都会有个通过指向实际源码嵌入的源码卡片,在某些情况下,你可以调整变量;(翻译我是使用的gif

一维噪音 —— 波动

从技术上讲,是没有一维噪音的。你可以通过将0作为第二个参数给到simplex noise2D得到1维噪音;架设你想让这个移动的球看起来比较自然,可以增加x坐标并生成y坐标;

x += 0.1;
y = simplex.noise2D(x * frequency, 0) * amplitude;

4.gif

二维噪音 —— 地形生成器

我们可以通过移动z轴方向的顶点,将一个水平2D平面转换成丘陵地形,使用x,y轴坐标来生成z坐标位置;

就这样,我们有了一个地形生成器🏔️;

z = simplex.noise2D(x * frequency, y * frequency) * amplitude;

5.gif

三维噪音——顶点位移

你可能已经见过这种自然扭曲的球体,它们通过移动球体顶点生成;使用顶点坐标(x,y,z)来生成扭曲的位置变量,然后通过移动顶点生成放射的形状;

const distortion =
simplex.noise3D(x * frequency, y * frequency, z * frequency) * amplitude;

newPosition = position.normalize().multiplyScalar(distortion);

6.gif

四维噪音—— 动态扭曲效果

我们可以通过4维噪音来生成一个不停动态扭曲的球,输入分别是顶点坐标(x,y,z)时间。这项技术常用于创造类似火球的效果;

const distortion =
simplex.noise4D(
x * frequency,
y * frequency,
z * frequency,
time * frequency
) * amplitude;

newPosition = position.normalize().multiplyScalar(distortion);

7.gif

在上面的大多数例子里我们都使用了振幅,这是程序中缩放噪音输出的方式,你还可以使用插值将噪音输出映射到选择的指定范围;

img.png

现在我们已经掌握了基础知识,让我们看一些噪音的其他应用;

纹理

使用(x,y)坐标,生成二维的表格格式的噪音,看起来像这样:

img_1.png

使用方式:

for (let y = 0; y < gridSize[1]; y++) {
for (let x = 0; x < gridSize[0]; x++) {
const n = simplex.noise2D(
x / (gridSize[0] * 0.75),
y / (gridSize[1] * 0.75)
);
}
}

这是我们的出发点。
我们可以使用Marching Squares算法将2D数据转换成等高线。使用Canvas,SVG,WebGL或者其他你喜欢的工具,我最近使用SVG来生成带有轮廓的卡片,这方面相关的完整教程,请查看https://storybook.js.org/blog/generative-image-service/📸;

img_2.png

关于噪音,最酷的事情是你可以添加时间维度,来给你的图片添加动画;

simplex.noise3D(x / (gridSize[0] * 0.75), y / (gridSize[1] * 0.75), time);

8.gif

老实讲,噪音的二维数据是非常实用的,这可以做很多的事情,其中一个是我特别喜欢——噪音领域;

让我们回到最初的灰度输出,这里可以映射出一个更有趣的色阶,你可以获取到等离子;

9.gif

或者从矩形网格开始,通过使用噪音来控制颜色和角度,将其变成向量场;

10.gif

噪音粒子

向量场很酷,但是流场更让人兴奋。这是我去年画的图;

11.gif

注意笔的轨迹。每一划都是通过将粒子放到向量场上来生成的。然后追踪它的路径。💫

好吧,让我们分解这个过程。

创建流场

第一步,创建一个向量场。和之前一样。但这一次,我们不会为向量场设置动画。

第 2 步,将一堆粒子放到画布上。它们的运动方向基于底层向量场。向前迈出一步,找到新的方向并重复。

12.gif

function moveParticle(particle) {
// Calculate direction from noise
const angle =
simplex.noise2D(particle.x * FREQUENCY, particle.y * FREQUENCY) * AMPLITUDE;

// Update the velocity of the particle
// based on the direction
particle.vx += Math.cos(angle) * STEP;
particle.vy += Math.sin(angle) * STEP;

// Move the particle
particle.x += particle.vx;
particle.y += particle.vy;

// Use damping to slow down the particle (think friction)
particle.vx *= DAMPING;
particle.vy *= DAMPING;

particle.line.push([particle.x, particle.y]);
}

第三步:追踪粒子的位置,以追踪其路径;

13.gif

添加更多的粒子和颜色,我们就可以获得流场;

14.gif

粒子系统

说到粒子,噪声也出现在粒子系统中。对于像雨、雪或五彩纸屑等效果,你希望模拟一个看起来很自然的运动。想象一个五彩纸屑颗粒飘向地面。粒子不会直线移动。由于空气阻力,它们会漂浮和摆动。噪声是添加仿自然形态非常好的工具。

const wiggle = {
x: simplex.noise2D(particle.x * frequency, time) * amplitude,
y: simplex.noise2D(particle.y * frequency, time) * amplitude,
};
particle.x += wiggle.x;
particle.y += wiggle.y;

想深入了解,详情请看:https://varun.ca/confetti/

15.gif

着色器

让我们回到那些动画斑点。使用着色器操作和设置3D动画几何图形的效率要高得多。但是着色器本身是一个完全不同的世界。对于初学者来说,有一个特殊的 WebGL 版本的噪音,gsl-noise。我们需要使用 glslify 将它导入到我们的着色器中。

我们会慢慢来,先从 2D 开始。

16.gif

上面的动画与我们之前看到的轮廓非常相似。它是通过片段着色器实现的。这意味着我们为canvas的每个像素运行相同的程序。

注意到pragma 行了吗?那是我们导入 webgl-noise。然后用它为每个像素位置 vUv 生成噪声数据。

这部分现在看起来应该很熟悉了。

fragment.glsl

precision highp float;
uniform float time;
uniform float density;
varying vec2 vUv;

#define PI 3.141592653589793
#pragma glslify: noise = require(glsl-noise/simplex/3d);

float patternZebra(float v){
float d = 1.0 / density;
float s = -cos(v / d * PI * 2.);
return smoothstep(.0, .1 * d, .1 * s / fwidth(s));
}

void main() {
// Generate noise data float amplitude = 1.0; float frequency = 1.5; float noiseValue = noise(vec3(vUv * frequency, time)) * amplitude;  // Convert noise data to rings
float t = patternZebra(noiseValue);
vec3 color = mix(vec3(1.,0.4,0.369), vec3(0.824,0.318,0.369), t);
// Clip the rings to a circle
float dist = length(vUv - vec2(0.5, 0.5));
float alpha = smoothstep(0.250, 0.2482, dist);

gl_FragColor = vec4(color, alpha);
}

片段着色器具有用于绘制形状的距离函数的概念。 patternZebra 就是一个将噪声数据转换为环的示例。本质上,它返回 0 或 1。然后我们用它来选择混合的颜色。最后,使用另一个距离函数来剪裁圆形边界。

看起来很基础?

好吧,着色器的惊人之处在于,你可以将它们变成一种材质并将其应用于更复杂的几何体。

噪声材质

我们可以从上面获取相同的 2D mars 着色器。将其转换为 ThreeJS 着色器材质。然后使用顶点位置 vPosition 代替 vUv 生成噪声。 瞧,我们有一个 3D mars!

const material = new THREE.ShaderMaterial({
extensions: {
derivatives: true,
},
uniforms: {
time: { value: 0 },
density: { value: 1.0 },
},
vertexShader: /*glsl*/ ` varying vec3 vPosition; void main () { vPosition = position; gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); } `,
fragmentShader: glslify(/* glsl */ ` precision highp float; varying vec3 vPosition; uniform float time; uniform float density; #pragma glslify: noise = require(glsl-noise/simplex/4d); #define PI 3.141592653589793 float patternZebra(float v){ float d = 1.0 / density; float s = -cos(v / d * PI * 2.); return smoothstep(.0, .1 * d, .1 * s / fwidth(s)); } void main () { float frequency = .6; float amplitude = 1.5; float v = noise(vec4(vPosition * frequency, sin(PI * time))) * amplitude; 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.); } `),
});

17.gif

老实说,这只是一个开始。着色器开辟了许多可能性。就像下面的例子

不仅是噪声映射到颜色,还可以是透明度。

18.gif

光泽斑点

与顶点置换背后的想法非常相似。我们编写了一个顶点着色器来转换球体的每个顶点,而不是片段着色器。同样,使用着色器材质应用。

vertex.glsl

precision highp float;
varying vec3 vNormal;

#pragma glslify: snoise4 = require(glsl-noise/simplex/4d)

uniform float u_time;
uniform float u_amplitude;
uniform float u_frequency;

void main () {
vNormal = normalMatrix * normalize(normal); float distortion = snoise4(vec4(normal * u_frequency, u_time)) * u_amplitude; vec3 newPosition = position + (normal * distortion);
gl_Position = projectionMatrix * modelViewMatrix * vec4(newPosition, 1.0);
}

加上一些 matcap,你就会得到一些有光泽的动画斑点。

19.gif

轮到你创造噪音了

那真是一段旅程。运动、纹理、场、粒子系统和置换——噪声都能做。它确实是创意编码世界的主力军。

很明显,你想玩噪音😁

我已经为你准备了一个小小的入门 CodePen。它旋转了一个噪声网格并将其映射到一个字形数组。只需从修改数组开始,看看你能走多远。

const glyphs = ['¤', '✳', '●', '◔', '○', '◕', '◐', '◑', '◒'];

或者,如果您正在寻找更高级的东西,请查看noisedeck.app。它就像一个只用于视觉效果的合成器。

© 版权声明
THE END
喜欢就支持一下吧
点赞9 分享
评论 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

取消
昵称表情代码图片

    暂无评论内容