Image Golden Ratio Overlay Filter Effect Tool

function processImage(originalImg, overlayType = "grid", lineColor = "rgba(255, 255, 255, 0.7)", lineWidth = 1, spiralSegments = 6, spiralDirection = "clockwise", spiralStartCorner = "topLeft") {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

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

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

    // Setup for overlay
    ctx.strokeStyle = lineColor;
    ctx.lineWidth = lineWidth;

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

    if (overlayType === "grid") {
        drawPhiGrid(ctx, canvas.width, canvas.height, PHI);
    } else if (overlayType === "spiral") {
        // Ensure spiralSegments is an integer
        const numSegments = Math.max(1, parseInt(spiralSegments) || 6);
        drawGoldenSpiral(ctx, canvas.width, canvas.height, PHI, numSegments, spiralDirection, spiralStartCorner);
    }

    return canvas;
}

function drawPhiGrid(ctx, w, h, PHI) {
    ctx.beginPath();

    // Vertical lines
    // Lines divide width into W/(PHI^2), W/PHI, W/(PHI^2) based on common interpretation, or more simply two lines.
    // Common phi grid has lines at 1/phi and 1 - 1/phi of the dimension.
    const x1 = w / PHI;
    const x2 = w * (1 - 1 / PHI); // same as w / (PHI*PHI) + w / PHI depends on interpretation
                                 // For two lines: w * (1/PHI) and w * (1 - 1/PHI) where PHI approx 1.618
                                 // This yields lines at ~0.618*W and ~0.382*W from one side.
                                 // Or, more symmetrically:
    const w_phi = w / PHI;
    const w_phi_sq = w / (PHI * PHI);
    
    // Lines at W/PHI^2, W/PHI^2 + W/PHI = W * (1-1/PHI) based from left.
    // Or from each side:
    ctx.moveTo(w_phi_sq, 0);      // Line 1 (from left: small segment)
    ctx.lineTo(w_phi_sq, h);
    ctx.moveTo(w - w_phi_sq, 0);  // Line 4 (from right: small segment)
    ctx.lineTo(w - w_phi_sq, h);

    // Alternative interpretation using points of division:
    // ctx.moveTo(w * (1 - 1/PHI), 0); ctx.lineTo(w * (1 - 1/PHI), h);
    // ctx.moveTo(w / PHI, 0); ctx.lineTo(w / PHI, h);


    // Horizontal lines (similar logic to vertical)
    const h_phi = h / PHI;
    const h_phi_sq = h / (PHI * PHI);

    ctx.moveTo(0, h_phi_sq);      // Line 1 (from top: small segment)
    ctx.lineTo(w, h_phi_sq);
    ctx.moveTo(0, h - h_phi_sq);  // Line 4 (from bottom: small segment)
    ctx.lineTo(w, h - h_phi_sq);

    ctx.stroke();
}


function drawGoldenSpiral(ctx, canvasW, canvasH, PHI, numSegments, directionStr, startCornerStr) {
    ctx.save();
    ctx.beginPath();

    let effW = canvasW;
    let effH = canvasH;

    // Apply transformations based on startCornerStr.
    // This orients the canvas so that the drawing logic for a canonical spiral
    // (e.g., largest segment effectively in "topLeft" of transformed space) produces
    // the desired visual result.
    if (startCornerStr === "topRight") {
        ctx.translate(canvasW, 0);
        ctx.rotate(Math.PI / 2);
        effW = canvasH; effH = canvasW;
    } else if (startCornerStr === "bottomRight") {
        ctx.translate(canvasW, canvasH);
        ctx.rotate(Math.PI);
    } else if (startCornerStr === "bottomLeft") {
        ctx.translate(0, canvasH);
        ctx.rotate(-Math.PI / 2); // or 1.5 * Math.PI
        effW = canvasH; effH = canvasW;
    }
    // "topLeft" is the canonical orientation, no initial transform.

    let x = 0, y = 0; // Top-left of the current rectangle in transformed space
    let w = effW;
    let h = effH;

    const isCw = directionStr === "clockwise";

    // The core logic draws a CW spiral starting "from Outside-Right, curling Inwards-TopLeft".
    // (i.e. first square on the right of the bounding box, arc in its top-left corner)
    // For CCW, arc angles are flipped.
    for (let i = 0; i < numSegments; i++) {
        let r, arcCenterX, arcCenterY, startAngle, endAngle;
        let arcAnticlockwise = !isCw; // Canvas `arc` command's boolean

        const turn = i % 4; //Cycles 0, 1, 2, 3

        if (turn === 0) { // Cut square from RIGHT side of current rectangle
            r = h; // Square side is height of current rectangle
            if (w < r) r = w; // Cannot cut more than available width

            if (isCw) { // Arc in square's own top-left corner
                arcCenterX = x + w - r; // Center X of arc
                arcCenterY = y + r;     // Center Y of arc
                startAngle = Math.PI / 2; // 90 deg
                endAngle = Math.PI;       // 180 deg
            } else { // CCW: Arc in square's own bottom-left corner
                arcCenterX = x + w - r;
                arcCenterY = y;
                startAngle = Math.PI * 1.5; // 270 deg
                endAngle = Math.PI;         // 180 deg
            }
            w -= r; // Update remaining rectangle width
        } else if (turn === 1) { // Cut square from BOTTOM side
            r = w; // Square side is width of current rectangle
            if (h < r) r = h;

            if (isCw) { // Arc in square's own top-right corner
                arcCenterX = x;
                arcCenterY = y + h - r;
                startAngle = Math.PI;       // 180 deg
                endAngle = Math.PI * 1.5;   // 270 deg
            } else { // CCW: Arc in square's own top-left corner
                arcCenterX = x + r;
                arcCenterY = y + h - r;
                startAngle = Math.PI / 2;    // 90 deg
                endAngle = Math.PI;          // 180 deg
            }
            h -= r; // Update remaining rectangle height
        } else if (turn === 2) { // Cut square from LEFT side
            r = h; // Square side is height
            if (w < r) r = w;

            if (isCw) { // Arc in square's own bottom-right corner
                arcCenterX = x + r;
                arcCenterY = y;
                startAngle = Math.PI * 1.5; // 270 deg
                endAngle = Math.PI * 2;     // 360 deg or 0
            } else { // CCW: Arc in square's own top-right corner
                arcCenterX = x + r;
                arcCenterY = y + r;
                startAngle = 0;             // 0 deg
                endAngle = Math.PI / 2;     // 90 deg
            }
            x += r; // Update rectangle x-offset
            w -= r; // Update rectangle width
        } else { // turn === 3, Cut square from TOP side
            r = w; // Square side is width
            if (h < r) r = h;

            if (isCw) { // Arc in square's own bottom-left corner
                arcCenterX = x + w;
                arcCenterY = y + r;
                startAngle = 0;           // 0 deg or 2PI
                endAngle = Math.PI / 2;   // 90 deg
            } else { // CCW: Arc in square's own bottom-right corner
                arcCenterX = x;
                arcCenterY = y + r;
                startAngle = Math.PI * 2;   // 360 deg or 0
                endAngle = Math.PI * 1.5;   // 270 deg
            }
            y += r; // Update rectangle y-offset
            h -= r; // Update rectangle height
        }

        if (r < 0.5 || w < 0.5 || h < 0.5) break; // Stop if too small

        ctx.arc(arcCenterX, arcCenterY, r, startAngle, endAngle, arcAnticlockwise);
    }

    ctx.stroke();
    ctx.restore();
}