Computer Horded Image Effect Generator

function processImage(originalImg, hordeGrid = 3, pixelSize = 3, rgbOffset = 4, scanlineIntensity = 0.3) {
    // Parse and sanitize parameters
    hordeGrid = parseInt(hordeGrid, 10);
    if (isNaN(hordeGrid) || hordeGrid < 1) hordeGrid = 3;

    pixelSize = parseInt(pixelSize, 10);
    if (isNaN(pixelSize) || pixelSize < 1) pixelSize = 3;

    rgbOffset = parseInt(rgbOffset, 10);
    if (isNaN(rgbOffset) || rgbOffset < 0) rgbOffset = 4;

    scanlineIntensity = parseFloat(scanlineIntensity);
    if (isNaN(scanlineIntensity) || scanlineIntensity < 0 || scanlineIntensity > 1) {
        scanlineIntensity = 0.3;
    }
    const darkenFactor = 1 - scanlineIntensity;

    const w = originalImg.width;
    const h = originalImg.height;

    // Main canvas
    const canvas = document.createElement('canvas');
    canvas.width = w;
    canvas.height = h;
    const ctx = canvas.getContext('2d');

    // Create the "Horded" tiling effect sizes
    const pieceW = w / hordeGrid;
    const pieceH = h / hordeGrid;

    // Use an off-screen canvas to pixelate the image based on pixelSize
    const offCanvas = document.createElement('canvas');
    offCanvas.width = Math.ceil(pieceW / pixelSize);
    offCanvas.height = Math.ceil(pieceH / pixelSize);
    const offCtx = offCanvas.getContext('2d');
    
    // Draw scaled down to achieve pixelation
    offCtx.drawImage(originalImg, 0, 0, offCanvas.width, offCanvas.height);

    // Disable smoothing to maintain the sharp "computer" pixel aesthetic during scaling
    ctx.imageSmoothingEnabled = false;

    // Draw the "Horde" (Grid of the pixelated image)
    for (let row = 0; row < hordeGrid; row++) {
        for (let col = 0; col < hordeGrid; col++) {
            ctx.drawImage(offCanvas,
                0, 0, offCanvas.width, offCanvas.height,
                col * pieceW, row * pieceH, pieceW, pieceH
            );
        }
    }

    // Apply the "Computer" Glitch & CRT Effects (RGB Shift + Scanlines)
    const imgData = ctx.getImageData(0, 0, w, h);
    const data = imgData.data;
    const outData = new Uint8ClampedArray(data.length);
    
    const scanlineMod = Math.max(2, pixelSize * 2);
    const scanlineThreshold = Math.max(1, pixelSize);

    for (let y = 0; y < h; y++) {
        // Determine whether this row falls on a scanline overlay
        const isScanline = (y % scanlineMod) >= scanlineThreshold;

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

            // Compute RGB separation indices for Glitch effect
            const iR = (y * w + Math.max(0, x - rgbOffset)) * 4;
            const iB = (y * w + Math.min(w - 1, x + rgbOffset)) * 4;

            let r = data[iR];       // Shifted Red
            let g = data[i + 1];    // Original Green
            let b = data[iB + 2];   // Shifted Blue
            let a = data[i + 3];

            // Apply CRT scanline dimming
            if (isScanline) {
                r = Math.floor(r * darkenFactor);
                g = Math.floor(g * darkenFactor);
                b = Math.floor(b * darkenFactor);
            }

            outData[i] = r;
            outData[i+1] = g;
            outData[i+2] = b;
            outData[i+3] = a;
        }
    }

    // Put modified pixels back to main canvas
    ctx.putImageData(new ImageData(outData, w, h), 0, 0);

    return canvas;
}