Session 1: As we have seen, creating animation with pure JavaScript is promising, but can also be time consuming and cumbersome. To make this process more efficient we will unlock the animation potential of the HTML5 Canvas tag by using JS frameworks like P5js.org. Much less code is necessary when you have pre-written methods to support common motion graphic techniques, like tweens, fades, color manipulation, and transitions. This week we will explore P5js.org and learn some ways to make our projects interactive.

P5.js is based on Processing.org developed at MIT by Ben Fry and Casey Reas. The Processing language was developed to attract artists and designers to programming. It is easy to learn, yet powerful enough to create complex software like the Gesteral Music Sequencer or GMS. Here’s a list of some notable creative coding artist that use Processing or similar languages:

Anna Ridler (annaridler.com)
Ben Fry (benfry.com)
Camille Utterback (camilleutterback.com)
Casey Reas (reas.com)
Daniel Shiffman (www.shiffman.net)
Emily Gobeille (zanyparade.com)
Jared Tarbell (complexification.net)
Jennifer Steinkamp (jsteinkamp.com)
Jeremy Thorp (blprnt.com)
Joan Truckenbrod (joantruckenbrod.com)
Kate Hollenbach (katehollenbach.com)
Robert Hodgin (flight404.com)
Rosa Menkman (rosa-menkman.blogspot.com)
Sofia Crespo (sofiacrespo.com)
Wes Grubbs (www.devedeset.com)

Lab 1: In today’s lab we will continue to look at the basics of P5js.org and start on porting the HTML5 and JS Animated Circle.

Session 2: Animating one or two shapes on a screen is one thing, but what if we wish to animate dozens or even hundreds of shapes at once? There are many ways we can do this, but let’s start by using arrays. Arrays are variables in list form. Imagine a can of soup as a simple variable, and an array as a carton of eggs. Let’s use arrays to animate more than just a few objects at once.

Lab 2: Let’s continue exploring the possibilities of arrays and how we might implement them into our HTML5 and JS Animated Circle exercises.