Learn

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.

Random vs Noise Graph

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.

Random Movement

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

Noise Movement

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

1.

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.

2.

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.

3.

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.

4.

As the last step, increment the t value by 0.005. Your ellipse should now be gracefully gliding around the canvas!

Take this course for free

By signing up for Codecademy, you agree to Codecademy's Terms of Service & Privacy Policy.
Already have an account?