This is a little class I created to use Canvas to create a polar arc animation. A while ago I came across a Polar Clock using canvas and I thought it would be cool to create a randomized background using the same concepts. I would link back to the original script I based this on, but it appears to have been taken down =/ My script randomizes the number of arcs, the width, radius, and length of each arc. Options allow you to change the colors of the gradient and the arc, as well as the animation frame rate and arc opacity. Try reloading the demo a few times to see the randomness in action.

Anyway, you can see a demo here, or download the script….

I thought about making it compatible use IE using exCanvas, but then I got lazy….

You can see I am using the script for my background on this site. I went a little further with it and made it customizable. If you click on the little color wheel icon in the top right, you can select a color you want the background to be, and it will automatically create a darker color and lighter color for the background gradient. Pretty neat!

Once you have downloaded the script, you initialize it like so:

1
2
3
4
5
6
7
8
9
10
11
12
13

document.observe("dom:loaded", function() { 
	var useCanvas = !!( typeof($('canvas').getContext) == 'function'); 
	if(useCanvas){
		var pc = new polar("canvas",{
			bgColorBtm:"#000000",
			bgColorTop:"#666666",
			arcColor:"#FFFFFF",
			frameRate:12,
			arcOpacity:0.05
		});
		pc.start();
	}
});