Image Missile Trajectory Filter Effect Tool

function processImage(originalImg, angle = 45, length = 20, brightness = 1.1) {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

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

    canvas.width = imgWidth;
    canvas.height = imgHeight;

    if (imgWidth === 0 || imgHeight === 0) {
        // Return an empty (0x0) canvas if image dimensions are zero
        return canvas;
    }

    ctx.drawImage(originalImg, 0, 0, imgWidth, imgHeight);

    let imageData;
    try {
        imageData = ctx.getImageData(0, 0, imgWidth, imgHeight);
    } catch (e) {
        // This can happen if the image is tainted (e.g., cross-origin)
        // or if canvas operations are restricted in the environment.
        console.error("Could not get image data, possibly due to cross-origin restrictions or other issues:", e);
        // Fallback: return a canvas with the original image drawn, without the effect.
        // This is a graceful way to handle errors where pixel manipulation isn't possible.
        return canvas;
    }
    
    const data = imageData.data;
    // Create a new array for the output image data.
    // Modifying imageData.data directly while reading from it can lead to incorrect results.
    const outputDataArray = new Uint8ClampedArray(data.length);

    const rad = angle * Math.PI / 180;
    const dx = Math.cos(rad);
    // Canvas Y coordinates increase downwards. Standard math sin(rad) is positive for upward angles (0-180 deg).
    // So, for canvas, dy should be -sin(rad) if an angle of 90 degrees is intended to mean "up".
    const dy_canvas = -Math.sin(rad); 

    // Ensure 'length' is not negative. If length is 0, no effect will be applied.
    const effectiveLength = Math.max(0, length);

    for (let y = 0; y < imgHeight; y++) {
        for (let x = 0; x < imgWidth; x++) {
            let rSum = 0, gSum = 0, bSum = 0, aSum = 0;
            let weightSum = 0;

            // For each destination pixel (x,y), calculate its color by sampling pixels
            // "behind" it along the trajectory. The "head" of the trajectory (most recent point in time)
            // has the most influence, simulated by k=0 sampling from (x,y)'s original position.
            for (let k = 0; k < effectiveLength; k++) {
                // currentSampleX/Y are the coordinates of the pixel being sampled from the original image
                const currentSampleX = Math.round(x - k * dx);
                const currentSampleY = Math.round(y - k * dy_canvas);

                // Check if the sample is within the image bounds
                if (currentSampleX >= 0 && currentSampleX < imgWidth && currentSampleY >= 0 && currentSampleY < imgHeight) {
                    const R_idx = (currentSampleY * imgWidth + currentSampleX) * 4;
                    
                    let weight = 1.0;
                    if (effectiveLength > 1) {
                        // Linear decay for weight: (effectiveLength - k) / effectiveLength
                        // Samples closer to the current pixel (smaller k) get higher weight.
                        // k=0 (sample from (x,y) itself) has weight 1.
                        // k=effectiveLength-1 (furthest sample) has weight 1/effectiveLength.
                        weight = (effectiveLength - k) / effectiveLength;
                    }
                    // If effectiveLength is 1, k=0, weight remains 1.0.

                    rSum += data[R_idx] * weight;
                    gSum += data[R_idx + 1] * weight;
                    bSum += data[R_idx + 2] * weight;
                    aSum += data[R_idx + 3] * weight;
                    weightSum += weight;
                }
            }

            const targetIdx = (y * imgWidth + x) * 4;
            if (weightSum > 0) {
                // Apply brightness factor to the averaged color components.
                // Uint8ClampedArray will automatically clamp values to [0, 255].
                outputDataArray[targetIdx]     = (rSum / weightSum) * brightness;
                outputDataArray[targetIdx + 1] = (gSum / weightSum) * brightness;
                outputDataArray[targetIdx + 2] = (bSum / weightSum) * brightness;
                outputDataArray[targetIdx + 3] = aSum / weightSum; // Average alpha
            } else {
                // If effectiveLength is 0, or all samples were out of bounds (e.g. edge cases with large length)
                // Copy original pixel color to the output.
                const originalIdx = (y * imgWidth + x) * 4; // This is the same as targetIdx
                outputDataArray[targetIdx]     = data[originalIdx];
                outputDataArray[targetIdx + 1] = data[originalIdx + 1];
                outputDataArray[targetIdx + 2] = data[originalIdx + 2];
                outputDataArray[targetIdx + 3] = data[originalIdx + 3];
            }
        }
    }

    // Copy the processed data from outputDataArray back to imageData.data
    imageData.data.set(outputDataArray);
    
    // Put the modified image data back onto the canvas
    ctx.putImageData(imageData, 0, 0);
    
    return canvas;
}