31:T41f,floodIt = { let b = html`

`; let interval; b.querySelector("#flood").addEventListener("click", () => { flood(floodFish); }); b.querySelector("#clear").addEventListener("click", () => { mutable clear = null; }); b.querySelector("#party").addEventListener("click", () => { if (interval) { clearInterval(interval); b.querySelector("#party").innerText = "🎉 Party"; interval = null; } else { interval = setInterval(() => { flood(floodFish); }, 250); b.querySelector("#party").innerText = "😭 End party"; } }); invalidation .catch(() => clearInterval(interval)) .then(() => clearInterval(interval)); flood(floodFish); return b; }32:T67e,// Only copied instead of imported because I needed to change the allowable number of passes. flood = context => { const w = width, h = height; let frame = 0; let image = context.getImageData(0, 0, w, h); for (let i = 0; i < image.data.length; i += 4) { let on = image.data[i + 3] === 255 && image.data[i] === 0; image.data[i] = on ? 0 : 255; image.data[i + 1] = on ? 0 : 255; image.data[i + 2] = on ? 0 : 255; image.data[i + 3] = on ? 255 : 0; } let start; let passes = 0; for (let x = 0; x < w; x++) { for (let y = 0; y < h; y++) { if (image.data[x * 4 + y * w * 4 + 3] === 0) { flood( x, y, 50 + ~~(Math.random() * 200), 50 + ~~(Math.random() * 200), 50 + ~~(Math.random() * 200) ); } } } context.putImageData(image, 0, 0); function flood(x, y, r, g, b) { const indexes = []; function visit(x, y, r, g, b) { if (x < 0 || x >= w || y < 0 || y >= h) return; const i = y * w + x, j = i << 2; if (image.data[j + 3] === 0) { image.data[j + 0] = r; image.data[j + 1] = g; image.data[j + 2] = b; image.data[j + 3] = 255; indexes.push(i); } } visit(x, y, r, g, b); while (indexes.length) { const i = (Math.random() * indexes.length) | 0; const j = indexes[i]; const k = indexes.pop(); if (i < indexes.length) indexes[i] = k; const x = j % w, y = (j / w) | 0; visit(x - 1, y, r, g, b); visit(x + 1, y, r, g, b); visit(x, y - 1, r, g, b); visit(x, y + 1, r, g, b); } } }33:[] 2f:{"title":"Party-coloring this goddamn fish","cells":[{"id":0,"value":"md`# Party-coloring this goddamn fish\n\nBecause [Tom has wanted to color this fish](https://observablehq.com/@tmcw/four-coloring-this-goddamn-fish) for way too long.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":163,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":14,"value":"viewof floodFish = {\n let c = DOM.context2d(fishImg.width, fishImg.height);\n c.canvas.style.maxWidth = \"100%\";\n c.canvas.value = c;\n return c.canvas;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":227,"value":"drawFish = {\n clear;\n const px = fish.getImageData(0, 0, fish.canvas.width, fish.canvas.height);\n for (let i = 0; i < px.data.length; i += 4) {\n if (px.data[i] + px.data[i + 1] + px.data[i + 2] > 250) {\n px.data[i + 0] = px.data[i + 1] = px.data[i + 2] = 255;\n } else {\n px.data[i + 0] = px.data[i + 1] = px.data[i + 2] = 0;\n }\n }\n floodFish.putImageData(px, 0, 0);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":169,"value":"mutable clear = null","pinned":false,"hidden":false,"mode":"ojs"},{"id":25,"value":"height = fish.canvas.height","pinned":false,"hidden":false,"mode":"ojs"},{"id":27,"value":"width = fish.canvas.width","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"import {fish, fishImg} from \"@tmcw/four-coloring-this-goddamn-fish\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":155,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}