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!
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:
xvalue specifies the x-coordinate in noise space.
yvalue specifies the y-coordinate in noise space.
- The number returned when you call the
noise()function is between 0 and 1.
noise()function can’t be called without at least one argument.
The difference between the
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;
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
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!