(almost) murphy.de - A 24h Analog Wall Clock

Tue 2009-02-24 ( pr En )

It’s final. I fell in love with JavaScript.

I still love Ruby, but she can’t do this:

(Essentially the clock from the Mozilla Canvas tutorial, a little tweaked.)

No GIF, no Flash, no Silverlight, no SVG, no ugly hacks – just HTML and JavaScript. As an added bonus, it doesn’t work in Internet Exploder.

So what is it?

<canvas> is a HTML5 standard element. It renders simple graphics, easy to learn, scriptable with JavaScript, and quite fast. There are even people that do ray tracing with it!

Nihilogic Games has a catalogue of very nice games realized with canvas. My favorite is World of Solitaire – Klondike (Turn One) (edit: this one uses canvas only for the statistic graphs) with the manga style cards :D The interactive blob demo is actually a bit weird, although technically impressive.

Another example – Love Parade!

(May start your CPU fan.)

Code?

Just see the source for this page.

Say something! / Sag was!

that is funny. my local clock has already summer time but at this canvas clock one hour is still missing.. mysterious..

bovi @ 02:16 on Sunday, 2009-04-05

I noticed it too...strange thing.

murphy @ 23:25 on Wednesday, 2009-04-08

a quick modification pending: u need to modify to this
ctx.rotate( hr* (Math.PI/12) + (Math.PI/720)*min + (Math.PI/43200)*sec ) (meaning: duplicate also min and sec values to really divide per 24 ;-)

Roger Waters @ 19:41 on Wednesday, 2011-09-14