Chroma Chrono: Using Color to Visualize Time

Chroma Chrono: Using Color to Visualize Time

I decided to experiment with using color to visualize time and the result is Chromo Chrono. It comes in two flavors: Pulse and Kinetic.

Pulse
--------
A series of concentric circles, going outwards from the centre, represent the hour, minute, second and millisecond. Each circle is colored on a scale that ranges from orange to black.

Depending on whether it is AM or PM, the innermost (hour) circle, gets brighter or darker. It is orange at noon and as the day progresses, it gets darker until it is black at midnight. From midnight to noon, it get progressively brighter until it is orange at noon and the cycle starts again.

Similarly, the minute and second circles go from orange to black once every hour and minute respectively in the AM and in the reverse direction in the PM. The millisecond circle pulses from orange to black or vice versa once every second.

This mechanism is inspired by nature–the overall brightness of the clock is an approximation of the overall brightness of the sky.

Kinetic
-----------
The Kinetic works on the same principle, except it has rings instead of circles and doesn’t show milliseconds.

The main difference, however is a guide inside of each ring that makes it easier to tell the time. In each ring, the point where the color of the ring matches the color of the guide represents the time in exactly the same way as on a traditional analog clock. If you look at the second ring closely, you will notice that it appears to be somehow moving. This an optical illusion caused by the fact that the point at which the ring and guides match is moving around the circumference of the clock.

Visit the following link for more information:
http://akshayluther.com/2012/07/08/chroma-chrono-using-color-to-visualiz...

Add a Comment

Login or register to post comments
 
Posted Jul 19, 2012
 
Views: 836
Tags time, clock
Tools HTML5, Javascript
Data No data sets referenced yet.
Share
Embed
<iframe src="http://www.visualizing.org/embedded/41136" width="620" height="450" frameborder="0" scrolling="no" marginheight="0" marginwidth="0"></iframe>
Need help embedding?