Smooth colour clock

This morning on HN: The Colour Clock (notice the .uk in the domain :).
An elegant clock with changing background color. The exact color is obtained by interpreting the hour, minute, second values as describing the Red, Green, Blue components of the color.
Link here.

The original was in flash, but Brian Collins quickly put together a version using HTML, CSS and JavaScript.
Here is his version:

My only tweak on this idea is to make the color-cycle continuous. When the seconds move from 59 to 00 there is a jump in the Blue value from maximum to minimum, which means a not-so-smooth transition in the background color.

To overcome this, I make the Blue value alternate between going up and coming down, depending on whether the previous value is odd or even. Similarly for the Green value (minutes), depending on the hour value. The Red (hour) value will go up or down according to the parity of the number of days since some remote date in the past. The javascript/jquery code achieving this can be examined (it is just a minor modification of Brian’s code). Now the clock still cycles through all colors but without sudden jumps (and now the numbers are harder to interpret directly as colors).

Here is the working version:
smooth cycling color clock.


There are no comments yet...Kick things off by filling out the form below.

Leave a Comment