Image Folded Paper Filter Effect Tool

function processImage(originalImg, foldCount = 5, foldStrength = 0.5, foldWidth = 3) {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

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

    if (width === 0 || height === 0) {
        // Handle cases where image dimensions are not available or invalid
        console.error("Image has zero width or height.");
        // Return an empty canvas or handle as an error appropriately
        canvas.width = 1;
        canvas.height = 1;
        return canvas;
    }

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

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

    // Parameter validation and adjustment
    foldCount = Math.max(0, Math.floor(foldCount)); // Allow 0 folds
    foldStrength = Math.max(0.01, Math.min(1.0, foldStrength)); // Strength from gentle to strong
    foldWidth = Math.max(1, Math.floor(foldWidth));       // Min fold line width

    // Calculate opacities for shadow and highlight based on strength
    // Adjusted opacities so that strength 1 is clearly visible but not pure black/white
    const shadowOpacity = foldStrength * 0.4;
    const highlightOpacity = foldStrength * 0.3;

    // Calculate the width of each individual line (shadow or highlight)
    // The total visual impact of a fold will be roughly 2 * individualLineWidth
    const individualLineWidth = Math.ceil(foldWidth / 2);

    // Calculate the offset from the center of the fold to the center of each line
    // This creates a small gap or adjacency for the shadow and highlight lines
    const lineOffset = individualLineWidth / 2;

    for (let i = 0; i < foldCount; i++) {
        const isHorizontal = Math.random() > 0.5;
        // Randomly determine fold type: valley (crease away) or mountain (crease towards)
        const isValleyFold = Math.random() > 0.5; 

        const shadowColor = `rgba(0, 0, 0, ${shadowOpacity})`;
        const highlightColor = `rgba(255, 255, 255, ${highlightOpacity})`;

        // Determine which color goes on which side based on fold type and orientation
        // Assuming light source from top-left for consistency
        let firstLineColor, secondLineColor;
        if (isValleyFold) {
            firstLineColor = shadowColor;   // Top/Left side gets shadow
            secondLineColor = highlightColor; // Bottom/Right side gets highlight
        } else { // Mountain fold
            firstLineColor = highlightColor; // Top/Left side gets highlight
            secondLineColor = shadowColor;   // Bottom/Right side gets shadow
        }

        ctx.lineWidth = individualLineWidth;
        // Use 'butt' lineCap to prevent lines from extending beyond their defined points,
        // ensuring cleaner joins if multiple folds intersect.
        ctx.lineCap = 'butt';


        if (isHorizontal) {
            const y_center = Math.random() * height;

            // First line (closer to top edge or actual top part of the fold)
            ctx.beginPath();
            ctx.moveTo(0, y_center - lineOffset);
            ctx.lineTo(width, y_center - lineOffset);
            ctx.strokeStyle = firstLineColor;
            ctx.stroke();

            // Second line (closer to bottom edge or actual bottom part of the fold)
            ctx.beginPath();
            ctx.moveTo(0, y_center + lineOffset);
            ctx.lineTo(width, y_center + lineOffset);
            ctx.strokeStyle = secondLineColor;
            ctx.stroke();

        } else { // Vertical fold
            const x_center = Math.random() * width;

            // First line (closer to left edge or actual left part of the fold)
            ctx.beginPath();
            ctx.moveTo(x_center - lineOffset, 0);
            ctx.lineTo(x_center - lineOffset, height);
            ctx.strokeStyle = firstLineColor;
            ctx.stroke();

            // Second line (closer to right edge or actual right part of the fold)
            ctx.beginPath();
            ctx.moveTo(x_center + lineOffset, 0);
            ctx.lineTo(x_center + lineOffset, height);
            ctx.strokeStyle = secondLineColor;
            ctx.stroke();
        }
    }

    return canvas;
}