Circle Trails

Tested in chrome/safari. Not as smooth as desired in firefox

Since I've read Secrets of the javascript Ninja
my opinion of javascript has risen further. Initially a lot of its peculiarities seem slightly evil, and
when coming from a language like java, downright counterintuitive. I would use this and hope for
the best, or ponder the sobriety of the developer who came up with something like:

(function() {})();

Yet, it turns out these things aren't that hard and actually make a lot of sense. A whole playground of patterns and techniques, not typically found in more conventional languages, is yours for the taking!

Now add to that HTML5 goodness, like canvas, and you can do some really cool things with almost no code.
Take the example above made up of ~40 lines of code.

The Circles

First, we create an object which we will use as a map that holds all our circle objects: var circles = {}

The function Circle(x,y) is then a constructor for our actual Circle objects. We will create one of these objects each time we move the mouse with an x, y coordinate for the current position of the mouse.
The responsability for managing and drawing the growing circle fading out on that position is then entirely placed on the Circle.

The first thing a Circle object does is create a uid for itself, which we crudely do with the help of Math.random(). Next it adds itself to the circles map with the id as it's key. It also initializes a variable i = 0 which will track how many times it has been drawn so far.

with radius i+2. recall that i tracks the amount of times the circle was drawn, so the radius gets bigger each time we redraw the circle.

It's a full circle so from angle 0 to 2π

false indicates in which direction, as we are drawing a full circle this is moot.

Apart from growing in size each time we redraw it, we also want it to fade out. rgb(0,0,0) represents black, and rgb(256,256,256) represents white. We move within this spectrum getting lighter in steps of 3.

Finally we add a check, when the color > 256 the circle is now white, and technically invisible against the white background. It has completely faded out, so we completely remove it from the active circles map.

Tick : Managing the circles

We create an interval that will update every 25 milliseconds. It first erases the whole board with ctx.clearRect( 0 , 0 , canvas.width , canvas.height );.

Next it moves through our map of active circles, telling each one to draw itself. Recall that circles will remove themselves from this map once they have drawn themselved into redundancy (completely white).