The Colour Clock

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 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))) + ")"});
  };

I appreciate the pointlessness of being yet-another recreator, but hey, why not: http://davidlynch.org/toys/colorclock/ :D

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.

... perhaps because it should be h / 24 instead of h / 60 ?

  body.animate({"background-color":
                 "rgb(" + parseInt((h / 60) * 255) + "," +
                      parseInt((m / 60) * 255) + "," +
                      parseInt((s / 60) * 255) + ")"});

Haha, I just did the same thing: http://nerdlife.net/colorclock.html

Your solution, unlike the Flash one, utterly fails to spike my CPU.

That's a new one on me for things labelled "HTML5". :D

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.

Honest question - what is the HTML5 part in here (as opposed to I rewrote it in HTML+CSS+JS)?

Since we're sharing our HTML5 clocks which peg the processor: http://sandbox.mikepurvis.com/js/clock/

This seemed like a fun idea: Here's my remix of it, a bit more HTML5-ish:

http://labs.flog.co.nz/clock/

I did something very similar some time ago: http://pedro.si/experiments/color-clock/ It's CSS3 and some Javascript.

maybe they literally encode 9:27:40 as #092740

edit: definitely not, but I think there's a gradient overlay, which is causing the colors to appear brighter in the center.

That "full screen" button in the top-right.

Or, at least, that's the only thing I see there that you can't do with HTML/JS.

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.

Anyone feeling up to the challenge?

Probably easier to port it to a screensaver.

HSL might work better for that, though I'd cycle it around the spectrum, with the seconds value being the saturation percentage.

Maybe load it up on a Chumby? http://chumby.com

http://davidlynch.org/toys/colorclock/#hms http://davidlynch.org/toys/colorclock/#smh http://davidlynch.org/toys/colorclock/#mhs

Or any other order, really.

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 :)

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.

My favorite clock remains the Uniqlock: http://www.uniqlo.jp/uniqlock/

I missed it. It basically goes from white (well, very pale cyan) to bright red, right?

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)

done