Simple Animation

So far we have only generated static graphics, that don't move.

p5.js makes it very simple to create animations. The concepts for animation draw on some of the things we learned when laying out shapes using loops.

p5.js calls the draw() function 60 times per second. This allows us to generate animations. We can draw something different each time the draw() function is called.

There are two ways we can create the animation. If we clear the background at the start of the draw() function then we can see an object moving. If we don't clear the background the new object positions will be drawn over the previous frame, creating a drawn effect.

Drawing

Let's start with an example that doesn't clear the background.

In this example we are going to move a circle across the scene to the right without clearing the background.

You can see the example here.