Image Motion Highlight Extractor

function processImage(originalImg, threshold = 200, angle = 45, distance = 50, mode = 'extract') {
    const width = originalImg.width;
    const height = originalImg.height;

    // Canvas for original image extraction
    const canvas = document.createElement('canvas');
    canvas.width = width;
    canvas.height = height;
    const ctx = canvas.getContext('2d');
    ctx.drawImage(originalImg, 0, 0);

    // Canvas for holding only the highlights
    const highlightsCanvas = document.createElement('canvas');
    highlightsCanvas.width = width;
    highlightsCanvas.height = height;
    const hCtx = highlightsCanvas.getContext('2d');

    // Get image data to analyze pixels
    const imgData = ctx.getImageData(0, 0, width, height);
    const data = imgData.data;
    
    // Prevent division by zero if threshold is 255
    const safeThreshold = Math.min(Math.max(threshold, 0), 254);
    
    // Extract highlights based on luma
    for (let i = 0; i < data.length; i += 4) {
        const r = data[i];
        const g = data[i + 1];
        const b = data[i + 2];
        const a = data[i + 3];
        
        // Compute Luma
        const luma = 0.299 * r + 0.587 * g + 0.114 * b;

        if (luma >= safeThreshold && a > 0) {
            // Keep color but scale opacity so it smoothly fades with brightness
            const intensity = (luma - safeThreshold) / (255 - safeThreshold);
            data[i + 3] = Math.round(intensity * 255);
        } else {
            data[i + 3] = 0; // Make non-highlights fully transparent
        }
    }
    
    // Put modified highlight data onto the highlight canvas
    hCtx.putImageData(imgData, 0, 0);

    // Final canvas to construct the output
    const finalCanvas = document.createElement('canvas');
    finalCanvas.width = width;
    finalCanvas.height = height;
    const fCtx = finalCanvas.getContext('2d');

    // Setup base background depending on mode
    if (mode === 'blend') {
        // Draw the original image underneath
        fCtx.drawImage(originalImg, 0, 0);
    } else {
        // 'extract' mode: default to dark background to expose highlights clearly
        fCtx.fillStyle = '#000000';
        fCtx.fillRect(0, 0, width, height);
    }

    // Apply motion blur (directional extrusion) to highlights
    const rad = angle * (Math.PI / 180);
    const dx = Math.cos(rad);
    const dy = Math.sin(rad);

    // Use additive blending for glowing streak effect
    fCtx.globalCompositeOperation = 'lighter';

    const steps = Math.max(1, Math.floor(distance));
    
    // Constant calculated to ensure streaks accumulate nicely without completely burning out instantly
    fCtx.globalAlpha = Math.min(1.0, 2.5 / steps);

    // Draw the highlight canvas slightly offset multiple times to create the blur
    for (let i = -steps / 2; i <= steps / 2; i++) {
        const offsetX = i * dx;
        const offsetY = i * dy;
        fCtx.drawImage(highlightsCanvas, offsetX, offsetY);
    }

    // Reset properties
    fCtx.globalAlpha = 1.0;
    fCtx.globalCompositeOperation = 'source-over';

    return finalCanvas;
}