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; }