29:null 2a:["$","title",null,{"children":"Flood-Filling New York City | Robert Lesser | Observable"}] 2f:T14aa,{ const context = await canvasContextFromSVG(svg); // context.canvas.style.imageRendering = "pixelated"; let floodWidth = context.canvas.width; let floodHeight = context.canvas.height; const image = context.getImageData(0, 0, floodWidth, floodHeight); restart; const WALL_ALPHA = 255; const FILL_ALPHA_1 = 254; const FILL_ALPHA_2 = 253; let currentFillAlpha = FILL_ALPHA_2; let nextFillAlpha = FILL_ALPHA_1; // clear partial colors for (let i = 0; i < floodWidth * floodHeight; i++) { image.data[(i << 2) + 0] = 255; image.data[(i << 2) + 1] = 255; image.data[(i << 2) + 2] = 255; if (image.data[(i << 2) + 3] > 220) { image.data[(i << 2) + 3] = WALL_ALPHA; } if (image.data[(i << 2) + 3] < WALL_ALPHA) { image.data[(i << 2) + 3] = nextFillAlpha; } } if (!on) { context.putImageData(image, 0, 0); yield context.canvas; return; } let visitedPixelIndexes = []; let pixelCount = 0; let nextFrameCount = 1; // colors the given pixel at x,y with [h,c,l] as the initial colors, // and a as the filling alpha function visit(x, y, h, c, l, a) { // if the given pixel is off the canvas in the x or y direction, don't color if (x < 0 || x >= floodWidth || y < 0 || y >= floodHeight) return; // get the linearized position of the pixel (i), and the pixel color data index (j) const pixelIndex = y * floodWidth + x, pixelDataIndex = pixelIndex << 2; // if the alpha value is anything other than the passed in alpha or the wall alpha, // it can be colored if ( image.data[pixelDataIndex + 3] != a && image.data[pixelDataIndex + 3] != WALL_ALPHA ) { // Alter the HCL let rgb = null; let hcl = null; hcl = driftHCL(d3.hcl(h, c, l)); rgb = d3.rgb(hcl); // color the pixel with a slightly altered color, and set the alpha to the passed in value image.data[pixelDataIndex + 0] = Math.round(rgb.r); image.data[pixelDataIndex + 1] = Math.round(rgb.g); image.data[pixelDataIndex + 2] = Math.round(rgb.b); image.data[pixelDataIndex + 3] = a; // add the pixel index to the list of visited pixels visitedPixelIndexes.push(pixelIndex); } } const startPixels = []; let hudsonStatus = "not seen"; // find the Hudson for (let i = 0; i < floodWidth; i++) { // the Hudson will be the first continuous set of colorable pixels in the top row if ( image.data[(i << 2) + 3] == nextFillAlpha && hudsonStatus == "not seen" ) { startPixels.push(i); hudsonStatus = "in progress"; } else if ( image.data[(i << 2) + 3] == nextFillAlpha && hudsonStatus == "in progress" ) { startPixels.push(i); } else if ( image.data[(i << 2) + 3] == WALL_ALPHA && hudsonStatus == "in progress" ) { hudsonStatus = "ended"; } } // Seed hudson with color function seed() { const randHue = d3.randomInt(0, 360)(); startPixels.forEach((p) => { visit(p, 0, randHue, 85, 50, currentFillAlpha); }); } seed(); // 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 a = image.data[(randomPixel << 2) + 3]; const hcl = d3.hcl(d3.rgb(r, g, b)); const x = randomPixel % floodWidth, y = (randomPixel / floodWidth) | 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, hcl.h, hcl.c, hcl.l, a); visit(x + 1, y, hcl.h, hcl.c, hcl.l, a); visit(x, y - 1, hcl.h, hcl.c, hcl.l, a); visit(x, y + 1, hcl.h, hcl.c, hcl.l, a); // visit diagonal pixels as well to get through tight corners visit(x - 1, y - 1, hcl.h, hcl.c, hcl.l, a); visit(x + 1, y + 1, hcl.h, hcl.c, hcl.l, a); visit(x - 1, y + 1, hcl.h, hcl.c, hcl.l, a); visit(x + 1, y - 1, hcl.h, hcl.c, hcl.l, a); // every time a row worth of pixels has been added if (++pixelCount == nextFrameCount) { // put the new image data on the canvas nextFrameCount += Math.max(visitedPixelIndexes.length, 10); context.putImageData(image, 0, 0); yield context.canvas; } // DO NOT ENABLE - THIS IS EVIL AND DANGEROUS: // if (y == 203 && x == 1184) { // This version is much safer: if (visitedPixelIndexes.length == 0 && mode == "Continuous Flood") { let temp = currentFillAlpha; currentFillAlpha = nextFillAlpha; nextFillAlpha = temp; seed(); } } context.putImageData(image, 0, 0); yield context.canvas; }30:T4e7,My belated entry in the [#30DayMapChallenge](https://github.com/tjukanovt/30DayMapChallenge) for day 18 (Water), or maybe day 10 (Raster). More of a map-based art piece than dataviz, but it was inspired by the many other beautiful maps I've seen this month, so it's at least related. *What is this?* [Flood Filling](https://en.wikipedia.org/wiki/Flood_fill) is a method of filling pixels in an connected area, and this version has each pixel get a slightly different color than its adjacent predecessor. Additionally, pixels that represent the land of the NYC area cannot be filled, causing the pixels to "flow" around them. Once the process completes, new colors flood over the old ones. The Hudson River is set as the start point, to represent how the real watershed of the area. *Acknowledgements* Thanks to Mike Bostock for his [svg serialization notebook](https://observablehq.com/@mbostock/saving-svg) and his original [flood fill notebook](https://observablehq.com/@mbostock/randomized-flood-fill), which I built off of in my [HCL Waterfall Fill notebook](https://observablehq.com/@rlesser/hcl-waterfall-fill), which was heavily adapted here. Also thanks to Fil for his [viewport based height utility](https://observablehq.com/@fil/height).31:[{"id":"c98236f32aa2a0ac078c62afaa77c21201247efe7a2b6d92b2eef3b7fdbfedde6d73ab6d6ad4fdd517bf7a8e826b2b356d3a3b463005498cd6c639e575b2a2d7","href":"https://static.observableusercontent.com/files/c98236f32aa2a0ac078c62afaa77c21201247efe7a2b6d92b2eef3b7fdbfedde6d73ab6d6ad4fdd517bf7a8e826b2b356d3a3b463005498cd6c639e575b2a2d7","name":"Coastline_(2002)_of_New_Jersey (1).geojson","type":"application/geo+json","lastModified":1637932725713.982,"size":8862796},{"id":"ac5b0d80fdd34932e3ff8ec4a7c0939bc8b305697a3f4bc4296f255048202bedc096d5dce17d4cc2f3922a5fcbb53993bddd50458454fd7e2e7ae776ae292633","href":"https://static.observableusercontent.com/files/ac5b0d80fdd34932e3ff8ec4a7c0939bc8b305697a3f4bc4296f255048202bedc096d5dce17d4cc2f3922a5fcbb53993bddd50458454fd7e2e7ae776ae292633","name":"city.json","type":"application/json","lastModified":1636953788921.031,"size":3245268}] 2d:{"id":"5fe438209a52fc70","slug":"flood-filling-new-york-city","title":"Flood-Filling New York City","thumbnail":"7211cc3254ac4dcb8fb061aff29a2fc748c6b39801e71c232b44b73738da5246","access_level":"public","create_time":"$D2021-11-07T18:15:22.347Z","update_time":"$D2022-03-01T05:59:39.374Z","view_time":null,"first_public_time":"$D2021-11-29T22:40:34.051Z","has_unpublished_edits":null,"fork":false,"stars":12,"starred":false,"owner":{"type":"team","id":"c8b34d926b5d440d","login":"rlesser","name":"Robert Lesser","avatar_url":"https://avatars-next.observableusercontent.com/433f8326248db53a8d1ead342dfc4d46c845f915b422b6e7f6690ced0f18abd2","tier":"starter_2024"},"version":1450,"publish_version":1450,"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,"lapsed":null,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"title":"Flood-Filling New York City","cells":[{"id":0,"value":"md`# Flood-Filling New York City`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":251,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1192,"value":"{\n const button = html`