Animation

The draw() function

Up to this point we have written code that make static images. Static images are lot easier to do with a program like Inkspace or Illustrator. P5js shines when we start animating. Everything inside the setup() function runs once, so this is the place for static content. Static content can be the size of our canvas, background color, or some shapes that we won't change over time. Anything we want to animate, we put inside the draw() function. The draw() function runs 60 times per second (or as fast as your CPU can call the function up to 60 times per second). The way we animate shapes is by giving them new coordinates, or new sizes, with each frame.

Before we can animate the shapes that we have looked at so far, we need to take a step back and examine what variables are in JavaScript. Once we have an understanding of this aspect of programming, we can start making some simple animations.