TV Negative Image Effect Generator

function processImage(originalImg, scanlineHeight = 2, scanlineOpacity = 0.25, noiseAmount = 0.1, rgbShiftAmount = 3, vignetteIntensity = 0.3) {
    // Parameter validation and defaults
    scanlineHeight = Math.max(1, parseInt(scanlineHeight, 10) || 2);
    scanlineOpacity = isNaN(parseFloat(scanlineOpacity)) ? 0.25 : parseFloat(scanlineOpacity);
    noiseAmount = isNaN(parseFloat(noiseAmount)) ? 0.1 : parseFloat(noiseAmount);
    rgbShiftAmount = isNaN(parseInt(rgbShiftAmount, 10)) ? 3 : parseInt(rgbShiftAmount, 10);
    vignetteIntensity = isNaN(parseFloat(vignetteIntensity)) ? 0.3 : parseFloat(vignetteIntensity);

    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    canvas.width = originalImg.width;
    canvas.height = originalImg.height;

    // Draw the original image onto the canvas
    ctx.drawImage(originalImg, 0, 0);

    const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    const data = imageData.data;
    
    // Create a copy of the pixel data to read from, allowing us to safely shift RGB values
    const tempBuffer = new Uint8ClampedArray(data);

    const halfWidth = canvas.width / 2;
    const halfHeight = canvas.height / 2;

    for (let y = 0; y < canvas.height; y++) {
        // Precalculate vertical values for vignette and scanline to optimize performance
        const normY = (y - halfHeight) / halfHeight;
        const normY2 = normY * normY;
        const isScanline = y % (scanlineHeight * 2) >= scanlineHeight;
        
        for (let x = 0; x < canvas.width; x++) {
            const i = (y * canvas.width + x) * 4;

            // Chromatic aberration (RGB shift) coordinate calculation
            const rShiftX = Math.max(0, x - rgbShiftAmount);
            const bShiftX = Math.min(canvas.width - 1, x + rgbShiftAmount);

            const rShiftIdx = (y * canvas.width + rShiftX) * 4;
            const bShiftIdx = (y * canvas.width + bShiftX) * 4;

            // Invert colors to create a "negative" and apply the RGB channel shift
            let r = 255 - tempBuffer[rShiftIdx];       // Red channel (shifted left)
            let g = 255 - tempBuffer[i + 1];           // Green channel (center)
            let b = 255 - tempBuffer[bShiftIdx + 2];   // Blue channel (shifted right)

            // Add TV static noise
            if (noiseAmount > 0) {
                const noise = (Math.random() - 0.5) * 255 * noiseAmount;
                r += noise;
                g += noise;
                b += noise;
            }

            // Apply horizontal CRT scanline darkening
            if (isScanline) {
                const dimFactor = 1 - scanlineOpacity;
                r *= dimFactor;
                g *= dimFactor;
                b *= dimFactor;
            }

            // Apply slight vignette to mimic curved CRT screen edges lighting
            if (vignetteIntensity > 0) {
                const normX = (x - halfWidth) / halfWidth;
                const vignette = 1 - vignetteIntensity * (normX * normX + normY2);
                r *= vignette;
                g *= vignette;
                b *= vignette;
            }

            // Write processed data back to the array (Uint8ClampedArray handles limiting to 0-255 automatically)
            data[i] = r;
            data[i + 1] = g;
            data[i + 2] = b;
            // Alpha channel (data[i + 3]) remains untouched from the original image
        }
    }

    ctx.putImageData(imageData, 0, 0);
    return canvas;
}