vis = { const ctx = svg` `; const radius = (Math.min(height, width) / 2) * 0.9; const center = { x: width / 2, y: height / 2 }; const duration = 1000; let state = []; let timer = null; const bg = ctx.querySelector(".bg"); const pointLayer = ctx.querySelector(".points"); const lineLayer = ctx.querySelector(".lines"); const circle = setAttributes(svg``, { cx: center.x, cy: center.y, r: radius, fill: 'linen' }); bg.appendChild(circle); let makePoint = angle => geom.pt(mod(angle, 2 * pi), radius, width / 2, height / 2); function onEnter() { for (let i = 0; i < state.length; i++) { let point = setAttributes(svg``, { cx: 0, cy: 0, r: 3, fill: "#000" }); pointLayer.appendChild(point); } for (let i = 0; i < state.length / 2; i++) { let p1 = makePoint(state[2 * i + 1]); let p2 = makePoint(state[2 * i + 1]); let line = setAttributes(svg``, { x1: 0, x2: 10, y1: 0, y2: 10, stroke: "#000", stroke_width: 1 }); lineLayer.appendChild(line); } updateGeometry(); } function onExit() { pointLayer .querySelectorAll("circle") .forEach(e => pointLayer.removeChild(e)); lineLayer.querySelectorAll("line").forEach(e => lineLayer.removeChild(e)); if (timer !== null) { timer.cancel(); } } function updateGeometry() { let circles = pointLayer.querySelectorAll("circle"); for (let i = 0; i < state.length; i++) { let t = mod(state[i], 2 * pi); let pt = geom.pt(t, radius, width / 2, height / 2); setAttributes(circles[i], { cx: pt.x, cy: pt.y }); } let lines = lineLayer.querySelectorAll("line"); for (let i = 0; i < state.length / 2; i++) { let p1 = makePoint(state[2 * i]); let p2 = makePoint(state[2 * i + 1]); setAttributes(lines[i], { x1: p1.x, y1: p1.y, x2: p2.x, y2: p2.y }); } } function transitionTo(values) { if (state.length != values.length) { onExit(); state = values; onEnter(); } else { let tweens = stdlib .zip(state, values) .map(pair => anim.interpolateAngles(pair[0], pair[1])) .map((tween, i, arr) => { let ix = i / arr.length; let start = ix * 0.2; let end = (1 - ix) * 0.2; let delay = anim.delayFunction(start, end); return t => tween(delay(t)); }) .map(tween => t => tween(anim.easeInOut(t))); let globalTween = t => { state = tweens.map(tween => tween(t)); updateGeometry(); }; if (timer === null) { timer = new Timer(duration, null); } timer.updateFunction = globalTween; timer.start(); state = values; } } ctx.transitionTo = transitionTo; invalidation.then(() => onExit()); return ctx; }