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

See more

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

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