2d:null 2e:["$","title",null,{"children":"Watch mechanism: Swiss lever escapement | Christophe Yamahata | Observable"}] 33:T1632,Watch_mechanism = { // Load the external SVG const svgNode = swiss_lever_escapement_svg; const centers = svgNode.centers || {}; // Select the imported SVG directly const svg = d3.select(svgNode) .attr("width", SVG_width) .attr("height", SVG_width); // Append or retrieve spiral and force it to the absolute bottom layer let path = svg.select("#animated_spring"); if (path.empty()) { path = svg.insert("path", ":first-child") .attr("id", "animated_spring") .attr("fill", "none"); } // Force to back of rendering stack path.lower() .attr("stroke", color) .attr("stroke-width", thickness); // 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"); } else { svg.select("#Balance").style("display", null); } // Robust helper to extract center coordinates from attributes or BBox fallback function resolveCenter(selector, cachedCenter) { if (cachedCenter && !isNaN(cachedCenter.x) && !isNaN(cachedCenter.y)) { return cachedCenter; } const sel = svg.select(selector); if (sel.empty()) return { x: 0, y: 0 }; const node = sel.node(); if (node.hasAttribute("cx")) { return { x: parseFloat(sel.attr("cx")), y: parseFloat(sel.attr("cy")) }; } const bbox = node.getBBox(); return { x: bbox.x + bbox.width / 2, y: bbox.y + bbox.height / 2 }; } // Center of the balance wheel const Balance_wheel_center = svg.select("#Center"); // Center of rotation const balanceCenter = resolveCenter("#Center", centers.balance); const cx_Balance = balanceCenter.x; const cy_Balance = balanceCenter.y; // Center of the fork const Fork_center = svg.select("#Rotation_fork_2_"); // Center of rotation const forkCenter = resolveCenter("#Rotation_fork_2_", centers.fork); const cx_Fork = forkCenter.x; const cy_Fork = forkCenter.y; // Center of the escapement const Center_escapement = svg.select("#Center_escapement_2_"); const escapementCenter = resolveCenter("#Center_escapement_2_", centers.escapement); const cx_escapement = escapementCenter.x; const cy_escapement = escapementCenter.y; // 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 if (rotationDegrees > balance_angle1 && rotationDegrees < balance_angle2) { mutable fork_angle = Math.max(fork_angle1, Math.min(fork_angle2, fork_angle2 / 2 - 0.35 * rotationDegrees)); mutable transition = true; } else if (rotationDegrees > balance_angle1) { mutable fork_angle = fork_angle1; } else if (rotationDegrees < balance_angle2) { mutable fork_angle = fork_angle2; } const Fork = svg.select("#Palet_fork"); Fork.attr("transform", `rotate(${fork_angle}, ${cx_Fork}, ${cy_Fork})`); if (transition && (rotationDegrees < balance_angle1 - 10 || rotationDegrees > balance_angle2 + 10)) { mutable counter = 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 && counter % 2 !== 0) { mutable counter = mutable counter + 1; } mutable escapement_angle = fork_angle === fork_angle1 ? (escape_angle1 - (counter / 2) * (360 / 15)) % 360 : (escape_angle2 - (counter / 2) * (360 / 15)) % 360; } Escape_wheel.attr("transform", `rotate(${escapement_angle}, ${cx_escapement}, ${cy_escapement})`); // Hairspring 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; const centerY = cy_Balance; const rotationAngle = (rotationDegrees * Math.PI) / 180; const effectiveTurns = turns - (rotationDegrees / 360); const adjustedB = calculateB(R1, R2, effectiveTurns); 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 }); } 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 }; }); if (rotatedPoints.length > 0) { let pathData = `M ${rotatedPoints[0].x},${rotatedPoints[0].y}`; rotatedPoints.slice(1).forEach(p => { pathData += ` L ${p.x},${p.y}`; }); path.attr("d", pathData) .attr("transform", `translate(0, ${2 * centerY}) scale(1, -1) rotate(-90, ${centerX}, ${centerY})`); } } // Create a container for the SVG const container = d3.create("div") .style("border", "1px solid black") .style("display", "inline-block") .style("padding", "0px"); container.node().appendChild(svg.node()); return container.node(); }34: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).35:T52c,swiss_lever_escapement_svg = { const rawText = await swiss_lever_escapement.text(); const parsedDOM = (new DOMParser()).parseFromString(rawText, "image/svg+xml"); const svgNode = parsedDOM.documentElement; // Wrap in D3 const svg = d3.select(svgNode) .attr("width", SVG_width) .attr("height", SVG_width); // Hide initial layers svg.select("#spring").style("display", "none"); svg.select("#Rotations").style("display", "none"); // Add the dynamic spring path once if (svg.select("#animated_spring").empty()) { svg.append("path") .attr("id", "animated_spring") .attr("fill", "none") .attr("stroke", color) .attr("stroke-width", thickness); } // Pre-calculate centers once so we don't compute BBox on every frame function getCenter(selector) { const el = svg.select(selector); if (el.empty()) return { x: 0, y: 0 }; const node = el.node(); if (node.hasAttribute("cx")) { return { x: parseFloat(el.attr("cx")), y: parseFloat(el.attr("cy")) }; } const bbox = node.getBBox(); return { x: bbox.x + bbox.width / 2, y: bbox.y + bbox.height / 2 }; } svg.node().centers = { balance: getCenter("#Center"), fork: getCenter("#Rotation_fork_2_"), escapement: getCenter("#Center_escapement_2_") }; return svg.node(); }36:Taf0,// 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(); // Clean up animation frame if cell is re-evaluated or deleted if (typeof invalidation !== "undefined") { invalidation.then(stop); } return form; }37:[{"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}] 31:{"id":"07fb3d205ffe5f48","slug":"swiss-lever-escapement","title":"Watch mechanism: Swiss lever escapement","thumbnail":"ae6e775d59f5519901f1b9f90df9e4107cc7cfdc35bcf7482b6223c680de6e21","access_level":"public","create_time":"$D2024-09-07T19:31:37.876Z","update_time":"$D2026-09-05T13:32:09.729Z","view_time":null,"first_public_time":"$D2024-09-08T16:37:02.308Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"dd67891d326bcfb1","login":"christophe-yamahata","name":"Christophe Yamahata","avatar_url":"https://avatars-next.observableusercontent.com/8256ac716aa8395babba412b2835913d186874fa4190df57a4a28f2e60129876","tier":"starter_2024"},"version":1314,"publish_version":1314,"role":null,"authored":false,"authors":[{"type":"individual","id":"06f083eba60f5a76","login":"christophe-yamahata","name":"Christophe Yamahata","avatar_url":"https://avatars-next.observableusercontent.com/8256ac716aa8395babba412b2835913d186874fa4190df57a4a28f2e60129876","tier":null}],"members":[{"type":"individual","id":"06f083eba60f5a76","login":"christophe-yamahata","name":"Christophe Yamahata","avatar_url":"https://avatars-next.observableusercontent.com/8256ac716aa8395babba412b2835913d186874fa4190df57a4a28f2e60129876","tier":null,"role":"editor"},{"type":"team","id":"dd67891d326bcfb1","login":"christophe-yamahata","name":"Christophe Yamahata","avatar_url":"https://avatars-next.observableusercontent.com/8256ac716aa8395babba412b2835913d186874fa4190df57a4a28f2e60129876","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"53ef52938384acb8","slug":"horology","title":"Horology","owner":{"id":"dd67891d326bcfb1","login":"christophe-yamahata","name":"Christophe Yamahata"}},"type":"notebook","body":{"title":"Watch mechanism: Swiss lever escapement","cells":[{"id":0,"value":"# Watch mechanism: Swiss lever escapement","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1080,"value":"viewof delay = Inputs.range([10, 40], { value: 20, step: 5, label: \"Delay (ms)\" });","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"viewof hide_balance_wheel = Inputs.toggle({label: htl.html`Hide the balance wheel
`, value: false})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":54,"value":"viewof color = Inputs.color({label: \"Hairspring color\", value: \"#272e68\"});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1155,"value":"$34","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1177,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1183,"value":"\n
\n${display_inspect == \"none\"? html`

⇣ Appendix is hidden ...

` : html`

Appendix

`}","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":110,"value":"swiss_lever_escapement = await FileAttachment(\"Swiss_lever_escapement.svg\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1201,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"SVG_width = 600","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":58,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":42,"value":"// Hairspring: Internal radius\nR1 = 25","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":44,"value":"// Hairspring: External radius\nR2 = 95.9","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":591,"value":"mutable transition = false;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":830,"value":"mutable counter = {\n delay;\n return 1;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":808,"value":"mutable escapement_angle = 0","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":366,"value":"escape_angle1 = 0","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":370,"value":"escape_angle2 = 1.5","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":250,"value":"offset_balance = -15","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":335,"value":"balance_angle1 = -20","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":343,"value":"balance_angle2 = 20","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":478,"value":"mutable fork_angle = 0","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":323,"value":"fork_angle1 = -0.2","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":350,"value":"fork_angle2 = 14.2","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W37","stdlib":"2","titling":"auto"}} 32:"$31:body"