Image Footprint Trail Filter Effect Tool

function processImage(originalImg, numSteps = 5, stepOffsetX = 10, stepOffsetY = 10, stepScaleDrop = 0.95, stepOpacityDrop = 0.8, baseOpacity = 1.0) {
    // Ensure parameters are numbers and provide fallback defaults for invalid values
    numSteps = Number(numSteps);
    if (isNaN(numSteps) || numSteps < 0) numSteps = 5; // Allow 0 steps (empty canvas)

    stepOffsetX = Number(stepOffsetX);
    if (isNaN(stepOffsetX)) stepOffsetX = 10;

    stepOffsetY = Number(stepOffsetY);
    if (isNaN(stepOffsetY)) stepOffsetY = 10;

    stepScaleDrop = Number(stepScaleDrop);
    if (isNaN(stepScaleDrop) || stepScaleDrop < 0 || stepScaleDrop > 1) stepScaleDrop = 0.95;

    stepOpacityDrop = Number(stepOpacityDrop);
    if (isNaN(stepOpacityDrop) || stepOpacityDrop < 0 || stepOpacityDrop > 1) stepOpacityDrop = 0.8;
    
    baseOpacity = Number(baseOpacity);
    if (isNaN(baseOpacity) || baseOpacity < 0 || baseOpacity > 1) baseOpacity = 1.0;

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

    const imgWidth = originalImg.width;
    const imgHeight = originalImg.height;

    // Handle case where image has no dimensions
    if (imgWidth === 0 || imgHeight === 0) {
        canvas.width = 0;
        canvas.height = 0;
        return canvas;
    }

    let canvasTotalWidth = imgWidth;
    let canvasTotalHeight = imgHeight;

    // Calculate the extra space needed for the trail
    // numSteps includes the main image. A trail exists if numSteps > 1.
    if (numSteps > 1) {
        canvasTotalWidth += (numSteps - 1) * Math.abs(stepOffsetX);
        canvasTotalHeight += (numSteps - 1) * Math.abs(stepOffsetY);
    }
    
    canvas.width = canvasTotalWidth;
    canvas.height = canvasTotalHeight;

    // Determine the anchor point for the main image (k=0) on the canvas.
    // This ensures the entire trail (which extends "behind" the main image) fits.
    // If stepOffsetX > 0, trail extends towards negative X, so main image needs to be shifted right.
    // If stepOffsetX < 0, trail extends towards positive X, main image can start at 0.
    let mainImageAnchorX = (numSteps > 1 && stepOffsetX > 0) ? (numSteps - 1) * stepOffsetX : 0;
    let mainImageAnchorY = (numSteps > 1 && stepOffsetY > 0) ? (numSteps - 1) * stepOffsetY : 0;
    
    // If numSteps is 0, the loop will not run, and an empty canvas of original image size (or 0x0 if image was 0x0) is returned.
    // If numSteps is 1, only the main image (k=0 loop iteration) is drawn.

    // Loop from the furthest trail element (k=numSteps-1) down to the main image (k=0).
    // This drawing order ensures that closer elements (smaller k) are drawn on top of further ones.
    for (let k = numSteps - 1; k >= 0; k--) {
        // Opacity: baseOpacity for main image (k=0), decreasing for further steps (larger k)
        const currentDrawOpacity = baseOpacity * Math.pow(stepOpacityDrop, k);
        // Scale: 1.0 for main image (k=0), decreasing for further steps (larger k)
        const currentDrawScale = Math.pow(stepScaleDrop, k);

        const instWidth = imgWidth * currentDrawScale;
        const instHeight = imgHeight * currentDrawScale;

        // If scaling leads to non-positive dimensions, skip drawing this step
        if (instWidth <= 0 || instHeight <= 0) {
            continue;
        }

        // Calculate the relative offset of this step from the main image's anchor point.
        // A positive stepOffset means the trail goes "behind" in that direction (e.g., stepOffsetX=10 means trail is to the left).
        // So, trail elements are positioned at -k*stepOffset relative to the main image's origin.
        const relOffsetX = -k * stepOffsetX;
        const relOffsetY = -k * stepOffsetY;

        // Final draw position on the canvas for this step's top-left corner
        const finalDrawX = mainImageAnchorX + relOffsetX;
        const finalDrawY = mainImageAnchorY + relOffsetY;
        
        ctx.globalAlpha = currentDrawOpacity;
        ctx.drawImage(originalImg, finalDrawX, finalDrawY, instWidth, instHeight);
    }

    ctx.globalAlpha = 1.0; // Reset globalAlpha for subsequent canvas uses elsewhere
    return canvas;
}