30: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; }31:[] 2e:{"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"},{"id":3,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":727,"value":"viewof restart = button('Restart')","pinned":false,"hidden":false,"mode":"ojs"},{"id":247,"value":"fullscreen","pinned":false,"hidden":false,"mode":"ojs"},{"id":588,"value":"md`## util functions`","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"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"},{"id":595,"value":"md`## constants`","pinned":false,"hidden":false,"mode":"ojs"},{"id":493,"value":"start = ({ c: 70, l: 50 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"pixelHeight = 600","pinned":false,"hidden":false,"mode":"ojs"},{"id":601,"value":"pixelWidth = width + 28","pinned":false,"hidden":false,"mode":"ojs"},{"id":598,"value":"md`## imports`","pinned":false,"hidden":false,"mode":"ojs"},{"id":683,"value":"import { button } from '@jashkenas/inputs'","pinned":true,"hidden":false,"mode":"ojs"},{"id":244,"value":"import {fullscreen} from '@mbostock/fullscreen-canvas'","pinned":false,"hidden":false,"mode":"ojs"},{"id":279,"value":"d3 = require('d3')","pinned":true,"hidden":false,"mode":"ojs"},{"id":752,"value":"import { footer } from \"@rlesser/footer\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":753,"value":"footer(\"hcl-waterfall-fill\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}