Image Motion Blur Applicator

function processImage(originalImg, angleParam = 0, intensityParam = 10) {
    let angle = Number(angleParam);
    let intensity = Number(intensityParam);

    // Validate parsed numbers, use defaults if NaN
    if (isNaN(angle)) {
        angle = 0; // Fallback to default angle if parsing failed
    }
    if (isNaN(intensity)) {
        intensity = 10; // Fallback to default intensity if parsing failed
    }

    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    const width = originalImg.naturalWidth || originalImg.width;
    const height = originalImg.naturalHeight || originalImg.height;

    canvas.width = width;
    canvas.height = height;

    // If width or height is 0, drawImage might error or do nothing.
    // Return an empty canvas in such cases.
    if (width === 0 || height === 0) {
        return canvas;
    }
    
    ctx.drawImage(originalImg, 0, 0, width, height);

    // Determine the effective blur length.
    // intensity < 0 is treated as 0.
    // blurLength will be at least 1.
    // intensity values between 0 and 1 (exclusive of 0 after rounding) will result in blurLength > 1.
    // E.g. intensity 0.5 -> blurLength 1. intensity 1.5 -> blurLength 2.
    const blurLength = Math.max(1, Math.round(intensity < 0 ? 0 : intensity));
    
    // If blurLength is 1 (e.g., intensity was 0, 1, or negative), no actual blurring is needed.
    // The original image is already drawn on the canvas.
    if (blurLength <= 1) {
        return canvas;
    }

    const imageData = ctx.getImageData(0, 0, width, height);
    const data = imageData.data;
    
    // Create a new ImageData object for the output.
    // Reading from 'data' (original) and writing to 'outputData' avoids
    // issues where already blurred pixels influence subsequent calculations in the same pass.
    const outputImageData = ctx.createImageData(width, height);
    const outputData = outputImageData.data;

    const rad = angle * Math.PI / 180;
    const dx = Math.cos(rad);
    const dy = Math.sin(rad); // In canvas, y-axis is downwards. 
                              // Standard angle: 0 deg = horizontal right, 90 deg = vertical up.
                              // So, angle 0 (dx=1, dy=0) is horizontal blur.
                              // angle 90 (dx=0, dy=1) is vertical blur downwards.

    for (let y = 0; y < height; y++) {
        for (let x = 0; x < width; x++) {
            let sumR = 0, sumG = 0, sumB = 0, sumA = 0;

            // Sum pixel data along the motion blur line
            for (let i = 0; i < blurLength; i++) {
                // Calculate offset for sampling point.
                // For N samples (blurLength), k ranges approx from -N/2 to N/2.
                // E.g., blurLength=10 -> k from -5 to 4.
                const k = i - Math.floor(blurLength / 2);
                
                // Calculate coordinates of the source pixel to sample
                let currentSampleX = x + k * dx;
                let currentSampleY = y + k * dy;

                // Round to the nearest discrete pixel coordinate
                let sX = Math.round(currentSampleX);
                let sY = Math.round(currentSampleY);

                // Clamp coordinates to be within image boundaries
                sX = Math.max(0, Math.min(width - 1, sX));
                sY = Math.max(0, Math.min(height - 1, sY));

                // Get the index of the R channel of the sample pixel
                const R_idx = (sY * width + sX) * 4;
                sumR += data[R_idx];
                sumG += data[R_idx + 1];
                sumB += data[R_idx + 2];
                sumA += data[R_idx + 3];
            }

            // Calculate the average color
            const targetIdx = (y * width + x) * 4; // Index for the current pixel (x,y)
            outputData[targetIdx]     = sumR / blurLength;
            outputData[targetIdx + 1] = sumG / blurLength;
            outputData[targetIdx + 2] = sumB / blurLength;
            outputData[targetIdx + 3] = sumA / blurLength;
        }
    }

    // Write the blurred image data back to the canvas
    ctx.putImageData(outputImageData, 0, 0);
    
    return canvas;
}