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