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

**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.