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
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
- 1Now 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 …
- 4Variables 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…
- 5In 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…
- 8p5.js is built on functions. For example, the draw() loop is a function used in every sketch. All s…
What you'll create
Portfolio projects that showcase your new skills
How you'll master it
Stress-test your knowledge with quizzes that help commit syntax to memory
Animation
Start