2d:null 2e:["$","title",null,{"children":"Party-coloring this goddamn fish | Nabil Kashyap | Observable"}] 33: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; }34: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); } } }35:[] 31:{"id":"402a39d97e269122","slug":"party-coloring-this-goddamn-fish","title":"Party-coloring this goddamn fish","thumbnail":"e79668d9f1707cf31ca4f258cabe046445bd5f20e86ac3b8cfa4d4ec1b38ac27","access_level":"public","create_time":"$D2019-10-11T14:08:41.646Z","update_time":"$D2019-10-11T14:08:41.646Z","view_time":null,"first_public_time":"$D2019-10-11T14:08:47.067Z","has_unpublished_edits":null,"fork":{"id":"75cc721a77808799","slug":"flood-coloring-this-goddamn-fish","title":"Party-coloring this goddamn fish","owner":{"id":"172cc08ef8a18a4b","login":"jashkenas","name":"Jeremy Ashkenas"}},"stars":0,"starred":false,"owner":{"type":"team","id":"92032f850a4679ab","login":"bulbil","name":"Nabil Kashyap","avatar_url":"https://avatars-next.observableusercontent.com/d9e8d262f1076187594d379710a3a83a646393d004ed9faaffc35a85a0f4f9ce","tier":"starter_2024"},"version":231,"publish_version":231,"role":null,"authored":false,"authors":[{"type":"individual","id":"72aca3ddc200afbc","login":"bulbil","name":"Nabil Kashyap","avatar_url":"https://avatars-next.observableusercontent.com/d9e8d262f1076187594d379710a3a83a646393d004ed9faaffc35a85a0f4f9ce","tier":null}],"members":[{"type":"individual","id":"72aca3ddc200afbc","login":"bulbil","name":"Nabil Kashyap","avatar_url":"https://avatars-next.observableusercontent.com/d9e8d262f1076187594d379710a3a83a646393d004ed9faaffc35a85a0f4f9ce","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"19933efcb70be790","slug":"lib-lab-2019","title":"Lib/Lab 2019","owner":{"id":"92032f850a4679ab","login":"bulbil","name":"Nabil Kashyap"}},"type":"notebook","body":{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":163,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":169,"value":"mutable clear = null","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"height = fish.canvas.height","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"width = fish.canvas.width","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"import {fish, fishImg} from \"@tmcw/four-coloring-this-goddamn-fish\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":155,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 32:"$31:body"