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
- 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.
random()function is used for creating unpredictable and dynamic movements.
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?