I love XKCD’s web comics, they always give you a new way of looking at something and a laugh to boot. Yesterday at work I came accross the Now comic. It shows you at a glance what countries are in business hours, or outside them. The image is rendered on the XKCD server and updated every hour when you refresh your page.
I wanted to re-code the comic so that it updates automatically, as the day goes on, in the browser. Below is the finished product:
To automate the image I first broke it up into two parts:
- map.png This is the part of the image that will rotate as the day goes on.
- clock.png This is the outer ring that remains stationary and shows the time in each country.
Using a bit of JS logic I calculated the percentage of the day that had passed since 12 midday, converted this into degrees and used the CSS3 rotate property (I’ve only tested this in Chrome and Firefox) to rotate the map image the calculated amount. The image will update every 30 seconds while you have this window open.
You can play with the full source on JSFiddle.
Noticed a typo or error in this post? Fork and edit it on Github!