Learn how to turn your static p5.js sketch into an animation!

Animation with p5.js

In p5.js, multiple frames can easily be shown in a sequence using the `draw()` loop. By default, any code in the `draw()` function will repeat over and over again, many times per second. This function's endless repetition is ideal for making an animation because we can write code in the `draw()` function that slightly alters our image each time it runs.

As a quick recap, the `draw()` function is similar to an endless for-loop that repeatedly runs the code block inside from top to bottom. The `draw()` function runs after the `setup()` function that runs only once at the program's start. 

```js
function setup(){
  // Code inside setup() function runs once when you start the program
}
function draw(){
  // Code inside draw() function loops infinitely after setup() is run
}
```

It is helpful to think of an animation as a series of frames, like a film roll. By showing the series of frames fast enough, our brain is tricked into thinking the sequential images are an animation. The example below shows a series of frames shown like a film roll.

![Series of Frames](https://static-assets.codecademy.com/Courses/Learn-p5/animation/animation_frames.png)

To create a smooth animation with code, p5.js runs the draw loop at 60 frames per second. Below is an example of how each frame is overriding the previous one to create this animation.

![Series of Frames](https://static-assets.codecademy.com/Courses/Learn-p5/animation/animation_dropping_ball_forever.gif)

With p5.js, one frame is the equivalent to one loop through the `draw()` function. To keep track of the number of frames rendered, p5.js provides a built-in variable called `frameCount`. This variable counts the number of frames that have been displayed since the program started. The `frameCount` variable updates with every frame. The first time the `draw()` loop runs, the value of the `frameCount` is one; the second time the `draw()` loop runs, the `frameCount` is two; and so forth.

Frames

Now that you know how to draw a static sketch in p5.js, it is natural to wonder, "How can I make it move?" 

In this lesson, you will learn how to make a p5.js drawing that changes with time, also known as an animation. An animation is really just an illusion. Any time we see an animation, we are actually seeing a sequence of frames that give us the illusion of movement. *Frames* are individual pictures in a sequence of images. When multiple frames are shown at a fast enough rate, our eyes translate and blend them into a single moving image. A classic example is [Eadweard Muybridge's Horse in Motion](https://en.wikipedia.org/wiki/The_Horse_in_Motion), in which the photographer took 12 photos of a galloping horse in rapid succession. 

![Eadweard Muybridge horse frames](https://static-assets.codecademy.com/Courses/Learn-p5/animation/muybridge_frames.jpg) 

When you show the pictures one after the other, it creates a motion-picture! 

![Eadweard Muybridge horse animated](https://static-assets.codecademy.com/Courses/Learn-p5/animation/muybridge_animated.gif)

In p5.js, this illusion of creating a moving image can be easily achieved by utilizing essential principles and functions such as the `draw()` loop, frames, and frame rates. In order to have control over your animation's speed and states, it will be important to understand how to increment or decrement values, change variables, create your own functions, and use conditional statements. 

By the end of this lesson, you will be able to make your p5.js drawings come to life!

Introduction

Variables are a crucial component for creating movement in p5.js. To have your sketch change over time, you will need to increment or decrement your variables with each frame. 

Remember that after you declare a variable, you can always reassign it by giving it a new value. In order to have your element move across the canvas, it is necessary to first define your variable, then reassign that variable to be incrementing and decrementing.

The code below shows how to increment an ellipse along the x-axis of the canvas. 

```js
// Initialize xPos variable to 5
let xPos = 5;

function draw(){
  // Use xPos variable as x position of ellipse
  ellipse(xPos, 100, 100, 100);
  // Increment xPos by 1 every draw loop
  xPos += 1; 
}
```

A value is incremented by writing the following expression: 

```js
x = x + 1;
```

Above, the `x` variable is taking its own value and then adding 1 to it. This expression can also be written as `x++` or `x += 1`. 

A value is decremented by writing the following expression:

```js
x = x - 1;
```

Here, the `x` variable is taking its own value and then subtracting 1 from it. This expression can also be written as `x--` or `x -= 1`. Keep in mind that the value `1` can be changed to any other number.

Incrementing and Decrementing Values

In order to create smooth animations, we need to create a variable for the speed and then incrementally change that value with each frame. 

In the example below, we are animating an ellipse that is falling at a set speed. To achieve this, we first define a variable named `speed`. We then set a variable named `yPos` for the ellipse's y position. Afterward, we increment 
 `yPos` with the `speed` variable. 

```js
let speed = 1; // Determines the speed
let yPos = 0; // Starting position on y-axis

function draw(){
   ellipse(width / 2, yPos, 20, 20); 
   yPos += speed; // Increments the value of the y position
}
```

To reset the ellipse to its initial location, we first write an `if` statement to check whether the ball has reached the bottom of the canvas. You can tell if it has reached the bottom when the y position of the ball is greater than the height (`yPos > height`). At this point, reassign the y position of the ball back to 0, which is the top of the canvas. 

```js
if(yPos > height) {
  yPos = 0; // When yPos becomes greater than height, reset to 0
}
```
With the code above you can create this infinitely looping animation of a dropping ball. 

![Reset Ball](https://static-assets.codecademy.com/Courses/Learn-p5/animation/animation_dropping_ball_forever.gif)

Instead of resetting the ball's position to the top, you can have it bounce up when it reaches the bottom of the sketch. To move the ball in the opposite direction, inverse the `speed` variable by multiplying the value by -1. 

```js
if(yPos > height){
  speed = speed * -1; // Negative value changes speed to opposite direction
}
```
By inverting the direction of the speed, we have created an animation of a ball that bounces when it reaches the bottom. 

![Bouncing Ball](https://static-assets.codecademy.com/Courses/Learn-p5/animation/animation_bounce_once_1.gif)
  

Let's now try to have the ball bounce off all four sides of the canvas! 

To achieve this, we first need to differentiate the speed for the x-axis and the y-axis movement. Let's do this by creating variables called `xSpeed` and `ySpeed` to represent the movements along both axes. 

```js
// Initialize speed along x and y-axis to 1
let xSpeed = 1; 
let ySpeed = 1; 
```

Next, let's write an `if` statement to check when the ellipse's x position is greater than the canvas `width` or less than 0. We use an OR operator (`||`) to check if either condition is true. 

```js
if(xPos < 0 || xPos > width) {
  // If xPos is less than 0 or greater than width, run this code
}
```
We need to write another if statement to check when the ellipse's y position is greater than the canvas `height` or less than 0. 

```js
if(yPos < 0 || yPos > height) {
  // If yPos is less than 0 or greater than height, run this code
}
```
When the ellipse touches any side of the canvas, we move it in the opposite direction by multiplying -1 to the variable representing speed. We write the code to change the direction within the `if` statements. 

```js
if(xPos < 0 || xPos > width) {
  xSpeed = xSpeed * -1; // Invert xSpeed when xPos is less than 0 or greater than width
}

if(yPos < 0 || yPos > height) {
  ySpeed = ySpeed * -1; // Invert ySpeed when yPos is less than 0 or greater than height
}
```

When we piece all the steps together it will create an animation of a ball bouncing around the canvas. 

![Bouncing Ball](https://static-assets.codecademy.com/Courses/Learn-p5/animation/animation_bounce_walls_1.gif)

Speed and Direction

Wonderful! You now know how to create animations in p5.js! Let's review what we've covered in this lesson:
   * A frame is the equivalent to a loop through the `draw()` function.
   * A p5.js sketch runs at 60 frames per second, meaning that the `draw()` function executes 60 times per second.
   * You can use the `frameRate()` function to alter how many frames are displayed in a second, also know as Frames Per Second (FPS).
   * Increment and decrement values to create continuous motion.
   * Conditional statements can be used to create more complicated animation sequences.
   * Create variables to increment or decrement the speed of a moving object.
   * Invert the direction of the moving object by using conditionals and multiplying -1 to existing speed values.
   * The `random()` function is used for creating unpredictable and dynamic movements.
   * The `noise()` function is used for creating unpredictable but smoother movements.
   * Create your own functions so your code is modular and reusable.

In the next lesson, we will be covering how to create different transformations that can be applied to our shapes. We will also be going over how to group our styles, transformations, and functions in order to create animations that are even more complex and dynamic! 

Review

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](https://en.wikipedia.org/wiki/Perlin_noise#:~:text=Perlin%20noise%20is%20a%20procedural,details%20are%20the%20same%20size). 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](https://static-assets.codecademy.com/Courses/Learn-p5/animation/random_noise_graph.png)

You can generate a noise value with the following syntax: 

```js
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](https://static-assets.codecademy.com/Courses/Learn-p5/animation/random_ball_movement.gif)

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

![Noise Movement](https://static-assets.codecademy.com/Courses/Learn-p5/animation/noise_ball_movement.gif)

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:

```js
let xOffset = 0;
```

Next, we set the `x` variable to be equal to: 
```js
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](https://www.codecademy.com/content-items/5e5c0d2a7b20535fbe8aed05e739e027) article.

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

```js
ellipse(x, 200, 24, 24);
```

The last step is to increment our `xOffset` value by writing:
```js
xOffset += 0.01;
```

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

```js
let xOffset = 0;
let x = map(noise(xOffset), 0, 1, 0, width);
  
fill(255);
ellipse(x, 200, 24, 24);
xOffset += 0.01;
```

Noise

If you want to add some unpredictability to your sketch, `random()` is the perfect function for you! This is especially helpful when you are tired of making decisions and are happy to let computation make some of them for you.

The `random()` function returns a random value every time it is called. There are a few ways to write this function:   
* `random()` returns a value between 0 and 1.
* `random(max)` returns a value between 0 and `max` value, but excluding the `max` value. 
* `random(min, max)` returns a value between `min` value and `max` value, but excluding the `max` value.
* If the `random()` function is used inside the `draw()` loop, the `random()` function generates a different randomized value every time the `draw()` function runs. 

The image below shows multiple circles appearing in random locations and sizes every time it runs through the `draw()` function. 

![Random Position and Size](https://static-assets.codecademy.com/Courses/Learn-p5/animation/animation_random_ellipse_values.gif)

The above animation is created using the code snippet below:
 
```js
let xPos = random(width); // Generate random number between 0 and width
let yPos = random(height); // Generate random number between 0 and height
let size = random(10, 101); // Generate random number between 10 and 100

circle(xpos, ypos, size);
```

Here, the `xPos` variable is set to a random value between 0 and canvas `width` and the `yPos` variable to a random value between 0 and canvas `height`. The `size` variable is set to a random number between 10 and 100. These randomly generated values are used to generate circles at random positions and sizes.

Similar to how we used the `random()` function to generate random sizes and positions for our ellipses, we can also use the `random()` function to get a random color value. 

Remember that you can use the RGB notation as the color arguments for the `fill()` function. Refer to the [Drawing and Coloring Shapes](https://www.codecademy.com/content-items/c4bc31adcf3a7649d6dccc3ec4700175/exercises/p5js-drawing-coloring-shapes) lesson if you would like to review how to use colors in p5.js. 

The code below generates random values between 0 and 255 for the red, green, and blue values. Keep in mind that in order to get a value between 0 and 255, including 255, you need to pass 256 into the `random()` function since the maximum value is exclusive.

```js
fill(random(256), random(256), random(256)); 
```
This can also be written as:

```js
fill(random(0, 256), random(0, 256), random(0, 256));
```

![All Random Colors](https://static-assets.codecademy.com/Courses/Learn-p5/animation/all_random_colors.gif)

Passing in random values for all three color channels will give you this fun, rainbow color scheme. Rainbows are awesome! But sometimes you may want to have a limited, but still random, color palette. For example, if you want all the ellipses to be within the red spectrum, you can choose to randomize only the red value. 

```js
fill(random(256), 0, 0); 
```

Now, all the ellipses are varying shades of red.

![Red Random Colors](https://static-assets.codecademy.com/Courses/Learn-p5/animation/random_red.gif)

Random

*Frames Per Second* (FPS) specifies the number of frames displayed every second. When the FPS of animation is lower, it looks like it is in slow motion. When the frame rate is higher, the animation looks like it is being fast-forwarded. 

p5.js will automatically run your code at 60 frames per second. However, you can manipulate the FPS by using the `frameRate()` function, which will change the number of frames shown per second to the number specified as the function's argument. For example, the code snippet below will cause the `draw()` function to run `numberOfFrames` times per second.

```js
frameRate(numberOfFrames);
```

The `frameRate()` function will not go over 60 frames per second in p5.js. This is more than enough! A typical animation is between 24 to 30 frames per second. 

![Different FPS](https://static-assets.codecademy.com/Courses/Learn-p5/animation/frame_rate_difference.gif)

In the diagram above, you can see the ball dropping at ten frames per second (10 FPS), 30 frames per second (30 FPS), and 60 frames per second (60 FPS). Notice that when the animation has a lower frame rate, each frame is more distinct.

p5.js is built on [functions](https://www.codecademy.com/learn/introduction-to-javascript/modules/learn-javascript-functions). For example, the `draw()` loop is a function used in every sketch. All shapes are drawn using functions such as `ellipse()`, `rect()` and `line()`.

As a reminder, you can define functions by writing:

```js
function nameOfFunction (x, y, z){
   // Do something when this function is called
}
```
 
In the code above, `x`, `y`, and `z` are variables that represent the function's parameters. *Parameters* are a way to introduce variations into your functions. For example, let's say you want to draw three clouds, but you want each cloud's location and size to be different. To do this, you would need to write parameters for your `makeCloud()` function. When you call the function, the variables get replaced with the specific values passed into that  `makeCloud()` function call.

Take a look at the **cloud.js** file to your right. See how the function's parameters are used to create variations. Keep in mind that p5.js runs through the program line by line, from top to bottom. Every time the program reaches a `makeCloud()` function call, the program jumps to the function definition outside of the `draw()` loop.