31:T1618,Watch_mechanism = { // Load the external SVG const drawing = await swiss_lever_escapement.text(); const SVGDocument = (new DOMParser).parseFromString(drawing, "image/svg+xml"); const externalSVGElement = SVGDocument.documentElement; const svg = d3.create("svg") .attr("width", SVG_width) .attr("height", SVG_width); // Append spiral to the SVG const path = svg.append("path") .attr("id", "animated_spring") .attr("fill", "none") .attr("stroke", color) .attr("stroke-width", thickness); // Append the external SVG to the current one svg.node().appendChild(externalSVGElement); // Hide part of the illustrations svg.select("#spring").style("display", "none"); svg.select("#Rotations").style("display", "none"); if (hide_balance_wheel) { svg.select("#Balance").style("display", "none"); } // Center of the balance wheel const Balance_wheel_center = svg.select("#Center"); // Center of rotation const cx_Balance = parseFloat(Balance_wheel_center.attr("cx")); const cy_Balance = parseFloat(Balance_wheel_center.attr("cy")); // Center of the fork const Fork_center = svg.select("#Rotation_fork_2_"); // Center of rotation const cx_Fork = parseFloat(Fork_center.attr("cx")); const cy_Fork = parseFloat(Fork_center.attr("cy")); // Center of the escapement const Center_escapement = svg.select("#Center_escapement_2_"); const cx_escapement = parseFloat(Center_escapement.attr("cx")); const cy_escapement = parseFloat(Center_escapement.attr("cy")); // Rotate the balance wheel const Central_part_balance_wheel = svg.select("#Center_balance_wheel"); const Balance_wheel = svg.select("#Balance_wheel"); Central_part_balance_wheel.attr("transform", `rotate(${rotationDegrees - offset_balance}, ${cx_Balance}, ${cy_Balance})`); Balance_wheel.attr("transform", `rotate(${rotationDegrees - offset_balance}, ${cx_Balance}, ${cy_Balance})`); // Rotate the fork const Fork = svg.select("#Palet_fork"); if(rotationDegrees > balance_angle1 && rotationDegrees < balance_angle2){ mutable fork_angle = Math.max(fork_angle1, Math.min(fork_angle2, fork_angle2/2 - 0.35*rotationDegrees)); // Fine tuned empirically mutable transition = true; } else if(rotationDegrees > balance_angle1){ mutable fork_angle = fork_angle1; } else if(rotationDegrees < balance_angle2) { mutable fork_angle = fork_angle2; } Fork.attr("transform", `rotate(${mutable fork_angle}, ${cx_Fork}, ${cy_Fork})`); if(mutable transition && (rotationDegrees < balance_angle1 -10 || rotationDegrees > balance_angle2 +10)) { mutable counter += 1; mutable transition = false; } // Rotate the escape wheel const Escape_wheel = svg.select("#Escape_wheel"); if(fork_angle == fork_angle1 || fork_angle == fork_angle2) { if(fork_angle == fork_angle1 && mutable counter % 2 != 0) { mutable counter += 1; } // Make sure that the counter is properly initialized // (We check if it is an odd or even value.) mutable escapement_angle = fork_angle == fork_angle1 ? (escape_angle1 - (mutable counter/2)*(360/15)) %360 : (escape_angle2 - (mutable counter/2)*(360/15)) %360; } Escape_wheel.attr("transform", `rotate(${mutable escapement_angle}, ${cx_escapement}, ${cy_escapement})`); // Hairspring // Modify the color and thickness of the spring buckle in the external SVG svg.select("#spring_x5F_2_1_") .attr("stroke", color) .attr("stroke-width", thickness); updateSpiral(); function calculateB(r1, r2, turns) { const finalAngle = turns * Math.PI * 2; return (r2 - r1) / finalAngle; } function updateSpiral() { const centerX = cx_Balance; // Center of the spiral (x) const centerY = cy_Balance; // Center of the spiral (y) const rotationAngle = (rotationDegrees * Math.PI) / 180; // Convert degrees to radians // Calculate effective number of turns considering rotation const effectiveTurns = turns - (rotationDegrees / 360); // Calculate parameter "b" to ensure the spiral ends at r2 after the effective number of turns const adjustedB = calculateB(R1, R2, effectiveTurns); // Generate the spiral points let points = []; for (let i = effectiveTurns * Math.PI * 2; i >= 0; i -= 0.05) { let r = R1 + adjustedB * i; let x = centerX + r * Math.cos(i); let y = centerY + r * Math.sin(i); points.push({ x, y }); } // Apply rotation transformation to each point const rotatedPoints = points.map(p => { let dx = p.x - centerX; let dy = p.y - centerY; let xRotated = centerX + (dx * Math.cos(rotationAngle) - dy * Math.sin(rotationAngle)); let yRotated = centerY + (dx * Math.sin(rotationAngle) + dy * Math.cos(rotationAngle)); return { x: xRotated, y: yRotated }; }); // Build the path data let pathData = `M ${rotatedPoints[0].x},${rotatedPoints[0].y}`; rotatedPoints.slice(1).forEach(p => { pathData += ` L ${p.x},${p.y}`; }); // Apply vertical flip and 90° rotation transformation path.attr("d", pathData) .attr("transform", `translate(0, ${2 * centerY}) scale(1, -1) rotate(-90, ${centerX}, ${centerY})`); } // Create a container for the SVG and add a border const container = d3.create("div") .style("border", "1px solid black") .style("display", "inline-block") .style("padding", "0px"); container.node().appendChild(svg.node()); // Append SVG to the container return container.node(); // Return the container node } 32:T4e6,--- ## Useful links * [Swiss lever escapement mechanism](https://sketchfab.com/3d-models/swiss-lever-escapement-mechanism-96cf82a6bdcd4ddda7635fbd33d0e016): Explore an animated 3D model of this mechanism. * [How a watch works](https://youtu.be/WYBvt9kA3bE): A vintage 1949 video from Hamilton Watch Co. that perfectly explains the operating principle of a mechanical watch using the Swiss lever escapement. * Other Observable notebooks: * [Horology](https://observablehq.com/d/07fb3d205ffe5f48?collection=@christophe-yamahata/horology): Browse the menu on the left to discover a collection of Observable notebooks focused on mechanical horology. * How to [animate an SVG](https://observablehq.com/@christophe-yamahata/interactive-svg-manipulation) created in Adobe Illustrator * [Animated spiral](https://observablehq.com/d/4e014adcf0e9ba02) * [How to animate an SVG illustration](https://youtube.com/shorts/iAGxPy0OLgg): In this YouTube Short, I describe the process in just 1 minute, using the example of the Swiss lever escapement. * Mechanical watch explained in a blog by [Bartosz Ciechanowski](https://ciechanow.ski/mechanical-watch/). * Mechanical watch explained by [Animagraffs](https://animagraffs.com/mechanical-watch/) (Jacob O’Neal).33:Ta6a,// https://observablehq.com/@mbostock/scrubber function Scrubber(values, { format = value => value, initial = 0, direction = 1, delay = null, autoplay = true, loop = true, loopDelay = null, alternate = false } = {}) { values = Array.from(values); const form = html``; let frame = null; let timer = null; let interval = null; function start() { form.b.textContent = "Pause"; if (delay === null) frame = requestAnimationFrame(tick); else interval = setInterval(tick, delay); } function stop() { form.b.textContent = "Play"; if (frame !== null) cancelAnimationFrame(frame), frame = null; if (timer !== null) clearTimeout(timer), timer = null; if (interval !== null) clearInterval(interval), interval = null; } function running() { return frame !== null || timer !== null || interval !== null; } function tick() { if (form.i.valueAsNumber === (direction > 0 ? values.length - 1 : direction < 0 ? 0 : NaN)) { if (!loop) return stop(); if (alternate) direction = -direction; if (loopDelay !== null) { if (frame !== null) cancelAnimationFrame(frame), frame = null; if (interval !== null) clearInterval(interval), interval = null; timer = setTimeout(() => (step(), start()), loopDelay); return; } } if (delay === null) frame = requestAnimationFrame(tick); step(); } function step() { form.i.valueAsNumber = (form.i.valueAsNumber + direction + values.length) % values.length; form.i.dispatchEvent(new CustomEvent("input", {bubbles: true})); } form.i.oninput = event => { if (event && event.isTrusted && running()) stop(); form.value = values[form.i.valueAsNumber]; form.o.value = format(form.value, form.i.valueAsNumber, values); }; form.b.onclick = () => { if (running()) return stop(); direction = alternate && form.i.valueAsNumber === values.length - 1 ? -1 : 1; form.i.valueAsNumber = (form.i.valueAsNumber + direction) % values.length; form.i.dispatchEvent(new CustomEvent("input", {bubbles: true})); start(); }; form.i.oninput(); if (autoplay) start(); else stop(); Inputs.disposal(form).then(stop); return form; }34:[{"id":"a10ab92037159e83a94412bf830d69bf7c08584a92bcea282100670091ff121a1d2c52e42f66a0640646ac346372291e3f83a9697133b1077c211aa1cbc421be","href":"https://static.observableusercontent.com/files/a10ab92037159e83a94412bf830d69bf7c08584a92bcea282100670091ff121a1d2c52e42f66a0640646ac346372291e3f83a9697133b1077c211aa1cbc421be","name":"Swiss_lever_escapement.svg","type":"image/svg+xml","lastModified":1725817324061.576,"size":33404},{"id":"c561de33b84bd31d45b38c1a7ad82d679f5e374d0f0c3781f1d560dc126e7969d7707a3b4644a541f5c733de02e1afe083a36a903d76785d93458eb65d3f2120","href":"https://static.observableusercontent.com/files/c561de33b84bd31d45b38c1a7ad82d679f5e374d0f0c3781f1d560dc126e7969d7707a3b4644a541f5c733de02e1afe083a36a903d76785d93458eb65d3f2120","name":"How_a_watch_works_Hamilton_1949.png","type":"image/png","lastModified":1725823869579.788,"size":764625}] 2f:{"title":"Watch mechanism: Swiss lever escapement","cells":[{"id":0,"value":"# Watch mechanism: Swiss lever escapement","pinned":false,"hidden":false,"mode":"md"},{"id":1161,"value":"The Swiss lever escapement is the most widely used regulating mechanism in mechanical timepieces. This notebook offers an interactive way to explore how a mechanical watch works. You can adjust the oscillation speed, change the amplitude of the balance wheel (or hide it if needed), and customize the hairspring to observe its rhythmic motion.\n ","pinned":false,"hidden":false,"mode":"md"},{"id":34,"value":"viewof rotationDegrees = Scrubber(angles, {loop: true, alternate: true, autoplay: true, format: d => `${d >= 0 ? '+'+d.toFixed(0).padStart(4, '\\u00A0') : '-'+Math.abs(d).toFixed(0).padStart(4, '\\u00A0')}°`, delay: delay, loopDelay: 60})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1080,"value":"viewof delay = Inputs.range([10, 40], { value: 20, step: 5, label: \"Delay (ms)\" });","pinned":false,"hidden":false,"mode":"ojs"},{"id":19,"value":"viewof hide_balance_wheel = Inputs.toggle({label: htl.html`Hide the balance wheel
`, value: false})","pinned":false,"hidden":false,"mode":"ojs"},{"id":39,"value":"viewof amplitude = Inputs.range([60, 320], { value: 160, step: 5, label: \"Amplitude of the balance wheel (°)\" });","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":48,"value":"viewof turns = Inputs.range([8, 18], { value: 12, step: 1, label: \"Number of turns of the hairspring\" });","pinned":false,"hidden":false,"mode":"ojs"},{"id":977,"value":"// Hairspring thickness\nviewof thickness = Inputs.range([0.2, 2], { value: 1, step: 0.1, label: \"Hairspring thickness\" });","pinned":false,"hidden":false,"mode":"ojs"},{"id":54,"value":"viewof color = Inputs.color({label: \"Hairspring color\", value: \"#272e68\"});","pinned":false,"hidden":false,"mode":"ojs"},{"id":1155,"value":"$32","pinned":false,"hidden":false,"mode":"md"},{"id":1197,"value":"

**How a Watch Works** – Hamilton Watch Company (1949).\n
🎞 *This vintage video from Hamilton offers an outstanding explanation of how a mechanical watch operates.*

","pinned":false,"hidden":false,"mode":"html"},{"id":1177,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":1174,"value":"viewof display_inspect = Inputs.toggle({label: \"⇣ Check to inspect variables and functions used in this notebook\", values: [\"true\", \"none\"], value: \"none\" })","pinned":false,"hidden":false,"mode":"ojs"},{"id":1183,"value":"\n
\n${display_inspect == \"none\"? html`

⇣ Appendix is hidden ...

` : html`

Appendix

`}","pinned":false,"hidden":false,"mode":"html"},{"id":110,"value":"swiss_lever_escapement = FileAttachment(\"Swiss_lever_escapement.svg\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"SVG_width = 600","pinned":false,"hidden":false,"mode":"ojs"},{"id":58,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":37,"value":"angles = Array.from({ length: 50 }, (_, i) => amplitude*Math.sin(Math.PI*i/ 50 - Math.PI/2));","pinned":false,"hidden":false,"mode":"ojs"},{"id":42,"value":"// Hairspring: Internal radius\nR1 = 25","pinned":false,"hidden":false,"mode":"ojs"},{"id":44,"value":"// Hairspring: External radius\nR2 = 95.9","pinned":false,"hidden":false,"mode":"ojs"},{"id":591,"value":"mutable transition = false;","pinned":false,"hidden":false,"mode":"ojs"},{"id":830,"value":"mutable counter = {\n delay;\n return 1;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":808,"value":"mutable escapement_angle = 0","pinned":false,"hidden":false,"mode":"ojs"},{"id":366,"value":"escape_angle1 = 0","pinned":false,"hidden":false,"mode":"ojs"},{"id":370,"value":"escape_angle2 = 1.5","pinned":false,"hidden":false,"mode":"ojs"},{"id":250,"value":"offset_balance = -15","pinned":false,"hidden":false,"mode":"ojs"},{"id":335,"value":"balance_angle1 = -20","pinned":false,"hidden":false,"mode":"ojs"},{"id":343,"value":"balance_angle2 = 20","pinned":false,"hidden":false,"mode":"ojs"},{"id":478,"value":"mutable fork_angle = 0","pinned":false,"hidden":false,"mode":"ojs"},{"id":323,"value":"fork_angle1 = -0.2","pinned":false,"hidden":false,"mode":"ojs"},{"id":350,"value":"fork_angle2 = 14.2","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}