7 ms·
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.n
by 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 agoQuick & 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 agoWith 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 agoi 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.
- city41 15y agoI also had the same idea: http://timesliceapp.com http://timesliceapp.com That is just a landing page, no product actually exists.
- prawn 15y agoNot 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.
- city41 15y agoThanks 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.
- Avshalom 15y agoThe 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.
- morrow 15y agoI 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/ http://morrow.github.com/Life-Clock/ code: https://github.com/morrow/Life-Clock/ https://github.com/morrow/Life-Clock/