2d:null 2e:["$","title",null,{"children":"Particles | nullhook | Observable"}] 33:T58b,c = { const ctx = DOM.context2d(width, height); const minDist = 80; const maxDist = 100 ; const particles = Array.from({ length: n }, () => { return { x: Math.random() * width, y: Math.random() * height, vx: 0, vy: 0, } }) const drawCircle = (x,y) => { ctx.beginPath(); ctx.arc(x,y,radius,0,2*Math.PI); ctx.fill(); } const dist = (a,b) => { const dx = a.x - b.x; const dy = a.y - b.y; const d = (dx**2) + (dy**2); return Math.sqrt(d); }; ctx.fillStyle = 'black'; ctx.strokeStyle = 'black'; while (true) { ctx.save(); ctx.clearRect(0, 0, width, height); for (let i=0; i minDist ? (maxDist - di) / (maxDist - minDist) : 1; ctx.beginPath(); ctx.moveTo(pi.x, pi.y); ctx.lineTo(pj.x, pj.y); ctx.stroke(); } } } ctx.restore(); yield ctx.canvas; } }34:[] 31:{"id":"df46f72f1c21a09c","slug":"particles","title":"Particles","thumbnail":"f0cbbc93a0222e653d27b53b8463617798d4d14175f7ec292f593dca8d3f4344","access_level":"public","create_time":"$D2021-01-14T06:30:55.103Z","update_time":"$D2021-01-16T12:22:56.716Z","view_time":null,"first_public_time":"$D2023-04-14T14:31:56.129Z","fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"11f845e60dba498f","login":"nullhook","name":"nullhook","avatar_url":"https://avatars-next.observableusercontent.com/1cad328a11e08936aab1ffc8c1d8d328981e1b25ff66d7f7bb9b933d5d232e58","tier":"starter_2024"},"version":269,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"aa9aa40e2f07b5ca","login":"nullhook","name":"nullhook","avatar_url":"https://avatars-next.observableusercontent.com/1cad328a11e08936aab1ffc8c1d8d328981e1b25ff66d7f7bb9b933d5d232e58","tier":null}],"members":[{"type":"individual","id":"aa9aa40e2f07b5ca","login":"nullhook","name":"nullhook","avatar_url":"https://avatars-next.observableusercontent.com/1cad328a11e08936aab1ffc8c1d8d328981e1b25ff66d7f7bb9b933d5d232e58","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"007ad73437e0f8f8","slug":"canvas-2d","title":"Canvas 2d","owner":{"id":"11f845e60dba498f","login":"nullhook","name":"nullhook"}},"type":"notebook","body":{"title":"Particles","cells":[{"id":0,"value":"md`# Particles`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"chart = {\n const cx = new Float64Array(n).map(() => Math.random() * width);\n const cy = new Float64Array(n).map(() => Math.random() * height);\n const vx = new Float64Array(n);\n const vy = new Float64Array(n);\n const circles = new Array(n).fill(0).map((_,i) => svg``);\n const canvas = svg`\n ${circles}\n `\n \n while (true) {\n for (let i=0; i= width) cx[i] -= width; \n if (cy[i] < 0) cy[i] += height; else if (cy[i] >= height) cy[i] -= height;\n vx[i] += 0.2 * (Math.random() - 0.5) - 0.01 * vx[i];\n vy[i] += 0.2 * (Math.random() - 0.5) - 0.01 * vy[i];\n }\n yield canvas;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":146,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"n = 600","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":239,"value":"radius = 1.2","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"height = 600","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":87,"value":"function sinebow(t) {\n return \"#\" + [0, 1, 2].map(i => {\n const v = 255 * Math.sin(Math.PI * (t + i / 3)) ** 2;\n return Math.round(v).toString(16).padStart(2, \"0\");\n }).join(\"\");\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"svg = (await require(\"htl@0.2\")).svg","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 32:"$31:body"