A Simple Animation

Goal:

Animate the clouds in our sketch. When completed, your sketch should look something like the following animated gif

Try it Here:

To start the project, click on the link below. Use the tutorial link and follow the instructions:

Animation Project

In Depth Guide

Topics:

• Animations in p5.js

Details:

In p5.js, the function draw() is automaticlaly called 60 times per sec. Thus, to create any animation, we simply have to alter what is drawn from draw() call to draw() call. This typically involves:

• using a variable to track some piece of data
• Using that variable to perform some drawing task
• modifying the variable so that the next draw call will change what is drawn slightly.