Key Concepts

Review core concepts you need to learn to master this subject

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. 1
    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 …
  2. 2
    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’…
  3. 3
    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…
  4. 4
    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…
  5. 5
    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…
  6. 6
    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…
  7. 7
    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…
  8. 8
    p5.js is built on functions. For example, the draw() loop is a function used in every sketch. All s…
  9. 9
    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 …

What you'll create

Portfolio projects that showcase your new skills

Pro Logo

How you'll master it

Stress-test your knowledge with quizzes that help commit syntax to memory

Pro Logo