Television Image Converter

function processImage(originalImg, scanlineIntensity = 0.25, noiseIntensity = 0.15, rgbShift = 3, vignetteIntensity = 0.7) {
    // Parse parameters to ensure they are treated as numbers
    scanlineIntensity = Number(scanlineIntensity);
    noiseIntensity = Number(noiseIntensity);
    rgbShift = Math.round(Number(rgbShift));
    vignetteIntensity = Number(vignetteIntensity);

    const canvas = document.createElement('canvas');
    const width = originalImg.width;
    const height = originalImg.height;
    canvas.width = width;
    canvas.height = height;

    const ctx = canvas.getContext('2d');
    ctx.drawImage(originalImg, 0, 0);

    const imgData = ctx.getImageData(0, 0, width, height);
    const currentData = imgData.data;
    
    // Create a copy of the original pixel data for sampling (essential for RGB shift)
    const srcData = new Uint8ClampedArray(currentData);

    const cx = width / 2;
    const cy = height / 2;
    const maxDist = Math.sqrt(cx * cx + cy * cy);

    // Dynamic scanline thickness based on image height to look consistent across resolutions
    const scanlineThickness = Math.max(1, Math.floor(height / 400));

    for (let y = 0; y < height; y++) {
        // Determine if we are on a dark scanline
        const isScanline = (Math.floor(y / scanlineThickness) % 2 === 0);
        const scanlineMult = isScanline ? (1 - scanlineIntensity) : 1;

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

            // Chromatic Aberration 
            // Shift the red channel to the left
            const rx = Math.max(0, x - rgbShift);
            const ri = (y * width + rx) * 4;
            let r = srcData[ri];

            // Green remains centered
            let g = srcData[i + 1];

            // Shift the blue channel to the right
            const bx = Math.min(width - 1, x + rgbShift);
            const bi = (y * width + bx) * 4;
            let b = srcData[bi + 2];

            // Static Noise Addition
            const noise = (Math.random() - 0.5) * 255 * noiseIntensity;
            r += noise;
            g += noise;
            b += noise;

            // Scanline Darkening
            r *= scanlineMult;
            g *= scanlineMult;
            b *= scanlineMult;

            // CRT Vignette (Corners are darker, center is brighter)
            const dx = x - cx;
            const dy = y - cy;
            const dist = Math.sqrt(dx * dx + dy * dy);
            const vFactor = Math.max(0, 1 - Math.pow(dist / maxDist, 2) * vignetteIntensity);

            // Apply vignette and assign back to the image data array
            currentData[i] = r * vFactor;
            currentData[i + 1] = g * vFactor;
            currentData[i + 2] = b * vFactor;
            currentData[i + 3] = srcData[i + 3]; // Keep original alpha transparent pixels intact
        }
    }

    // Write modified pixels back to the Canvas
    ctx.putImageData(imgData, 0, 0);

    return canvas;
}