Particle Dust Image Effect Generator

function processImage(
    originalImg, 
    density = 4, 
    scatter = 50, 
    windAngle = -20, 
    windStrength = 200, 
    progressiveMode = "left-to-right"
) {
    // Parameter validation and conversion
    density = Math.max(1, parseInt(density, 10));
    scatter = Math.min(1000, Number(scatter));
    windStrength = Math.min(3000, Number(windStrength));
    
    // Check if user requested a radial explosion effect
    const isExplosion = String(windAngle).trim().toLowerCase() === "explosion";
    let windAngleRad = 0;
    let dirX = 1;
    let dirY = 0;
    
    if (!isExplosion) {
        let parsedAngle = Number(windAngle);
        if (isNaN(parsedAngle)) parsedAngle = -20;
        windAngleRad = parsedAngle * (Math.PI / 180);
        dirX = Math.cos(windAngleRad);
        dirY = Math.sin(windAngleRad);
    }
    
    const width = originalImg.width;
    const height = originalImg.height;

    // Calculate maximum drift bounds to add padding so the dust isn't clipped out of the canvas
    let padLeft = scatter, padRight = scatter, padTop = scatter, padBottom = scatter;
    if (isExplosion) {
        padLeft += windStrength;
        padRight += windStrength;
        padTop += windStrength;
        padBottom += windStrength;
    } else {
        padLeft += Math.abs(Math.min(0, dirX * windStrength));
        padRight += Math.max(0, dirX * windStrength);
        padTop += Math.abs(Math.min(0, dirY * windStrength));
        padBottom += Math.max(0, dirY * windStrength);
    }

    // Use an offscreen canvas to extract pixel data from the original image
    const offCanvas = document.createElement('canvas');
    offCanvas.width = width;
    offCanvas.height = height;
    const offCtx = offCanvas.getContext('2d', { willReadFrequently: true });
    offCtx.drawImage(originalImg, 0, 0);
    const imgData = offCtx.getImageData(0, 0, width, height).data;

    // Main output canvas setup (padded size)
    const canvas = document.createElement('canvas');
    canvas.width = Math.ceil(width + padLeft + padRight);
    canvas.height = Math.ceil(height + padTop + padBottom);
    const ctx = canvas.getContext('2d');

    const w2 = width / 2;
    const h2 = height / 2;
    const mode = String(progressiveMode).trim().toLowerCase();

    // Iterate over image pixels based on standard density
    for (let y = 0; y < height; y += density) {
        for (let x = 0; x < width; x += density) {
            const idx = (y * width + x) * 4;
            const a = imgData[idx + 3];

            if (a > 0) { // Optimize: skip completely transparent pixels
                const r = imgData[idx];
                const g = imgData[idx + 1];
                const b = imgData[idx + 2];

                // Determine the intensity (0.0 to 1.0) of the wind effect for this specific pixel
                let effectMultiplier = 1;
                switch (mode) {
                    case "left-to-right":
                        effectMultiplier = x / width; 
                        break;
                    case "right-to-left":
                        effectMultiplier = 1 - (x / width); 
                        break;
                    case "top-to-bottom":
                        effectMultiplier = y / height; 
                        break;
                    case "bottom-to-top":
                        effectMultiplier = 1 - (y / height); 
                        break;
                    case "center-out":
                        const dxCenter = (x - w2) / w2;
                        const dyCenter = (y - h2) / h2;
                        effectMultiplier = Math.sqrt(dxCenter * dxCenter + dyCenter * dyCenter);
                        break;
                    case "uniform":
                    default:
                        effectMultiplier = 1; 
                        break;
                }

                // Smoothly clamp between 0 and 1, and exponentially weight the curve 
                // for a 'snap' disintegration look.
                effectMultiplier = Math.max(0, Math.min(1, effectMultiplier));
                effectMultiplier = Math.pow(effectMultiplier, 2.5);

                let posX = x + padLeft;
                let posY = y + padTop;
                let opacity = (a / 255);
                
                // Add a small 0.3px padding to the base particle size to prevent unintended small gaps
                let size = density + 0.3;

                // Threshold: If the effectMultiplier triggers, explode the pixel into a particle
                if (effectMultiplier > 0.001) {
                    // Positional scattering (simulating blowing dust)
                    const nX = (Math.random() - 0.5) * scatter * effectMultiplier;
                    const nY = (Math.random() - 0.5) * scatter * effectMultiplier;
                    
                    let pDirX = dirX;
                    let pDirY = dirY;
                    
                    // Allow the wind to radiate outwards dynamically
                    if (isExplosion) {
                        const dx = x - w2;
                        const dy = y - h2;
                        const dist = Math.sqrt(dx * dx + dy * dy);
                        if (dist > 0) {
                            pDirX = dx / dist;
                            pDirY = dy / dist;
                        } else {
                            pDirX = 0; pDirY = 0;
                        }
                    }

                    // Drift logic heavily mapped by wind effect
                    const windRandomizer = Math.random() * 0.8 + 0.2;
                    const wAmount = windRandomizer * windStrength * effectMultiplier;
                    const wX = pDirX * wAmount;
                    const wY = pDirY * wAmount;

                    posX += nX + wX;
                    posY += nY + wY;
                    
                    // Dimly fade the particles being blown away, adding a slight randomized shimmer
                    opacity *= Math.max(0.05, 1 - (effectMultiplier * 0.7)) * (Math.random() * 0.7 + 0.3);
                    size = density * (Math.random() * 1.5 + 0.5);
                }

                // Render tiny pixelated rectangles
                ctx.fillStyle = `rgba(${r}, ${g}, ${b}, ${opacity})`;
                ctx.fillRect(posX, posY, size, size);
            }
        }
    }
    
    return canvas;
}