Image Golden Ratio Calculator

async function processImage(originalImg, overlayType = 'spiral', startCorner = 'top-left', lineColor = '#ffffff', lineWidth = 2) {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    const w = originalImg.width;
    const h = originalImg.height;
    canvas.width = w;
    canvas.height = h;

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

    // Set styles for the overlay
    ctx.strokeStyle = lineColor;
    ctx.lineWidth = lineWidth;
    ctx.lineCap = 'round';

    const phi = (1 + Math.sqrt(5)) / 2;

    // Helper function to draw the Golden Spiral
    const drawGoldenSpiral = (startX, startY, width, height, corner) => {
        let rotation = 0; // 0 for Counter-Clockwise, 1 for Clockwise
        let cutDir = 0; // 0:Left, 1:Top, 2:Right, 3:Bottom

        // Determine initial state based on the starting corner
        switch (corner) {
            case 'top-left':
                rotation = 0; // CCW
                cutDir = w >= h ? 0 : 1;
                break;
            case 'top-right':
                rotation = 1; // CW
                cutDir = w >= h ? 2 : 1;
                break;
            case 'bottom-right':
                rotation = 0; // CCW
                cutDir = w >= h ? 2 : 3;
                break;
            case 'bottom-left':
                rotation = 1; // CW
                cutDir = w >= h ? 0 : 3;
                break;
            default: // Default to top-left
                rotation = 0;
                cutDir = w >= h ? 0 : 1;
                break;
        }

        ctx.beginPath();
        let currentX = startX;
        let currentY = startY;
        let currentW = width;
        let currentH = height;

        for (let i = 0; i < 16; i++) {
            if (currentW < 0.5 || currentH < 0.5) break;

            let squareSize, arcCenterX, arcCenterY, startAngle, endAngle;

            if (currentW >= currentH) { // Wide rectangle, cut Left or Right
                squareSize = currentH;
                if (cutDir === 0) { // Cut from Left
                    arcCenterX = currentX + squareSize;
                    arcCenterY = currentY;
                    startAngle = 0.5 * Math.PI;
                    endAngle = Math.PI;
                    currentX += squareSize;
                    currentW -= squareSize;
                    cutDir = rotation === 0 ? 1 : 3; // Next is Top(CCW) or Bottom(CW)
                } else { // Cut from Right (cutDir === 2)
                    arcCenterX = currentX + currentW - squareSize;
                    arcCenterY = currentY + squareSize;
                    startAngle = 1.5 * Math.PI;
                    endAngle = 2 * Math.PI;
                    currentW -= squareSize;
                    cutDir = rotation === 0 ? 3 : 1; // Next is Bottom(CCW) or Top(CW)
                }
            } else { // Tall rectangle, cut Top or Bottom
                squareSize = currentW;
                if (cutDir === 1) { // Cut from Top
                    arcCenterX = currentX + squareSize;
                    arcCenterY = currentY + squareSize;
                    startAngle = Math.PI;
                    endAngle = 1.5 * Math.PI;
                    currentY += squareSize;
                    currentH -= squareSize;
                    cutDir = rotation === 0 ? 2 : 0; // Next is Right(CCW) or Left(CW)
                } else { // Cut from Bottom (cutDir === 3)
                    arcCenterX = currentX;
                    arcCenterY = currentY + currentH - squareSize;
                    startAngle = 0;
                    endAngle = 0.5 * Math.PI;
                    currentH -= squareSize;
                    cutDir = rotation === 0 ? 0 : 2; // Next is Left(CCW) or Right(CW)
                }
            }
             ctx.arc(arcCenterX, arcCenterY, squareSize, startAngle, endAngle);
        }
        ctx.stroke();
    };

    // Draw the overlays based on the selected type
    if (overlayType === 'grid' || overlayType === 'both') {
        ctx.beginPath();
        // Vertical lines dividing width by the golden ratio
        ctx.moveTo(w / phi, 0);
        ctx.lineTo(w / phi, h);
        ctx.moveTo(w - (w / phi), 0);
        ctx.lineTo(w - (w / phi), h);

        // Horizontal lines dividing height by the golden ratio
        ctx.moveTo(0, h / phi);
        ctx.lineTo(w, h / phi);
        ctx.moveTo(0, h - (h / phi));
        ctx.lineTo(w, h - (h / phi));
        ctx.stroke();
    }

    if (overlayType === 'spiral' || overlayType === 'both') {
        drawGoldenSpiral(0, 0, w, h, startCorner);
    }

    return canvas;
}