Image Investigation Of The Mask Of Persuasion

/**
 * Applies a series of glitch and CRT-style effects to an image,
 * inspired by the surreal visuals associated with the "Mask of Persuasion".
 * This function simulates:
 * 1. Chromatic Aberration: Splitting and shifting color channels.
 * 2. Glitch Slicing: Horizontally displacing random slices of the image.
 * 3. Scan Lines: Overlaying faint horizontal lines to mimic a CRT screen.
 *
 * @param {HTMLImageElement} originalImg The source image object.
 * @param {number} glitchIntensity A number from 0 to 100 controlling the amount and intensity of horizontal slice glitching. Defaults to 50.
 * @param {number} scanlineOpacity A number from 0 to 1 for the opacity of the scan lines. Defaults to 0.1.
 * @param {number} channelShift The number of pixels to shift the red and blue color channels for the chromatic aberration effect. Defaults to 5.
 * @returns {HTMLCanvasElement} A new canvas element with the effects applied.
 */
function processImage(originalImg, glitchIntensity = 50, scanlineOpacity = 0.1, channelShift = 5) {
    // 1. Canvas Setup
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    const width = originalImg.naturalWidth || originalImg.width;
    const height = originalImg.naturalHeight || originalImg.height;
    canvas.width = width;
    canvas.height = height;

    ctx.drawImage(originalImg, 0, 0, width, height);

    // Get initial image data for manipulation
    const originalImageData = ctx.getImageData(0, 0, width, height);
    
    // Clamp and validate parameters
    const safeChannelShift = Math.max(0, Number(channelShift) || 0);
    const safeGlitchIntensity = Math.max(0, Math.min(100, Number(glitchIntensity) || 0));
    const safeScanlineOpacity = Math.max(0, Math.min(1, Number(scanlineOpacity) || 0));

    // 2. Chromatic Aberration (Channel Shift)
    if (safeChannelShift > 0) {
        const originalData = originalImageData.data;
        const newImageData = ctx.createImageData(width, height);
        const newData = newImageData.data;

        for (let y = 0; y < height; y++) {
            for (let x = 0; x < width; x++) {
                const i = (y * width + x) * 4;

                // Red channel from a bit to the left
                const r_x = Math.max(0, x - safeChannelShift);
                const r_i = (y * width + r_x) * 4;
                newData[i] = originalData[r_i];

                // Green channel from the original position
                newData[i + 1] = originalData[i + 1];

                // Blue channel from a bit to the right
                const b_x = Math.min(width - 1, x + safeChannelShift);
                const b_i = (y * width + b_x) * 4;
                newData[i + 2] = originalData[b_i + 2];

                // Alpha channel
                newData[i + 3] = originalData[i + 3];
            }
        }
        // Replace the canvas content with the aberrated version
        ctx.putImageData(newImageData, 0, 0);
    }

    // 3. Glitch Slices (Horizontal Shift)
    if (safeGlitchIntensity > 0) {
        const numGlitches = Math.floor((safeGlitchIntensity / 100) * 30); // Max 30 slices

        for (let i = 0; i < numGlitches; i++) {
            // Pick a random starting y and height for the slice
            const y = Math.random() * height;
            const h = Math.random() * (height / 15) + 1;

            // Ensure the slice doesn't go past the bottom of the canvas
            const sliceY = y;
            const sliceH = Math.min(h, height - y);

            if (sliceH <= 0) continue;

            try {
                // Grab the slice of the image
                const sliceData = ctx.getImageData(0, sliceY, width, sliceH);

                // Shift it horizontally by a random amount
                const shift = (Math.random() - 0.5) * (width * 0.15);

                // Draw the shifted slice back onto the canvas
                ctx.putImageData(sliceData, shift, sliceY);
            } catch (e) {
                // This might happen with tainted canvases, but should be safe here.
                console.error("Error creating image glitch slice:", e);
            }
        }
    }


    // 4. Scan Lines
    if (safeScanlineOpacity > 0) {
        ctx.fillStyle = `rgba(0, 0, 0, ${safeScanlineOpacity})`;
        for (let y = 0; y < height; y += 2) {
            ctx.fillRect(0, y, width, 1);
        }
    }

    return canvas;
}