Computer Horde Image Effect Generator

function processImage(originalImg, pixelSize = 6, effectColor = "#00FF41", scanlineOpacity = 0.3, contrastBoost = 1.5) {
    // Parse parameters to ensure correct types
    const pSize = Math.max(1, parseInt(pixelSize, 10));
    const opacity = Math.max(0, Math.min(1, parseFloat(scanlineOpacity)));
    const contrast = parseFloat(contrastBoost);

    // Create main canvas
    const canvas = document.createElement('canvas');
    const width = originalImg.width;
    const height = originalImg.height;
    canvas.width = width;
    canvas.height = height;
    const ctx = canvas.getContext('2d');

    // 1. Apply Pixelation by scaling down and then scaling back up using nearest-neighbor
    ctx.imageSmoothingEnabled = false;
    const scaledWidth = Math.max(1, Math.floor(width / pSize));
    const scaledHeight = Math.max(1, Math.floor(height / pSize));

    const tempCanvas = document.createElement('canvas');
    tempCanvas.width = scaledWidth;
    tempCanvas.height = scaledHeight;
    const tempCtx = tempCanvas.getContext('2d');
    
    // Draw original on tiny canvas
    tempCtx.drawImage(originalImg, 0, 0, scaledWidth, scaledHeight);
    // Draw scaled back to main canvas
    ctx.drawImage(tempCanvas, 0, 0, scaledWidth, scaledHeight, 0, 0, width, height);

    // 2. Fetch image data to apply "Computerized Terminal" color tint and contrast
    const imageData = ctx.getImageData(0, 0, width, height);
    const data = imageData.data;

    // Parse the given hex color (default is classic terminal phosphor green)
    let rTint = 0, gTint = 255, bTint = 65;
    const hex = String(effectColor).replace(/^#/, '');
    if (hex.length === 3) {
        rTint = parseInt(hex[0] + hex[0], 16);
        gTint = parseInt(hex[1] + hex[1], 16);
        bTint = parseInt(hex[2] + hex[2], 16);
    } else if (hex.length === 6) {
        rTint = parseInt(hex.substring(0, 2), 16);
        gTint = parseInt(hex.substring(2, 4), 16);
        bTint = parseInt(hex.substring(4, 6), 16);
    }

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

        // Calculate grayscale luminance
        let lum = 0.299 * r + 0.587 * g + 0.114 * b;

        // Apply contrast boost to simulate high-contrast computer displays
        lum = (lum - 128) * contrast + 128;
        lum = Math.max(0, Math.min(255, lum));

        // Tint the luminance using the target matrix/terminal color
        data[i] = (lum / 255) * rTint;
        data[i+1] = (lum / 255) * gTint;
        data[i+2] = (lum / 255) * bTint;
        data[i+3] = 255; // Keep fully opaque
    }
    
    // Put manipulated data back to canvas
    ctx.putImageData(imageData, 0, 0);

    // 3. Add CRT Scanlines
    if (opacity > 0) {
        ctx.fillStyle = `rgba(0, 0, 0, ${opacity})`;
        for (let y = 0; y < height; y += pSize) {
            // Draw a horizontal semi-transparent line at intervals based on pixel size
            ctx.fillRect(0, y, width, Math.max(1, pSize / 2));
        }
    }

    // 4. Add Screen Vignette (Edge shadow) for that classic CRT monitor glow bulb curve
    const gradient = ctx.createRadialGradient(
        width / 2, height / 2, Math.min(width, height) / 3,
        width / 2, height / 2, Math.min(width, height)
    );
    gradient.addColorStop(0, 'rgba(0,0,0,0)');
    gradient.addColorStop(1, 'rgba(0,0,0,0.65)');
    ctx.fillStyle = gradient;
    ctx.fillRect(0, 0, width, height);

    return canvas;
}