This week we looked at animations, and how to make objects move in p5.js.

We covered:

• How to animate things in p5
• Some mouse interaction

Animation in javascript (or all programming really!) is basically changing some variables in the draw function before we actually draw the object.  If we change each variable by a little bit, it looks like smooth movements, just like a cartoon!

To save some typing, there is a video below with a quick overview of what we did:

Okay, it’s pretty simple stuff and not exactly the most exciting animation in the world, but you guys did some playing around and came up with several interesting variations and now we know how to do it, the sky is the absolute limit on what we can build  🙂 !

As usual, the code is up on the github to be pulled down and played with or changed to your heart’s content!