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 known as an animation. An animation is really just an illusion. Any time we see an animation, we are actually seeing a sequence of frames that give us the illusion of movement. Frames are individual pictures in a sequence of images. When multiple frames are shown at a fast enough rate, our eyes translate and blend them into a single moving image. A classic example is Eadweard Muybridge’s Horse in Motion, in which the photographer took 12 photos of a galloping horse in rapid succession.
When you show the pictures one after the other, it creates a motion-picture!
In p5.js, this illusion of creating a moving image can be easily achieved by utilizing essential principles and functions such as the draw() loop, frames, and frame rates. In order to have control over your animation’s speed and states, it will be important to understand how to increment or decrement values, change variables, create your own functions, and use conditional statements.
By the end of this lesson, you will be able to make your p5.js drawings come to life!
Instructions
Explore the p5.js sketch of this spaceship scene. Pay attention to the frameRate() function, the random() function, incrementing or decrementing values, creating custom functions, and writing conditional statements.
Click “Next” when you are ready to get started making p5.js animations!