6 ms·

Show HN: Mechanical clock simulation in WebGL

109 points by nikital 11y ago

callesgg 11y ago
cool
gus_massa 11y ago
Nice animation. I'd add the option to show the speed of each gear (a curved arrow around the axis, with a label "1 turn per 15 seconds", and perhaps the number of cogs in each gear). I'd like to see one additional simple version with only one gear, so it's easy to understand how the balance / anchor / escape work. Another nice version would be a linearized version, where all the gears are in a row, so they are easy to see. Bonus points for a smooth transformation from the linearized version to the actual version.
- nikital 11y ago
  Thanks for the feedback. Regarding the simple version, did you see that you can rotate, pan and zoom the camera? You can focus on the escapement to get a better view. You can also slow it down using the speed slider.
kqr2 11y ago
Nice! Can you give more details on how you made the simulation?
- nikital 11y ago
  Sure: I wrote it in Typescript, modeled everything in Blender and rendered with three.js. The simulation logic itself it in https://github.com/nikital/clock/blob/master/src/mechanics.ts https://github.com/nikital/clock/blob/master/src/mechanics.t.... That code is a bit messy but it gets the job done :)
dhritzkiv 11y ago
Zooming-in is a bit tricky as a page scroll is triggered. Might help to add event.preventDefault(); to the wheel event listener function.
- nikital 11y ago
  Oh, cross-browser issues. There shouldn't be any scroll bars at all... What browser/OS?
  - chrisdroukas 11y ago
    Safari 9 on OS X 10.11 has this behavior.
Renaud 11y ago
That was a useful animation: it made me realise that I didn't really know how a clock worked; I only had a fuzzy -and wrong- understanding of how the the parts worked together. Good use of visualisation and animation is an extremely powerful tool for triggering that aha! moment.
- Theodores 11y ago
  Me too, I went from thinking I sort of new something about how clocks work to actually understanding it properly for the first time ever, reading a small amount if text, again to get to the 'I get it' moment. I also think that this is possibly because this is a model of a real clock that really worked, once upon a time. So the WebGL model works as per the real world clock, not some 'example' model made from theoretical pieces.
aps-sids 11y ago
I'm not entirely sure, but zooming closer to gear teeth interaction, it looks like cogs aren't aligning perfectly like they do in real life? I'm viewing this in firefox, so that might be a reason as well.
- nikital 11y ago
  In real life the do align perfectly, otherwise they will get stuck. Here there are off a bit because 1. I didn't get the sizes absolutely right as I modeled it in Blender and not in a real CAD (like Gearotic) and 2. The gear simulation is iterative so some floating point error accumulates over time.
  - aps-sids 11y ago
    Thanks for the explanation :)
jonahx 11y ago
Nice. It seems that small spring is driving the "ticking" of the clock, so does the winding of the springs wind both the large and small spring? Also, it's surprising to me how the small spring could tick accurately, since I would think that it's rate of oscillation changes as the spring unwinds, so that you cannot rely on each tick being a constant amount of time. How is the problem avoided or mitigated?
- blacksmith_tb 11y ago
  The mainspring provides all the mechanical energy. The small spring is called the escapement, it spins one way, then back the other at a set frequency (typically 4, 6, or 8 times per second), letting the energy of the mainspring 'escape' gradually (instead of unwinding all at once, in a rush).
  - beeboop 11y ago
    So the small spring is what makes it run accurately? I wonder how hard it is to make the small spring accurate without modern tools (1800s technology).
    - rcurry 11y ago
      This provides a good description of how the balance wheel works: https://en.wikipedia.org/wiki/Balance_wheel https://en.wikipedia.org/wiki/Balance_wheel It is manually tuned, via weights and spring tension, to oscillate at a precise interval.
- rcurry 11y ago
  Think of the main spring as the battery, and the balance wheel as a kind of resistor. The balance wheel is manually tuned to oscillate at a specific rate, releasing the stored energy one little beat at a time. You are right that a mechanical system like that isn't perfect. You will get a kick out of a thing called a "Tourbillon" if you look that up - it was an attempt to improve the accuracy of mechanical movements by having the entire movement rotate as it unwound, in the hope of mitigating the effect of gravity on the accuracy of the watch over the course of the day.
trhway 11y ago
i hope next version will come with tri-axial tourbillon :)
kyberias 11y ago
Nice, but I don't think the escape wheel animation is correct. The explanation says it pushes something but I don't see it.
- X-Istence 11y ago
  The escape wheel is actually pushed indirectly by the large spring, it pushes against the metal pins that stop it from freely rotating. The smaller spring with the pendulum attached (the balance) then flicks the anchor which allows the escape wheel to advance one tick.
AlexMuir 11y ago
Nikita, this is brilliant. I've been doing some experiments with creating 3D models for How a Car Works using threeJS (there's a very basic alpha proof-of-concept at http://www.howacarworks.com/3D/charging-a-car-battery http://www.howacarworks.com/3D/charging-a-car-battery ). I'd love to commission you to create some moving models of car components - drop me an email if you're interested me@alexmuir.com
mherrmann 11y ago
Very cool and informative at the same time. Well done!
marincounty 11y ago
Balance wheel(oscillating wheel in demo. Its the brain. it keeps the time accurate)--->Lever escapement fork(looks like pin pallet. Your watch's fork looks more like a dinner fork)--->Escapement wheel--->Fourth wheel--->Third wheel--->Center wheel(holds the dial hands)---<>Barrel wheel(stores the power. connects to Center wheel). The small wheel connected to only the center wheel is the setting wheel. The animation makes the it so much easier than a verbal walk through. Couldn't stop chiming in; I am working on a pin pallet watch (Amida 542 movement) right now, and frustrated. The blue mainspring just broke, and its a weird size, measured in Dennison units. I need a social life. If interested in Watch repair buy Practical Watch Repairing by Donald De Carle, preferably 3rd. edition. to start your library. If you really want to build a watch from a chunk of brass, maybe a little gold, and watch lathe, buy George Daniels book Watchmaking. George Daniels invented the Co-axial escapement(an unusual escapement that Omega adopted, and might not need lubrication.), and was a great Watch Maker/machinist. He supposedly did his best work after 50.
christiangenco 11y ago
I think you mounted the main spring the wrong way? The way it is currently, the clock's operation would wind it tighter.
- nikital 11y ago
  You're right, I missed it. Nice catch :)
jonsen 11y ago
An Electrical Engineering View of a Mechanical Watch: http://video.mit.edu/watch/an-electrical-engineering-view-of-a-mechanical-watch-9035/ http://video.mit.edu/watch/an-electrical-engineering-view-of...
irascible 11y ago
Beautiful.
wbhart 11y ago
In Chrome, the minute hand didn't move anywhere near 10 minutes worth over 10 minutes of watching the mechanism. Are the gear mechanisms designed to accurately reproduce a real hour/minute clock, or is it just intended to be an example of the kind of mechanism used?
- lucideer 11y ago
  I'd imagine it's deliberately slowed mainly for illustrative purposes; for comparison the balance wheel in my watch is currently spinning too fast for me to see. It could also be an fps thing
imaginenore 11y ago
It's an animation, not a simulation. And not a very good one, gear teeth intersect all over the place: http://i.imgur.com/xDWigpp.jpg http://i.imgur.com/xDWigpp.jpg
- RobotCaleb 11y ago
  Where's yours?
  - imaginenore 11y ago
    Just because I'm not a writer, doesn't mean I can't point out the spelling errors in books.
codewritinfool 11y ago
It looks like the main spring is flipped 180 degrees. I speeded up the clock movement and it looks like it would be tightened, not loosened.
jeffehobbs 11y ago
This is really cool! WebGl is so difficult, UI-wise, on a tablet. It's not your fault, but I wish Apple would translate some of the desktop metaphors (scroll/pan/zoom) for this context.
tech_wizard 11y ago
Very well done

109 points by nikital 11y ago

cool

Nice animation. I'd add the option to show the speed of each gear (a curved arrow around the axis, with a label "1 turn per 15 seconds", and perhaps the number of cogs in each gear). I'd like to see one additional simple version with only one gear, so it's easy to understand how the balance / anchor / escape work. Another nice version would be a linearized version, where all the gears are in a row, so they are easy to see. Bonus points for a smooth transformation from the linearized version to the actual version.

nikital 11y ago
Thanks for the feedback. Regarding the simple version, did you see that you can rotate, pan and zoom the camera? You can focus on the escapement to get a better view. You can also slow it down using the speed slider.

kqr2 11y ago

Nice! Can you give more details on how you made the simulation?

nikital 11y ago
Sure: I wrote it in Typescript, modeled everything in Blender and rendered with three.js. The simulation logic itself it in https://github.com/nikital/clock/blob/master/src/mechanics.ts https://github.com/nikital/clock/blob/master/src/mechanics.t.... That code is a bit messy but it gets the job done :)

dhritzkiv 11y ago

Zooming-in is a bit tricky as a page scroll is triggered. Might help to add event.preventDefault(); to the wheel event listener function.

nikital 11y ago
Oh, cross-browser issues. There shouldn't be any scroll bars at all... What browser/OS?
- chrisdroukas 11y ago
  Safari 9 on OS X 10.11 has this behavior.

Renaud 11y ago

That was a useful animation: it made me realise that I didn't really know how a clock worked; I only had a fuzzy -and wrong- understanding of how the the parts worked together. Good use of visualisation and animation is an extremely powerful tool for triggering that aha! moment.

Theodores 11y ago
Me too, I went from thinking I sort of new something about how clocks work to actually understanding it properly for the first time ever, reading a small amount if text, again to get to the 'I get it' moment. I also think that this is possibly because this is a model of a real clock that really worked, once upon a time. So the WebGL model works as per the real world clock, not some 'example' model made from theoretical pieces.

aps-sids 11y ago

I'm not entirely sure, but zooming closer to gear teeth interaction, it looks like cogs aren't aligning perfectly like they do in real life? I'm viewing this in firefox, so that might be a reason as well.

nikital 11y ago
In real life the do align perfectly, otherwise they will get stuck. Here there are off a bit because 1. I didn't get the sizes absolutely right as I modeled it in Blender and not in a real CAD (like Gearotic) and 2. The gear simulation is iterative so some floating point error accumulates over time.
- aps-sids 11y ago
  Thanks for the explanation :)

jonahx 11y ago

Nice. It seems that small spring is driving the "ticking" of the clock, so does the winding of the springs wind both the large and small spring? Also, it's surprising to me how the small spring could tick accurately, since I would think that it's rate of oscillation changes as the spring unwinds, so that you cannot rely on each tick being a constant amount of time. How is the problem avoided or mitigated?

blacksmith_tb 11y ago
The mainspring provides all the mechanical energy. The small spring is called the escapement, it spins one way, then back the other at a set frequency (typically 4, 6, or 8 times per second), letting the energy of the mainspring 'escape' gradually (instead of unwinding all at once, in a rush).
- beeboop 11y ago
  So the small spring is what makes it run accurately? I wonder how hard it is to make the small spring accurate without modern tools (1800s technology).
  - rcurry 11y ago
    This provides a good description of how the balance wheel works: https://en.wikipedia.org/wiki/Balance_wheel https://en.wikipedia.org/wiki/Balance_wheel It is manually tuned, via weights and spring tension, to oscillate at a precise interval.
rcurry 11y ago
Think of the main spring as the battery, and the balance wheel as a kind of resistor. The balance wheel is manually tuned to oscillate at a specific rate, releasing the stored energy one little beat at a time. You are right that a mechanical system like that isn't perfect. You will get a kick out of a thing called a "Tourbillon" if you look that up - it was an attempt to improve the accuracy of mechanical movements by having the entire movement rotate as it unwound, in the hope of mitigating the effect of gravity on the accuracy of the watch over the course of the day.

trhway 11y ago

i hope next version will come with tri-axial tourbillon :)

kyberias 11y ago

Nice, but I don't think the escape wheel animation is correct. The explanation says it pushes something but I don't see it.

X-Istence 11y ago
The escape wheel is actually pushed indirectly by the large spring, it pushes against the metal pins that stop it from freely rotating. The smaller spring with the pendulum attached (the balance) then flicks the anchor which allows the escape wheel to advance one tick.

AlexMuir 11y ago

Nikita, this is brilliant. I've been doing some experiments with creating 3D models for How a Car Works using threeJS (there's a very basic alpha proof-of-concept at http://www.howacarworks.com/3D/charging-a-car-battery http://www.howacarworks.com/3D/charging-a-car-battery ). I'd love to commission you to create some moving models of car components - drop me an email if you're interested me@alexmuir.com

mherrmann 11y ago

Very cool and informative at the same time. Well done!

marincounty 11y ago

Balance wheel(oscillating wheel in demo. Its the brain. it keeps the time accurate)--->Lever escapement fork(looks like pin pallet. Your watch's fork looks more like a dinner fork)--->Escapement wheel--->Fourth wheel--->Third wheel--->Center wheel(holds the dial hands)---<>Barrel wheel(stores the power. connects to Center wheel). The small wheel connected to only the center wheel is the setting wheel. The animation makes the it so much easier than a verbal walk through. Couldn't stop chiming in; I am working on a pin pallet watch (Amida 542 movement) right now, and frustrated. The blue mainspring just broke, and its a weird size, measured in Dennison units. I need a social life. If interested in Watch repair buy Practical Watch Repairing by Donald De Carle, preferably 3rd. edition. to start your library. If you really want to build a watch from a chunk of brass, maybe a little gold, and watch lathe, buy George Daniels book Watchmaking. George Daniels invented the Co-axial escapement(an unusual escapement that Omega adopted, and might not need lubrication.), and was a great Watch Maker/machinist. He supposedly did his best work after 50.

christiangenco 11y ago

I think you mounted the main spring the wrong way? The way it is currently, the clock's operation would wind it tighter.

nikital 11y ago
You're right, I missed it. Nice catch :)

jonsen 11y ago

An Electrical Engineering View of a Mechanical Watch: http://video.mit.edu/watch/an-electrical-engineering-view-of-a-mechanical-watch-9035/ http://video.mit.edu/watch/an-electrical-engineering-view-of...

irascible 11y ago

Beautiful.

wbhart 11y ago

In Chrome, the minute hand didn't move anywhere near 10 minutes worth over 10 minutes of watching the mechanism. Are the gear mechanisms designed to accurately reproduce a real hour/minute clock, or is it just intended to be an example of the kind of mechanism used?

lucideer 11y ago
I'd imagine it's deliberately slowed mainly for illustrative purposes; for comparison the balance wheel in my watch is currently spinning too fast for me to see. It could also be an fps thing

imaginenore 11y ago

It's an animation, not a simulation. And not a very good one, gear teeth intersect all over the place: http://i.imgur.com/xDWigpp.jpg http://i.imgur.com/xDWigpp.jpg

RobotCaleb 11y ago
Where's yours?
- imaginenore 11y ago
  Just because I'm not a writer, doesn't mean I can't point out the spelling errors in books.

codewritinfool 11y ago

It looks like the main spring is flipped 180 degrees. I speeded up the clock movement and it looks like it would be tightened, not loosened.

jeffehobbs 11y ago

This is really cool! WebGl is so difficult, UI-wise, on a tablet. It's not your fault, but I wish Apple would translate some of the desktop metaphors (scroll/pan/zoom) for this context.

tech_wizard 11y ago

Very well done