Animation

Turn your static p5.js sketch into animation and learn to create more complex sketches using grouping and transformation functions.

Start

Key Concepts

Review core concepts you need to learn to master this subject

The draw() Function

FPS

The frameCount Variable

The frameRate() function

Incrementing Values

Decrementing Values

The random() Function

The noise() Function

The `draw()` Function

function setup(){
  // Runs once at the start of the program
}
function draw(){
  // Loops infinitely after setup() is run
}

The draw() function is automatically called after the setup() function, which runs once at the program’s start. The draw() loop infinitely runs the code block inside the function from top to bottom.

Animation with p5.js

Lesson 1 of 2

1
Introduction
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 …
Start
2
Frames
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’…
Start
3
FPS
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…
Start
4
Incrementing and Decrementing Values
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…
Start
5
Speed and Direction
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 i…
Start
6
Random
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…
Start
7
Noise
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, p…
Start
8
Creating Custom Functions
p5.js is built on functions. For example, the draw() loop is a function used in every sketch. All s…
Start
9
Review
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 …
Start