p5.js | 噪声函数

在 p5.js 中，有一个噪声函数，可以用来产生各种形式的随机化效果。噪声函数通过对输入的值进行计算，返回一个在 -1 到 1 之间的随机数。

基本用法

在 p5.js 中，有两种噪声函数，分别是 noise() 和 random()。其中，noise() 会返回一个更加“平滑”的随机数，而 random() 则会返回一个更加随机的数。接下来，我们来看一下 noise() 函数的基本用法：

let xoff = 0;

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);
  
  let x = noise(xoff) * width;
  let y = noise(xoff + 1000) * height;
  
  circle(x, y, 50);
  
  xoff += 0.01;
}

在这个例子中，我们定义了一个变量 xoff，每一帧都会让它自增一个很小的值（0.01），这样就可以让每一帧的 noise() 返回一个不同的值。接着，我们使用这个值来计算出圆心的位置，从而制造出一种“抖动”的效果。

参数解析

noise() 函数可以接受 1~3 个参数，分别来控制噪声的特性。下面我们来逐一解析这些参数：

• noise(x)

这个参数接受一个 float 类型的数字 x，用来计算噪声的值。每次输入相同的 x，noise() 函数都会返回相同的值。这种特性被称为“连续性”。

let x = 0;

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);
  
  let y = noise(x) * height; 
  
  line(x, 0, x, y);
  
  x += 0.003;
}

在这个例子中，我们将 x 的值作为横坐标，将 noise(x) 的返回值作为纵坐标，从而绘制了一个“折线”图。由于 x 的值每次增加的很小，所以我们可以看到整条线在“微小抖动”。

除了一个参数的 noise()，还有两个参数的 noise()，它们分别是：

• noise(x, y)

这个参数接受两个 float 类型的数字 x 和 y，用来计算噪声的值。类似于二维坐标系，输入相同的 x 和 y，noise() 函数就会返回相同的值。这种特性被称为“自相关性”。

let xoff = 0;
let yoff = 1000;

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);
  
  let x = noise(xoff, yoff) * width; 
  let y = noise(yoff, xoff) * height;
  
  circle(x, y, 50);
  
  xoff += 0.01;
  yoff -= 0.005;
}

在这个例子中，我们将 x 和 y 的值作为横、纵坐标，从而制造出一种“来回穿梭”的效果。可以看到，这个效果比只用一个参数的 noise() 更加平滑，因为输入的值有了更多的维度。

• noise(x, y, z)

这个参数同样接受三个 float 类型的数字，用来计算噪声的值。与三维空间中的点类似，输入相同的 x、y、z，noise() 函数就会返回相同的值。

其他

除了 noise() 之外，p5.js 还有一个 random() 函数，可以用来产生随机数。与 noise() 不同的是，每次随机出的值并不具有连续性或自相关性，因此可以看做是“完全随机”的效果。

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);
  
  let x = random(width);
  let y = random(height);
  
  circle(x, y, 50);
}

在这个例子中，我们直接调用 random() 函数，随机出了一个圆心的位置。可以看到，每次圆心的位置都是完全随机的。

总结

在本文中，我们介绍了 p5.js 中的噪声函数 noise()，它可以用来产生各种形式的随机化效果。通过控制不同的参数，可以产生不同维度的特性，从而让画面呈现出更加自然、有机的效果。如果您想要深入了解 noise() 函数，建议多尝试几个例子，体会噪声函数的特性，从而更好的运用到自己的作品中。