4:2 Perlin 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.

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.

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: