Hacker News Reader

Comment by naz | Hacker News Reader

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

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

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.

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.

Heh, sure, why not? It now has apple-mobile-web-app-capable=yes.

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

Yes, just corrected this thanks.

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

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.

Instead of:

  window.setInterval(frame, 1000);

Do:

  window.setTimeout('window.setInterval(frame, 1000)', 999-(new Date()).getMilliseconds());

That way the seconds will be properly synchronized.

Instead of a string containing code, you should use an anonymous function.

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

Fixed, thanks.

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

Here: https://github.com/briancollins/color-clock

https://github.com/adamburmister/colour-clock

HTML5, CSS3, webfonts, and jQuery

Similar pull request sent to you too! :)

Behind the curve here: https://github.com/kemayo/colorclock

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.

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?

[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

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

http://pubs.opengroup.org/onlinepubs/009695399/functions/clo...

Unfortunately, this probably doesn't help with Flash or JavaScript clock demos.

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.

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

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

I'd also argue it's becoming a synonym for "Not Flash!?!"

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/

And by HTML5 I mean HTML5+CSS3

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

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

Yeah. I moved to ems, thinking that would help, but it's still an issue.

If you don't set a width then you get awkward spacing reflow when the digits change.

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.

Reply on news.ycombinator.com