Image To Fibonacci Mushroom Converter

/**
 * Converts an image into a mushroom shape using a Fibonacci spiral (phyllotaxis) pattern
 * to arrange the original image's pixels for the mushroom cap.
 *
 * @param {Image} originalImg The original javascript Image object.
 * @param {number} baseDotSize The base size of the dots that make up the mushroom cap. Dots get smaller towards the edge. Defaults to 3.
 * @param {number} scale A scaling factor for the spiral. A larger number spreads the dots out more. Defaults to 4.
 * @param {number} stemWidthRatio The width of the mushroom stem as a ratio of the total canvas width. Defaults to 0.2.
 * @param {number} capTilt A factor to flatten the spiral into a more cap-like shape. 1 is a perfect circle (top-down view), less than 1 flattens it. Defaults to 0.7.
 * @param {string} stemColor The color of the mushroom stem. Defaults to a tan color.
 * @param {string} backgroundColor The background color of the canvas. Defaults to a light grey.
 * @returns {HTMLCanvasElement} A canvas element with the Fibonacci mushroom drawing.
 */
function processImage(originalImg, baseDotSize = 3, scale = 4, stemWidthRatio = 0.2, capTilt = 0.7, stemColor = '#D2B48C', backgroundColor = '#F0F0F0') {
    // === 1. Prepare Pixel Data ===
    
    // Use a temporary canvas to extract pixel data from the source image.
    const tempCanvas = document.createElement('canvas');
    tempCanvas.width = originalImg.width;
    tempCanvas.height = originalImg.height;
    // { willReadFrequently: true } is a performance hint for the browser.
    const tempCtx = tempCanvas.getContext('2d', { willReadFrequently: true });
    tempCtx.drawImage(originalImg, 0, 0);
    const imageData = tempCtx.getImageData(0, 0, originalImg.width, originalImg.height);
    const pixels = imageData.data;

    // Create an array of colors from the image's non-transparent pixels.
    const colors = [];
    for (let i = 0; i < pixels.length; i += 4) {
        // Only consider pixels that are not fully transparent.
        if (pixels[i + 3] > 0) {
            colors.push(`rgba(${pixels[i]}, ${pixels[i+1]}, ${pixels[i+2]}, ${pixels[i+3] / 255})`);
        }
    }
    
    // Shuffle the colors array (Fisher-Yates algorithm) for a more organic, mixed look.
    for (let i = colors.length - 1; i > 0; i--) {
        const j = Math.floor(Math.random() * (i + 1));
        [colors[i], colors[j]] = [colors[j], colors[i]];
    }

    // === 2. Set Up Main Canvas ===

    // Determine the canvas size based on the number of pixels to ensure the spiral fits well.
    const numPoints = colors.length;
    const maxRadius = parseFloat(scale) * Math.sqrt(numPoints);
    const canvasSize = maxRadius * 2.2; // Diameter of spiral + 10% padding on all sides.

    const canvas = document.createElement('canvas');
    canvas.width = canvasSize;
    canvas.height = canvasSize;
    const ctx = canvas.getContext('2d');

    // Fill the background.
    ctx.fillStyle = backgroundColor;
    ctx.fillRect(0, 0, canvas.width, canvas.height);

    // === 3. Draw the Mushroom ===

    const centerX = canvas.width / 2;
    // Position the cap slightly above the vertical center.
    const centerY = canvas.height * 0.45;

    // Draw the stem first, so the cap is drawn on top.
    const effectiveStemWidth = canvas.width * parseFloat(stemWidthRatio);
    const stemTopY = centerY;
    const stemBottomY = canvas.height;
    
    ctx.fillStyle = stemColor;
    ctx.beginPath();
    const topW = effectiveStemWidth;
    const bottomW = effectiveStemWidth * 1.2; // Make the stem slightly wider at the bottom.
    ctx.moveTo(centerX - topW / 2, stemTopY);
    // Use quadratic curves for a more organic stem shape.
    ctx.quadraticCurveTo(
        centerX - topW * 0.6, (stemTopY + stemBottomY) / 2,
        centerX - bottomW / 2, stemBottomY
    );
    ctx.lineTo(centerX + bottomW / 2, stemBottomY);
    ctx.quadraticCurveTo(
        centerX + topW * 0.6, (stemTopY + stemBottomY) / 2,
        centerX + topW / 2, stemTopY
    );
    ctx.closePath();
    ctx.fill();


    // Draw the cap using the Fibonacci spiral (phyllotaxis) pattern.
    const goldenAngle = Math.PI * (3 - Math.sqrt(5)); // The golden angle in radians.

    for (let i = 0; i < numPoints; i++) {
        const angle = i * goldenAngle;
        const radius = parseFloat(scale) * Math.sqrt(i);

        const x = centerX + radius * Math.cos(angle);
        // Apply the capTilt to the y-coordinate to flatten the spiral into a cap shape.
        const y = centerY + radius * Math.sin(angle) * parseFloat(capTilt);

        // Make the dots smaller as they get further from the center.
        const sizeRatio = 1 - (i / numPoints) * 0.8; // Decrease size, but not to zero.
        const currentDotSize = Math.max(1, parseFloat(baseDotSize) * sizeRatio);
        
        ctx.fillStyle = colors[i];
        ctx.beginPath();
        ctx.arc(x, y, currentDotSize, 0, 2 * Math.PI);
        ctx.fill();
    }

    return canvas;
}