Color Clock
I have had this idea for many years to create a clock that tells time with color. What’s the point? Well, imagine that you are on vacation, perhaps in a rented cabin. You would like to have some idea what part of the afternoon you are in: should you be eating lunch or dinner? At the same time, you don’t want to be bound to the exact numerical hours and minutes. This is vacation, remember, not a normal workday. So this clock would just change its color gradually over the course of the day, giving you some idea what part of the day you are in but without a stifling level of precision.
My original idea was that there would be just one color, for the hour, but then I thought that was too static and abstract. I decided to add an area of color to indicate the “minute hand,” so to speak.
There are tons of people out there making color clocks online — look at this one, for example — but as far as I know, no one is doing it the same way I am. And no one has been trying to build a physical color clock for as long as I have. I have had the idea since at least 1990.
I have been thinking about this for years. I built prototypes using various different ways to change the color of an illuminated area. All of them were dismal failures, mainly because I was working in the analog world.
Luckily, here in the digital future, things are better! I’ve got an Arduino and I’m learning how to use it. In the mean time, I can prototype the clock using JavaScript and a web browser, and that is just what I’ve done. I wanted to take some time to figure out which combinations of colors and sizes are most pleasing.
If you want to see what I’ve come up with so far, go to my Color Clock page. There’s a pop-out window so you can put a clock on your screen and move it out of the way. I find it interesting to see out of the corner of my eye. Let me know what you think of it!
For those interested in how it works, it’s pretty simple.
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.
The result, in my view, is pretty pleasing. Let me know what you think.
