Image Flower Generator

function processImage(originalImg, numPetals = 6, zoom = 1.0, petalDepth = 0.3, offsetX = 0, offsetY = 0, rotationDegrees = 0) {
    // Parameter validation and parsing
    numPetals = parseInt(numPetals);
    if (isNaN(numPetals) || numPetals < 1) numPetals = 6;
    
    zoom = parseFloat(zoom);
    if (isNaN(zoom) || zoom <= 0) zoom = 1.0;
    
    petalDepth = parseFloat(petalDepth);
    if (isNaN(petalDepth)) petalDepth = 0.3;
    petalDepth = Math.max(0, Math.min(1, petalDepth));
    
    offsetX = parseFloat(offsetX);
    if (isNaN(offsetX)) offsetX = 0;
    
    offsetY = parseFloat(offsetY);
    if (isNaN(offsetY)) offsetY = 0;
    
    let rotation = parseFloat(rotationDegrees);
    if (isNaN(rotation)) rotation = 0;
    rotation = rotation * (Math.PI / 180);

    const canvas = document.createElement('canvas');
    canvas.width = 800;
    canvas.height = 800;
    const ctx = canvas.getContext('2d');
    
    // Clear canvas to ensure background is transparent
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    const cx = canvas.width / 2;
    const cy = canvas.height / 2;
    
    const R = Math.min(cx, cy) - 10; // Outer radius with padding
    const r = R * (1 - petalDepth);  // Inner radius at the crevices
    const angle = Math.PI / numPetals; // The wedge angle for the kaleidoscope
    
    // Center the origin and face the first petal straight UP
    ctx.translate(cx, cy);
    ctx.rotate(-Math.PI / 2);

    // 1. Generate the morphological flower mask
    ctx.beginPath();
    const steps = Math.max(360, numPetals * 20);
    for (let i = 0; i <= steps; i++) {
        let theta = (i * 2 * Math.PI) / steps;
        // Cosine maps perfectly so the peak matches the wedge center and valley matches the seam
        let rad = r + (R - r) * 0.5 * (1 + Math.cos(numPetals * theta));
        let x = rad * Math.cos(theta);
        let y = rad * Math.sin(theta);
        
        if (i === 0) ctx.moveTo(x, y);
        else ctx.lineTo(x, y);
    }
    ctx.closePath();
    ctx.clip(); // Apply global clip mask

    // 2. Setup image dimension and scaling
    const imgSize = Math.min(originalImg.width, originalImg.height);
    // Base scale ensures the image safely covers the maximum bounds of a wedge
    const scale = (R / imgSize) * zoom * 2.2;

    const imgCx = originalImg.width / 2 + offsetX;
    const imgCy = originalImg.height / 2 + offsetY;

    // Smoothing for best quality
    ctx.imageSmoothingEnabled = true;
    ctx.imageSmoothingQuality = 'high';

    // 3. Draw the kaleidoscope seamlessly with mirrored wedges
    for (let i = 0; i < numPetals * 2; i++) {
        ctx.save();
        
        // Orient the local wedge
        ctx.rotate(i * angle);
        
        // Clip to the precise pie slice to prevent overdrawing
        ctx.beginPath();
        ctx.moveTo(0, 0);
        // Include a tiny overlap (-0.002 to angle + 0.002) to mask any anti-aliased seam gaps
        ctx.arc(0, 0, R + 20, -0.002, angle + 0.002);
        ctx.closePath();
        ctx.clip();
        
        // For alternating slices, mirror the rendering to perfectly stitch the kaleidoscope
        if (i % 2 === 1) {
            ctx.rotate(angle);
            ctx.scale(1, -1);
        }
        
        // Apply user-defined transformations
        ctx.rotate(rotation);
        ctx.scale(scale, scale);
        // Center focal point of the original image to local origin
        ctx.translate(-imgCx, -imgCy);
        
        // Draw the wedge contents
        ctx.drawImage(originalImg, 0, 0);
        
        ctx.restore();
    }
    
    return canvas;
}