2b:null 2c:["$","title",null,{"children":"Z-Depth Particle Playground | kalmdown | Observable"}] 31:Tb12, 32:Ta41,canvas = { const minDistance2 = minDistance * minDistance; const maxDistance2 = maxDistance * maxDistance; const context = DOM.context2d(width, height); const particles = new Array(n); for (let i = 0; i < n; ++i) { particles[i] = { x: Math.random() * width, y: Math.random() * height, z: Math.random() * maxZDistance, vx: speed * 0.2 * (Math.random() - 0.5), vy: speed * 0.2 * (Math.random() - 0.5), vz: speed * 0.2 * (Math.random() - 0.5) }; } while (true) { context.save(); context.clearRect(0, 0, width, height); for (let i = 0; i < n; ++i) { const p = particles[i]; p.x += p.vx; if (p.x < -maxDistance) p.x += width + maxDistance * 2; else if (p.x > width + maxDistance) p.x -= width + maxDistance * 2; p.y += p.vy; if (p.y < -maxDistance) p.y += height + maxDistance * 2; else if (p.y > height + maxDistance) p.y -= height + maxDistance * 2; p.z += p.vz; if (p.z < 0) p.z += maxZDistance; else if (p.z > maxZDistance) p.z -= maxZDistance; p.vx += 0.2 * (Math.random() - .5) - 0.01 * p.vx; p.vy += 0.2 * (Math.random() - .5) - 0.01 * p.vy; p.vz += 0.2 * (Math.random() - .5) - 0.01 * p.vz; // p.vx = dampingFactor * p.vx + smoothFactor * (Math.random() - 0.5); // p.vy = dampingFactor * p.vy + smoothFactor * (Math.random() - 0.5); // p.vz = dampingFactor * p.vz + smoothFactor * (Math.random() - 0.5); if (p.z < maxZDistance) { context.globalAlpha = 1 - p.z / maxZDistance; context.beginPath(); context.arc(p.x, p.y, radius, 0, 2 * Math.PI); context.fill(); } } for (let i = 0; i < n; ++i) { for (let j = i + 1; j < n; ++j) { const pi = particles[i]; const pj = particles[j]; const dx = pi.x - pj.x; const dy = pi.y - pj.y; const dz = pi.z - pj.z; const d2 = dx * dx + dy * dy + dz * dz; if (d2 < maxDistance2) { const gradient = context.createLinearGradient(pi.x, pi.y, pj.x, pj.y); const opacityStart = 1 - pi.z / maxZDistance; const opacityEnd = 1 - pj.z / maxZDistance; gradient.addColorStop(0, `rgba(0, 0, 0, ${opacityStart})`); gradient.addColorStop(1, `rgba(0, 0, 0, ${opacityEnd})`); context.save(); context.strokeStyle = gradient; context.beginPath(); context.moveTo(pi.x, pi.y); context.lineTo(pj.x, pj.y); context.stroke(); } } } context.restore(); yield context.canvas; } } 33:[] 2f:{"id":"7b073c8bcefd8a93","slug":null,"title":"Z-Depth Particle Playground","thumbnail":null,"access_level":"public","create_time":"$D2023-04-10T18:13:36.384Z","update_time":"$D2023-04-10T18:15:32.619Z","view_time":null,"first_public_time":"$D2023-04-10T18:13:36.384Z","has_unpublished_edits":null,"fork":{"id":"ff187e736e88fae6","slug":null,"title":"Z-Depth Particle Playground","owner":{"id":"5139cef5fca98dea","login":"kalmdown","name":"kalmdown"}},"stars":0,"starred":false,"owner":{"type":"team","id":"5139cef5fca98dea","login":"kalmdown","name":"kalmdown","avatar_url":"https://avatars-next.observableusercontent.com/814a7bacd30761488bdf6c656b5f3b344a25453cf8e845fdffdc2b15c37937b4","tier":"starter_2024"},"version":64,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"bc77e0cd5faff006","login":"kalmdown","name":"kalmdown","avatar_url":"https://avatars-next.observableusercontent.com/814a7bacd30761488bdf6c656b5f3b344a25453cf8e845fdffdc2b15c37937b4","tier":null}],"members":[{"type":"individual","id":"bc77e0cd5faff006","login":"kalmdown","name":"kalmdown","avatar_url":"https://avatars-next.observableusercontent.com/814a7bacd30761488bdf6c656b5f3b344a25453cf8e845fdffdc2b15c37937b4","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Z-Depth Particle Playground","cells":[{"id":0,"value":"# Z-Depth Particle Playground","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":63,"value":"$31","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":5,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"radius = 2.5;","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"minDistance = 25;","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"maxDistance = 100;","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":47,"value":"maxZDistance = 200;","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"height=600;","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"n = 100;","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"speed = 1;","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"smoothFactor = 0.05; // Lower values create smoother movement","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"dampingFactor = 0.99; // Lower values create more long-term direction consistency","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 30:"$2f:body"