The Colour Clock(thecolourclock.co.uk) |
The Colour Clock(thecolourclock.co.uk) |
Though the colours I'm getting are different. I wonder why.
I uploaded it here: http://lkozma.net/colorclock/
d = t.getTime()/(1000 * 60 * 60 * 24),
...
body.animate({"background-color":
"rgb(" +
(((d%2)==1) ? parseInt((h / 24) * 256) : (255-parseInt((h / 24) * 256))) + "," +
(((h%2)==1) ? parseInt((m / 60) * 256) : (255-parseInt((m / 60) * 256))) + "," +
(((m%2)==1) ? parseInt((s / 60) * 256) : (255-parseInt((s / 60) * 256))) + ")"});
};http://www.coloringout.com/colorclock
someone should make the timezones selectable :)
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.
body.animate({"background-color":
"rgb(" + parseInt((h / 60) * 255) + "," +
parseInt((m / 60) * 255) + "," +
parseInt((s / 60) * 255) + ")"});That's a new one on me for things labelled "HTML5". :D
Has he not heard of sleep(1) ? Saying "it's flash" is no excuse, flash is perfectly capable of sleeping.
edit: definitely not, but I think there's a gradient overlay, which is causing the colors to appear brighter in the center.
Small criticism: Why Flash?
Or, at least, that's the only thing I see there that you can't do with HTML/JS.
Anyone feeling up to the challenge?
edit: Hours corrected. Thanks wladimir
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): http://viewvc.red-bean.com/circles/trunk/?pathrev=3RGB 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.
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...
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)
I know I'd be happy to run this on my monitors!
Regardless, great job!
Or any other order, really.
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.
I can't wait for the switch at midnight (#FFFFFF -> #000000).
How are the color values related to the seconds here?
Funny and original idea though!
If you don't set a width then you get awkward spacing reflow when the digits change.
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
// 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");
}
http://pubs.opengroup.org/onlinepubs/009695399/functions/clo...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.
window.setInterval(frame, 1000);
Do: window.setTimeout('window.setInterval(frame, 1000)', 999-(new Date()).getMilliseconds());
That way the seconds will be properly synchronized.HTML5, CSS3, webfonts, and jQuery