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
This is an online java script validator.
This site is only show how the each canvas animation work and lot of example of using difference color in each canvas.
http://www.effectgames.com/demos/canvascycle/
Instead of explain why people start using HTML 5 and not Flash, This site show live demos of magical things that HTML5 can achieve with other language like JavaScript.
http://www.hongkiat.com/blog/48-excellent-html5-demos/
The site explain the trick to use Controlling CSS Animations and Transitions with JavaScript
http://css-tricks.com/controlling-css-animations-transitions-javascript/
Here is the new articles i pick as i think this is more info and helpful than the one i chose before.
The adobe site is a good read as it is really helpful with the code and example how to do the canvas with html5.
http://www.adobe.com/inspire/2013/04/dreamweaver-cs6-html5-canvas.html
This one is also a good article as it show you step by step of how to use HTML 5 to make canvas with different styles.
http://www.html5canvastutorials.com/
This site i like to read in my free time as the article really good at covering and teach us how to make use of better option which can make the site better.
http://davidwalsh.name/css-js-animation