AI Controlled Image Creator With Binary Rain Effect

/**
 * Creates an animated canvas that reveals the input image using a "Binary Rain" effect.
 * The falling characters are '0's and '1's, and their color is sampled from the
 * corresponding pixel of the original image, effectively "painting" the image with code.
 *
 * @param {HTMLImageElement} originalImg The source Image object.
 * @param {number} [fontSize=10] The font size of the binary characters. A smaller size results in a more detailed image representation.
 * @param {number} [fadeSpeed=0.05] A value from 0 to 1 that controls the length of the character trails. A lower value produces longer trails.
 * @returns {HTMLCanvasElement} A canvas element with the running animation. To stop the animation for performance reasons, call the attached `stopAnimation()` method on the returned canvas.
 */
function processImage(originalImg, fontSize = 10, fadeSpeed = 0.05) {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // Ensure parameters are valid numbers and within reasonable bounds.
    fontSize = Math.max(1, Number(fontSize) || 10);
    fadeSpeed = Math.max(0, Math.min(1, Number(fadeSpeed) || 0.05));

    // Set canvas dimensions to match the image
    canvas.width = originalImg.width;
    canvas.height = originalImg.height;

    // To get the pixel data, we first need to draw the image onto a canvas.
    // We'll use our main canvas for this and then clear it before starting the animation.
    ctx.drawImage(originalImg, 0, 0, canvas.width, canvas.height);
    const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    const pixelData = imageData.data;

    // Fill the canvas with a solid black background to start.
    ctx.fillStyle = '#000';
    ctx.fillRect(0, 0, canvas.width, canvas.height);

    // Setup columns for the rain. Each column is a stream of characters.
    const columns = Math.floor(canvas.width / fontSize);
    const drops = [];
    // Initialize the y-position of each drop randomly to fill the screen faster.
    for (let i = 0; i < columns; i++) {
        drops[i] = Math.floor(Math.random() * (canvas.height / fontSize));
    }

    let animationFrameId;

    const draw = () => {
        // Draw a semi-transparent black rectangle over the whole canvas.
        // This creates the fading "trail" effect for the characters.
        ctx.fillStyle = `rgba(0, 0, 0, ${fadeSpeed})`;
        ctx.fillRect(0, 0, canvas.width, canvas.height);

        // Set the font for the binary characters.
        ctx.font = `${fontSize}px monospace`;

        // Loop through each column
        for (let i = 0; i < drops.length; i++) {
            // Select a random binary character.
            const text = (Math.random() > 0.5) ? '1' : '0';

            const xPos = i * fontSize;
            const yPos = drops[i] * fontSize;

            // Check if the current drop position is within the canvas bounds.
            if (yPos < canvas.height && xPos < canvas.width) {
                const px = Math.floor(xPos);
                const py = Math.floor(yPos);

                // Calculate the index for the pixel data array. Each pixel has 4 values (R,G,B,A).
                const pixelIndex = (py * canvas.width + px) * 4;

                // Get the RGB values from the original image's pixel data.
                const r = pixelData[pixelIndex];
                const g = pixelData[pixelIndex + 1];
                const b = pixelData[pixelIndex + 2];

                // Set the fill style to the color of the pixel from the original image.
                ctx.fillStyle = `rgb(${r}, ${g}, ${b})`;

                // Draw the character.
                ctx.fillText(text, xPos, yPos);
            }

            // If a drop has reached the bottom of the screen, reset it to the top.
            // A small random chance is added to stagger the reset of the streams.
            if (yPos > canvas.height && Math.random() > 0.975) {
                drops[i] = 0;
            }

            // Move the drop down for the next frame.
            drops[i]++;
        }
    };

    function animationLoop() {
        draw();
        animationFrameId = requestAnimationFrame(animationLoop);
    }

    // Start the animation.
    animationLoop();

    // Attach a method to the canvas to allow the consumer of this function to stop the animation.
    // This is important for cleanup and performance if the canvas is removed from the DOM.
    canvas.stopAnimation = () => {
        if (animationFrameId) {
            cancelAnimationFrame(animationFrameId);
            animationFrameId = null;
        }
    };

    return canvas;
}