2c:null 2d:["$","title",null,{"children":"Waterfall Fill | Robert Lesser | Observable"}] 32:Td72,canvas = { const pixelWidth = width + 28, pixelHeight = height; const context = DOM.context2d(pixelWidth, pixelHeight, 1); const image = context.getImageData(0, 0, pixelWidth, pixelHeight); let visitedPixelIndexes = []; let frame = 0; let startFlow = false; context.canvas.style.margin = "0 -14px"; context.canvas.style.imageRendering = "pixelated"; let t = 0; // seeds the first row of the image with gray while (t < pixelWidth) { visit(t, 1, 128, 128, 128); t++; } // colors the given pixel at x,y with [r,g,b] as the initial colors function visit(x, y, r, g, b) { // if the given pixel is off the canvas in the x or y direction, don't color if (x < 0 || x >= pixelWidth || y < 0 || y >= pixelHeight) return; // if the pixel reaches 90% of the way down the canvas, begin the scrolling if (y > 0.9 * pixelHeight) { startFlow = true; } // get the linearized position of the pixel (i), and the pixel color data index (j) const pixelIndex = y * pixelWidth + x, pixelDataIndex = pixelIndex << 2; // if the alpha value is still 0, the pixel has not yet been visitied if (image.data[pixelDataIndex + 3] === 0) { // color the pixel with a slightly altered color, and set the alpha to visible image.data[pixelDataIndex + 0] = r + (Math.random() < 0.5 ? -1 : 1); image.data[pixelDataIndex + 1] = g + (Math.random() < 0.5 ? -1 : 1); image.data[pixelDataIndex + 2] = b + (Math.random() < 0.5 ? -1 : 1); image.data[pixelDataIndex + 3] = 255; // add the pixel index to the list of visited pixels visitedPixelIndexes.push(pixelIndex); } } // removes the first row of pixels from the image, and alters the visited pixels in the index list function moveImageUp() { image.data.copyWithin(0, pixelWidth << 2, pixelWidth << (2 * pixelHeight)); visitedPixelIndexes = visitedPixelIndexes.map(i => i - pixelWidth); } // while there are pixels in the visited pixel list while (visitedPixelIndexes.length) { // in order to randomize the order that pixels are filled in, // choose a random pixel index const randomIndex = (Math.random() * visitedPixelIndexes.length) | 0; // get that pixel const randomPixel = visitedPixelIndexes[randomIndex]; // pop off the last pixel const lastPixel = visitedPixelIndexes.pop(); // move that last pixel to the random pixel's spot if (randomIndex < visitedPixelIndexes.length) visitedPixelIndexes[randomIndex] = lastPixel; // get location and color of random pixel const r = image.data[(randomPixel << 2) + 0]; const g = image.data[(randomPixel << 2) + 1]; const b = image.data[(randomPixel << 2) + 2]; const x = randomPixel % pixelWidth, y = (randomPixel / pixelWidth) | 0; // try to visit and color every pixel around that pixel // this adds them to the list if not yet colored 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); // every time a row worth of pixels has been added if (!(++frame % pixelWidth)) { // if the flow is activated, move the image up one row if (startFlow) { moveImageUp(); } // put the new image data on the canvas context.putImageData(image, 0, 0); yield context.canvas; } } context.putImageData(image, 0, 0); yield context.canvas; }33:[] 30:{"id":"7c66b7bf018ed680","slug":"waterfall-fill","title":"Waterfall Fill","thumbnail":"b1326615b6421bd2abf2744362223d3ad60254b1a7f67ebdec38e32ac85ea7aa","access_level":"public","create_time":"$D2019-06-01T14:03:11.521Z","update_time":"$D2022-03-01T05:42:51.633Z","view_time":null,"first_public_time":"$D2019-06-02T11:55:30.434Z","fork":{"id":"9392efa8cc9f2627","slug":"randomized-flood-fill","title":"Randomized Flood Fill","owner":{"id":"8c2e47252fd4995c","login":"mbostock","name":"Mike Bostock"}},"stars":21,"starred":false,"owner":{"type":"team","id":"c8b34d926b5d440d","login":"rlesser","name":"Robert Lesser","avatar_url":"https://avatars-next.observableusercontent.com/433f8326248db53a8d1ead342dfc4d46c845f915b422b6e7f6690ced0f18abd2","tier":"starter_2024"},"version":282,"publish_version":282,"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":true,"trashed":false,"subscribed":null,"forks":10,"collection":{"id":"a54987f5c1f96872","slug":"generative","title":"Flood Fill","owner":{"id":"c8b34d926b5d440d","login":"rlesser","name":"Robert Lesser"}},"type":"notebook","body":{"title":"Waterfall Fill","cells":[{"id":0,"value":"md`# Waterfall Fill\n\nBased on the forked notebook by Mike Bostock, with some slight alterations 🌊`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":247,"value":"fullscreen","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":6,"value":"height = 600","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":244,"value":"import {fullscreen} from '@mbostock/fullscreen-canvas'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":274,"value":"import { footer } from \"@rlesser/footer\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":275,"value":"footer(\"waterfall-fill\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 31:"$30:body"