Show HN: An analog clock on html canvas

dmaydan.github.io

6 points·davidim··3 comments

It looks nice.

Only problem is that it though it only changes one time per second, the requestAnimationFrame() mechanism will cause the clock to wastefully repaint itself many times per second.

Actually instead of fixing that, maybe it would be possible to interpolate sub-second-precision positions, to have a smoothly moving second hand.

Or, here is an idea: simulate the impulse function of each pop of the second hand: how the hand overshoots, followed by the decaying oscillation known as "ringing".

Thanks for checking it out. I like the idea of making the hand move between seconds - I was actually thinking about doing something like that when originally making the clock - then I got too lazy and told myself that real clocks don’t do that so I don’t have to worry about implementing it :). Now it’s too late! I haven’t looked at the code for 2 days, and there are no comments! :)

I’m not sure what you mean with that last suggestion - I’m pretty sure you’re joking, but I still have no idea what you’re talking about.

What I'm talking about is that a real clock's hand doesn't instantaneously move from one position to another. It's an object with mass. It accelerates toward the new position, then overshoots it and then oscillates back and forth with a decaying vibration. You can see this well in larger wall clocks.

So that's just an alternative for doing something at the sub-second resolution, compared to just a smoothly rotating hand.

Reply on news.ycombinator.com