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!


Inside the shooting star animation in sketch.js file on your right, play around with the frameRate() value. Pay attention to the specific animation principles we just learned. Change the values inside the random() function. How do these tweaks alter the animation?

Take this course for free

Mini Info Outline Icon
By signing up for Codecademy, you agree to Codecademy's Terms of Service & Privacy Policy.

Or sign up using:

Already have an account?