ineedmoretime.org - A HTML5 analog clock experiment
During an unofficial phpugdo hackathon with a lot of nice guys last weekend, I came up with the idea to write an analog clock using some of HTML5s new features. Completely without Flash. I had done this before using CSS3-Rotation (CSSClock), but this time I wanted something with nice graphics and even nicer animations.
Screenshot of the analog clock in actionMy first thought was to use <canvas> to render the clock. But after some further thinking I decided to use Raphael js, because I didn't want to reinvent the wheel. Furthermore I wanted a play with this library for quite some time. Raphael js is a vector based drawing and animation library written in Javascript. It utilizes the svg rendering capabilities of modern browsers for drawing and provides a neat set of animation functionality.
After I started to work on the clock I got asked a lot of times by my fellow ug members if it was already finished. That is how I came up with the idea of ineedmoretime.org. If you aren't finished with something yet, you can simply click the "I need more time" button to turn the time back one hour ;). Wouldn't it be wonderful to have this sort of timeshifting device in reality? I would certainly love to have one ;).
I published the full source code used to create the ineedmoretime.org page over at github. Maybe this stuff is useful to somebody. I had quite some fun writing it and am happy to had some time playing around with Raphael and Co.