Monday, November 7, 2011

Color of Time

I was stumbling and came across this site:

It changes the background color for every second of time.  The obvious way to do this would be the convert the HH:MM:SS of time into a RGB value.  However, it was clear that wasn't what that site was doing, because the color changed dramatically every second.  I thought perhaps there was something more interesting going on.  It did mention that every second would have a unique color, which would imply that it took the date into account too.  I thought perhaps it took the unix epoch time and converted that into hex values.  It could use a simple hash of the time and then just take the last 3 hex pairs and use them directly.  That wouldn't absolutely guarantee unique times, but it would be about as close as you could get with the limited space of RGB values.  Since 2563 = 16,777,216 you'd have enough colors to only have to use each twice per year.

I checked the source, and was somewhat disappointed to see it was just generating random values.  I guess it was just a concept.  You could at least seed the RNG with the hour, minute, or second values.

I decided it would be somewhat interesting to see it implemented the way I had originally envisioned it, and set out to make it.  I began by copying his code since it was relatively easy to follow.  However, every time I attempt to use javascript I'm reminded of the inadequacy of my "pretend it's just C++" method of programming it.  So, I scrapped the code and started over from scratch.  After more troubles trying to figure out how to do things that should be simple in javascript, I got it working pretty well.  There are still some things I'd like to change, but that's not very likely.

I'll admit his is prettier than mine, but I think mine is more interesting to watch.  In order to make full use of the color space I'm not directly using the HMS values.  I'm converting them into a ratio and then multiplying that by 255.  In other words (#seconds/60) *255.  This allows a just barely perceptible change in color each second.  Also, I wanted to make the foreground color complementary colors.  However this is apparently not that easy to do.  I ended up just subtracting each hex pair from 255, which gives sometimes complementary colors, and painfully jarring colors the rest of the time.

No comments:

Post a Comment