Image Cable TV Ad Reel Creator

async function processImage(originalImg, textOverlay = "PLAY", noiseAmount = 0.1, scanlineIntensity = 0.2, distortionAmount = 4, flickerIntensity = 0.05) {

    /**
     * Dynamically loads the 'VT323' Google Font if it's not already available.
     * This font is chosen for its retro, monospaced, terminal-like appearance,
     * which is perfect for a Cable TV/VHS aesthetic.
     */
    const loadFont = async () => {
        const font = '1em VT323';
        if (!document.fonts.check(font)) {
            const fontUrl = 'https://fonts.googleapis.com/css2?family=VT323&display=swap';
            const link = document.createElement('link');
            link.rel = 'stylesheet';
            link.href = fontUrl;
            document.head.appendChild(link);
            await document.fonts.load(font);
        }
    };

    await loadFont();

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

    // Set canvas dimensions to match the original image
    canvas.width = originalImg.width;
    canvas.height = originalImg.height;

    // --- 1. Apply Horizontal Distortion (VHS Tracking Error) ---
    // This effect is created by drawing the image line-by-line,
    // with a slight horizontal offset for each line based on a sine wave.
    // The `time` variable adds a "live" feel, making the wave appear to move on each run.
    const time = Date.now() / 250; 
    for (let y = 0; y < canvas.height; y++) {
        const dx = Math.sin((y / 30) + time) * distortionAmount;
        ctx.drawImage(originalImg, 0, y, originalImg.width, 1, dx, y, originalImg.width, 1);
    }

    // --- 2. Apply Pixel-level Glitches (Noise, Scanlines, Flicker) ---
    const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    const data = imageData.data;
    
    // A single random value for flicker effect across the whole frame
    const frameFlicker = 1.0 - (Math.random() * flickerIntensity);
    const desaturation = 0.15; // Slightly wash out colors for a vintage feel

    for (let i = 0; i < data.length; i += 4) {
        let r = data[i];
        let g = data[i+1];
        let b = data[i+2];

        // Apply slight desaturation
        const avg = (r + g + b) / 3;
        r = r * (1 - desaturation) + avg * desaturation;
        g = g * (1 - desaturation) + avg * desaturation;
        b = b * (1 - desaturation) + avg * desaturation;

        // Apply overall frame flicker
        r *= frameFlicker;
        g *= frameFlicker;
        b *= frameFlicker;

        // Apply scanlines (darkening every few rows)
        const y = Math.floor((i / 4) / canvas.width);
        if (y % 3 === 0) {
            const darkness = 1.0 - scanlineIntensity;
            r *= darkness;
            g *= darkness;
            b *= darkness;
        }

        // Apply random noise to each pixel
        const noise = (Math.random() - 0.5) * 255 * noiseAmount;
        r += noise;
        g += noise;
        b += noise;

        // Clamp values to the valid 0-255 range and assign back to the data array
        data[i] = Math.max(0, Math.min(255, r));
        data[i+1] = Math.max(0, Math.min(255, g));
        data[i+2] = Math.max(0, Math.min(255, b));
    }
    ctx.putImageData(imageData, 0, 0);

    // --- 3. Add Text Overlay ---
    if (textOverlay.trim() !== "") {
        const fontSize = Math.floor(canvas.height / 16);
        ctx.font = `bold ${fontSize}px "VT323", monospace`;
        ctx.fillStyle = 'rgba(255, 255, 255, 0.8)';
        ctx.textBaseline = 'top';

        // Add a soft glow to mimic CRT screen bloom
        ctx.shadowColor = 'rgba(255, 255, 255, 0.6)';
        ctx.shadowBlur = 6;
        
        const padding = Math.floor(canvas.width * 0.04);
        ctx.fillText(textOverlay, padding, padding);

        // Reset shadow for any subsequent drawing operations
        ctx.shadowColor = 'transparent';
        ctx.shadowBlur = 0;
    }

    return canvas;
}