Image Golden Spiral Overlay Creator

async function processImage(originalImg, spiralColor = '#FFFFFF', lineWidth = 2, startCorner = 'top-left') {
    // 1. Create a canvas and get its 2D rendering context
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    const W = originalImg.width;
    const H = originalImg.height;
    canvas.width = W;
    canvas.height = H;

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

    // 3. Set up the drawing style for the spiral overlay
    ctx.strokeStyle = spiralColor;
    ctx.lineWidth = lineWidth;
    ctx.lineCap = 'round'; // For smoother line ends

    // 4. Define constants for the Golden Spiral
    // The Golden Ratio, phi
    const PHI = (1 + Math.sqrt(5)) / 2;
    // The constant 'b' for the logarithmic spiral equation r = a * e^(b*theta),
    // chosen so the spiral's radius increases by a factor of PHI for every quarter turn (PI/2 radians).
    const b_base = Math.log(PHI) / (Math.PI / 2);

    // 5. Determine the spiral's center (pole) based on the startCorner parameter.
    // The pole is placed at one of the four "power points" defined by the golden ratio division of the image.
    let cx, cy;
    switch (startCorner) {
        case 'top-right':
            cx = W / PHI;
            cy = H - (H / PHI);
            break;
        case 'bottom-left':
            cx = W - (W / PHI);
            cy = H / PHI;
            break;
        case 'bottom-right':
            cx = W / PHI;
            cy = H / PHI;
            break;
        case 'top-left':
        default:
            cx = W - (W / PHI);
            cy = H - (H / PHI);
            break;
    }

    // 6. Calculate the initial parameters for drawing the spiral
    // Find the corner of the image that is farthest from the spiral's center.
    // This corner will be the starting point of the spiral.
    const corners = [
        { x: 0, y: 0 },   // top-left
        { x: W, y: 0 },   // top-right
        { x: 0, y: H },   // bottom-left
        { x: W, y: H }    // bottom-right
    ];
    let farthestCorner = corners[0];
    let maxDistSq = 0;
    for (const corner of corners) {
        const distSq = (corner.x - cx) ** 2 + (corner.y - cy) ** 2;
        if (distSq > maxDistSq) {
            maxDistSq = distSq;
            farthestCorner = corner;
        }
    }
    
    const maxRadius = Math.sqrt(maxDistSq);
    // The angle of the starting point relative to the center
    const thetaStart = Math.atan2(farthestCorner.y - cy, farthestCorner.x - cx);

    // 7. Determine the spiral's direction (handedness) and drawing parameters.
    // A counter-clockwise (CCW) inward spiral requires increasing theta and b < 0.
    // A clockwise (CW) inward spiral requires decreasing theta and b > 0.
    const isCCW = (startCorner === 'top-right' || startCorner === 'bottom-left');
    const b = isCCW ? -b_base : b_base;
    const direction = isCCW ? 1 : -1; // 1 for increasing theta (CCW), -1 for decreasing (CW)

    // Calculate the scaling factor 'a' for the spiral equation so that r = maxRadius at theta = thetaStart.
    const a = maxRadius / Math.exp(b * thetaStart);

    // 8. Draw the spiral by plotting points along its path
    ctx.beginPath();
    
    const rotations = 4; // How many times the spiral loops
    const totalAngleChange = rotations * 2 * Math.PI;
    const numPoints = 1000; // The number of line segments to approximate the curve

    for (let i = 0; i <= numPoints; i++) {
        const angleOffset = direction * (i / numPoints) * totalAngleChange;
        const theta = thetaStart + angleOffset;
        const r = a * Math.exp(b * theta);

        const x = cx + r * Math.cos(theta);
        const y = cy + r * Math.sin(theta);
        
        if (i === 0) {
            ctx.moveTo(x, y);
        } else {
            ctx.lineTo(x, y);
        }
    }
    
    ctx.stroke();

    // 9. Return the canvas with the image and spiral overlay
    return canvas;
}