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 and Canvas, including the draw method:


  1. draw:function(){
  2.     this.clearCanvas();
  3.     var w = 20;
  4.     var r = 260;
  5.     this.date = new Date();
  6.     var cr = r;
  7.     $('labels').update()
  8.     $w("month day weekday space hour min second").reverse().each(function(interval){
  9.         cr = cr - w - w/2;
  10.         if(interval != 'space')
  11.         {
  12.             var ir = this.intervalToDegrees[interval].bind(this.date)();
  13.             var i = ((ir / 360) * 255) + 147;
  14.             var color = this.cc.rgbToCss(this.cc.hslToRgb(i.wrap(0,255),205,127));
  15.             this.drawSolidArc(color, cr, w, ir.toRadians());            
  16.             $('labels').insert(this.getIntervalLabel[interval].bind(this.date)() + '<br />');
  17.         }
  18.     }.bind(this));
  19. },

The article walks through a lot of Canvas as well as the Prototype side of things. Very thorough.

Posted by Dion Almaer at 6:31 am

3.6 rating from 23 votes


Comments feed TrackBack URI

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.

Comment by bclaydon — February 26, 2008

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?

Comment by agrath — February 26, 2008

@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.

Comment by bclaydon — February 28, 2008

Very Flash I like it.
I must say that I am leraning so much by reading these blogs.

Comment by Tribulus — September 22, 2008

Leave a comment

You must be logged in to post a comment.