Posts tagged particles

N-body planar choreographies: illustrating mathematics in HTML5 canvas

nBody-featured

An application built in HTML5 and canvas is used to illustrate some intriguing mathematics.

I can see your particle remnants: misadventures in alpha blending.

ugly gray trails

Are you fading out images in the HTML5 canvas by painting a transparent black rectangle over the top? Did you test your animation in different browsers? You may be unaware that ugly gray remnants are being left behind. I discuss the problem, how to predict the color of these remnants, and some workarounds.

Fire Trails – colorful fading trails in a particle effect

firetrails

I modify an earlier particle effect to create colorful, fiery trails behind the particles as they fly around and bounce off circular walls.

Bouncing particles off a circular boundary

circlebounce

How do you bounce particles off a circular wall? I present a simple example and discuss some of the vector mathematics behind the code.

HTML5 3D particles in a 2D canvas, sprite sheet optimized

parametric2-featured

More pretty parametric curve built out of particles. I optimize my code which creates 3D particles in a 2D canvas, by using a sprite sheet. During the testing of this effect, I have observed some interesting browser differences.

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

parametric-featured

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

dustysphere-featured

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 Particle Clock 2 – Sprite sheet optimized

particleclock2-featured

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

particleclock-featured

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.

Nova – HTML5 Canvas Particles

nova-featured

A celestial particle effect with pleasing color changes, enhanced by the Fast Blur code from quasimondo.