2e:null 2f:["$","title",null,{"children":"Battle of Colors | pembeci | Observable"}] 34:Te3c,canvas = { const n = 120 const height = Math.ceil(width * screen.height / screen.width); const margin = 60; const context = DOM.context2d(width, height); const particles = Array.from({length: n}, () => [Math.random() * width, Math.random() * height, 0, 0]); const colors = d3.schemeSet3; const particleColors = particles.map((c,i) => i % colors.length); context.canvas.style.background = "#fff"; context.strokeStyle = "black"; let lastMutation = 0; let counts = Array.from({length: colors.length}, () => 0); let alive = colors.length; while (true) { const delaunay = new d3.Delaunay.from(particles); const voronoi = delaunay.voronoi([0, 0, width, height]); context.save(); context.clearRect(0, 0, width, height); // context.beginPath(); // delaunay.renderPoints(context); // context.fill(); // context.beginPath(); // voronoi.render(context); for (let i=0; i 0 && Math.random()<0.001) particleColors[i]--; // else if (particleColors[i] < colors.length-1 && Math.random()<0.001) particleColors[i]++; const js = Array.from(delaunay.neighbors(i)); const n_counts = Array.from({length: colors.length}, () => 0); js.forEach(j=> { n_counts[particleColors[j]]++; }); n_counts.forEach( (v,k)=> { if (v > js.length * (alive > 7 ? 0.40 :0.65) && Math.random()<0.005 && counts[k] > 3) { particleColors[i] = k; } }) if (js.length > 3 && js.every(j => j == js[0])) { particleColors[i] = particleColors[js[0]]; } if (js.length > 0 && Math.random()<0.0020) { const k = Math.floor(Math.random() * js.length); particleColors[i] = particleColors[js[k]]; } if (Math.random()< (alive < 5 ? 0.001 : 0.0001)) { particleColors[i] = Math.floor(Math.random() * colors.length); // lastMutation = i; } if (Math.random()<0.0001) { let k = i; while (k==i) { k = Math.floor(Math.random() * n) } if (counts[particleColors[k]] / counts[particleColors[i]] < 0.5) { particleColors[i] = particleColors[k]; } else { particleColors[k] = particleColors[i]; } } counts = Array.from({length: colors.length}, () => 0); particleColors.forEach(v => { counts[v]++; lastMutation = v; }); alive = counts.filter(v => v > 0).length; counts.forEach((v,k) => { if (v > 0 && v < counts[lastMutation]) { lastMutation = k; } }) // yield lastMutation; // await Promises.delay(100); context.fillStyle = colors[particleColors[i]]; context.lineWidth = particleColors[i] == lastMutation && counts[lastMutation] <= 3 ? 3 : 1; context.strokeStyle = particleColors[i] == lastMutation && counts[lastMutation] <= 3 ? "black" : "#777"; voronoi.renderCell(i, context); context.fill(); context.stroke(); context.closePath(); // yield context.canvas; // await Promises.delay(200); } // context.stroke(); yield context.canvas; for (const p of particles) { p[0] += p[2]; p[1] += p[3]; if (p[0] < -margin) p[0] += width + margin * 2; else if (p[0] > width + margin) p[0] -= width + margin * 2; if (p[1] < -margin) p[1] += height + margin * 2; else if (p[1] > height + margin) p[1] -= height + margin * 2; p[2] += 0.2 * (Math.random() - 0.5) - 0.01 * p[2]; p[3] += 0.2 * (Math.random() - 0.5) - 0.01 * p[3]; } } }35:[] 32:{"id":"232b4adaacef0505","slug":"battle-of-colors","title":"Battle of Colors","thumbnail":"79dc8635622b1a958e6384c71bc76aaec4d4d0f6ab58cda844e7f64794a384d8","access_level":"public","create_time":"$D2019-01-24T20:39:16.881Z","update_time":"$D2020-02-24T22:24:57.064Z","view_time":null,"first_public_time":"$D2019-05-29T22:47:10.088Z","has_unpublished_edits":null,"fork":{"id":"fe9ad230801481be","slug":"fullscreen-canvas","title":"Fullscreen Canvas","owner":{"id":"8c2e47252fd4995c","login":"mbostock","name":"Mike Bostock"}},"stars":10,"starred":false,"owner":{"type":"team","id":"88abc8fecdeb7811","login":"pembeci","name":"","avatar_url":"https://avatars-next.observableusercontent.com/f1ff548c862bdb114171e430f5632b7bea66b973a6a092c53b86ecf9211ca9a0","tier":"starter_2024"},"version":181,"publish_version":181,"role":null,"authored":false,"authors":[{"type":"individual","id":"d703748563fe201b","login":"pembeci","name":"","avatar_url":"https://avatars-next.observableusercontent.com/f1ff548c862bdb114171e430f5632b7bea66b973a6a092c53b86ecf9211ca9a0","tier":null}],"members":[{"type":"individual","id":"d703748563fe201b","login":"pembeci","name":"","avatar_url":"https://avatars-next.observableusercontent.com/f1ff548c862bdb114171e430f5632b7bea66b973a6a092c53b86ecf9211ca9a0","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":{"id":"6ad523ac4dcb4b45","slug":"instagram-shares","title":"Observable's Instagram Shares","owner":{"id":"f35c755083683fe5","login":"observablehq","name":"Observable"}},"type":"notebook","body":{"title":"Battle of Colors","cells":[{"id":0,"value":"md`# Battle of Colors\n\nWhich color will dominate the world at the end? Go Fullscreen and use it as screen saver when you are taking a break from Observable.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":175,"value":"html`

🧙

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"fullscreen = {\n const button = html`