4:2 Perlin noise
Purlin noise, invented by Ken Purlin, is a type of randomness that looks natural. Its part of a family of types of noise that help you create things that look natural.
noise()
In p5.js perlin noise is created with the noise() function:
https://p5js.org/reference/#/p5/noise
Imagine perlin noise like a landscape that you are constantly travelling along. As you travel you go up and down hills, just like the example here.
The random() function is would not give you a smooth connected landscape, but noise() does. It is like randomness where each value is related to the previous one.
noise() always outputs a number between 0 and 1, which is useful. For instance if you multiply it by 100 the output will be between 0 and 100.
offset
To travel through the random landscape of perlin noise we input an offset. This is just a number we pass into the function as an argument. You have to change the offset to get a different number from perlin noise (in this way it is quite different from the random function).
Have a look at the same example, but we are showing the offset value change as we travel through the perlin noise landscape. You might want to think of this as a distance travelled, with the noise value being the height of the point you are currently at.
Each vertical pixel line of the green background involves feeding in the offset value (the one you see on the top left), plus the value at x and we then divide this by 1000.
offset is a number that always gets bigger each frame (by a small amount)
x we loop through x each frame to draw a 1px wide rectangle at this point.
we divide by 1000 simply because that makes more rounded shapes - you can try changing this.
a simple perlin noise example
In this example we make a variable called offset at the top
let offset = 0;In the draw loop we put a circle in the centre and vary its size by multiplying the noise value by the height. The noise function outputs a value between 0 and 1 so we need to mulitply it to make it bigger:
circle(width / 2, height / 2, noise(offset) * height);Finally we need to increment the offset by value, normally this needs to be very small:
offset += 0.01;Some perlin eyeballs
Perlin noise can control anything, in this case it creates the smooth movement for eyeballs moving. However it could make 3D landscapes, flow fields and many more complex things
Perlin noise on the Coding Train
The Coding Train has an excellent set of tutorials on Perlin Noise.
Next Lesson:
Visualising Sound