Noise

7/19/2023

We've already spoken about Math.random(), which gives us a random number between 0-1.

Noise does the same thing (though sometimes might be a number between -1 - 1), but in a very different way.

Lets compare random to noise in 1d. We'll get x100 values and plot them.

You can see in the pattern above that, yes, random and noise return unpredictable numbers, but they do it in a very different ways.

Random is complete chaos. It returns a number, with no regard for any other number.

Noise is more refined. It returns numbers that are random, but related. Two numbers near each other should return similar, but not idential numbers.

Lets look at some 2D noise.

Play with this example on CodePen

Where we see black, the noise value is 0, and where we see white, the noise value is 1. This was generated with this code in p5.

function setup() {
  const canvas = createCanvas(600, 300);
  for (let x = 0; x < width; x++) {
    for (let y = 0; y < height; y++) {
      noStroke();

      // multiplying by .05 to make the scale smaller
      let n = noise(x * 0.05, y * 0.05);

      // noise values are between 0-1
      // color values in p5 are between 0-255
      // multiplying n by 255 to suit p5
      fill(n * 255);

      rect(x, y, 1, 1);
    }
  }
}

We're passing in the x, y values of each individual pixel to get a noise value. Then we're multiplying by .05. This changes the frequency of the noise. A little like zooming in and out of the noise.

This is the same noise with a frequency of .5

This is the same noise with a frequency of .005

What can we do with it?

Noise is one of those tools that can be used in all sorts of cases. Lets look at three examples that might help you see its range.

See the Pen LoFi example - Noise 2d - heatmap by LoFi (@loficodes) on CodePen.

You can use noise to play with colors. Here we're adjusting the value of the hue in a hsl color to generate what looks like a heat map.

See the Pen LoFi example - Noise 2d - heatmap by LoFi (@loficodes) on CodePen.

You can create wiggly lines, in patterns that rarely repeat! Notice that we've used time as a parameter that we've put into the noise.

There's a whole constellation of ideas that noise can achieve, and in future posts, we'll be looking at more of them.