Image Fibonacci Spiral Generator

/**
 * Adds a Fibonacci spiral overlay to an image.
 * The spiral is drawn on top of the original image based on user-defined parameters.
 *
 * @param {Image} originalImg The original javascript Image object.
 * @param {number} startAngle The starting angle of the spiral in degrees. Default is 0.
 * @param {number} lineWidth The thickness of the spiral line in pixels. Default is 2.
 * @param {string} lineColor The color of the spiral line (e.g., '#FFFFFF', 'red'). Default is '#FFFFFF'.
 * @param {number} numSquares The number of arcs (squares) to use for constructing the spiral. Default is 10.
 * @param {number} scale A scaling factor for the spiral's size. Default is 1.
 * @param {string} spiralDirection The direction of the spiral, either 'clockwise' or 'counter-clockwise'. Default is 'clockwise'.
 * @param {number} centerX The horizontal center of the spiral as a percentage of image width (0-100). Default is 50.
 * @param {number} centerY The vertical center of the spiral as a percentage of image height (0-100). Default is 50.
 * @returns {HTMLCanvasElement} A canvas element with the original image and the Fibonacci spiral drawn on it.
 */
async function processImage(originalImg, startAngle = 0, lineWidth = 2, lineColor = '#FFFFFF', numSquares = 10, scale = 1, spiralDirection = 'clockwise', centerX = 50, centerY = 50) {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    canvas.width = originalImg.naturalWidth;
    canvas.height = originalImg.naturalHeight;

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

    // --- Start drawing the Fibonacci spiral ---
    ctx.save();

    // Parse and validate parameters
    const angleRad = parseFloat(startAngle) * Math.PI / 180;
    const cx = canvas.width * parseFloat(centerX) / 100;
    const cy = canvas.height * parseFloat(centerY) / 100;
    const isClockwise = spiralDirection.toLowerCase() === 'clockwise';
    const num = Math.max(0, parseInt(numSquares, 10));
    const scaleFactor = Math.max(0.1, parseFloat(scale));

    // Configure line style
    ctx.lineWidth = parseFloat(lineWidth);
    ctx.strokeStyle = lineColor;
    ctx.lineCap = 'round';

    // Begin the spiral path. We use a series of transformations (translate, rotate)
    // to draw each arc segment, which is simpler than calculating absolute coordinates.
    ctx.beginPath();

    // Move the canvas origin to the spiral's center and apply the initial rotation
    ctx.translate(cx, cy);
    ctx.rotate(angleRad);
    
    // The 'sign' determines the direction of rotation and arc orientation
    const sign = isClockwise ? 1 : -1;

    // We start at the center, so move the "pen" there.
    ctx.moveTo(0, 0);

    // Initialize the first two Fibonacci numbers
    let a = 0; // F(n-1)
    let b = 1; // F(n)

    for (let i = 0; i < num; i++) {
        const radius = b * scaleFactor;

        if (radius > 0) {
             // Draw the quarter-circle arc for the current segment.
             // The arc always starts at the current origin (0,0) of the transformed context.
             // The center of the arc is placed perpendicular to the current drawing direction.
             // For a clockwise spiral (sign=1), the center is at (0, radius), and the arc
             // goes from -90 to 0 degrees. For counter-clockwise (sign=-1), the center is
             // at (0, -radius) and goes from 90 to 0 degrees.
            ctx.arc(0, sign * radius, radius, -sign * Math.PI / 2, 0, !isClockwise);
        }
       
        // Update the transformation matrix for the next segment.
        // First, calculate the end point of the arc we just drew.
        const endX = b * scaleFactor;
        const endY = sign * b * scaleFactor;
        
        // Move the canvas origin to the end of the arc.
        ctx.translate(endX, endY);
        
        // Rotate the canvas 90 degrees for the next arc.
        ctx.rotate(sign * Math.PI / 2);

        // Calculate the next Fibonacci number for the next radius
        const temp = a;
        a = b;
        b = temp + b;
    }

    // Render the complete spiral path
    ctx.stroke();

    // Restore the canvas context to its original state
    ctx.restore();

    return canvas;
}