2e:null 2f:["$","title",null,{"children":"HCL Waterfall Fill | Robert Lesser | Observable"}] 34:Te3f,canvas = { restart; 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, (t / pixelWidth) * 360, start.c, start.l); t++; } // colors the given pixel at x,y with [h,c,l] as the initial colors function visit(x, y, h, c, l) { // 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) { // 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 visible 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] = 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 hcl = d3.hcl(d3.rgb(r, g, b)); 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 < 0 ? pixelWidth - 1 : x - 1, y, hcl.h, hcl.c, hcl.l); visit(x + 1 >= pixelWidth ? 0 : x + 1, y, hcl.h, hcl.c, hcl.l); visit(x, y - 1, hcl.h, hcl.c, hcl.l); visit(x, y + 1, hcl.h, hcl.c, hcl.l); // 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; }35:[] 32:{"id":"8b7310a1b38e8348","slug":"hcl-waterfall-fill","title":"HCL Waterfall Fill","thumbnail":"f7f30a55d826a1acaff4763bfb1f9b7405a6d215bdcf52b6a6572d72a0a02744","access_level":"public","create_time":"$D2020-12-19T20:18:59.175Z","update_time":"$D2022-03-01T05:49:07.991Z","view_time":null,"first_public_time":"$D2020-12-21T15:04:34.350Z","has_unpublished_edits":null,"fork":{"id":"7c66b7bf018ed680","slug":"waterfall-fill","title":"Waterfall Fill","owner":{"id":"c8b34d926b5d440d","login":"rlesser","name":"Robert Lesser"}},"stars":27,"starred":false,"owner":{"type":"team","id":"c8b34d926b5d440d","login":"rlesser","name":"Robert Lesser","avatar_url":"https://avatars-next.observableusercontent.com/433f8326248db53a8d1ead342dfc4d46c845f915b422b6e7f6690ced0f18abd2","tier":"starter_2024"},"version":758,"publish_version":758,"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":[{"id":"e26d0f95d9ff634c","reply_to_id":null,"content":"Very cool! I love the waterfall effect.\n\nI made some business cards once based on a similiar idea; you might enjoy the writeup: http://yuri.is/cardcrafting/","create_time":"$D2020-12-22T02:58:25.728Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"de2630f386f3cdb1","login":"yurivish","name":"Yuri Vishnevsky","avatar_url":"https://avatars-next.observableusercontent.com/c0c68df86cdf3364fbb25a90d00bb51b5aa7308a1ba7de3fa44d1ae591054612","tier":null}},{"id":"011dc783ea7caa63","reply_to_id":"e26d0f95d9ff634c","content":"Thanks! Those business cards (and all the visuals in the writeup) are beautiful. I love the crystalline nature of these floodfills","create_time":"$D2020-12-22T03:01:43.419Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"2a6984a21bf6bf27","login":"rlesser","name":"Robert Lesser","avatar_url":"https://avatars-next.observableusercontent.com/433f8326248db53a8d1ead342dfc4d46c845f915b422b6e7f6690ced0f18abd2","tier":null}},{"id":"e383e347cf8f954a","reply_to_id":"e26d0f95d9ff634c","content":"This is amazing ! <3","create_time":"$D2020-12-23T09:00:46.612Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"776ab6645e130f12","login":"kanapka94","name":"Adam","avatar_url":"https://avatars-next.observableusercontent.com/7c18248f6980c97b413b5d2c4c5c7b34a01066ced9d65aae6dd0d45513f33dbe","tier":null}}],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":6,"collection":{"id":"a54987f5c1f96872","slug":"generative","title":"Flood Fill","owner":{"id":"c8b34d926b5d440d","login":"rlesser","name":"Robert Lesser"}},"type":"notebook","body":{"title":"HCL Waterfall Fill","cells":[{"id":0,"value":"md`# HCL Waterfall Fill\n\nBased on my [forked notebook](https://observablehq.com/@rlesser/waterfall-fill) (which is based on a notebook by Mike Bostock), but using the HCL color scheme for more vibrant colors and wrap around flooding 🌊`","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":727,"value":"viewof restart = button('Restart')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":247,"value":"fullscreen","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":588,"value":"md`## util functions`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":400,"value":"driftHCL = hcl => {\n let newHCL = null;\n // do {\n newHCL = d3.hcl(hcl);\n newHCL.h += Math.random() < 0.5 ? -.5 : .5;\n if (newHCL.h > 360) {\n newHCL.h -= 360;\n }\n if (newHCL.h < 0) {\n newHCL.h += 360;\n }\n newHCL.c += Math.random() < 0.5 ? -1 : 1;\n if (newHCL.c < 20) {\n newHCL.c = 20;\n }\n newHCL.l += Math.random() < 0.5 ? -1 : 1;\n // } while (newHCL.displayable());\n return newHCL;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":405,"value":"passThruRGB = hcl => {\n const rgb = d3.rgb(hcl);\n rgb.r = Math.round(rgb.r);\n rgb.g = Math.round(rgb.g);\n rgb.b = Math.round(rgb.b);\n return d3.hcl(rgb);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":443,"value":"swatch = color => {\n const svg = d3\n .create('svg')\n .attr('width', 50)\n .attr('height', 50);\n const rect = svg\n .append('rect')\n .attr('width', 50)\n .attr('height', 50)\n .attr('fill', color);\n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":595,"value":"md`## constants`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":493,"value":"start = ({ c: 70, l: 50 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"pixelHeight = 600","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":601,"value":"pixelWidth = width + 28","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":598,"value":"md`## imports`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":683,"value":"import { button } from '@jashkenas/inputs'","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":244,"value":"import {fullscreen} from '@mbostock/fullscreen-canvas'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":279,"value":"d3 = require('d3')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":752,"value":"import { footer } from \"@rlesser/footer\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":753,"value":"footer(\"hcl-waterfall-fill\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 33:"$32:body"