p5.js Perlin Noise
Noise algorithms are used all over the place in generative content , but they are also useful for any kind of interpolation when selecting from a distribution of values over x and y-dimensions.
One of the most common type of noises is Perlin Noise, which offers a particular smooth, natural-looking randomness. Perlin noise enables us to exert some control over the randomness of our variables, and is widely used for creating realistic textures, generative art, AI motions, and many more applications. The output is particularly useful in computer graphics where it can be employed in textures, flames, smoke, particles, etc.
To create noise in p5.js we can use:
noise(x, [y], [z])
where x is x-coordinate in noise space, y is y-coordinate in noise space and z is z-coordinate in noise space. p5.js can compute 1D, 2D and 3D noise, depending on the number of coordinates given.
function setup() {
createCanvas(600, 600);
ellipseMode(CENTER);
fill(155, 150, 220);
noStroke();
}
function draw() {
background(255);
let n;
for (let y = 15; y < height; y += 30) {
for (let x = 15; x < width; x += 30) {
n = noise(x * 0.002 + millis() * 0.001, y * 0.002);
let diameter = n * 30;
ellipse(x, y, diameter, diameter);
}
}
}
To modulate time we can use z parameter. Here we keep the position of the Perlin space the same, but modulate the movement of each square via the 3rd parameter.
let t = 0;
function setup() {
createCanvas(600, 600);
ellipseMode(CENTER);
fill(155, 150, 220);
noStroke();
}
function draw() {
background(255);
let n;
for (let y = 15; y < height; y += 15) {
for (let x = 15; x < width; x += 15) {
n = noise(x * 0.002 + millis() * 0.001, y * 0.002,t);
let diameter = n * 30;
ellipse(x, y, diameter, diameter);
}
}
t += 0.2;
}Exercise
Using Perlin Noise recreate a movement and/or shape, which resembles a natural phenomenon (snow, wind, clouds etc.)