Image Exorcist Effect Creator

function processImage(originalImg, glitchIntensity = 20, bandFrequency = 15, colorShift = 10, noiseAmount = 0.1, highContrast = 1) {
    /**
     * Creates an "Exorcist" style horror/glitch effect on an image.
     * This effect combines several techniques:
     * 1. Horizontal Glitch Bands: Slices of the image are shifted horizontally.
     * 2. Chromatic Aberration: The Red, Green, and Blue channels are misaligned.
     * 3. High Contrast Grayscale: The image is converted to black and white with harsh contrast.
     * 4. Digital Noise: Random pixels are colored to simulate static.
     * 5. Scan Lines: Faint horizontal lines are drawn to mimic an old CRT screen.
     *
     * @param {Image} originalImg - The input Image object.
     * @param {number} glitchIntensity - Controls the maximum horizontal shift of glitch bands. Range: 0+. Default: 20.
     * @param {number} bandFrequency - Controls the thickness of glitch bands. Smaller values create more frequent, thinner bands. Range: 1+. Default: 15.
     * @param {number} colorShift - The amount of pixel separation for the R/B color channels. Range: 0+. Default: 10.
     * @param {number} noiseAmount - The probability (0 to 1) of a pixel being replaced by noise. Range: 0.0-1.0. Default: 0.1.
     * @param {number} highContrast - A toggle (1 for on, 0 for off) for the desaturated high-contrast effect. Default: 1.
     */

    // 1. Setup Canvas and Context
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d', {
        willReadFrequently: true
    });
    const width = originalImg.naturalWidth;
    const height = originalImg.naturalHeight;
    canvas.width = width;
    canvas.height = height;

    // 2. Draw original image to get its pixel data
    ctx.drawImage(originalImg, 0, 0, width, height);
    const originalImageData = ctx.getImageData(0, 0, width, height);
    const originalData = originalImageData.data;

    // 3. Create a new ImageData object to store the manipulated pixels
    const outputImageData = ctx.createImageData(width, height);
    const outputData = outputImageData.data;

    // 4. Initialize variables for glitch band effect
    let currentGlitchOffset = 0;
    let bandHeightCounter = 0;

    // Helper to get a pixel channel from source data, safely wrapping coordinates
    const getPixelChannel = (data, x, y, channel) => {
        const wrappedX = (x + width) % width;
        const wrappedY = (y + height) % height;
        const index = (wrappedY * width + wrappedX) * 4;
        return data[index + channel];
    };

    // 5. Main loop to process every pixel
    for (let y = 0; y < height; y++) {
        // Decide if we should start a new glitch band
        if (bandHeightCounter <= 0) {
            // Set a random height for the next band
            bandHeightCounter = Math.floor(Math.random() * bandFrequency);
            // Set a random horizontal offset for this band
            currentGlitchOffset = (Math.random() - 0.5) * glitchIntensity;
        }
        bandHeightCounter--;

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

            // Calculate the source 'x' coordinate after applying the glitch offset
            const baseSourceX = x - currentGlitchOffset;

            // Calculate the source 'x' for each color channel to create aberration
            const redX = Math.round(baseSourceX - colorShift);
            const greenX = Math.round(baseSourceX);
            const blueX = Math.round(baseSourceX + colorShift);

            // Get the R, G, B values from their shifted positions in the original image
            let r = getPixelChannel(originalData, redX, y, 0);
            let g = getPixelChannel(originalData, greenX, y, 1);
            let b = getPixelChannel(originalData, blueX, y, 2);

            // 6. Optionally apply high-contrast grayscale effect
            if (highContrast > 0) {
                const luminance = 0.299 * r + 0.587 * g + 0.114 * b;
                // A harsh threshold creates a stark, creepy look
                const contrastedValue = (luminance < 100) ? 20 : 235;
                r = g = b = contrastedValue;
            }

            // 7. Optionally apply noise
            if (Math.random() < noiseAmount) {
                const noiseVal = Math.random() * 255;
                r = g = b = noiseVal;
            }

            // Set the final pixel color in the output data
            outputData[outputIndex] = r;
            outputData[outputIndex + 1] = g;
            outputData[outputIndex + 2] = b;
            outputData[outputIndex + 3] = 255; // Keep alpha at 100%
        }
    }

    // 8. Put the manipulated pixel data back onto the canvas
    ctx.putImageData(outputImageData, 0, 0);

    // 9. Add faint scan lines for a CRT monitor feel
    ctx.fillStyle = 'rgba(0, 0, 0, 0.2)';
    for (let i = 0; i < height; i += 4) {
        ctx.fillRect(0, i, width, 2);
    }

    // 10. Return the final canvas element
    return canvas;
}