UAL CCI: Introduction to Creative Computing 2025: 🎰 & 📣: Lecture 6: Randomness and Noise.
Back to slide index.

The two things I want you keep in mind are that computers can generate both random numbers and noise, which is almost random, but not quite.

The random() function

Let's take a look at the p5.js reference page for the random() function.

It's important to realise that the random() function only produces pseudo-random numbers. This is demonstrated through the randomSeed() p5.js function. Using the same seed produces the same sequence of random numbers every time. If you really need really random numbers, you need to sample nature, as random.org does.

Let's take a look at the p5.js Random example to see how the random() function can be used to generate random greyscale patterns.

Let's take a look at the p5.js Double Random example to see how two calls to the random() function can produce an irregular line.

Let's take a look at the p5.js tickle example to see how the random() function can be used for interaction.

Let's take a look at the p5.js Weight Line example to see how the random() function can be used for interaction that gives random colours and other attributes of a line.

Let's take a look at brand new updated random example that randomises colour and position of a circle.

Noise functions.

In 1983, Ken Perlin invented Perlin Noise, for which he recieved an Oscar in 1997. Perlin Noise can be used to generate realistic looking clouds, landscapes or many other natural features. Since then other noise generators have been invented - including Simplex Noise and Worley Noise. As an aside, there are many colours of noise found in audio engineering and physics. Be careful when generating sound using noise - make sure not to accidentally hit the Brown note.

Let's take a look at the p5.js reference for noise(), which uses Perlin Noise. You can the noiseDetail() function to control the resolution of the noise that you generate.

Finally, let's look at a pair of examples that use Perlin noise to generate movement - in one dimension or in two dimensions. Ashort tutorial on noise in p5.js by Gene Kogan. A brand new example on Noise from the updated p5js.org website.

Thanks! Time for a short break!
Back to slide index.