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;
Instructions
In this exercise, you will use the noise function to make a wandering ball animation. First, inside the draw()
function, set the x
variable to equal:
width * noise(t + 15)
Be sure to write this somewhere after the fill()
function.
Still inside the draw()
function, set the y
variable to equal:
height * noise(t + 5)
We will be using this variable for the ellipse’s y position.
Now, draw an ellipse with the x
variable for the x position and the y
variable for the y position. Set the width and height of the ellipse to be 150.
As the last step, increment the t
value by 0.005. Your ellipse should now be gracefully gliding around the canvas!