31:T554,canvas = { const w = width + 28, 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(seed[0], seed[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; }32:[] 2f:{"title":"Randomized Flood Fill with Interactive Seed","cells":[{"id":0,"value":"md`# Randomized Flood Fill with Interactive Seed\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.\n\nOriginal code was modified so that clicking on the picture would start the growing again with another seed. It took me a while to figure out how to attach a mouse callback to the picture which in turn changes a mutable, which in turn causes the refresh of the picture. See the **attachCanvasCallback**\n cell at the end.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":141,"value":"mutable seed = [width/2,height/2] // Where to start the flood fill\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":3,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"height = 600","pinned":false,"hidden":false,"mode":"ojs"},{"id":170,"value":"attachCanvasCallback = {\n canvas.onclick = function (event) {\n mutable seed = [event.offsetX, event.offsetY];\n console.log (event);\n }\n return \"attached\"\n}","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}