Parrot Effect Image Generator

function processImage(originalImg, cycleDurationMs = "500", motionIntensity = "5", enableMotion = "true") {
    const canvas = document.createElement('canvas');
    
    // Ensure we capture the correct dimensions
    const width = originalImg.width || originalImg.naturalWidth;
    const height = originalImg.height || originalImg.naturalHeight;
    canvas.width = width;
    canvas.height = height;
    
    // Apply styling so it behaves responsively in any container
    canvas.style.maxWidth = '100%';
    canvas.style.height = 'auto';
    canvas.style.display = 'block';
    canvas.style.margin = '0 auto';
    
    // Draw the initial image on the canvas
    const ctx = canvas.getContext('2d');
    ctx.drawImage(originalImg, 0, 0, width, height);

    // Parse configuration parameters safely
    const ms = parseInt(cycleDurationMs, 10);
    const duration = isNaN(ms) || ms <= 0 ? 500 : ms;
    
    const intensityFloat = parseFloat(motionIntensity);
    const intensity = isNaN(intensityFloat) ? 5 : intensityFloat;
    
    const isMotion = String(enableMotion).toLowerCase() === 'true';

    // Generate animation keyframes (The "Party Parrot" effect)
    const keyframes = [];
    const steps = 10;
    
    for (let i = 0; i <= steps; i++) {
        const pct = i / steps;
        
        // Full spectrum color hue rotation
        const hueDeg = Math.floor(pct * 360);
        
        let transformStr = "none";
        
        if (isMotion) {
            // Simulates the classic party parrot bounce (figure-eight bob and slight squash/stretch)
            const x = Math.sin(pct * Math.PI * 2) * intensity;
            const y = Math.cos(pct * Math.PI * 4) * -intensity; 
            const scale = 1 + (Math.sin(pct * Math.PI * 4) * (intensity / 100));
            
            transformStr = `translate(${x}px, ${y}px) scale(${scale})`;
        }
        
        keyframes.push({
            filter: `hue-rotate(${hueDeg}deg) saturate(1.5)`,
            transform: transformStr
        });
    }

    // Apply the Web Animations API natively loop at smoothly 60fps
    if (canvas.animate) {
        canvas.animate(keyframes, {
            duration: duration,
            iterations: Infinity,
            easing: 'linear' // Keeps the spin / movement continuous and fluid
        });
    } else {
        // Simple fallback for older browsers that don't support the native Web Animations API
        canvas.style.filter = 'saturate(1.5) hue-rotate(180deg)';
        if (isMotion) {
            canvas.style.transform = 'scale(1.05)';
        }
    }

    return canvas;
}