Show HN: 300x288 pixel clock using HTML5 canvas and Javascript | Hacker News Reader

Show HN: 300x288 pixel clock using HTML5 canvas and Javascript

coding.pressbin.com

51 pointsjawns32 comments

Nice. I've got a minor obsession with alternative ways of displaying the time of day. I've made a canvas clock or two of my own, and I used http://www.let.rug.nl/kleiweg/abclock/ glued to my root window for the longest time.

I like that your clock simply displays the time of day as a visual ratio of time elapsed to time remaining. Of course, at the one-second-per-pixel scale, getting the precise time of day at a glance is a little tough.

Have you considered using color to earmark blocks of time? If it's 300 pixels wide, then a row is 5 minutes. Have you tried maybe some pinstriping on each sixth row to show hour marks? Maybe wider, like 2-hour blocks? I think it would give a lot more information in a single glance.

Do you think turning it 90 degrees and having it progress left to right would be easier or more intuitive? And what about the size? 300x288 has its advantages, but have you played with other aspect ratios?

I'm not trying to pick apart your work, I'm trying to suggest different ways to take it because I like what you've done. If you want to return fire, I made http://slumberheart.com/things/clock.html earlier this year and would love to hear some suggestions.

Quick & dirty hour marks:

  --- pixelclock.html.orig	2011-12-06 16:40:56.000000000 +0000
  +++ pixelclock.html	2011-12-06 16:39:43.000000000 +0000
  @@ -23,6 +23,7 @@
           var inpos = (y*width*4);
           for (var x = 0; x < width; x++) {
               var color = (y*width)+x < elapsed ? low : high;
  +            if (y % (3600/width)) { color = (color+128)/2; }
               imageData.data[inpos++] = r;
               imageData.data[inpos++] = g;
               imageData.data[inpos++] = b;

With hour stripes, labels and adjustable width (see source).

http://dl.dropbox.com/u/136288/pixelclock.html

i made this clock 6 years ago that was just 2 pixels wide:

http://jcs.org/notaweblog/2005/06/28/pixelclock/

it draws little notches along the right side of the screen, one for every hour, with green ones for special times (lunch, or time to leave). a yellow square just moves down the side of the screen as the day progresses.

I also had the same idea: http://timesliceapp.com That is just a landing page, no product actually exists.

Not so keen on the pop-out box design, but I quite like the general idea. If you want some design help, let me know.

Picturing it shading hours in the office, after-hours appointments, approximate lunch times, reminders to move cars or do other things.

Thanks for the offer. I really don't have any plans to pursue this idea, for various reasons. I did this quite a while ago. It ended up being more an experiment in landing pages and google ads.

The other obvious thing to do is to shade it to represent day and night.

Though that would require geoip location and a sun rise/set calculator.

I too made a canvas clock (though with a heavier dose of existentialism) a little while ago if you're interested.

link: http://morrow.github.com/Life-Clock/

code: https://github.com/morrow/Life-Clock/

Neat! Here are some pedantic suggestions:

<!DOCTYPE HTML> is necessary to let IE9 work without whining

imageData is slow and I'd avoid using it. In this instance you can accomplish the same effect with calls to fillRect.

As it stands right now, you are setting the fillStyle of the arc each time but only need to set it once since the fillStyle never changes. In fact, you probably don't even have to recreate the path each time, since the last path ought to still be there, so the only thing that needs to be in the loop for the arc is `ctx.fill();`! (Haven't tested, but that ought to be the case)

OP here. My plan is to next render a 270x365x320 brick in a similar manner.

I'll leave it up to you to figure out what that will represent.

I found this oddly depressing.

It's like realising that most people get around 4000 weekends for their lifetime, and then realising how many weekends you've already had.

I'm not sure it's worse (or better) to think "I'm halfway to 4000 weekends" than "I'm half way to 76 years"?

For me personally the 4000 weekends has more of an impact, because I can realistically picture what I would get done in any given couple of days.. 76 years seems a bit too much of a 'big picture' to really comprehend.

Equivalently, a few months ago someone online pointed out that you get about 1000 months to live. For some reason that gives me a huge sense of urgency.

Not to get too analytical or philosophical, but I think it's because clocks normally represent time cyclically, as a repetitive process counting and displaying a sub-set of an ethereal infinite time set. Whereas this clock visualizes time spatially in known, limited, diminishing quantities.

The depressing part is either that this forces you to realize or reminds you that time is, in fact, limited -- or that it tricks you into thinking time isn't infinite, depending on your philosophy.

Can someone please explain what makes this particular canvas experiment so interesting, especially because there are more interesting, complex and beautiful demos available showing the power of canvas with JS?

ooh - make a yearly one!!!

colours could be used to mean different things! day, night, summer, winter, full moons etc... cant think of a use for it right now, but I'm sure one will 'spring' to mind! ;-)

http://minimalissimo.com/2011/02/1px-clock, check out the comments too

This seems to force quirks mode in IE9, which prevents the pixel clock from displaying. Perhaps the missing DOCTYPE.

Lots of things like this don't seem to have even been tested in IE9, despite the fact it's (subjectively, to me at least) a decent browser that finally supports Canvas.

There's a good chance that someone having fun with canvas does not run a system which supports any version of IE... which might explain the lack of testing.

A missing doctype shouldn't have anything to do with the system, though, assuming that's what the problem is. Clearly other browsers are more forgiving.

I didn't mean it from the code standard perspective. In a live product, invalid html is bad regardless of a system and it should be tested in all browsers.

But for one-off interesting thing, you'll probably check it in browser(s) you have installed only, or maybe even only your favourite one... and it's unlikely that IE will be that browser. Just a reflection on the setup of an average webdev interested in canvas.

Not having a doctype does indeed cause IE to go into quirks mode. This is still true even in IE9. Thankfully, <!DOCTYPE html> is recognized correctly, even by IE6.

I don't test "personal" code on IE9. I couldn't if I wanted to: the only Windows license I have is for XP which I have running on my main desktop. At some point I might upgrade to 7 (unless before then I decide to live without games and switch to Linux on the desktop instead of moving to another Windows version) but that won't be until I next rebuild that machine. All my other computing resources run Linux in some form or another.

Perhaps the author of this code is in a similar position, and has no Windows Vista/7 installs to test via IE9 with? It doesn't matter how decent IE9 is, if it won't run on your current platforms.

Testing on Chrome, Firefox and Opera is more universally easy as their latest desktop releases will run on Linux, OSX and XP+.

If a missing or malformed DOCTYPE is an issue then that is not IE9's fault, but you can't criticise the author for not explicitly testing on IE9 if he/she can't do so.

If you read my post again, you'll see I said "lots of things like this" haven't been tested in IE9. It wasn't a personal attack on the author. Just a remark that it's unfortunate that despite the canvas support in IE9, a large amount of these sorts of things that get linked from HN don't work in the browser.

The reasons behind that I'm sure are numerous and valid for a lot of people, but they don't make it any less annoying for me as a regular IE9 user.

It used to be I only thought the day passed slowly. But now I can visualize it.

... I hate you.

It would be cool if you could change the start and end times. So instead of 00:00:00 and 23:59:59 I could do something like 09:00 - 16:59:59. Just another tool to get through the day!

cool but might be more useful if it's used as a timer rather than a clock or maybe with custom checkpoints. i don't particularly care about 12am-12am. i DO care how much time i have left at the office. or how much time i have till my bedtime. how far along i am in a task or in my own day, say there's a 9p-5p block, and 5p-11p block and a 11p-2am block. when i'm asleep i cant watch it and it could be excluded.

At initial glance I thought it was too lo-fi. Then I noticed the visual representation. This is nice inspiration, thanks!

What, no leap seconds?

Reply on news.ycombinator.com