Archives for January 2012

Parametric Particles – more HTML5 3D in a 2D canvas

Playing with my 3D particle code some more, I draw a parametric curve which rotates in space and slowly dissolves away.

Dusty Sphere – HTML5 3D particles in a 2D canvas

Drawing 3D objects in a 2D canvas is rather straightforward if the objects are simple dots and you’re not worried about depth-sorting. I show you a simple example of a sphere made out of dust particles which fly around and fade away. I also discuss how to properly select a point at random on a sphere, in such a way as to ensure an even distribution of points.

HTML5 Canvas – A Simple Sprite Sheet Example

A simple example to illustrate the use of a sprite sheet for CPU-efficient animations. We create a sprite sheet at run time, fill it with individual frames of an animation of a growing circle, then copy from this sprite sheet later when we wish to animate a large number of circles.

HTML5 Canvas Particle Clock 2 – Sprite sheet optimized

A newly optimized clock made of particles. The particles take the form of digits which fly into place to form the correct time. This example features many more particles than our previous example.

HTML5 Canvas Particle Clock

A little HTML5 canvas experiment: a digital clock created from particles. The particles take the form of numerals which slide into place to display the correct current time. A repelling force pushes inactive particles away from the time display particles. Full source code available for you to experiment with.