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.

No, you're not intoxicated.

No, you're not intoxicated.

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!

View the Collide-O-Scope demo


Applications, Display
Kent Brewster
Posted on:
December 7th, 2009
Posted by:
Andi Smith



Your Rating:
1 Star2 Stars3 Stars4 Stars5 Stars

Works on

BETA Please let us know if you find Collide-O-Scope works in other browsers by leaving a comment below.



Works with Firefox 3.6

Posted on January 31, 2010

Add comment

(will not be published)