It should be simple enough to implement in HTML - it looks like it's just doing (seconds since midnight × 16777215 / 86400), converting to hex and using that as a colour. Toggling between "clock" and "colour" mode would be a bit more difficult, but doable.
The hex clock seems to jump every once in a while, probably compensating for the large difference in the number of hexadecimal color values and seconds in a 24 hour day.
How are the color values related to the seconds here?
As I understand: hours are red, minutes are green, seconds are blue. Simply formulated as HTML color #HHMMSS (and with each component scaled appropriately to 00..FF so that 00:00:00 is #000000, 23:59:59 is #FFFFFF)
I'm on a P4 3Ghz at the moment, whereby I can hear my CPU buzzing away when its under load. On the .co.uk site the buzzing is audible, its taking >70% of the CPU, whereas on your site its nice and quiet taking just 6% of the CPU.
I can not figure out how such a simple program can manage to take up 100% of my CPU, and despite that not be in sync with my actual clock (it's a random fraction of a second off).
Has he not heard of sleep(1) ? Saying "it's flash" is no excuse, flash is perfectly capable of sleeping.
Updating a clock to display the correct time is actually difficult and involved, sleep(1) will not work! The problem reminds me of this Intel article on syncing video output [1]
Basically, sleep(1) won't always align with clock updates, so sometimes a given time will display for more or less time than a second. This can be observed by opening the clock widget on Windows XP for example, it's very noticeable. I don't actually know a nice way to do it, maybe updating 10 times per second or so?
On POSIX systems, clock_nanosleep() can accept an absolute time argument.
// In a real program one would probably not use time()
// Also, some older pre-release versions of the realtime
// kernel patches had the clock_nanosleep() and time()
// clocks out of sync by 0.5s (IIRC)
for(;;) {
struct timespec after_epoch = { .tv_sec = time(NULL) + 1, .tv_nsec = 0 };
// Check for EINTR in a real program
clock_nanosleep(CLOCK_REALTIME, TIMER_ABSTIME, &after_epoch, NULL);
printf("Tick\n");
}
Rather useful in this case could be an adaptive method. First, you update every 50ms until you circled in the moment when the second toggles. Then you can do sleep(1) again and save resources.
Alternatively, use time() to only sleep the remaining timespan until the next second.
Well to get technical there isn't a "sleep" function in flash. The best you can do is use setTimeout, which will call a function back in a specified amount of time. Everything including screen drawing, mouse interaction, effects/animations, code execution, etc all run in a single thread, which means if you could actually sleep(1) it would lock everything up for the full second.
My quirk is that you can stick a fragment on the end to change the mapping of time to hex. e.g. http://davidlynch.org/toys/colorclock/#smh is seconds=red, minutes=green, hours=blue.
It'd be great if you could add the necessary meta tags to make this fullscreen when saved to home screen on a iOS device. No need for an icon -- iOS already frames the time nicely.
Here's a version that cycles through the colors continuously (without jumps). Now the numbers do not directly corespond to the color code anymore (they alternate going up-down). Also you can multiply by 256, as the maximum is not reached for any of the values.
I'm red-green colour blind but have difficulty in describing colours in general (I see them and know what they are but sometimes (and especially if they're under a coloured light) I can't specifically say what colour a wall is, for example).
This is quite interesting as I can't really see second-by-second changes; at most I can see small jumps (not the radically large ones) you get every few seconds.
I'm not color blind, yet that is what I see, too. Makes me wonder about the brain's color-processing. My guess is small variations are ignored by the brain because slightly changing light conditions can cause all colors to vary slightly over time. Your brain filters them out so you can only tell when something really is changing.
A shame that the fastest-moving value is placed in the portion of the spectrum where we have the least colour sensitivity. I'd have put hours in blue, myself. If I'd thought of it.
I'm quite sure there are much more mappings from hh:mm:ss -> rgb which would be even more interesting or even practical.
For sure the internet will iterate on this idea in just a few seconds :)
Clocks are a common beginner project in DIY hardware, they are both simple to make and have good potential for adding stuff like RSS readers and so on when you want to branch out.
Jim Blandy wrote a similar program for X Windows around 1992: a beautiful color clock that would sit on your desktop's root windown and slowly cycle through the colors over the course of an hour. It didn't even show digits -- you just had to learn the colors :-). I think it depended on X supporting writeable color cells, though, so it would need to be rewritten to work on most modern systems (which generally seem to not be set up that way).
http://svn.red-bean.com/repos/circles/trunk/
Hmm, but that's after I started making some mods. For best results, try an earlier rev (this was converted from CVS, hence the weird log message):
It would be nice if the colour was meaningful, i.e. if one could, at least roughly, guess the time based on the colour. Say, that the brightness would reflect time of day (brightest at noon, darkest at midnight) and the hue the time within the hour.
It would be interesting to see what would happen if the colors were given by following a space-filling curve in three dimensions, like the last figure at http://mathworld.wolfram.com/HilbertCurve.html
94 comments
[ 2.6 ms ] story [ 136 ms ] threadI can't wait for the switch at midnight (#FFFFFF -> #000000).
I know I'd be happy to run this on my monitors!
Regardless, great job!
Funny and original idea though!
Small criticism: Why Flash?
Anyone feeling up to the challenge?
edit: Hours corrected. Thanks wladimir
Or, at least, that's the only thing I see there that you can't do with HTML/JS.
How are the color values related to the seconds here?
Though the colours I'm getting are different. I wonder why.
HTML5, CSS3, webfonts, and jQuery
Has he not heard of sleep(1) ? Saying "it's flash" is no excuse, flash is perfectly capable of sleeping.
Basically, sleep(1) won't always align with clock updates, so sometimes a given time will display for more or less time than a second. This can be observed by opening the clock widget on Windows XP for example, it's very noticeable. I don't actually know a nice way to do it, maybe updating 10 times per second or so?
[1] http://software.intel.com/en-us/articles/video-frame-display... - it's down right now, one of the diagrams illustrates the problem well though: http://software.intel.com/file/3984
Unfortunately, this probably doesn't help with Flash or JavaScript clock demos.
Alternatively, use time() to only sleep the remaining timespan until the next second.
My quirk is that you can stick a fragment on the end to change the mapping of time to hex. e.g. http://davidlynch.org/toys/colorclock/#smh is seconds=red, minutes=green, hours=blue.
I uploaded it here: http://lkozma.net/colorclock/
http://www.coloringout.com/colorclock
someone should make the timezones selectable :)
http://labs.flog.co.nz/clock/
If you don't set a width then you get awkward spacing reflow when the digits change.
edit: definitely not, but I think there's a gradient overlay, which is causing the colors to appear brighter in the center.
That's a new one on me for things labelled "HTML5". :D
Any color blind out there care to comment?
This is quite interesting as I can't really see second-by-second changes; at most I can see small jumps (not the radically large ones) you get every few seconds.
Or any other order, really.
Associating time with colour has been tried many times - eg the Chromachron watch was briefly famous:
http://www.ubergizmo.com/2006/11/chromachron-too-advanced-fo...
RGB LED color clock: http://www.youtube.com/watch?v=BKT-0qB9l8A&feature=relat...
I also enjoy the classic 'pong clocks' http://www.youtube.com/watch?v=PHxbknBYYAQ&feature=playe...
Clocks are a common beginner project in DIY hardware, they are both simple to make and have good potential for adding stuff like RSS readers and so on when you want to branch out.
http://hackaday.com/?s=clock
http://minus20.e-2.org/artists_projects_chriso.html
Last year I re-made it as a free iOS app which takes the time and converts it using a RGB>HEX function I found that I think is correct:
http://itunes.apple.com/us/app/time-as-color/id335133255?mt=...
I also made one that sets Hour, Minute to latitude,longitude in Google maps which I like looking at: http://itunes.apple.com/us/app/time-as-place/id336539483?mt=...
(edited second link)