2e:null 2f:["$","title",null,{"children":"Party-coloring this goddamn fish | Jeremy Ashkenas | Observable"}] 34: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; }35: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); } } }36:[] 32:{"id":"75cc721a77808799","slug":"flood-coloring-this-goddamn-fish","title":"Party-coloring this goddamn fish","thumbnail":"977f158455fcaf178d092bd1d79ee6a32b635631442b80a997113d24e0e658e9","access_level":"public","create_time":"$D2019-08-16T19:23:11.543Z","update_time":"$D2019-08-20T17:01:13.117Z","view_time":null,"first_public_time":"$D2019-08-16T19:53:44.636Z","has_unpublished_edits":null,"fork":false,"stars":10,"starred":false,"owner":{"type":"team","id":"172cc08ef8a18a4b","login":"jashkenas","name":"Jeremy Ashkenas","avatar_url":"https://avatars-next.observableusercontent.com/fa1903f8171d4621ef49de28e0ff1fb965960ec87df175d8b543c4b09508b45b","tier":"starter_2024"},"version":231,"publish_version":231,"role":null,"authored":false,"authors":[{"type":"individual","id":"783616ba9fb55f5d","login":"jashkenas","name":"Jeremy Ashkenas","avatar_url":"https://avatars-next.observableusercontent.com/fa1903f8171d4621ef49de28e0ff1fb965960ec87df175d8b543c4b09508b45b","tier":null}],"members":[{"type":"individual","id":"783616ba9fb55f5d","login":"jashkenas","name":"Jeremy Ashkenas","avatar_url":"https://avatars-next.observableusercontent.com/fa1903f8171d4621ef49de28e0ff1fb965960ec87df175d8b543c4b09508b45b","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":4,"collection":null,"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":"$34","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":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W36","stdlib":"1","titling":"auto"}} 33:"$32:body"