30:Tb57,function TangledScrubber( values, { format = value => value, initial = 0, initialDelay = 100, autoplay = true, loop = true, alternate = false, tMin = -Infinity, // min delay tMax = Infinity, // max delay tMinWidth = undefined, tStep = 1, tPower = 1.2, tFormat = x => `${x} ms` } = {} ) { let delay = initialDelay; const tangle = html`

Delay: ${Tangle({ min: tMin, max: tMax, value: initialDelay, minWidth: tMinWidth, step: tStep, power: tPower, format: tFormat })}

`; values = Array.from(values); const form = html``; let timer = null; let direction = 1; function start() { form.b.textContent = "Pause"; timer = delay === null ? requestAnimationFrame(tick) : setInterval(tick, delay); } function stop() { form.b.textContent = "Play"; if (delay === null) cancelAnimationFrame(timer); else clearInterval(timer); timer = null; } function tick() { if (delay === null) timer = requestAnimationFrame(tick); if ( form.i.valueAsNumber === (direction > 0 ? values.length - 1 : direction < 0 ? 0 : NaN) ) { if (!loop) return stop(); if (alternate) direction = -direction; } 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 && timer) form.b.onclick(); form.value = { delay, value: values[form.i.valueAsNumber] }; form.o.value = format(form.value.value, form.i.valueAsNumber, values); }; form.b.onclick = () => { if (timer) 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(); }; function changeSpeed(e) { delay = +e.target.value; if (form.b.textContent == "Pause") { stop(); start(); } form.value.delay = delay; } tangle.getElementsByTagName("span")[0].addEventListener("input", changeSpeed); tangle.getElementsByTagName("span").value = delay; form.i.oninput(); if (autoplay) { start(); } else { stop(); } disposal(form).then(stop); return form; }31:[] 2e:{"title":"Tangled Scrubber","cells":[{"id":0,"value":"md`# Tangled Scrubber`","pinned":false,"hidden":false,"mode":"ojs"},{"id":225,"value":"md`While implementing Mike Bostock's hallowed Scrubber, have you ever wished you could modify the speed of the animation, such as this one, as it is playing?\n\nOf course you can assign the scrubber's *delay* property to a \\`mutable\\` variable, but then you risk reinitalizing the tool itself — and most likely any animation that depends on it.\n\nThis scrubber solves that problem, with the help of another Observable artifact: Tangle. Drag to change the delay interval between frames!`","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"value":"scrubber = TangledScrubber(Array.from({ length: 256 }, (_, i) => i), {\n initialDelay: 200,\n tMin: 10,\n tMax: 500,\n tMinWidth: \"4em\"\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":326,"value":"viewof temp = TangledScrubber(Array.from({ length: 256 }, (_, i) => i), {\n initialDelay: 200,\n tMin: 10,\n tMax: 500,\n tMinWidth: \"4em\"\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":337,"value":"temp","pinned":true,"hidden":false,"mode":"ojs"},{"id":269,"value":"md`To use in your notebook:\n\n~~~js\nimport {TangledScrubber} from \"@duynguyen1678/tangled-scrubber\"\n~~~\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":347,"value":"mutable n = null","pinned":true,"hidden":false,"mode":"ojs"},{"id":246,"value":"md`___\n## Appendix`","pinned":false,"hidden":false,"mode":"ojs"},{"id":65,"value":"$30","pinned":true,"hidden":false,"mode":"ojs"},{"id":4,"value":"import { Tangle } from \"@mbostock/tangle\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":63,"value":"import { disposal } from \"@mbostock/disposal\"","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}