Image Motion Blur And Streak Effect Generator

function processImage(originalImg, angle = 0, distance = 50, blurStyle = 'centered', steps = 50) {
    const width = originalImg.width;
    const height = originalImg.height;

    const canvas = document.createElement('canvas');
    canvas.width = width;
    canvas.height = height;

    const ctx = canvas.getContext('2d', { willReadFrequently: true });
    ctx.drawImage(originalImg, 0, 0);

    const imgData = ctx.getImageData(0, 0, width, height);
    const src = imgData.data;
    const dst = new Uint8ClampedArray(src.length); // Automatically initialized to 0

    // Parse and normalize parameters
    angle = Number(angle);
    if (isNaN(angle)) angle = 0;
    
    distance = Number(distance);
    if (isNaN(distance)) distance = 50;
    
    steps = Number(steps);
    if (isNaN(steps) || steps < 1) steps = 50;
    steps = Math.floor(steps);

    // Compute direction in radians and overall delta X / Y
    const angleRad = (angle * Math.PI) / 180;
    const dx = Math.cos(angleRad) * distance;
    const dy = Math.sin(angleRad) * distance;

    // Precompute sample offsets to avoid floating point math inside the inner loops
    const xOffsets = new Int32Array(steps);
    const yOffsets = new Int32Array(steps);

    for (let i = 0; i < steps; i++) {
        let fraction;
        if (blurStyle === 'trailing') {
            // Trailing streak: from 0 to 1
            fraction = (steps === 1) ? 0 : (i / (steps - 1));
        } else {
            // Centered motion blur: from -0.5 to +0.5
            fraction = (steps === 1) ? 0 : (i / (steps - 1)) - 0.5;
        }
        xOffsets[i] = Math.round(dx * fraction);
        yOffsets[i] = Math.round(dy * fraction);
    }

    const inv255 = 1 / 255;

    for (let y = 0; y < height; y++) {
        let outIdx = y * width * 4;
        
        for (let x = 0; x < width; x++) {
            let r = 0, g = 0, b = 0, a = 0;

            // Accumulate samples
            for (let i = 0; i < steps; i++) {
                const sampleX = x + xOffsets[i];
                if (sampleX >= 0 && sampleX < width) {
                    const sampleY = y + yOffsets[i];
                    if (sampleY >= 0 && sampleY < height) {
                        const idx = (sampleY * width + sampleX) * 4;
                        
                        // Accumulate premultiplied colors to properly handle transparent backgrounds
                        const alpha = src[idx + 3] * inv255;
                        r += src[idx] * alpha;
                        g += src[idx + 1] * alpha;
                        b += src[idx + 2] * alpha;
                        a += src[idx + 3];
                    }
                }
            }

            // Averages colors and un-premultiplies them
            if (a > 0) {
                const weightSum = a * inv255;
                dst[outIdx] = r / weightSum;
                dst[outIdx + 1] = g / weightSum;
                dst[outIdx + 2] = b / weightSum;
                dst[outIdx + 3] = a / steps;
            }
            // (If a === 0, the pixel remains transparent 0s as Uint8ClampedArray is initialized to 0)
            
            outIdx += 4;
        }
    }

    imgData.data.set(dst);
    ctx.putImageData(imgData, 0, 0);

    return canvas;
}