Animation with JavaScript and HTML5



Bucky Schwarz



cf.Objective() May 2011

About Me

To get the most out of this presentation, please have:

About the Canvas Element

Canvas Gotchas

Canvas Drawing Example

Canvas Drawing Example (Continued)

Canvas Animation Example

Canvas Animation Example (continued)

Introducing Particles


Let's model a particle explosion using canvas

Particle object

Introducing the Particle Manager


A particle manager manages collections of particles

ParticleManager object

Introducing the Renderer


A Renderer handles the actual drawing of our simulation objects

Renderer Object

HTML Container

Basic Particle Explosion Example

Let's Make it Interesting

More Changes

Advanced Particle Explosion Example

fin.


Thank you. Now what?