Computerized Image Effect Generator

/**
 * Applies a "Computerized" retro/CRT/glitch effect to an image.
 *
 * @param {HTMLImageElement} originalImg - The input image object.
 * @param {number|string} pixelSize - Size of the pixelation blocks (default: 4).
 * @param {string} colorStyle - Color mapping style: 'matrix', 'cyan', 'grayscale', 'posterize', or 'none' (default: 'matrix').
 * @param {number|string} scanlineIntensity - How much to darken every other horizontal line [0-255] (default: 50).
 * @param {number|string} glitchOffset - Horizontal RGB separation for a CRT chromatic aberration effect (default: 5).
 * @returns {HTMLCanvasElement} - The canvas containing the processed image.
 */
function processImage(originalImg, pixelSize = 4, colorStyle = 'matrix', scanlineIntensity = 50, glitchOffset = 5) {
    // Parse parameters
    const size = Math.max(1, parseInt(pixelSize, 10) || 4);
    const style = (typeof colorStyle === 'string' ? colorStyle.toLowerCase() : 'matrix');
    const scanlines = parseInt(scanlineIntensity, 10) || 0;
    const glitch = parseInt(glitchOffset, 10) || 0;

    const canvas = document.createElement('canvas');
    const width = originalImg.width;
    const height = originalImg.height;
    
    canvas.width = width;
    canvas.height = height;
    const ctx = canvas.getContext('2d');
    
    // Draw original image to read its data
    ctx.drawImage(originalImg, 0, 0, width, height);
    
    const imgData = ctx.getImageData(0, 0, width, height);
    const data = imgData.data;
    
    // Create new image data for output
    const outData = ctx.createImageData(width, height);
    const out = outData.data;

    // Process image block by block to create pixelation and effects
    for (let y = 0; y < height; y += size) {
        for (let x = 0; x < width; x += size) {
            
            // Get chromatic aberration (glitch) colors
            const rx = Math.max(0, x - glitch);
            const gx = x;
            const bx = Math.min(width - 1, x + glitch);
            
            const ri = (y * width + rx) * 4;
            const gi = (y * width + gx) * 4;
            const bi = (y * width + bx) * 4;
            
            let r = data[ri];
            let g = data[gi + 1];
            let b = data[bi + 2];
            let a = data[gi + 3]; // use alpha from the exact pixel block

            // Calculate perceived brightness (luma)
            const luma = 0.299 * r + 0.587 * g + 0.114 * b;

            // Apply selected color style
            if (style === 'matrix') {
                r = 0;
                g = Math.min(255, luma * 1.4); // Bright terminal green
                b = 0;
            } else if (style === 'cyan') {
                r = 0;
                g = Math.min(255, luma * 1.2);
                b = Math.min(255, luma * 1.4);
            } else if (style === 'grayscale') {
                r = luma;
                g = luma;
                b = luma;
            } else if (style === 'posterize') {
                r = Math.floor(r / 64) * 64;
                g = Math.floor(g / 64) * 64;
                b = Math.floor(b / 64) * 64;
            }

            // Fill the current pixel block
            for (let dy = 0; dy < size; dy++) {
                const py = y + dy;
                if (py >= height) break;
                
                // Determine if this row is a scanline
                const isScanline = (py % 2 === 1);

                for (let dx = 0; dx < size; dx++) {
                    const px = x + dx;
                    if (px >= width) break;
                    
                    const idx = (py * width + px) * 4;
                    
                    let finalR = r;
                    let finalG = g;
                    let finalB = b;
                    
                    // Apply scanline darkening
                    if (isScanline) {
                        finalR = Math.max(0, finalR - scanlines);
                        finalG = Math.max(0, finalG - scanlines);
                        finalB = Math.max(0, finalB - scanlines);
                    }
                    
                    out[idx] = finalR;
                    out[idx + 1] = finalG;
                    out[idx + 2] = finalB;
                    out[idx + 3] = a;
                }
            }
        }
    }

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