CODEWITHSUNDEEP
html5-canvas
Bachalo
Bachalo

Reputation: 7219

Advanced canvas tutorial for 2d particle effects

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?

Upvotes: 3

Views: 866

Answers (1)

bennedich
bennedich

Reputation: 12371

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.

Upvotes: 3

Related Questions