
Show HN: Mechanical clock simulation in WebGL - nikital
https://nikital.github.io/clock/
======
AlexMuir
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

------
Renaud
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
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.

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

~~~
nikital
You're right, I missed it. Nice catch :)

------
wbhart
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
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

------
gus_massa
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
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.

------
marincounty
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.

------
jonahx
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
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
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
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.

------
dhritzkiv
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
Oh, cross-browser issues. There shouldn't be any scroll bars at all... What
browser/OS?

~~~
chrisdroukas
Safari 9 on OS X 10.11 has this behavior.

------
aps-sids
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
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
Thanks for the explanation :)

------
jonsen
_An Electrical Engineering View of a Mechanical Watch_ :

[http://video.mit.edu/watch/an-electrical-engineering-view-
of...](http://video.mit.edu/watch/an-electrical-engineering-view-of-a-
mechanical-watch-9035/)

------
jeffehobbs
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.

------
codewritinfool
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.

------
kyberias
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
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.

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

~~~
nikital
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.t...](https://github.com/nikital/clock/blob/master/src/mechanics.ts).
That code is a bit messy but it gets the job done :)

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

------
imaginenore
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
Where's yours?

~~~
imaginenore
Just because I'm not a writer, doesn't mean I can't point out the spelling
errors in books.

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

------
irascible
Beautiful.

------
callesgg
cool

