After being inspired by 9elements HTML5 Love demo, Kent Brewster decided to have a go at creating his own canvas demo, called Collide-O-Scope, which displays an effect similar to that found in a kaleidoscope.
The demo uses several sets of randomly-generated circles, which are projected seven times using translations and reflections to create the kaleidoscope effect. Each set has an X and Y vector and before each move the demo runs collision detection, altering those vectors if they make contact. By clicking on an area within the canvas, you can alter the effect.
Kent explains how he produces the blurry circle effect:
The fuzzy/translucent effect comes from building up a number of very faint circles, on on top of the other. Depending on the colors, you’ll see fuzzy blobs, sharp stained-glass sections, and other interesting stuff when two sets of circles overlap.
Nice work Kent!