Advanced canvas tutorial for 2d particle effects

Question

I have design concept made up of 100's of 4 by 4 pixel colored squares.

Together they create a pattern.

What I need to do is to 1)animate the squares from off the canvas to their origin. (x,y translation) 2) cycle the colors on each individual square

optionally might look into 3d transformations but for now just trying to accomplish 1+2 above.

Can anyone point me to some advanced Canvas tutorials to accomplish this?

Answer 1

This vid describes the basic concept and is the best I've found: http://vimeo.com/36278748

blobArray would generally be called a scene graph, blob would be considered a scene/game object, draw contains both the updating and the drawing of the scene, you usually want to keep these in separate functions so the loop can update several times (fixed frequency) if drawing is slow (the usual bottleneck).

Unfortunately I've never found any other tutorials good enough worth mentioning. I learned by reading tutorials and sources of three.js, Unity 3D, OpenGL and WebGL. Then switching over to books.