Image Barbed Wire Filter Effect Tool

async function processImage(originalImg, numWires = 5, wireWidth = 2, wireColor = "gray", barbSize = 10, barbWidth = 1, barbColor = "darkgray", barbSpacing = 50, randomnessFactor = 0.2) {
    // The function is async as per guideline, though no await is strictly needed for this implementation.

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

    const imgWidth = originalImg.naturalWidth;
    const imgHeight = originalImg.naturalHeight;

    if (imgWidth === 0 || imgHeight === 0) {
        canvas.width = 0;
        canvas.height = 0;
        // Return an empty canvas if the original image has no dimensions
        return canvas;
    }

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

    // Draw the original image onto the canvas
    ctx.drawImage(originalImg, 0, 0, imgWidth, imgHeight);

    // Sanitize parameters to ensure they are within reasonable bounds
    numWires = Math.max(0, numWires); // Number of wires can be 0
    wireWidth = Math.max(0.1, wireWidth); // Wire should have some thickness to be visible
    barbSize = Math.max(1, barbSize);     // Barbs should have some minimal size
    barbWidth = Math.max(0.1, barbWidth); // Barb lines should be visible
    barbSpacing = Math.max(1, barbSpacing); // Spacing between barbs must be positive
    randomnessFactor = Math.max(0, randomnessFactor); // Randomness can be 0 for straight, parallel wires

    // Set line styles for drawing wires and barbs for a slightly rounded/smoother look
    ctx.lineCap = "round";
    ctx.lineJoin = "round";

    if (numWires <= 0) {
        return canvas; // If no wires specified, return the canvas with just the original image
    }

    // Calculate the average vertical slot height for each wire
    const slotHeight = imgHeight / numWires;

    for (let i = 0; i < numWires; i++) {
        // Determine the central y-coordinate for the current wire's "slot"
        const y_center = slotHeight * (i + 0.5);
        
        // Calculate the maximum random vertical deviation for wire endpoints.
        // randomnessFactor controls how far from y_center the wire endpoints can be.
        // randomnessFactor = 0: Wire is perfectly horizontal at y_center.
        // randomnessFactor = 1: Wire endpoints can deviate by +/- 0.5 * slotHeight from y_center,
        //                       meaning the wire stays within its conceptual horizontal "lane".
        // randomnessFactor > 1: Wire can deviate further, potentially crossing into other lanes.
        const y_max_deviation = slotHeight * randomnessFactor * 0.5; 

        // Generate random y-coordinates for the start and end points of the wire
        // (Math.random() - 0.5) * 2 gives a range of [-1, 1)
        let y1 = y_center + (Math.random() - 0.5) * 2 * y_max_deviation;
        let y2 = y_center + (Math.random() - 0.5) * 2 * y_max_deviation;
        
        // Clamp y-coordinates to ensure they stay within the canvas bounds
        y1 = Math.max(0, Math.min(imgHeight, y1));
        y2 = Math.max(0, Math.min(imgHeight, y2));

        // Wires span the full width of the image
        const x1 = 0;
        const x2 = imgWidth;

        // 1. Draw the main wire strand
        ctx.beginPath();
        ctx.moveTo(x1, y1);
        ctx.lineTo(x2, y2);
        ctx.strokeStyle = wireColor;
        ctx.lineWidth = wireWidth;
        ctx.stroke();

        // 2. Draw barbs along this wire
        const dx = x2 - x1; // Change in x (will be imgWidth for these horizontal-ish wires)
        const dy = y2 - y1; // Change in y
        const lineLength = Math.sqrt(dx * dx + dy * dy);
        const angle = Math.atan2(dy, dx); // Angle of the wire segment

        // Proceed with barbs only if the wire has length and barb parameters are valid
        if (lineLength === 0 || barbSpacing <= 0 || barbSize <= 0 || barbWidth <= 0) {
            continue; 
        }

        // Calculate how many barbs can fit, spaced along the wire
        const numPossibleBarbs = Math.floor(lineLength / barbSpacing);

        for (let j = 0; j < numPossibleBarbs; j++) {
            // Calculate the position of the current barb along the wire.
            // (j + 0.5) * barbSpacing centers the barb within its allocated segment.
            const distAlongWire = (j + 0.5) * barbSpacing;
            
            // Determine the (px, py) coordinates of the barb's center on the wire
            const t = distAlongWire / lineLength; // Normalized distance (0.0 to 1.0)
            const px = x1 + t * dx;
            const py = y1 + t * dy;

            // Save current canvas state (transformations, styles)
            ctx.save();
            
            // Translate origin to the barb's center and rotate context to align with the wire
            ctx.translate(px, py);
            ctx.rotate(angle);

            // Draw the 'X' shape for the barb.
            // barbSize controls the overall size of the 'X'.
            ctx.beginPath();
            // First diagonal of 'X': \ (from top-left to bottom-right relative to rotated context)
            ctx.moveTo(-barbSize / 2, -barbSize / 2);
            ctx.lineTo(barbSize / 2, barbSize / 2);
            // Second diagonal of 'X': / (from top-right to bottom-left relative to rotated context)
            ctx.moveTo(barbSize / 2, -barbSize / 2);
            ctx.lineTo(-barbSize / 2, barbSize / 2);
            
            ctx.strokeStyle = barbColor;
            ctx.lineWidth = barbWidth;
            ctx.stroke();

            // Restore canvas state to what it was before this barb
            ctx.restore();
        }
    }

    return canvas;
}