5 ms·

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

51 points by jawns 15y ago

revjx 15y ago
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 15y ago
  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 15y ago
    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 15y ago
      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.
    - city41 15y ago
      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.
- deleted 15y ago
  [deleted]
- dspillett 15y ago
  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.
  - revjx 15y ago
    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.
onemoreact 15y ago
I found this oddly depressing.
- bobbles 15y ago
  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_ 15y ago
    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 15y ago
      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.
  - a-priori 15y ago
    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.
- morrow 15y ago
  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.
mayanksinghal 15y ago
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?
slmbrhrt 15y ago
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/ 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 http://slumberheart.com/things/clock.html earlier this year and would love to hear some suggestions.
- sdfjkl 15y ago
  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 15y ago
    With hour stripes, labels and adjustable width (see source). http://dl.dropbox.com/u/136288/pixelclock.html http://dl.dropbox.com/u/136288/pixelclock.html
- there 15y ago
  i made this clock 6 years ago that was just 2 pixels wide: http://jcs.org/notaweblog/2005/06/28/pixelclock/ 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.
jawns 15y ago
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.
huhtenberg 15y ago
http://minimalissimo.com/2011/02/1px-clock http://minimalissimo.com/2011/02/1px-clock, check out the comments too
mrcharles 15y ago
It used to be I only thought the day passed slowly. But now I can visualize it. ... I hate you.
qntm 15y ago
What, no leap seconds?
tcarnell 15y ago
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! ;-)
Stenerson 15y ago
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 15y ago
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 15y ago
At initial glance I thought it was too lo-fi. Then I noticed the visual representation. This is nice inspiration, thanks!
simonsarris 15y ago
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)

51 points by jawns 15y ago

revjx 15y ago

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 15y ago
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 15y ago
  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 15y ago
    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.
  - city41 15y ago
    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.
deleted 15y ago
[deleted]
dspillett 15y ago
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.
- revjx 15y ago
  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.

onemoreact 15y ago

I found this oddly depressing.

bobbles 15y ago
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_ 15y ago
  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 15y ago
    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.
- a-priori 15y ago
  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.
morrow 15y ago
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.

mayanksinghal 15y ago

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?

slmbrhrt 15y ago

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/ 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 http://slumberheart.com/things/clock.html earlier this year and would love to hear some suggestions.

sdfjkl 15y ago
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 15y ago
  With hour stripes, labels and adjustable width (see source). http://dl.dropbox.com/u/136288/pixelclock.html http://dl.dropbox.com/u/136288/pixelclock.html
there 15y ago
i made this clock 6 years ago that was just 2 pixels wide: http://jcs.org/notaweblog/2005/06/28/pixelclock/ 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.

jawns 15y ago

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.

huhtenberg 15y ago

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

mrcharles 15y ago

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

qntm 15y ago

What, no leap seconds?

tcarnell 15y ago

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

Stenerson 15y ago

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 15y ago

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 15y ago

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

simonsarris 15y ago

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)