Image VHS Effect Creator

function processImage(originalImg, noiseAmount = 30, scanlineIntensity = 0.2, glitchIntensity = 8, chromaticAberration = 4) {
    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;

    // Apply a slight blur to mimic lower resolution of VHS
    ctx.filter = 'blur(0.5px)';
    ctx.drawImage(originalImg, 0, 0);
    ctx.filter = 'none';

    const originalImageData = ctx.getImageData(0, 0, width, height);
    const originalPixels = originalImageData.data;
    const newImageData = ctx.createImageData(width, height);
    const newPixels = newImageData.data;

    let glitchOffset = 0;
    let glitchBlockHeight = 0;

    // Helper function to get the starting index of a pixel at (x,y)
    // It clamps coordinates to stay within the image boundaries.
    const getPixelIndex = (x, y) => {
        const clampedX = Math.max(0, Math.min(Math.floor(x), width - 1));
        const clampedY = Math.max(0, Math.min(Math.floor(y), height - 1));
        return (clampedY * width + clampedX) * 4;
    };

    for (let y = 0; y < height; y++) {
        
        // Manage state for glitch blocks to simulate tracking errors
        if (glitchBlockHeight > 0) {
            glitchBlockHeight--;
        } else {
            glitchOffset = 0;
            // 1% chance to start a new glitch block on any given scanline
            if (Math.random() < 0.01) {
                // Set height and horizontal offset for the glitch block
                glitchBlockHeight = Math.random() * 20 + 1;
                glitchOffset = (Math.random() - 0.5) * glitchIntensity;
            }
        }

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

            // Chromatic Aberration: Sample R, G, B channels from different horizontal positions
            const rIndex = getPixelIndex(glitchedX - chromaticAberration, y);
            const gIndex = getPixelIndex(glitchedX, y);
            const bIndex = getPixelIndex(glitchedX + chromaticAberration, y);

            const r = originalPixels[rIndex];
            const g = originalPixels[gIndex + 1];
            const b = originalPixels[bIndex + 2];
            const alpha = originalPixels[gIndex + 3];

            // Noise: Add random noise to each color channel
            const noise = (Math.random() - 0.5) * noiseAmount;

            newPixels[currentIndex] = r + noise;
            newPixels[currentIndex + 1] = g + noise;
            newPixels[currentIndex + 2] = b + noise;
            newPixels[currentIndex + 3] = alpha;
        }
    }

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

    // Draw scanlines as semi-transparent horizontal lines
    if (scanlineIntensity > 0) {
        ctx.fillStyle = `rgba(0, 0, 0, ${scanlineIntensity})`;
        for (let y = 0; y < height; y += 3) {
            ctx.fillRect(0, y, width, 1);
        }
    }

    return canvas;
}