Tuesday, February 26th, 2008
Canvas Polar Clock
Category: Articles
, Canvas, JavaScript, Prototype
"agrath" has developed a very nice Canvas example using Prototype that makes use of a common Prototype-isms: Object.extend, Class.create, bind, enumerables, $w, $.
The Polar Clock is a different visualization of time and the example walks through all of the work required to implement it using Prototype 1.6.0.2 and Canvas, including the draw method:
JAVASCRIPT:
-
-
draw:function(){
-
this.clearCanvas();
-
var w = 20;
-
var r = 260;
-
this.date = new Date();
-
var cr = r;
-
$('labels').update()
-
$w("month day weekday space hour min second").reverse().each(function(interval){
-
cr = cr - w - w/2;
-
if(interval != 'space')
-
{
-
var ir = this.intervalToDegrees[interval].bind(this.date)();
-
var i = ((ir / 360) * 255) + 147;
-
var color = this.cc.rgbToCss(this.cc.hslToRgb(i.wrap(0,255),205,127));
-
this.drawSolidArc(color, cr, w, ir.toRadians());
-
$('labels').insert(this.getIntervalLabel[interval].bind(this.date)() + '<br />');
-
}
-
}.bind(this));
-
},
-
The article walks through a lot of Canvas as well as the Prototype side of things. Very thorough.
3.7 rating from 18 votes
Very snazzy. One addition I may add (as more of a Canvas exercise than anything) would be to ‘rewind’ the counters upon hitting 60/24/etc. instead of the sudden state change form 60->1.
Hey guys
I planned to do the rollback but I found the animation wasnt smooth enough (I could only do 2 fps without high cpu usage, i originally had it set to 4) and thought it would look ugly.
Maybe version 2?
@agrath: MooTools has some very smooth animation routines, maybe you could take a look and find some tips? :)
I would be keen to see v2.
Very Flash I like it.
I must say that I am leraning so much by reading these blogs.