The Colour Clock (opens in new tab)

(thecolourclock.co.uk)

271 pointshuangm15y ago86 comments

86 comments

naz15y ago

Awesome idea. I took some time to rewrite in HTML5: http://brisy.info/colors/

Though the colours I'm getting are different. I wonder why.

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

tunaslut15y ago

cool....I hacked in some timezones - 4 clocks on the page - local, london, new york, tokyo...if I got my maths right that is:

http://www.coloringout.com/colorclock

someone should make the timezones selectable :)

kemayo15y ago

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.

bruceboughton15y ago

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.

1 more reply

leot15y ago

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

naz15y ago

Yes, just corrected this thanks.

bkrausz15y ago

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

kaichanvong15y ago

Guys, get these on github. That way we can fork it & make it awesome as a team faster and better.

3 more replies

ars15y ago

Small bug: Single digit hex codes are showing without the leading zero - it's probably affecting the colors as well.

1 more reply

naz15y ago

Great minds and all. If you replace the html file in the screensaver bundle you can use yours (or mine) instead of the flash one.

1 more reply

Semiapies15y ago

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

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

light315y ago

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.

ars15y ago

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.

2 more replies

axomhacker15y ago

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

naz15y ago

Even though the implementation above doesn't use any HTML5-specific features, the term is becoming a synonym for Dynamic HTML.

1 more reply

mikepurvis15y ago

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

flog15y ago

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

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

flog15y ago

Added source to github at https://github.com/adamburmister/colour-clock

flog15y ago

And by HTML5 I mean HTML5+CSS3

angus7715y ago

It's a bit wonky when you use a variable-width font.

1 more reply

pedrokost15y ago

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

apgwoz15y ago

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.

dshankar15y ago

Simple & beautiful.

Small criticism: Why Flash?

kemayo15y ago

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.

personalcompute15y ago

You can actually, F11

2 more replies

thristian15y ago

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?

naz15y ago

Here's my attempt: http://brisy.info/colors It treats each section of the time as a hex pair, see colors.js for implementation.

edit: Hours corrected. Thanks wladimir

1 more reply

chrischen15y ago

Probably easier to port it to a screensaver.

kfogel15y ago

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

  http://viewvc.red-bean.com/circles/trunk/?pathrev=3

JonnieCache15y ago

The state of the art for custom geek clocks is in hardware AFAIC.

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

jablan15y ago

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.

Semiapies15y ago

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

mikeknoop15y ago

I feel like this would make an awesome desk or wall clock.

kadavy15y ago

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

cormullion15y ago

It's also on the iPhone app store (for £0.59), but it might be a different author.

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...

crassauto15y ago

I had done something similar around 2000 though I wasn't very sophisticated at programming so I think it's off...

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)

1 more reply

jefe7815y ago

This is pretty impressive. Would you consider porting to other OS'? I.e., Linux.

I know I'd be happy to run this on my monitors!

Regardless, great job!

george_morgan15y ago

Very similar to the Chromo http://prote.in/chromo colour clock, which has been around for a few years.

callumjones15y ago

This is cool, but does the screensaver also have to be in Flash? I'd prefer my fans to not spin up when my screensaver kicks in.

regularfry15y ago

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.

kemayo15y ago

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

Or any other order, really.

Someone15y ago

Any order, yes, but things like http://davidlynch.org/toys/colorclock/#hsh do not work yet.

1 more reply

regularfry15y ago

That's rather nice.

pointernil15y ago

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

regularfry15y ago

Yeah, HMS->HSL would be quite intriguing.

1 more reply

joshes15y ago

I wonder how well the color blind can detect second to second changes in hue? Not a complaint, just a genuine curiosity.

Any color blind out there care to comment?

RossM15y ago

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.

SoftwareMaven15y ago

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.

kevinburke15y ago

I still like the Polar Clock best... http://blog.pixelbreaker.com/polarclock

pharrington15y ago

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

OstiaAntica15y ago

That's hilarious!

rottencupcakes15y ago

The switch from 22:59 to 23:00 was stunning.

I can't wait for the switch at midnight (#FFFFFF -> #000000).

madcaptenor15y ago

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

oldstrangers15y ago

#FFFFFF to #000000 would be white to black.

1 more reply

tomerico15y ago

Feel free to modify your computer clock :)

1 more reply

madcaptenor15y ago

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

th15y ago

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?

wladimir15y ago

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)

wladimir15y ago

I'd like one that doesn't show the seconds (but does change the color every second). This is too distracting for me to really use.

Funny and original idea though!

grigy15y ago

Nice job, but why screensaver only for MacOS?

chrischen15y ago

I've turned off sleep mode so I can actually see this as my screensaver now.

edge1715y ago

that's quite beautiful

JoeAltmaier15y ago

iPhone app?

tr15y ago

done

j / k navigate · click thread line to collapse

86 comments

naz15y ago

Awesome idea. I took some time to rewrite in HTML5: http://brisy.info/colors/

Though the colours I'm getting are different. I wonder why.

lkozma15y ago

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

tunaslut15y ago

cool....I hacked in some timezones - 4 clocks on the page - local, london, new york, tokyo...if I got my maths right that is:

http://www.coloringout.com/colorclock

someone should make the timezones selectable :)

kemayo15y ago

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.

bruceboughton15y ago

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.

1 more reply

leot15y ago

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

naz15y ago

Yes, just corrected this thanks.

bkrausz15y ago

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

kaichanvong15y ago

Guys, get these on github. That way we can fork it & make it awesome as a team faster and better.

3 more replies

ars15y ago

Small bug: Single digit hex codes are showing without the leading zero - it's probably affecting the colors as well.

1 more reply

naz15y ago

Great minds and all. If you replace the html file in the screensaver bundle you can use yours (or mine) instead of the flash one.

1 more reply

Semiapies15y ago

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

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

light315y ago

ars15y ago

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.

2 more replies

axomhacker15y ago

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

naz15y ago

Even though the implementation above doesn't use any HTML5-specific features, the term is becoming a synonym for Dynamic HTML.

1 more reply

mikepurvis15y ago

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

flog15y ago

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

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

flog15y ago

Added source to github at https://github.com/adamburmister/colour-clock

flog15y ago

And by HTML5 I mean HTML5+CSS3

angus7715y ago

It's a bit wonky when you use a variable-width font.

1 more reply

pedrokost15y ago

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

apgwoz15y ago

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.

dshankar15y ago

Simple & beautiful.

Small criticism: Why Flash?

kemayo15y ago

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.

personalcompute15y ago

You can actually, F11

2 more replies

thristian15y ago

Anyone feeling up to the challenge?

naz15y ago

Here's my attempt: http://brisy.info/colors It treats each section of the time as a hex pair, see colors.js for implementation.

edit: Hours corrected. Thanks wladimir

1 more reply

chrischen15y ago

Probably easier to port it to a screensaver.

kfogel15y ago

  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=3

JonnieCache15y ago

The state of the art for custom geek clocks is in hardware AFAIC.

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

jablan15y ago

Semiapies15y ago

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

mikeknoop15y ago

I feel like this would make an awesome desk or wall clock.

kadavy15y ago

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

cormullion15y ago

It's also on the iPhone app store (for £0.59), but it might be a different author.

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...

crassauto15y ago

I had done something similar around 2000 though I wasn't very sophisticated at programming so I think it's off...

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)

1 more reply

jefe7815y ago

This is pretty impressive. Would you consider porting to other OS'? I.e., Linux.

I know I'd be happy to run this on my monitors!

Regardless, great job!

george_morgan15y ago

Very similar to the Chromo http://prote.in/chromo colour clock, which has been around for a few years.

callumjones15y ago

This is cool, but does the screensaver also have to be in Flash? I'd prefer my fans to not spin up when my screensaver kicks in.

regularfry15y ago

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.

kemayo15y ago

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

Or any other order, really.

Someone15y ago

Any order, yes, but things like http://davidlynch.org/toys/colorclock/#hsh do not work yet.

1 more reply

regularfry15y ago

That's rather nice.

pointernil15y ago

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

regularfry15y ago

Yeah, HMS->HSL would be quite intriguing.

1 more reply

joshes15y ago

I wonder how well the color blind can detect second to second changes in hue? Not a complaint, just a genuine curiosity.

Any color blind out there care to comment?

RossM15y ago

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.

SoftwareMaven15y ago

kevinburke15y ago

I still like the Polar Clock best... http://blog.pixelbreaker.com/polarclock

pharrington15y ago

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

OstiaAntica15y ago

That's hilarious!

rottencupcakes15y ago

The switch from 22:59 to 23:00 was stunning.

I can't wait for the switch at midnight (#FFFFFF -> #000000).

madcaptenor15y ago

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

oldstrangers15y ago

#FFFFFF to #000000 would be white to black.

1 more reply

tomerico15y ago

Feel free to modify your computer clock :)

1 more reply

madcaptenor15y ago

th15y ago

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?

wladimir15y ago

I'd like one that doesn't show the seconds (but does change the color every second). This is too distracting for me to really use.

Funny and original idea though!

grigy15y ago

Nice job, but why screensaver only for MacOS?

chrischen15y ago

I've turned off sleep mode so I can actually see this as my screensaver now.

edge1715y ago

that's quite beautiful

JoeAltmaier15y ago

iPhone app?

tr15y ago

done

j / k navigate · click thread line to collapse