VHSRip VCR Style Black Color Image Filter

function processImage(
    originalImg,
    aberration = 4,
    noiseAmnt = 0.12,
    contrast = 1.35,
    scanlineInt = 0.2,
    saturation = 0.65,
    addVcrText = 1
) {
    // Create canvas matching original image dimensions
    const canvas = document.createElement('canvas');
    canvas.width = originalImg.width;
    canvas.height = originalImg.height;
    const ctx = canvas.getContext('2d');

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

    // Get pixel data for manipulation
    const imgData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    const data = imgData.data;
    const outData = new Uint8ClampedArray(data.length);
    const w = canvas.width;
    const h = canvas.height;

    // Apply VHSRip / Audiodisk Black Color filter
    for (let y = 0; y < h; y++) {
        // Create VCR tracking band at the bottom ~8% of the image
        let isTracking = y > h * 0.92;
        let trackOffset = isTracking ? (Math.random() - 0.5) * (w * 0.05) : 0;
        
        // Add subtle constant horizontal jitter
        let jitter = (Math.random() - 0.5) * 2;
        
        // Precalculate index offsets for this row to optimize loop
        let rowOffset = trackOffset + jitter;
        let offsetR = -aberration + rowOffset;
        let offsetG = rowOffset;
        let offsetB = aberration + rowOffset;

        for (let x = 0; x < w; x++) {
            let idx = (y * w + x) * 4;

            // Chromatic aberration / Channel shifting
            let xR = Math.min(w - 1, Math.max(0, x + offsetR)) | 0;
            let xG = Math.min(w - 1, Math.max(0, x + offsetG)) | 0;
            let xB = Math.min(w - 1, Math.max(0, x + offsetB)) | 0;

            let iR = (y * w + xR) * 4;
            let iG = (y * w + xG) * 4;
            let iB = (y * w + xB) * 4;

            let r = data[iR];
            let g = data[iG + 1];
            let b = data[iB + 2];

            // Increase contrast
            r = (r - 128) * contrast + 128;
            g = (g - 128) * contrast + 128;
            b = (b - 128) * contrast + 128;

            // Adjust Saturation
            let lum = 0.299 * r + 0.587 * g + 0.114 * b;
            r = lum + saturation * (r - lum);
            g = lum + saturation * (g - lum);
            b = lum + saturation * (b - lum);

            // "Audiodisk Black Color" Theme: heavily crush blacks for deep mood
            if (r < 90) r *= 0.5;
            if (g < 90) g *= 0.5;
            if (b < 90) b *= 0.6; // Keep shadows very slightly crushed towards cold/blue 

            // Static Noise Generation
            let n = (Math.random() - 0.5) * noiseAmnt * 255;
            if (isTracking) n *= 2.5; // Amplified noise in the tracking distortion band

            // Set final pixel combinations
            outData[idx] = r + n;
            outData[idx + 1] = g + n;
            outData[idx + 2] = b + n;
            outData[idx + 3] = data[idx + 3]; // preserve original alpha
        }
    }

    // Put modified pixels back to the Canvas
    imgData.data.set(outData);
    ctx.putImageData(imgData, 0, 0);

    // Render CRT Scanlines
    ctx.fillStyle = `rgba(0, 0, 0, ${scanlineInt})`;
    // Adjust scanline density based roughly on vintage 240p vertical resolution limits
    let scanStep = Math.max(3, Math.floor(h / 240)); 
    let scanHeight = Math.ceil(scanStep / 2) || 1;
    for (let y = 0; y < h; y += scanStep) {
        ctx.fillRect(0, y, w, scanHeight);
    }

    // Optional: Add VCR Overlay UI
    if (addVcrText === 1) {
        // Dynamically size text relative to image proportions
        let fontSize = Math.max(14, Math.floor(h * 0.05));
        ctx.font = `bold ${fontSize}px "Courier New", Courier, monospace`;
        ctx.shadowColor = 'black';
        ctx.shadowBlur = 4;
        ctx.shadowOffsetX = 2;
        ctx.shadowOffsetY = 2;
        ctx.fillStyle = 'rgba(235, 235, 255, 0.9)'; // Subtle bluish-white glowing text
        
        ctx.fillText('PLAY ►', w * 0.05, h * 0.08);
        ctx.fillText('SP  0:01:23', w * 0.05, h * 0.08 + fontSize * 1.5);
        
        // Reset Shadow Context
        ctx.shadowBlur = 0;
        ctx.shadowOffsetX = 0;
        ctx.shadowOffsetY = 0;
    }

    return canvas;
}