Golden Ratio Spiral Overlay On Egg Photo Creator

function processImage(originalImg, color = "#FFD700", lineWidth = "2", drawSquares = "true", scaleMode = "cover") {
    // Create a new canvas to process the image
    const canvas = document.createElement('canvas');
    canvas.width = originalImg.width;
    canvas.height = originalImg.height;
    const ctx = canvas.getContext('2d');

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

    // Golden Ratio constant
    const phi = (1 + Math.sqrt(5)) / 2;
    const W = canvas.width;
    const H = canvas.height;

    // Determine scale (S corresponds to the width of the primary largest square)
    // The total mathematically pure spiral bounding box is [S] by [S * phi]
    let S;
    switch(scaleMode.toLowerCase()) {
        case "fit":
            S = Math.min(W, H / phi);
            break;
        case "width":
            S = W;
            break;
        case "height":
            S = H / phi;
            break;
        case "cover":
        default:
            S = Math.max(W, H / phi);
            break;
    }

    // Set styling for the overlay
    ctx.strokeStyle = color;
    ctx.lineWidth = parseFloat(lineWidth) || 2;
    ctx.lineCap = "round";
    ctx.lineJoin = "round";

    // Direction modifiers for shifting the sub-rectangle centers
    const dirs = [
        { x: 1, y: 0 },
        { x: 0, y: 1 },
        { x: -1, y: 0 },
        { x: 0, y: -1 }
    ];

    // Optional: Draw the classical Golden Ratio squares
    if (drawSquares.toString().toLowerCase() === "true") {
        ctx.beginPath();
        let sqR = S;
        let sqCx = 0;
        let sqCy = S;

        for (let i = 0; i < 20; i++) {
            let min_x, min_y;
            let dir = i % 4;
            
            // Reconstruct the Top-Left of the current bounding square based on quadrant
            if (dir === 0) {
                min_x = sqCx;
                min_y = sqCy - sqR;
            } else if (dir === 1) {
                min_x = sqCx;
                min_y = sqCy;
            } else if (dir === 2) {
                min_x = sqCx - sqR;
                min_y = sqCy;
            } else {
                min_x = sqCx - sqR;
                min_y = sqCy - sqR;
            }

            ctx.rect(min_x, min_y, sqR, sqR);

            // Step down to next golden rectangle frame
            let nextR = sqR / phi;
            sqCx += (sqR - nextR) * dirs[dir].x;
            sqCy += (sqR - nextR) * dirs[dir].y;
            sqR = nextR;
        }
        ctx.stroke();
    }

    // Draw the continuous Golden Spiral
    ctx.beginPath();
    let spR = S;
    let spCx = 0;      // Start eye center x
    let spCy = S;      // Start eye center y
    
    for (let i = 0; i < 20; i++) {
        // Clockwise curve starts turning from -90deg (top) continuing by +90deg
        let startAngle = -Math.PI / 2 + i * Math.PI / 2;
        let endAngle = startAngle + Math.PI / 2;

        ctx.arc(spCx, spCy, spR, startAngle, endAngle, false);

        // Step dimensions and translate frame to next smaller golden block
        let nextR = spR / phi;
        spCx += (spR - nextR) * dirs[i % 4].x;
        spCy += (spR - nextR) * dirs[i % 4].y;
        spR = nextR;
    }
    
    ctx.stroke();

    return canvas;
}