My blog has been moved to ariya.ofilabs.com.

Thursday, October 28, 2010

morphing clock revisited

If you can't see the clock below, visit the stand alone demo.

Technically, I had wanted to wait till it can display the actual time and perhaps ask some designer to polish it. But rather than keeping this lunch-break hack in a safe deposit box forever, let me just release this ugly clock transition (since everyone is on the animation frenzy). So far it works only if you use latest version of Safari, Chrome, Opera, Firefox. Canvas and/or VML fallback (which sadly will require JavaScript) for other browser are in the pipeline.

Basically it is another version of my previous morphing clock attempt (see the video). The principle is the same, except now I modified that C++ program to also output an HTML which renders the clock as above.

Also it morphs only once. Reload the page to enjoy the morphing once more. Maybe I'll find the time (in another lunch break) to toggle the two clock modes. Update: morphing from/to both analog and digital mode is implemented.

Like I said, it's a creepy, machine-generated, ugly looking clock. You've been warned, but feel free to write me anything (should you need to vent your anger).

6 comments:

Unknown said...

Waaaa... its super cool... gonna really need this someday. gud job.

Anonymous said...

And a grey background to make it look like an old skool Java applet! Nice ;-)

Benoit Jacob said...

Doesn't look good in FF 4 nightly. I get some weird frames; eventually it stabilizes to the expected result except that the point coords seem like half a pixel off, causing the curves to look strange.

Ariya Hidayat said...

@Benoit: Yes, FF4 is still rough on CSS transition.

Jeff Schiller said...

Why would you choose tons of rotated divs instead of SVG which is built for this sort of thing?

Ariya Hidayat said...

@Jeff: As an example of CSS3 transition/animation.