Image Holographic Filter Application

async function processImage(originalImg, colorIntensity = 0.4, frequency = 0.05, scanLineWidth = 1, scanLineSpacing = 4, scanLineAlpha = 0.3) {
    // 1. Create canvas and get context
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // Determine image dimensions. naturalWidth/Height are for HTMLImageElement.
    // Fallback to width/height for other image sources like another canvas.
    const width = originalImg.naturalWidth || originalImg.width;
    const height = originalImg.naturalHeight || originalImg.height;

    // Basic check for valid dimensions
    if (width === 0 || height === 0) {
        console.error("Image has zero width or height. Ensure the image is loaded and valid.");
        // Return a minimally sized empty canvas or handle error as appropriate
        canvas.width = 1;
        canvas.height = 1;
        return canvas;
    }

    // 2. Set canvas dimensions and draw original image
    canvas.width = width;
    canvas.height = height;
    ctx.drawImage(originalImg, 0, 0, width, height);

    // 3. Get image data
    let imageData;
    try {
        imageData = ctx.getImageData(0, 0, width, height);
    } catch (e) {
        console.error("Could not get image data (e.g., canvas tainted by cross-origin image without CORS):", e);
        // If getImageData fails, return the canvas with the original image drawn
        return canvas;
    }
    
    const data = imageData.data; // This is a Uint8ClampedArray

    // 4. Apply holographic color shift and scan lines pixel by pixel
    for (let y = 0; y < height; y++) {
        for (let x = 0; x < width; x++) {
            const i = (y * width + x) * 4; // Index for the Red channel of the current pixel

            const r_orig = data[i];
            const g_orig = data[i+1];
            const b_orig = data[i+2];
            // Alpha channel (data[i+3]) will be preserved

            // Holographic color shift calculation:
            // The angle for sinusoidal color cycling is based on pixel coordinates and frequency.
            // (x + y) creates diagonal wave patterns for the colors.
            const angle = (x + y) * frequency;

            // Calculate spectral color components (these will be in the range 0-1)
            // Using sine waves with phase shifts for R, G, B creates a rainbow color cycle.
            // (0.5 * (1 + Math.sin(...))) maps the sin output from [-1, 1] to [0, 1].
            const spectralR_component = 0.5 * (1 + Math.sin(angle)); 
            const spectralG_component = 0.5 * (1 + Math.sin(angle + (Math.PI * 2 / 3))); // Phase shift by 120 degrees
            const spectralB_component = 0.5 * (1 + Math.sin(angle + (Math.PI * 4 / 3))); // Phase shift by 240 degrees

            // Scale spectral components to 0-255 range
            const spectralR_value = spectralR_component * 255;
            const spectralG_value = spectralG_component * 255;
            const spectralB_value = spectralB_component * 255;

            // Add the calculated spectral color to the original pixel color.
            // colorIntensity (0.0 to 1.0+) scales the strength of the added spectral light.
            let newR = Math.min(255, r_orig + spectralR_value * colorIntensity);
            let newG = Math.min(255, g_orig + spectralG_value * colorIntensity);
            let newB = Math.min(255, b_orig + spectralB_value * colorIntensity);

            // Apply scan lines:
            // Check if the current row 'y' falls within a scan line band.
            // A scan line is drawn if scanLineWidth > 0 and y % scanLineSpacing is less than scanLineWidth.
            if (scanLineWidth > 0 && scanLineSpacing > 0 && (y % scanLineSpacing < scanLineWidth)) {
                // scanLineAlpha (0.0 to 1.0) determines the darkness/opacity of the scan line.
                // 0.0 means no visible line, 1.0 means a fully black line (or reduction to 0).
                // The reductionFactor darkens the pixel: (1.0 - scanLineAlpha).
                // E.g., if scanLineAlpha is 0.3, pixels are multiplied by 0.7.
                const reductionFactor = 1.0 - scanLineAlpha; 
                newR *= reductionFactor;
                newG *= reductionFactor;
                newB *= reductionFactor;
            }

            // Update the pixel data in the imageData array
            data[i]   = newR;
            data[i+1] = newG;
            data[i+2] = newB;
            // data[i+3] (alpha channel) is intentionally left unchanged to preserve original transparency
        }
    }

    // 5. Put the modified image data back onto the canvas
    ctx.putImageData(imageData, 0, 0);

    // 6. Return the canvas element with the holographic effect applied
    return canvas;
}