31:T5fe,viewof optionsCombined = Inputs.form( { values: Inputs.form( { y0: Inputs.range([0, 1], { label: tex`y_0`, step: 0.01, value: 0 }), y1: Inputs.range([0, 1], { label: tex`y_1`, step: 0.01, value: 1 }), t: Inputs.range([0, 1], { label: tex`t_{interrupt}`, step: 0.01, value: 0.6 }), yNew: Inputs.range([0, 1], { label: tex`y_{new}`, step: 0.01, value: 0.2 }) }, { template: (inputs) => html`

Values
${Object.values(inputs)}

` } ), derivatives: Inputs.form( { yp0: Inputs.range([-10, 10], { label: tex`y_0^\prime`, step: 0.5, value: 0 }), yp1: Inputs.range([-10, 10], { label: tex`y_1^\prime`, step: 0.5, value: 0 }), ypNew: Inputs.range([-10, 10], { label: tex`y^\prime_{new}`, step: 0.5, value: 0 }) }, { template: (inputs) => html`

Derivatives
${Object.values( inputs )}

` } ) }, { template: (inputs) => html`

${Object.values(inputs).flatMap( (n) => html`

${n}

` )}

` } )32:T841,{ const { y0, y1, t, yNew } = optionsCombined.values; const { yp0, yp1, ypNew } = optionsCombined.derivatives; const f1 = makeEase(y0, y1, yp0, yp1); const f2 = f1.chain(t, yNew, ypNew); const data1 = d3.range(0, t + 1e-6, 0.01).map((x) => [x, f1(x)]); const data1rest = d3.range(t, 1 + 1e-6, 0.01).map((x) => [x, f1(x)]); const data2 = d3.range(t, t + 1 + 1e-6, 0.01).map((x) => [x, f2(x - t)]); const s = 0.15; const slopeLeft = (...args) => _slope(-1, ...args); const slopeRight = (...args) => _slope(1, ...args); const _slope = (direction, x, f, xOffset = 0, options = {}) => { const xo = x - xOffset; const y = f(xo); const x1 = x; const x2 = x + direction * s; const y1 = y; const y2 = y + direction * s * f.derivative(xo); const dx = x2 - x1; const dy = y2 - y1; const c = s / Math.hypot(dx, dy); return Plot.line( [ [x1, y1], [x1 + c * dx, y1 + c * dy] ], options ); }; const label = (x, y, text, options = {}) => Plot.text([[x, y, text]], { x: (d) => d[0], y: (d) => d[1], text: (d) => d[2], ...options }); const gray = "#ddd"; const w = Math.min(width, 800); const m = 30; const h = (w - m) / 2 + m; return Plot.plot({ width: w, height: h, marginLeft: m, marginBottom: m, y: { label: "y", domain: [0, 1] }, x: { label: "t", domain: [0, 2] }, marks: [ Plot.dot([ [0, y0], [t, f1(t)], [1 + t, f2(1)] ]), Plot.ruleX([t], { stroke: gray }), label(t, 1, "Interrupt"), Plot.dot([[1, f1(1)]], { stroke: gray }), Plot.line(data1), Plot.line(data1rest, { stroke: gray }), Plot.line(data2), slopeRight(0, f1, 0, { stroke: "crimson" }), slopeLeft(t, f1, 0, { stroke: "blue" }), slopeRight(t, f2, t, { stroke: "green" }), slopeLeft(1 + t, f2, t, { stroke: "orange" }), label(0, y0, "y0", { dx: -10 }), label(1, y1, "y1", { dx: 10 }), label(t + 1, yNew, "yNew", { dx: 20 }) ] }); }33:T56b,function makeEase(startValue, targetValue, startSlope = 0, targetSlope = 0) { const y0 = startValue; const yp0 = startSlope; const y1 = targetValue; const yp1 = targetSlope; // 3rd degree polynomial solution for linear system of equations: const a = [ y0, // a0 yp0, // a1 3 * (y1 - y0) - yp1 - 2 * yp0, // a2 yp1 + yp0 - 2 * (y1 - y0) // a3 ]; // For 5th degree polynomials, with which we can also control second derivatives. // yb0 and yb1 are second derivatives at 0 and 1 respectively. /* const a = [ y0, yp0, yb0/2, -10*y0 + 10*y1 - 3*yb0/2 + yb1/2 - 6*yp0 - 4*yp1, 15*y0 - 15*y1 + 3*yb0/2 - yb1 + 8*yp0 + 7*yp1, -6*y0 + 6*y1 - yb0/2 + yb1/2 - 3*yp0 - 3*yp1 ] */ const ease = (t) => { if (t <= 0) return y0; if (t >= 1) return y1; let s = a[0] || 0; let x = t; for (let i = 1; i < a.length; ++i) { s += a[i] * x; x *= t; } return s; }; const derivative = (t) => { if (t < 0) return yp0; if (t >= 1) return yp1; let s = a[1] || 0; let x = t; for (let i = 2; i < a.length; ++i) { s += i * a[i] * x; x *= t; } return s; }; const chain = (t, newTargetValue, newTargetSlope = 0) => makeEase(ease(t), newTargetValue, derivative(t), newTargetSlope); Object.assign(ease, { derivative, chain }); return ease; }34:T8a4,{ await visibility(); const w = width; const h = 300; const historyDuration = 15000; const n = 3; const targetValues = Array.from({ length: n }, () => Math.random()); const transitions = targetValues.map((y) => makeEase(Math.random(), y)); const getTime = () => Date.now(); let t = 0; let tChange = 0; let tClockPrev = getTime(); function setRandomTarget() { const tTransition = tChange / transitionDuration; for (let i = 0; i < n; ++i) { const f = transitions[i]; targetValues[i] = Math.random(); transitions[i] = f.chain(tTransition, targetValues[i]); } } const colors = Array.from( { length: n }, (_, i) => `hsl(${(i / n) * 360}, 80%, 50%)` ); const ctx = DOM.context2d(w, h); ctx.canvas.onclick = (e) => { e.stopPropagation(); setRandomTarget(); tChange = 0; }; ctx.canvas.style.cursor = "pointer"; const xScale = (t) => ((t % historyDuration) / historyDuration) * w; const yScale = (v) => h * (0.1 + 0.8 * (1 - v)); function draw(t, values) { // Clear frontier const x = xScale(t); ctx.fillStyle = "white"; ctx.fillRect(x, 0, 10, h); // Draw target const alpha = ctx.globalAlpha; ctx.globalAlpha = 0.2; targetValues.forEach((v, j) => { const y = yScale(v); ctx.fillStyle = colors[j]; ctx.fillRect(x, y, 1, 1); }); ctx.globalAlpha = alpha; // Draw values values.forEach((v, j) => { const y = yScale(v); ctx.fillStyle = colors[j]; ctx.fillRect(x, y, 2, 2); }); } setRandomTarget(); let iterationCount = 0; while (true) { // Compute elapsed times let tClock = getTime(); const millisElapsed = tClock - tClockPrev; tClockPrev = tClock; const dt = millisElapsed; // const dt = 17; // Yeah, just hardcode it t += dt; // Maybe change (update) target tChange += dt; if (tChange > transitionDuration + 1000) { setRandomTarget(); tChange = 0; } // Step the simulation const tTransition = tChange / transitionDuration; const values = transitions.map((f) => f(tTransition)); draw(t, values); iterationCount++; yield ctx.canvas; } }35:T7f2,{ await visibility(); reset; // To react to the button const w = width; const h = w / 2; const targetValues = [Math.random() * w, Math.random() * h]; const transitions = [w, h].map((l, i) => makeEase(Math.random() * l, targetValues[i]) ); const getTime = () => Date.now(); let t = 0; let tChange = 0; let tClockPrev = getTime(); let tInterrupt = 0.7 * transitionDuration; function setRandomTarget() { setTarget(Math.random() * w, Math.random() * h); } function setTarget(x, y) { const tTransition = tChange / transitionDuration; [x, y].forEach((v, i) => { targetValues[i] = v; transitions[i] = transitions[i].chain(tTransition, v); }); } const ctx = DOM.context2d(w, h); ctx.canvas.onclick = (e) => { e.stopPropagation(); setTarget(e.offsetX, e.offsetY); tChange = 0; tInterrupt = transitionDuration + 100; }; ctx.canvas.style.cursor = "pointer"; function draw(x, y) { // Clear frontier ctx.fillStyle = "rgba(255, 255, 255, 0.025)"; ctx.fillRect(0, 0, w, h); // Draw current point { ctx.fillStyle = "black"; const d = 2; const r = d / 2; ctx.fillRect(x - r, y - r, d, d); } // Draw target { ctx.fillStyle = "red"; const d = 4; const r = d / 2; const [x, y] = targetValues; ctx.fillRect(x - r, y - r, d, d); } } setRandomTarget(); let iterationCount = 0; while (true) { // Compute elapsed times let tClock = getTime(); const millisElapsed = tClock - tClockPrev; tClockPrev = tClock; const dt = millisElapsed; t += dt; // Maybe change (update) target tChange += dt; if (tChange > tInterrupt) { setRandomTarget(); tChange = 0; tInterrupt = 0.7 * transitionDuration; } // Step the simulation const tTransition = tChange / transitionDuration; const values = transitions.map((f) => f(tTransition)); draw(...values); iterationCount++; yield ctx.canvas; } }36:Te21,{ await visibility(); const w = width; const h = w / 1.6; const tau = 2 * Math.PI; const n = nFourier; function getRandomParameters() { const maxAmplitude = h / 3; const parameters = new Float32Array(3 * n); // initializes to zeros let j = 0; for (let i = 0; i < n; ++i) { const frequency = i; const amplitude = (Math.random() * maxAmplitude) / (frequency ** amplitudeDecreaseExponent + 1); const lastPhase = parameters[j + 2]; // defaults to 0 because Float32Array const phase = lastPhase + (-1 + 2 * Math.random()) * Math.PI; // Uniformly random angle, but never more than pi radians away parameters[j++] = amplitude; parameters[j++] = frequency; parameters[j++] = phase; } return parameters; } let startValues = getRandomParameters(); let targetValues = getRandomParameters(); const transitions = Array(startValues.length) .fill() .map((_, i) => makeEase(startValues[i], targetValues[i])); const getTime = () => Date.now(); let t = 0; let tChange = 0; let tClockPrev = getTime(); let tInterrupt = transitionDuration * interruptFraction; function setRandomTarget() { const tTransition = tChange / transitionDuration; startValues = transitions.map((f) => f(tTransition)); targetValues = getRandomParameters(); for (let i = 0; i < targetValues.length; ++i) { const f = transitions[i]; transitions[i] = f.chain(tTransition, targetValues[i]); } } const ctx = DOM.context2d(w, h); ctx.canvas.onclick = (e) => { e.stopPropagation(); setRandomTarget(); tChange = 0; tInterrupt = transitionDuration + 200; }; ctx.canvas.style.cursor = "pointer"; const nPhi = 500; const dPhi = tau / (nPhi - 1); const phiAll = Array.from({ length: nPhi }, (_, i) => i * dPhi); function betweenFrames() { const alpha = ctx.globalAlpha; // Fade ctx.globalAlpha = 0.9; ctx.fillStyle = "white"; ctx.fillRect(0, 0, w, h); ctx.globalAlpha = alpha; } function draw(parameters, color) { const alpha = ctx.globalAlpha; // Draw lines ctx.globalAlpha = 1; ctx.beginPath(); for (let i = 0; i < nPhi; ++i) { const phi = phiAll[i]; let x = w / 2; let y = h / 2; for (let j = 0; j < parameters.length; j += 3) { const a = parameters[j]; const f = parameters[j + 1]; const p = parameters[j + 2]; x += a * Math.cos(f * phi + p); y += a * Math.sin(f * phi + p); } const drawTo = i === 0 ? ctx.moveTo : ctx.lineTo; debugger; drawTo.bind(ctx)(x, y); } ctx.fillStyle = color; ctx.globalAlpha = 0.2; ctx.fill(); ctx.globalAlpha = 1; ctx.strokeStyle = color; ctx.stroke(); ctx.globalAlpha = alpha; } setRandomTarget(); let iterationCount = 0; while (true) { // Compute elapsed times let tClock = getTime(); const millisElapsed = tClock - tClockPrev; tClockPrev = tClock; const dt = millisElapsed; // const dt = 17; // Yeah, just hardcode it t += dt; // Maybe change (update) target tChange += dt; if (tChange > tInterrupt) { setRandomTarget(); tChange = 0; tInterrupt = transitionDuration * interruptFraction; } // Step the simulation const tTransition = tChange / transitionDuration; const values = transitions.map((f) => f(tTransition)); betweenFrames(); draw(startValues, "#EEE"); draw(values, "black"); draw(targetValues, "red"); iterationCount++; yield ctx.canvas; } }37:[] 2f:{"title":"Seamless chaining of interrupted transitions with polynomials","cells":[{"id":0,"value":"# Seamless chaining of interrupted transitions with polynomials\n\nBy using polynomials, we can create transitions that can be chained seamlessly, even when they are interrupted mid-transition.\n\nBelow is an example with one interrupted transition followed by a full transition.","pinned":false,"hidden":false,"mode":"md"},{"id":328,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":52,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":83,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":286,"value":"If you use `${makeEase.name}` to create an easing function `f1` for a transition, and this transition is interrupted at `t`, you can create a seamlessly continuing easing function `f2` with\n\n~~~js\nconst f2 = f1.chain(t, newTargetValue);\n~~~\n\nOr, if you want to control the end slope (default is 0):\n~~~js\nconst f2 = f1.chain(t, newTargetValue, newTargetSlope);\n~~~","pinned":false,"hidden":false,"mode":"md"},{"id":231,"value":"---\nHere's an example of the concept in action. Click the chart to start a new transition.","pinned":false,"hidden":false,"mode":"md"},{"id":220,"value":"viewof transitionDuration = Inputs.range([500, 5000], {\n label: \"Transition duration [ms]\",\n value: 3000,\n step: 50,\n width: \"100%\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":201,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":392,"value":"---\n\nAnother example, this time in 2D. Click to set a new target.","pinned":false,"hidden":false,"mode":"md"},{"id":379,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":403,"value":"viewof reset = Inputs.button(\"Reset\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":401,"value":"You may notice that the speed of the dot seems to increase abruptly when a short move is followed by a long move. In contrast with a real physical dynamic system, the dot has no limit on acceleration. It arrives at its target after exactly the given transition duration, regardless of starting point and distance.","pinned":false,"hidden":false,"mode":"md"},{"id":488,"value":"---\nAnd now for a more complex example. This one is a variant of a 2D Fourier series, whose components are transitioned. Note how the shape continues to evolve smoothly even through transition interruptions. Click to interrupt.","pinned":false,"hidden":false,"mode":"md"},{"id":490,"value":"viewof nFourier = Inputs.range([1, 300], {\n label: \"Fourier components\",\n width: \"100%\",\n // transform: Math.log,\n step: 1,\n value: 200\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":498,"value":"viewof amplitudeDecreaseExponent = Inputs.range([1, 3], {\n label: \"Amplitude decrease exponent\",\n value: 1.7,\n step: 0.01,\n width: \"100%\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":481,"value":"viewof interruptFraction = Inputs.range([0.3, 1.1], {\n label: \"Interrupt at fraction of transition duration\",\n value: 1,\n step: 0.01\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":421,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":518,"value":"You may notice some exaggerated detour movements around the center. This is an effect of the phases being constrained to the semi-open interval ${tex`[0, 2 \\pi)`}.","pinned":false,"hidden":false,"mode":"md"}],"files":"$W37","stdlib":"1","titling":"auto"}