2b:null 2c:["$","title",null,{"children":"Connected Particles III (explained) | drio | Observable"}] 31:Tc36,canvas = { // Particles can move out of the html canvas. These two variables define a "container", // when a particular is outside the limits defined by those variables, // we bring them back into view. const minDistance2 = minDistance * minDistance; const maxDistance2 = maxDistance * maxDistance; const context = DOM.context2d(width, height); // Create n particles and give them a random location within the limits of the html canvas. // They all will be visible. //const particles = genParticles(n); // We generate outside this cell so we can stop the animation let c = this || DOM.context2d(width, height); if (stop) return yield c; while (true) { context.save(); // Not sure why this is necessary context.clearRect(0, 0, width, height); // Loop over the particles for (let i = 0; i < n; ++i) { const p = particles[i]; // Update their position using the velocity (another vector) p.x += p.vx; // If the x coordinate is outside the maxDistance limits, // bring the particle back to a "visible" x location if (p.x < -maxDistance) p.x += width + maxDistance * 2; else if (p.x > width + maxDistance) p.x -= width + maxDistance * 2; // Same for the y axis p.y += p.vy; if (p.y < -maxDistance) p.y += height + maxDistance * 2; else if (p.y > height + maxDistance) p.y -= height + maxDistance * 2; // Give the velocity a new value so the particle moves to a new position // that is close to the current one (see plots below). p.vx += 0.2 * (Math.random() - 0.5) - 0.01 * p.vx; p.vy += 0.2 * (Math.random() - 0.5) - 0.01 * p.vy; // Draw the particle context.beginPath(); context.arc(p.x, p.y, radius, 0, 2 * Math.PI); context.fill(); } // Work on the particle connections. Check one particle against all the // other ones. for (let i = 0; i < n; ++i) { for (let j = i + 1; j < n; ++j) { // get the two particles we are going to work on (pi, pj) const pi = particles[i]; const pj = particles[j]; // compute their distance const dx = pi.x - pj.x; const dy = pi.y - pj.y; const d2 = dx * dx + dy * dy; // if the particles are close enough connect them an give them an opacity if (d2 < maxDistance2) { const a = d2 > minDistance2 ? (maxDistance2 - d2) / (maxDistance2 - minDistance2) : 1; context.globalAlpha = a; context.beginPath(); context.moveTo(pi.x, pi.y); context.lineTo(pj.x, pj.y); context.stroke(); if (false) { console.log( `d2:${d2.toFixed( 1 )} < max2:${maxDistance2} -> min2:${minDistance2}: a:${a.toFixed( 1 )} (${pi.x.toFixed(0)},${pi.y.toFixed(0)}) (${pj.x.toFixed( 0 )},${pj.y.toFixed(0)})` ); } } } } context.restore(); yield context.canvas; await Promises.delay(delayms); } }32:[] 2f:{"id":"11722c10a56bf75f","slug":"connected-particles-iii-explained","title":"Connected Particles III (explained)","thumbnail":"14dbf84b74d1d4f552d67508b97c72163d1d5210ba08b1947336c1010e6dd430","access_level":"public","create_time":"$D2023-12-28T16:35:23.655Z","update_time":"$D2024-01-10T17:18:08.044Z","view_time":null,"first_public_time":"$D2023-12-28T16:35:23.655Z","fork":{"id":"7335bdad4ae41461","slug":"connected-particles-iii","title":"Connected Particles III","owner":{"id":"8c2e47252fd4995c","login":"mbostock","name":"Mike Bostock"}},"stars":2,"starred":false,"owner":{"type":"team","id":"3870ffad1196a4b8","login":"drio","name":"drio","avatar_url":"https://avatars-next.observableusercontent.com/a9488dda74759bbfa1c5a26f529c2b0dad0ac1562092e7ba3faa61f7786705c7","tier":"starter_2024"},"version":425,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"afbfd522a2020b91","login":"drio","name":"drio","avatar_url":"https://avatars-next.observableusercontent.com/a9488dda74759bbfa1c5a26f529c2b0dad0ac1562092e7ba3faa61f7786705c7","tier":null}],"members":[{"type":"individual","id":"afbfd522a2020b91","login":"drio","name":"drio","avatar_url":"https://avatars-next.observableusercontent.com/a9488dda74759bbfa1c5a26f529c2b0dad0ac1562092e7ba3faa61f7786705c7","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"Connected Particles III (explained)","cells":[{"id":0,"value":"md`# Connected Particles III (explained)\n\nThis is a fork from [Mike's particles](https://observablehq.com/@mbostock/connected-particles-iii). I forked it to try to understand his code. You'll find comments on the code, but, at a high level, this is how it works.\n\nWe first create a bunch of particles and place them randomly in the html canvas. \n\nAfter that, we loop over the particles and compute their new coordinates based on the [velocity](https://en.wikipedia.org/wiki/Velocity). We also recompute a new velocity for the next iteration. That new velocity is set in a way that the particle next position will be close to its current one.\n\nFinally, we compute the square distance of a particle against all the other particles. If they are close enough (based on maxDistance2) then connect them and give them an opacity based on how close they are.\n\n\nHe is a math magician.\n\n([See below](https://observablehq.com/@drio/connected-particles-iii-explained#height) to adjust parameters.)\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":422,"value":"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":275,"value":"viewof height = Inputs.range([100, 600], {\n value: 600,\n label: \"height\",\n step: 1\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":240,"value":"viewof delayms = Inputs.range([1, 100], {\n value: 35,\n label: \"delay (ms)\",\n step: 1\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"value":"viewof n = Inputs.range([10, 500], {\n value: 270,\n label: \"number of particles\",\n step: 1\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"viewof maxDistance = Inputs.range([5, 200], {\n value: 60,\n label: \"maxDistance\",\n step: 1\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"viewof minDistance = Inputs.range([5, 200], {\n value: 40,\n label: \"minDistance\",\n step: 1\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":283,"value":"viewof stop = Inputs.toggle({ label: \"Stop\" })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":406,"value":"md`# Playground`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":367,"value":"{\n const background = \"lightgrey\";\n const others = \"salmon\";\n\n const context = DOM.context2d(200, 200);\n context.fillStyle = background;\n context.fillRect(0, 0, 200, 200);\n\n context.fillStyle = others;\n context.beginPath();\n context.arc(100, 100, 3, 0, 2 * Math.PI);\n context.fill();\n\n context.beginPath();\n context.arc(150, 150, 3, 0, 2 * Math.PI);\n context.fill();\n\n context.globalAlpha = 0.6;\n context.beginPath();\n context.moveTo(100, 100);\n context.lineTo(150, 150);\n context.strokeStyle = others;\n context.stroke();\n\n return context.canvas;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":313,"value":"particles = genParticles(n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":244,"value":"function genParticles(n) {\n const particles = new Array(n);\n for (let i = 0; i < n; ++i) {\n particles[i] = {\n x: Math.random() * width,\n y: Math.random() * height,\n vx: 0,\n vy: 0\n };\n }\n return particles;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":157,"value":"{\n const d = d3\n .range(0, maxDistance * maxDistance * 2)\n .map((x) => ({ distance: x, opacity: computeOpacity(x) }));\n return Plot.dot(d, { x: \"distance\", y: \"opacity\" }).plot({ width });\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":184,"value":"function distance(pi, pj) {\n const dx = pi.x - pj.x;\n const dy = pi.y - pj.y;\n const d2 = dx * dx + dy * dy;\n return d2;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":186,"value":"distance({ x: 100, y: 100 }, { x: 110, y: 110 })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":130,"value":"computeOpacity","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":123,"value":"function computeOpacity(d2) {\n const minDistance2 = minDistance * minDistance;\n const maxDistance2 = maxDistance * maxDistance;\n let a = -1;\n if (d2 < maxDistance2) {\n a =\n d2 > minDistance2\n ? (maxDistance2 - d2) / (maxDistance2 - minDistance2)\n : 1;\n }\n return a;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":47,"value":"randomVelocity = {\n let vx = 0;\n const a = [{ vx, i: 0 }];\n for (let i = 0; i < 5000; i++) {\n vx += 0.2 * (Math.random() - 0.5) - 0.01 * vx;\n a.push({ vx, i });\n }\n return a;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":54,"value":"Plot.dot(randomVelocity, { x: \"i\", y: \"vx\" }).plot({ width })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":79,"value":"{\n const d = randomVelocity.map(({ vx }) => vx);\n return Plot.rectY({ length: 5000 }, Plot.binX({ y: \"count\" }, { x: d })).plot(\n { width }\n );\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"radius = 2.5","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":413,"value":"import { record } from \"@mourner/canvas-recorder\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W32","stdlib":"1","titling":"auto"}} 30:"$2f:body"