2f:T7c0,spiral = { const svg = d3.create("svg") .attr("width", SVG_width) .attr("height", SVG_width); const path = svg.append("path") .attr("fill", "none") .attr("stroke", color) .attr("stroke-width", thickness); function calculateB(r1, r2, turns) { const finalAngle = turns * Math.PI * 2; return (r2 - r1) / finalAngle; } function updateSpiral() { const centerX = SVG_width/2; // Center of the spiral (x) const centerY = SVG_width/2; // 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.01) { 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 except the last one 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 transformation path.attr("d", pathData); if(flip_spiral) { path.attr("transform", `translate(0, ${SVG_width}) scale(1, -1)`); } } updateSpiral(); return svg.node(); } 30: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; }31:[] 2d:{"title":"Animated spiral","cells":[{"id":0,"value":"# Animated spiral","pinned":false,"hidden":false,"mode":"md"},{"id":372,"value":"Dynamic spiral spring animation (similar to a hairspring in a mechanical watch) where the endpoint remains fixed, and the length of the spiral is invariant. The spiral smoothly oscillates back and forth through +/-${amplitude}°, with maximum rotation speed occurring at the 0° amplitude.","pinned":false,"hidden":false,"mode":"md"},{"id":119,"value":"viewof rotationDegrees = Scrubber(angles, {loop: true, alternate: true, format: d => `${d >= 0 ? '+'+d.toFixed(0).padStart(4, '\\u00A0') : '-'+Math.abs(d).toFixed(0).padStart(4, '\\u00A0')}°`, delay: 20, loopDelay: 50})","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs"},{"id":431,"value":"viewof flip_spiral = Inputs.toggle({label: htl.html`Flip the spiral`, value: false})","pinned":false,"hidden":false,"mode":"ojs"},{"id":96,"value":"viewof R1 = Inputs.range([10, 50], { value: 40, step: 1, label: htl.html`Start radius (R₁)` });","pinned":false,"hidden":false,"mode":"ojs"},{"id":105,"value":"viewof R2 = Inputs.range([150, SVG_width/2-10], { value: 220, step: 1, label: htl.html`End radius (R₂)` });","pinned":false,"hidden":false,"mode":"ojs"},{"id":113,"value":"viewof turns = Inputs.range([10, 20], { value: 14, step: 1, label: \"Number of turns\" });","pinned":false,"hidden":false,"mode":"ojs"},{"id":227,"value":"viewof amplitude = Inputs.range([60, 140], { value: 120, step: 5, label: \"Amplitude (°)\" });","pinned":false,"hidden":false,"mode":"ojs"},{"id":255,"value":"viewof thickness = Inputs.range([0.5,3.5], { value: 1.5, step: 0.1, label: \"Thickness\" });","pinned":false,"hidden":false,"mode":"ojs"},{"id":285,"value":"viewof color = Inputs.color({label: \"Spiral color\", value: \"#272e68\"});","pinned":false,"hidden":false,"mode":"ojs"},{"id":236,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":239,"value":"SVG_width = 550","pinned":false,"hidden":false,"mode":"ojs"},{"id":142,"value":"angles = Array.from({ length: 31 }, (_, i) => amplitude*Math.sin(Math.PI*i/ 31 - Math.PI/2));","pinned":false,"hidden":false,"mode":"ojs"},{"id":139,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}