Bouncing around in Javascript

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!

 

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s