

Show HN: 300x288 pixel clock using HTML5 canvas and Javascript - jawns
http://coding.pressbin.com/files/122-pixelclock.html

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

~~~
sdfjkl
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;

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

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

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

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

------
onemoreact
I found this oddly depressing.

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

~~~
corin_
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"?

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

------
mayanksinghal
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?

------
tcarnell
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! ;-)

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

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

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

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

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

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

... I hate you.

------
Stenerson
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!

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

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

------
qntm
What, no leap seconds?

