Image Fibonacci Sequence Generator

/**
 * Creates a Fibonacci spiral visualization using an image as a texture.
 *
 * This function generates a visual representation of the Fibonacci sequence
 * in the form of a spiral composed of nested squares and quarter-circle arcs.
 * The provided image is used as a background fill for the entire spiral shape.
 *
 * @param {Image} originalImg The original image object. It will be used as a background texture for the spiral shape.
 * @param {number} iterations The number of squares/arcs in the spiral. Recommended range: 2-15. Defaults to 10.
 * @param {string} spiralColor The color of the spiral line (e.g., '#FF0000', 'rgba(0,0,0,0.8)'). Defaults to '#000000'.
 * @param {string} boxColor The color of the borders of the Fibonacci squares. Defaults to '#CCCCCC'.
 * @param {number} showBoxes Set to 1 to show the squares, 0 to hide them. Defaults to 1.
 * @param {number} lineWidth The thickness of the spiral and box lines. Defaults to 2.
 * @param {string} startDirection The starting direction of the spiral. Can be 'right', 'up', 'left', or 'down'. Defaults to 'right'.
 * @param {string} backgroundColor The background color of the canvas, visible outside the spiral. Defaults to '#FFFFFF'.
 * @returns {HTMLCanvasElement} A canvas element displaying the Fibonacci spiral.
 */
function processImage(originalImg, iterations = 10, spiralColor = '#000000', boxColor = '#CCCCCC', showBoxes = 1, lineWidth = 2, startDirection = 'right', backgroundColor = '#FFFFFF') {

    // 1. Parameter validation and setup
    const validIterations = Math.max(2, Math.min(15, parseInt(iterations) || 10));
    const shouldShowBoxes = !!Number(showBoxes);
    const dirMap = { 'right': 0, 'up': 1, 'left': 2, 'down': 3 };
    const startDirIndex = dirMap[(startDirection || 'right').toLowerCase()] || 0;

    // 2. Generate Fibonacci numbers
    const fib = [0, 1];
    for (let i = 2; i <= validIterations + 1; i++) {
        fib.push(fib[i - 1] + fib[i - 2]);
    }

    // 3. Pre-computation run to calculate layout and bounding box
    const points = [];
    let comp = { x: 0, y: 0, w: 0, h: 0 }; // The overall composition's bounding box

    // Manually place the first square to initialize the composition
    const r1 = fib[2]; // This is the first '1'
    points.push({ sx: 0, sy: 0, r: r1, dir: (0 + startDirIndex) % 4 });
    comp = { x: 0, y: 0, w: r1, h: r1 };

    for (let i = 2; i <= validIterations; i++) {
        const r = fib[i + 1];
        const dir = (i - 1 + startDirIndex) % 4;
        let sx, sy;

        // This logic correctly places the new square adjacent to the previous composition
        switch (dir) {
            case 0: // Add square to the Right
                sx = comp.x + comp.w;
                sy = comp.y;
                comp.w += r;
                comp.h = Math.max(comp.h, r);
                break;
            case 1: // Add square Up
                sx = comp.x + comp.w - r;
                sy = comp.y - r;
                comp.y -= r;
                comp.h += r;
                break;
            case 2: // Add square to the Left
                sx = comp.x - r;
                sy = comp.y + comp.h - r;
                comp.x -= r;
                comp.w += r;
                break;
            case 3: // Add square Down
                sx = comp.x;
                sy = comp.y + comp.h;
                comp.h += r;
                break;
        }
        points.push({ sx, sy, r, dir });
    }

    // 4. Create Canvas
    const padding = Math.max(10, lineWidth * 2);
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    canvas.width = comp.w + padding * 2;
    canvas.height = comp.h + padding * 2;
    const offsetX = -comp.x + padding;
    const offsetY = -comp.y + padding;

    // 5. Draw Background and Image Texture
    ctx.fillStyle = backgroundColor;
    ctx.fillRect(0, 0, canvas.width, canvas.height);

    ctx.save();
    ctx.beginPath();
    // Create a path representing the outer bounds of the entire spiral
    points.forEach(p => ctx.rect(p.sx + offsetX, p.sy + offsetY, p.r, p.r));
    ctx.clip(); // Clip all subsequent drawing to this path
    
    // Fill the clipped region with a pattern made from the input image
    const pattern = ctx.createPattern(originalImg, 'repeat');
    if (pattern) {
        ctx.fillStyle = pattern;
        ctx.fillRect(0, 0, canvas.width, canvas.height);
    }
    ctx.restore(); // Remove the clipping path

    // 6. Draw the spiral and boxes on top of the texture
    ctx.lineWidth = lineWidth;
    ctx.lineCap = 'round';

    points.forEach(p => {
        const { sx, sy, r, dir } = p;
        const x = sx + offsetX;
        const y = sy + offsetY;

        // Draw the containing square
        if (shouldShowBoxes && r > 0) {
            ctx.strokeStyle = boxColor;
            ctx.strokeRect(x, y, r, r);
        }

        // Draw the arc
        if (r > 0) {
            ctx.beginPath();
            ctx.strokeStyle = spiralColor;
            let arcX, arcY, startAngle, endAngle;

            // Determine arc parameters based on the direction the square was added
            switch (dir) {
                case 0: // Right
                    arcX = x; arcY = y + r;
                    startAngle = 1.5 * Math.PI; endAngle = 2 * Math.PI;
                    break;
                case 1: // Up
                    arcX = x + r; arcY = y + r;
                    startAngle = Math.PI; endAngle = 1.5 * Math.PI;
                    break;
                case 2: // Left
                    arcX = x + r; arcY = y;
                    startAngle = 0.5 * Math.PI; endAngle = Math.PI;
                    break;
                case 3: // Down
                    arcX = x; arcY = y;
                    startAngle = 0; endAngle = 0.5 * Math.PI;
                    break;
            }
            ctx.arc(arcX, arcY, r, startAngle, endAngle);
            ctx.stroke();
        }
    });

    return canvas;
}