Session 1: As we have seen, creating animation with pure JavaScript is promising, but can also be time consuming and cumbersome. Another way to unlock the animation potential of the HTML5 Canvas tag is by using a JS framework. Much less code is necessary when you have pre-written classes and objects to support common motion graphic techniques, like tweens, fades, color manipulation, and transitions. One well developed JavaScript framework for HTML5 vector graphics and animation is Raphaël.
However, the most advanced framework currently available is the Processing.js project. Let’s review some examples including a project of mine that I ported from Processing.org linked below.
Processing.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 GMS by John Keston. Here’s a list of notable Processing developers.
Robert Hodgin (flight404.com)
Jeremy Thorp (blprnt.com)
Jared Tarbell (complexification.net)
Daniel Shiffman (www.shiffman.net)
The Nature of Code by Daniel Shiffman
Ira Greenberg (www.iragreenberg.com)
Wes Grubbs (www.devedeset.com)
Ben Fry (benfry.com)
Casey Reas (reas.com)
Session 2: Let’s start today by viewing the results of the HTML5 and JS Animated Circle. Afterward let’s continue our look at Processing.js. After using sketch.processing.org to look at a few more examples, we will go over the requirements for the next exercise.
Assignment 3: HTML5 and Processing.js OOP Exercise (15 Points)
Due: Session 1, Week 5 (Beginning of Class)
Use HTML5, Processing.js and Object Oriented Programming techniques to create multiple animated shapes on a canvas that respond to mouse movement. Try to make the shapes chase the mouse pointer, rather than follow it directly. Try rotating shapes such as rectangles or triangles to reflect the position of the mouse.
Requirements:
1. Setup your HTML5 and Processing.js environment
2. Create a class with a constructor and methods to build and animate the objects
2. Use the setup() and draw() functions to animate five or more objects
3. Use mouseX and MouseY to cause the shapes to respond to mouse movement
4. Try rotating the shapes in response to the mouse movement
5. Try causing the shapes to gravitate toward the mouse rather than following it directly