This is a clock that uses color to display the time. The goal is to show the time accurately and precisely in a way that does not make it easy to see exactly what time it is, so that you do not get preoccupied with time. You should use this instead of a regular clock if you are on vacation so that you break your addiction to knowing the hours and minutes as numbers.

The large field shows hours. The stripe along the right side shows minutes. At the top of the hour, the field and the stripe are the same color. As the minutes progress toward the next hour, the color of the stripe and the color of the field become more different until half-past, at which point they become more similar again. Midnight is blue. Noon is yellow.

You can see a larger version or pop-out a smaller version at Vidrio Cafe.

The “hour hand,” so to speak, is a 24-hour cycle from blue at midnight to yellow at noon and back again. For each time in the cycle, I calculate a color. Over the 24-hour day I have overlaid sine waves that start 8 hours apart. By calculating the amplitude of all three waves at any given time, I get a unique color.

The “minute hand” is the same basic idea, but there are two important differences. First, the sine waves go through a complete cycle in 60 minutes instead of 24 hours; and second, I have adjusted the cycle so that at the top of the hour the color of the “minute hand” matches the color of the “hour hand.” Midnight is blue-on-blue and noon is yellow-on-yellow, in other words.

The easiest way for me to think about these cycles was as circles, so in the code I actually translate the time of day into two angles from 0–360 degrees, one representing hours and the other representing minutes.

  • The angle for the hour hand is the hour times 15, plus the minute over 4. This correctly points the hour hand at the place it would appear on a real-world 24-hour clock that moved smoothly. At 01:00, for example, the hour hand is at 15 degrees; as the next 60 minutes pass the hour hand travels 15 degrees more until 02:00.
  • The angle for the minute hand is just minute times 6 plus the angle of the hour hand. Adding the angle of the current hour is necessary so that the minutes drift properly to match the color of the hour when we get back to the top of the clock. At 01:00 the minute hand is at 15 degrees to match the color of the hour hand; over the next 60 minutes it travels 360 degrees (minutes times 6) plus the changing angle of the hour hand so that at 02:00 the minute hand and hour hand match at 30 degrees.

Building a Physical Clock