30:Tbd5,flight = { const height = Math.ceil(width / (16/10)); const ctx = DOM.context2d(width, height); ctx.canvas.style.maxWidth = '100%'; clear(); const chain = [{x: width/2, y: height/2}]; let mouseover = false; ctx.canvas.onmouseenter = () => mouseover = true; ctx.canvas.onmouseleave = () => mouseover = false; ctx.canvas.onmousemove = e => { const box = ctx.canvas.getBoundingClientRect(); chain[0].x = (e.clientX - box.left) * (width / box.width); chain[0].y = (e.clientY - box.top) * (height / box.height); }; let raf; (function loop() { update(); raf = requestAnimationFrame(loop); })() invalidation.then(() => cancelAnimationFrame(raf)); return ctx.canvas; function update() { const {n, throttle, radius, debug} = viewof options.value; const k = n / throttle; // Resize chain. if(n < chain.length) chain.splice(1, chain.length - n); while(n > chain.length) chain.push(Object.assign({}, chain[chain.length-1])); const target = chain[0], fly = chain[chain.length - 1]; // Change target position when fly gets close. while(!mouseover && Math.hypot(target.x - fly.x, target.y - fly.y) <= radius) { target.x = Math.random() * width; target.y = Math.random() * height; } // update chain for(let i = 1, p, target; i < chain.length; i++) { p = chain[i]; target = chain[i-1]; p.x += k * (target.x - p.x); p.y += k * (target.y - p.y); } clear(.1); const r = 10; if(debug) { const dsq = (r * 2) ** 2; clear(1); ctx.beginPath(); chain.slice(1).forEach((p, i, arr) => { if(i) { const [a, b, d] = connection(p, arr[i-1], r); // Only draw connecting line if circles don't overlap. if(d[0] * d[0] + d[1] * d[1] > dsq) { ctx.moveTo(...a); ctx.lineTo(...b); } } ctx.moveTo(p.x + r, p.y); ctx.arc(p.x, p.y, r, 0, Math.PI * 2); }) ctx.strokeStyle = 'hsl(210, 100%, 67%)'; ctx.fillStyle = 'hsla(210, 100%, 67%, .5)'; ctx.lineWidth = 2; ctx.fill(); ctx.stroke(); if(!mouseover) { ctx.beginPath(); const {x, y} = chain[0]; ctx.arc(x, y, radius, 0, Math.PI * 2); ctx.moveTo(x + r, y); ctx.arc(x, y, r, 0, Math.PI * 2); ctx.fillStyle = 'hsla(0,0%,100%,.3)'; ctx.strokeStyle = 'hsla(0,0%,100%,.8)'; ctx.fill(); ctx.stroke(); } } ctx.fillStyle = '#fff'; ctx.beginPath(); ctx.arc( fly.x, fly.y, r - 2, 0, Math.PI * 2); ctx.fill(); } function connection(p1, p2, r) { const dx = p2.x - p1.x, dy = p2.y - p1.y, a = Math.atan2(dy, dx); const x = Math.cos(a) * r, y = Math.sin(a) * r; return [[p1.x + x, p1.y + y], [p2.x - x, p2.y - y], [dx, dy]]; } function clear(alpha = 1) { ctx.save(); ctx.fillStyle = `rgba(0,0,0,${alpha})`; ctx.fillRect(0, 0, width, height); ctx.restore(); } }31:T60d,viewof options = { const view = html`

Chain length:

Throttle:

Target distance:

Visualize chain:

`; view.oninput = e => { (view.elements[`${e.target.name}-output`]||{}).value = e.target.value; } Array.from(view.elements).filter(n => !n.matches('output')).forEach(n => { n.dispatchEvent(new CustomEvent('input', {bubbles:true})); }); view.querySelectorAll('label[data-for]').forEach(n => { const t = view.elements[n.dataset.for]; t.setAttribute('id', DOM.uid(t.name||'').id); n.setAttribute('for', t.id); }); return form(view); }32:[] 2e:{"title":"canvas-fly-flight","cells":[{"id":0,"value":"md`# canvas-fly-flight\n\nFork of Simon Frost's [port](https://observablehq.com/@sdwfrost/canvas-fly-flight@31) of [canvas-fly-flight](https://github.com/sergiks/canvas-fly-flight) by Sergei Sokolov.\n\nThis version adds visualization and interactivity. Let the chain follow your mouse, or control parameters via the inputs below.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":49,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":257,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs"},{"id":127,"value":"import {form} from '@mbostock/form-input'","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}