Pixelated Tears Image Effect Generator

function processImage(originalImg, pixelSize = 10, tearType = "both", intensity = 5) {
    // Validate and cast inputs
    pixelSize = parseInt(pixelSize, 10);
    if (isNaN(pixelSize) || pixelSize < 1) pixelSize = 10;
    
    intensity = parseInt(intensity, 10);
    if (isNaN(intensity) || intensity < 1) intensity = 5;
    
    // Ensure tearType is recognized
    if (!['bleed', 'rip', 'both', 'none'].includes(tearType)) {
        tearType = 'both';
    }
    
    const width = originalImg.width;
    const height = originalImg.height;
    
    // Return empty canvas if original image is invalid
    if (!width || !height) {
        const fallbackCanvas = document.createElement('canvas');
        fallbackCanvas.width = 100;
        fallbackCanvas.height = 100;
        return fallbackCanvas;
    }

    // Determine working resolutions for grid rendering based on pixelSize
    const cols = Math.max(1, Math.ceil(width / pixelSize));
    const rows = Math.max(1, Math.ceil(height / pixelSize));

    // Create a temporary downscaled canvas context
    const tempCanvas = document.createElement('canvas');
    tempCanvas.width = cols;
    tempCanvas.height = rows;
    const tempCtx = tempCanvas.getContext('2d', { willReadFrequently: true });
    
    // Draw original image downscaled to form our foundational blocks
    tempCtx.drawImage(originalImg, 0, 0, cols, rows);
    const imgData = tempCtx.getImageData(0, 0, cols, rows);
    const data = imgData.data;

    // Convert pixel data into a manageable 2D grid for tearing logic
    let grid = [];
    for (let y = 0; y < rows; y++) {
        let rowPxs = [];
        for (let x = 0; x < cols; x++) {
            const idx = (y * cols + x) * 4;
            rowPxs.push({
                r: data[idx],
                g: data[idx+1],
                b: data[idx+2],
                a: data[idx+3]
            });
        }
        grid.push(rowPxs);
    }

    // 1. Horizontal Screen Tearing (Rips)
    if (tearType === 'rip' || tearType === 'both') {
        const ripProbability = intensity * 0.02;
        const maxRipHeight = Math.max(2, intensity * 2);
        const maxShift = Math.max(1, Math.floor(cols * (intensity * 0.02)));

        let y = 0;
        while (y < rows) {
            if (Math.random() < ripProbability) {
                // Square random chance to favor shorter band rips with occasional large glitches
                const ripHeight = Math.floor(Math.random() * Math.random() * maxRipHeight) + 1;
                // Shift pixels left or right bounds
                const shift = Math.floor(Math.random() * maxShift * 2) - maxShift; 
                
                for (let dy = 0; dy < ripHeight && y + dy < rows; dy++) {
                    const newRow = [];
                    for (let x = 0; x < cols; x++) {
                        let srcX = (x - shift) % cols;
                        if (srcX < 0) srcX += cols; // Seamless block wrap-around
                        newRow.push(grid[y + dy][srcX]);
                    }
                    grid[y + dy] = newRow;
                }
                y += ripHeight; // Skip over the rip to avoid consecutive displacement overlaps
            } else {
                y++;
            }
        }
    }

    // 2. Vertical Pixel Drops (Bleeding Tears)
    if (tearType === 'bleed' || tearType === 'both') {
        const bleedProbability = intensity * 0.015;
        const maxBleedLength = Math.max(3, intensity * 5);

        for (let x = 0; x < cols; x++) {
            let y = 0;
            while (y < rows) {
                if (Math.random() < bleedProbability) {
                    const bleedLength = Math.floor(Math.random() * Math.random() * maxBleedLength) + 2;
                    const srcColor = grid[y][x];
                    
                    // Only start bleed if current pixel has sufficient opacity
                    if (srcColor.a > 128) {
                        for (let dy = 1; dy <= bleedLength && y + dy < rows; dy++) {
                            // Clone object to avoid reference issues across duplicated cells
                            grid[y + dy][x] = { ...srcColor };
                        }
                        y += bleedLength + 1;
                    } else {
                        y++;
                    }
                } else {
                    y++;
                }
            }
        }
    }

    // Process our grid back into raw image data format
    for (let y = 0; y < rows; y++) {
        for (let x = 0; x < cols; x++) {
            const idx = (y * cols + x) * 4;
            const color = grid[y][x];
            data[idx] = color.r;
            data[idx+1] = color.g;
            data[idx+2] = color.b;
            data[idx+3] = color.a;
        }
    }
    
    // Commit modified glitched pixels back to temp canvas
    tempCtx.putImageData(imgData, 0, 0);

    // Render result onto main output canvas matching original dimensions
    const canvas = document.createElement('canvas');
    canvas.width = width;
    canvas.height = height;
    const ctx = canvas.getContext('2d');
    
    // Ensure scaling keeps the hard edges needed for a pixelated look
    ctx.imageSmoothingEnabled = false;
    // Handle older browser fallbacks just in case
    ctx.webkitImageSmoothingEnabled = false;
    ctx.mozImageSmoothingEnabled = false;
    ctx.msImageSmoothingEnabled = false;
    
    // Draw the tiny modified frame back out to its full blown blocky resolution
    ctx.drawImage(tempCanvas, 0, 0, width, height);

    return canvas;
}