25:["$","title",null,{"children":"Randomized Flood Fill | kafunk | Observable"}] 49:T54c,canvas = { const w = width + 5, h = height; const context = DOM.context2d(w, h, 1); const image = context.getImageData(0, 0, w, h); const indexes = []; let frame = 0; context.canvas.style.margin = "0 -14px"; context.canvas.style.imageRendering = "pixelated"; visit(w >> 1, h >> 1, 128, 128, 128); 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 % 1000)) { context.putImageData(image, 0, 0); yield context.canvas; } } context.putImageData(image, 0, 0); yield context.canvas; }4a:[] 29:{"id":"4c2bcfe214dcfbe7","slug":null,"title":"Randomized Flood Fill","thumbnail":"beeaca7f629ab7f476e44b908ef9472332c64897b1a2acd2fe6cd2ad1a32e748","access_level":"public","create_time":"$D2018-02-01T16:18:15.901Z","update_time":"$D2018-02-01T16:19:19.324Z","view_time":null,"first_public_time":"$D2023-06-07T18:02:37.245Z","has_unpublished_edits":null,"fork":{"id":"9392efa8cc9f2627","slug":"randomized-flood-fill","title":"Randomized Flood Fill","owner":{"id":"8c2e47252fd4995c","login":"mbostock","name":"Mike Bostock"}},"stars":0,"starred":false,"owner":{"type":"team","id":"9c29be2429f33586","login":"kafunk","name":"","avatar_url":"https://avatars-next.observableusercontent.com/420726f803788cb777d3a55cff5a0459070bd0d0552c89682608f8da122b0fbd","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":147,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"1c1726b1498103f8","login":"kafunk","name":"","avatar_url":"https://avatars-next.observableusercontent.com/420726f803788cb777d3a55cff5a0459070bd0d0552c89682608f8da122b0fbd","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"1c1726b1498103f8","login":"kafunk","name":"","avatar_url":"https://avatars-next.observableusercontent.com/420726f803788cb777d3a55cff5a0459070bd0d0552c89682608f8da122b0fbd","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Randomized Flood Fill","cells":[{"id":0,"value":"md`# Randomized Flood Fill\n\nFor each iteration, a point on the fringe is chosen randomly. Any of the four neighbors of the chosen point that are empty are assigned a similar color and added to the fringe.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"$49","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"height = 500","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4a","stdlib":"1"}} 24:null