del.icio.us .:. tweet

Collide-O-Scope: a Canvas Experiment .:. kentbrewster.com

Here's a fun little vacation project, a canvas-powered Collide-O-Scope.

After being absolutely floored by some really impressive new HTML5 demos--see the 9elements Twitter mash-up, for one--I figured it was time to give it a try myself. Here's the result.

Assuming you're running a canvas-aware browser--see compatibility notes below-- you should be seeing several moving sets of randomly-generated circles, all projected with their seven possible translations and reflections. Each set has an X and Y vector; before each move we're running some very crude collision detection and altering those vectors if needed.

While it's running, you can change things around by clicking anywhere inside the canvas. This will remove the oldest set of circles and add a new one where you click.

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.

At the moment I'm seeing smoothest results under Firefox in OSX, closely followed by Safari, with Chrome in last place. All three--and Opera 10--also run in Windows, but since I'm running Parallels I can't say how they compare to OSX, performance-wise.

Sorry, no love for IE; I did try excanvas, but it failed right away and I'm afraid I'm just not committed enough to caring about IE to investigate. (Hobby/pretty/vacation project, remember?)

Try It Out

If you'd like to try Collide-O-Scope, save this as an HTML file on your local directory and drag it into your browser:

<!DOCTYPE HTML>
<html>
<head>
<title>Collide-O-Scope</title>
<style>
body {
   margin:0;
   padding:0;
   background-color:#666;
   text-align:center;
}
canvas {
   margin:50px auto 0;
   border:2px solid #ffa;
}
</style>
</head>
<body>
<script src="http://kentbrewster.com/collide-o-scope/collide.js">
{"height":400, "width":400}
</script>
</body>
</html>

Height and width go inside the <SCRIPT> tag in curly brackets; for more on the techniques, please see any of my articles about Case-Hardened JavaScript.

Other valid configuration variables may be discovered by viewing the script and looking in the houseKeep function; you can change things like the number of circles on the page, the maximum number of rings per circle, ring thickness, ring opacity, background opacity, and canvas background color.

As always, have fun with this, don't leech the script for production use on your site, and please let me know how it goes.

Comments from before Disqus:

Kent Brewster .:. 2009-10-08 13:42:38
See also Stephen Band's parallax demos, which are based on a similar approach of layering shapes.
Scott .:. 2009-10-08 11:46:39
Oooo, shiny! Runs pretty quickly under Firefox 3.5 here on OS X, though my CPU fan has started up pretty shortly afterward.
Kent Brewster .:. 2009-09-08 08:57:31
Thanks, Dave. I'm messing around with my first Canvas-powered game right now ... it's starting to look like JavaScript and modern browsers are up to the challenge.
Dave Balmer .:. 2009-09-05 22:53:26
Nice! Been trying to get you into canvas forever. It's lots of fun, and works in all the fancy new touchy mobile devices as well. :)

Copyright Kent Brewster 1987-2014 .:. FAQ .:. RSS .:. Contact