As you may have noticed in the previous exercise, sometimes the random() function can be too random. There may be times when you want to create random movements that are more natural. Thankfully, p5.js has a noise() function that does exactly this!

The noise() function returns a random value based on the Perlin noise. When you call the noise() function, it generates a naturally ordered sequence of random numbers. The diagram below shows Perlin noise over time, which is represented as the x-axis. Notice how smooth the curve is for the noise() graph. In contrast, notice how jumpy the curve is for the random() graph. This is because the random() function selects purely random numbers with no relation to the previously selected value. Whereas, the noise() function generates values that produce a more harmonic sequence of numbers.

You can generate a noise value with the following syntax:

let num = noise(x, y);

Let’s take a closer look:

• The x value specifies the x-coordinate in noise space.
• The y value specifies the y-coordinate in noise space.
• The number returned when you call the noise() function is between 0 and 1.
• The noise() function can’t be called without at least one argument.

The difference between the random() and noise() function is especially noticeable when used in animations. You can see in the example below how sporadic the motion is when the random() function is used for the ellipse’s x position.

The animation below uses the noise() function for the x position of the ellipse. Compare the movement with the above ellipse.

In order to create this wandering ellipse animation, we need to first set a variable for the value we wish to increment along the x-axis. We do this by writing:

let xOffset = 0;

Next, we set the x variable to be equal to:

map(noise(xOffset), 0, 1, 0, width);

This function maps the value generated from the noise() function, which will be between 0 and 1, to a number between 0 and width. You can read more about how to use the map() function in the Tips for Creating Animations with p5.js article.

We then pass the x variable into the x position of the ellipse:

ellipse(x, 200, 24, 24);

The last step is to increment our xOffset value by writing:

xOffset += 0.01;

When we put all the steps together, you get the below code that creates these nice, semi-random movements.

let xOffset = 0;
let x = map(noise(xOffset), 0, 1, 0, width);

fill(255);
ellipse(x, 200, 24, 24);
xOffset += 0.01;