2c:null 2d:["$","title",null,{"children":"Helical Spring | Christophe Yamahata | Observable"}] 32:T177e,viewof mechanism = { let A = { x: 140, y: 200 }; let B = { x: 450, y: 70 }; const maxRadius = 40; const deltaAX = -15; const deltaAY = 5; const deltaBX = -4; const deltaBY = 3; const svg = html``; const elA = svg.querySelector("#handleA"); const elB = svg.querySelector("#handleB"); const limitA = svg.querySelector("#limitA"); const limitB = svg.querySelector("#limitB"); const axisLine = svg.querySelector("#axisLine"); const springTransform = svg.querySelector("#springTransform"); const pathBack = svg.querySelector("#pathBack"); const pathFront = svg.querySelector("#pathFront"); const pathLoopLeft = svg.querySelector("#pathLoopLeft"); const pathLoopRight = svg.querySelector("#pathLoopRight"); const originA = { x: A.x, y: A.y }; const originB = { x: B.x, y: B.y }; limitA.setAttribute("cx", originA.x); limitA.setAttribute("cy", originA.y); limitA.setAttribute("r", maxRadius); limitB.setAttribute("cx", originB.x); limitB.setAttribute("cy", originB.y); limitB.setAttribute("r", maxRadius); let active = null; function renderSpring() { const effAX = A.x + deltaAX; const effAY = A.y + deltaAY; const effBX = B.x + deltaBX; const effBY = B.y + deltaBY; const dx = effBX - effAX; const dy = effBY - effAY; const distance = Math.hypot(dx, dy); const angle = Math.atan2(dy, dx) * (180 / Math.PI) - 90; const loopSpan = springConfiguration.radius * 2.6; const springHeight = Math.max(2, (distance - loopSpan) / springConfiguration.numCoils); // Call the shared generator helper const paths = springGenerator(springHeight, springConfiguration); springTransform.setAttribute("transform", `translate(${effAX}, ${effAY}) rotate(${angle}) translate(0, ${-paths.anchorY})`); pathBack.setAttribute("d", paths.back); pathBack.setAttribute("stroke-width", springConfiguration.wireDiameter * 0.96); pathFront.setAttribute("d", paths.front); pathFront.setAttribute("stroke-width", springConfiguration.wireDiameter); pathLoopLeft.setAttribute("d", paths.loopLeft); pathLoopLeft.setAttribute("stroke-width", springConfiguration.wireDiameter); pathLoopRight.setAttribute("d", paths.loopRight); pathLoopRight.setAttribute("stroke-width", springConfiguration.wireDiameter); } function updateVisuals() { elA.setAttribute("transform", `translate(${A.x}, ${A.y})`); elB.setAttribute("transform", `translate(${B.x}, ${B.y})`); axisLine.setAttribute("x1", A.x); axisLine.setAttribute("y1", A.y); axisLine.setAttribute("x2", B.x); axisLine.setAttribute("y2", B.y); renderSpring(); svg.value = { A, B }; svg.dispatchEvent(new CustomEvent("input")); } svg.addEventListener("pointerdown", e => { const target = e.target.closest(".draggable-handle"); if (target === elA) active = "A"; else if (target === elB) active = "B"; if (!active) return; const handle = active === "A" ? elA : elB; handle.classList.add("dragging"); svg.setPointerCapture(e.pointerId); e.preventDefault(); }); svg.addEventListener("pointermove", e => { if (!active) return; const pt = svg.createSVGPoint(); pt.x = e.clientX; pt.y = e.clientY; const screenCTM = svg.getScreenCTM(); if (!screenCTM) return; const svgP = pt.matrixTransform(screenCTM.inverse()); const origin = active === "A" ? originA : originB; const target = active === "A" ? A : B; const dx = svgP.x - origin.x; const dy = svgP.y - origin.y; const dist = Math.hypot(dx, dy); if (dist <= maxRadius) { target.x = svgP.x; target.y = svgP.y; } else if (dist > 0) { target.x = origin.x + (dx / dist) * maxRadius; target.y = origin.y + (dy / dist) * maxRadius; } updateVisuals(); }); function endDrag(e) { if (!active) return; const handle = active === "A" ? elA : elB; handle.classList.remove("dragging"); if (svg.hasPointerCapture(e.pointerId)) { svg.releasePointerCapture(e.pointerId); } active = null; } svg.addEventListener("pointerup", endDrag); svg.addEventListener("pointercancel", endDrag); updateVisuals(); return svg; }33:T443,animatedSpring = { const rotationAngle = -90; const w = springConfiguration.wireDiameter; const paths = springGenerator(springHeight, { step: 100, startY: 50 }); return html``; }34:T6a3,springGenerator = { return (springHeight, customConfig = {}) => { const config = { ...springConfiguration, ...customConfig }; const { numCoils, radius, wireDiameter, step, startY } = config; const rL1 = 1.8; const rL2 = 1.2; const rL3 = 0.7; const rL4 = 0.6; const endY = startY + numCoils * springHeight; const anchorY = startY - radius * rL1; let front = "", back = ""; const n = numCoils * 2 * step; let prev = null; for (let i = 0; i < n; i++) { const t1 = (i / step) * Math.PI; const t2 = ((i + 1) / step) * Math.PI; const tm = (t1 + t2) / 2; const pt = t => [radius * Math.sin(t), startY + springHeight * t / (2 * Math.PI)]; const [x1, y1] = pt(t1), [x2, y2] = pt(t2); const isFront = Math.cos(tm) > 0; const seg = (prev === isFront ? "" : `M ${x1.toFixed(2)},${y1.toFixed(2)} `) + `L ${x2.toFixed(2)},${y2.toFixed(2)} `; if (isFront) front += seg; else back += seg; prev = isFront; } // Extended smooth hook configuration (sweeping past a quarter circle) const rLoop = radius * rL2; const anchorEndY = endY + radius * rL1; const cx1 = rLoop * rL3; const cy1 = rLoop * rL4; const loopLeft = `M 0,${startY} C -${rLoop},${startY} -${rLoop},${anchorY} 0,${anchorY} C ${cx1},${anchorY} ${cy1 * 1.3},${anchorY + rLoop * 0.9} ${rLoop * 0.4},${anchorY + rLoop * 1.1}`; const loopRight = `M 0,${endY} C ${rLoop},${endY} ${rLoop},${anchorEndY} 0,${anchorEndY} C -${cx1},${anchorEndY} -${cy1 * 1.3},${anchorEndY - rLoop * 0.9} -${rLoop * 0.4},${anchorEndY - rLoop * 1.1}`; return { front, back, loopLeft, loopRight, anchorY, endY }; }; }35:[{"id":"b6c21f54f16b6c6466e5826039a945953cc8cdb249d9c072bafdb3ccf637e40ecc6c4bbe7f1da8ca0da5000a81fa3f7d29ea0ec6e93d5eefe4130f2c1a909e06","href":"https://static.observableusercontent.com/files/b6c21f54f16b6c6466e5826039a945953cc8cdb249d9c072bafdb3ccf637e40ecc6c4bbe7f1da8ca0da5000a81fa3f7d29ea0ec6e93d5eefe4130f2c1a909e06","name":"image.png","type":"image/png","lastModified":1791030820935,"size":42753},{"id":"bfd495dcdebc98dca6b78681a1b2ce3e76e943438ff03177a32176e791f8b3409210f142fecb8aea2a83e3ee11c1cb212052ea74e672dc7b9019285dc9788daf","href":"https://static.observableusercontent.com/files/bfd495dcdebc98dca6b78681a1b2ce3e76e943438ff03177a32176e791f8b3409210f142fecb8aea2a83e3ee11c1cb212052ea74e672dc7b9019285dc9788daf","name":"image (2).png","type":"image/png","lastModified":1791031086426,"size":42772}] 30:{"id":"aea3a4bc91743124","slug":"helical-spring","title":"Helical Spring","thumbnail":"1fd41b78f1a5c92bbf2dea41a94bfa937daa3b7c829fdeb896d6e7e4f409a2c0","access_level":"public","create_time":"$D2026-10-03T10:25:55.440Z","update_time":"$D2026-10-03T14:07:55.920Z","view_time":null,"first_public_time":"$D2026-10-03T11:56:26.172Z","has_unpublished_edits":null,"fork":true,"stars":0,"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":1665,"publish_version":1665,"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":"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":"a4317cf9df48c2f1","slug":"sandbox","title":"Sandbox","owner":{"id":"dd67891d326bcfb1","login":"christophe-yamahata","name":"Christophe Yamahata"}},"type":"notebook","body":{"titling":"auto","title":"Helical Spring","cells":[{"id":1,"value":"# Helical Spring\n\nThis notebook explores the parametric animation of a helical spring through two interactive demonstrations:\n\n* **Animated Spring (Self-Triggered)**: Dynamic behavior under tension and sudden release. The spring height cycles continuously through an arming phase followed by a rapid, spring-back snap modeled with exponential decay.\n\n* **Interactive Mechanism (Draggable Anchors)**: Anchor points **A** and **B** can be dragged within defined circular boundaries. The spring geometry (length, angle, coil spacing) is dynamically recalculated in real-time based on the relative positions of the handles.\n\n---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"
\n\n### Self-Triggered Animation","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"### Interactive Mechanism","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"---\n\n### Variables and Functions","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"springConfiguration = ({\n numCoils: 28,\n radius: 22,\n wireDiameter: 5.2,\n step: 40,\n startY: 0\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"springHeight = {\n const minH = 9;\n const maxH = 10;\n const cycleDuration = 3000;\n\n while (true) {\n const t = (Date.now() % cycleDuration) / cycleDuration;\n\n let h;\n if (t < 0.75) {\n // Phase 1 : Arming\n const p = t / 0.75;\n h = minH + (maxH - minH) * p;\n } else {\n // Phase 2 : Triggering / Sudden jump\n const p = (t - 0.75) / 0.25;\n h = maxH - (maxH - minH) * (1 - Math.exp(-p * 30));\n }\n\n yield h;\n await Promises.delay(20);\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"2"}} 31:"$30:body"