2e:null 2f:["$","title",null,{"children":"🇺🇸 Flood Fill | Robert Lesser | Observable"}] 34:T766,canvas = { regen const w = width + 28, h = width / 1.9; const context = DOM.context2d(w, h, 1); const image = context.getImageData(0, 0, w, h); const indexes = []; let frame = 0; const red = [178, 34, 52], white = [255, 255, 255], blue = [60, 59, 110] const unionWidth = w * .76 / 1.9 context.canvas.style.margin = "0 -14px"; context.canvas.style.imageRendering = "pixelated"; let stripe = 1 while (stripe <= 14) { const stripeColor = stripe % 2 ? red : white const unionColor = stripe < 7 ? blue : stripeColor const stripeCenter = Math.round(h * (stripe * 2 - 1) / 26) visit(unionWidth - w * .01, stripeCenter, ...unionColor); visit(unionWidth + w * .01, stripeCenter, ...stripeColor); console.log(h*stripe/13, stripe) stripe++ } // visit(w * .76/1.9, h >> 1, ...white); 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 + (Math.random() < 0.5 ? -1 : 1); image.data[j + 1] = g + (Math.random() < 0.5 ? -1 : 1); image.data[j + 2] = b + (Math.random() < 0.5 ? -1 : 1); image.data[j + 3] = 255; indexes.push(i); } } 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 r = image.data[(j << 2) + 0]; const g = image.data[(j << 2) + 1]; const b = image.data[(j << 2) + 2]; 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); if (!(++frame % 10000)) { context.putImageData(image, 0, 0); yield context.canvas; } } context.putImageData(image, 0, 0); yield context.canvas; }35:[] 32:{"id":"4de1bec494727ad4","slug":"flood-fill","title":"🇺🇸 Flood Fill","thumbnail":"77ad0ef27232f8f30f04c3ccb0ff39165fbd6c6012dc7970a130228cab726aae","access_level":"public","create_time":"$D2019-06-02T18:42:16.086Z","update_time":"$D2022-03-01T05:43:11.840Z","view_time":null,"first_public_time":"$D2019-07-06T14:35:26.284Z","has_unpublished_edits":null,"fork":{"id":"9392efa8cc9f2627","slug":"randomized-flood-fill","title":"Randomized Flood Fill","owner":{"id":"8c2e47252fd4995c","login":"mbostock","name":"Mike Bostock"}},"stars":10,"starred":false,"owner":{"type":"team","id":"c8b34d926b5d440d","login":"rlesser","name":"Robert Lesser","avatar_url":"https://avatars-next.observableusercontent.com/433f8326248db53a8d1ead342dfc4d46c845f915b422b6e7f6690ced0f18abd2","tier":"starter_2024"},"version":200,"publish_version":200,"role":null,"authored":false,"authors":[{"type":"individual","id":"2a6984a21bf6bf27","login":"rlesser","name":"Robert Lesser","avatar_url":"https://avatars-next.observableusercontent.com/433f8326248db53a8d1ead342dfc4d46c845f915b422b6e7f6690ced0f18abd2","tier":null}],"members":[{"type":"individual","id":"2a6984a21bf6bf27","login":"rlesser","name":"Robert Lesser","avatar_url":"https://avatars-next.observableusercontent.com/433f8326248db53a8d1ead342dfc4d46c845f915b422b6e7f6690ced0f18abd2","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"a54987f5c1f96872","slug":"generative","title":"Flood Fill","owner":{"id":"c8b34d926b5d440d","login":"rlesser","name":"Robert Lesser"}},"type":"notebook","body":{"title":"🇺🇸 Flood Fill","cells":[{"id":0,"value":"md`# 🇺🇸 Flood Fill\n\nGenerative flag art.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":178,"value":"viewof regen = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":190,"value":"import { footer } from \"@rlesser/footer\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":191,"value":"footer(\"flood-fill\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 33:"$32:body"