2c:null 2d:["$","title",null,{"children":"canvas-fly-flight | Fabian Iwand | Observable"}] 32: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(); } }33: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); }34:[] 30:{"id":"8f58ef226f620d41","slug":"canvas-fly-flight","title":"canvas-fly-flight","thumbnail":"2a2225eaed2f568084f29cdb5586415db11469d5e78e26a4bb56e09c8f147bbc","access_level":"public","create_time":"$D2019-09-22T13:43:25.143Z","update_time":"$D2021-11-20T23:59:20.570Z","view_time":null,"first_public_time":"$D2019-09-22T15:57:03.156Z","fork":{"id":"cbf6fa114362e764","slug":"canvas-fly-flight","title":"canvas-fly-flight","owner":{"id":"436b81191a843e22","login":"sdwfrost","name":"Simon Frost"}},"stars":11,"starred":false,"owner":{"type":"team","id":"898d35f8860c7f03","login":"mootari","name":"Fabian Iwand","avatar_url":"https://avatars-next.observableusercontent.com/0d7defa821f38094c03bad23b9b360a5364e6e97e21fc238c39ddc48db7994ad","tier":"starter_2024"},"version":345,"publish_version":345,"role":null,"authored":false,"authors":[{"type":"individual","id":"07362516b5994994","login":"mootari","name":"Fabian Iwand","avatar_url":"https://avatars-next.observableusercontent.com/0d7defa821f38094c03bad23b9b360a5364e6e97e21fc238c39ddc48db7994ad","tier":null}],"members":[{"type":"individual","id":"07362516b5994994","login":"mootari","name":"Fabian Iwand","avatar_url":"https://avatars-next.observableusercontent.com/0d7defa821f38094c03bad23b9b360a5364e6e97e21fc238c39ddc48db7994ad","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"subscribed":null,"forks":4,"collection":{"id":"414312a67ea30ac3","slug":"generative","title":"Generative","owner":{"id":"898d35f8860c7f03","login":"mootari","name":"Fabian Iwand"}},"type":"notebook","body":{"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","author":"$undefined","summary":"$undefined"},{"id":2,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":49,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":257,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":127,"value":"import {form} from '@mbostock/form-input'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 31:"$30:body"