5 ms·

One Handed Clock using canvas and js

31 points by cubicle67 16y ago

cubicle67 16y ago
It's been pretty hot here yesterday (40ºC) and I was a bit bored, so I had a go at designing a clock with only one hand. I was happy with the result, but then didn't have anyone to show it to, hence this post. Works in Chrome and Safari and on iOS devices except the colours are a bit dark. Seems ok in FF, but the seconds take a while to sync with the hand. not sure why
- teejae 16y ago
  I like the fact that I can read the clock without looking in 2 places, just read down a line. Well done.
- auxbuss 16y ago
  I'd like to add a requirement for a 24-hour clock. And +1 for aligning the time top centre. Nice piece of work.
- cubicle67 16y ago
  not sure if anyone will read this (it's 4 days later) ... got some more free time, and added a bunch of options to the clock - there's a 'Show preferences' link in the top left now which will open a small panel. can now switch between 12/24 hr, fixed/moving hour hand, hide tick or sweep the second hand and chose from a selection of fonts and colours
unoti 16y ago
Cool, mesmerizing, innovative! Love it!
- cubicle67 16y ago
  thanks :)
Meept 16y ago
Can anyone else hear it ticking? (: Very cool.
cormullion 16y ago
Nice work, and an ingenious take on the more traditional one handed clocks/watches: http://24hourtime.info/2008/11/22/the-sound-of-one-hand-ticking/ http://24hourtime.info/2008/11/22/the-sound-of-one-hand-tick... and http://24hourtime.info/2010/04/28/the-sound-of-a-one-handed-clock/ http://24hourtime.info/2010/04/28/the-sound-of-a-one-handed-...
matthiaswh 16y ago
A little disorienting at first, but after I adjusted to it the concept is pretty cool. I just built an egg-timer using JS/CSS, but plan on translating it onto an HTML5 canvas as I work my way through the learning process (via Dive Into HTML5). Now I've yours as an example when I inevitably get stumped by something :)
shanked 16y ago
With a quick and easy modification of your code, you could make a 0 handed clock where the current time is always lined up at the top-center of the screen. That way, you only have to look at one place to find the time.
- cubicle67 16y ago
  done, but it's not the default. I've added a preferences dialog in the top left

31 points by cubicle67 16y ago

It's been pretty hot here yesterday (40ºC) and I was a bit bored, so I had a go at designing a clock with only one hand. I was happy with the result, but then didn't have anyone to show it to, hence this post. Works in Chrome and Safari and on iOS devices except the colours are a bit dark. Seems ok in FF, but the seconds take a while to sync with the hand. not sure why

teejae 16y ago
I like the fact that I can read the clock without looking in 2 places, just read down a line. Well done.
auxbuss 16y ago
I'd like to add a requirement for a 24-hour clock. And +1 for aligning the time top centre. Nice piece of work.
cubicle67 16y ago
not sure if anyone will read this (it's 4 days later) ... got some more free time, and added a bunch of options to the clock - there's a 'Show preferences' link in the top left now which will open a small panel. can now switch between 12/24 hr, fixed/moving hour hand, hide tick or sweep the second hand and chose from a selection of fonts and colours

unoti 16y ago

Cool, mesmerizing, innovative! Love it!

cubicle67 16y ago
thanks :)

Meept 16y ago

Can anyone else hear it ticking? (: Very cool.

cormullion 16y ago

Nice work, and an ingenious take on the more traditional one handed clocks/watches: http://24hourtime.info/2008/11/22/the-sound-of-one-hand-ticking/ http://24hourtime.info/2008/11/22/the-sound-of-one-hand-tick... and http://24hourtime.info/2010/04/28/the-sound-of-a-one-handed-clock/ http://24hourtime.info/2010/04/28/the-sound-of-a-one-handed-...

matthiaswh 16y ago

A little disorienting at first, but after I adjusted to it the concept is pretty cool. I just built an egg-timer using JS/CSS, but plan on translating it onto an HTML5 canvas as I work my way through the learning process (via Dive Into HTML5). Now I've yours as an example when I inevitably get stumped by something :)

shanked 16y ago

With a quick and easy modification of your code, you could make a 0 handed clock where the current time is always lined up at the top-center of the screen. That way, you only have to look at one place to find the time.

cubicle67 16y ago
done, but it's not the default. I've added a preferences dialog in the top left