Image Animation Creator Tool

function processImage(originalImg, animationStyle = 'dance', speed = 1) {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    
    // Set canvas dimensions extending slightly to accommodate movement
    canvas.width = originalImg.width;
    canvas.height = originalImg.height;
    
    // Parse speed to ensure it's a number
    let animSpeed = parseFloat(speed);
    if (isNaN(animSpeed) || animSpeed <= 0) {
        animSpeed = 1;
    }
    
    const startTime = Date.now();
    
    function animate() {
        // Calculate elapsed time adjusted by speed factor
        const time = (Date.now() - startTime) * animSpeed;
        
        // Clear previous frame
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        ctx.save();
        
        // Move to the center to pivot transformations properly
        ctx.translate(canvas.width / 2, canvas.height / 2);
        
        switch (animationStyle.toLowerCase()) {
            case 'bounce':
                // Scale squish and stretch, translate Y up and down
                const bounceY = -Math.abs(Math.sin(time / 200)) * (canvas.height * 0.15);
                const scaleY = 1 - Math.abs(Math.cos(time / 200)) * 0.15;
                ctx.translate(0, bounceY + (canvas.height * 0.05));
                ctx.scale(1, scaleY);
                break;
                
            case 'spin':
                // Continuous rotation
                ctx.rotate(time / 500);
                break;
                
            case 'shake':
                // Rapid shivering X and Y movements
                const dx = Math.sin(time / 30) * (canvas.width * 0.02);
                const dy = Math.cos(time / 40) * (canvas.height * 0.02);
                ctx.translate(dx, dy);
                break;
                
            case 'pulse':
                // Regular scale up and down heartbeat effect
                const scale = 1 + Math.sin(time / 200) * 0.1;
                ctx.scale(scale, scale);
                break;
                
            case 'dance':
            default:
                // Rotation back and forth combined with a little hopping
                const angle = Math.sin(time / 150) * 0.2;
                const bobY = Math.abs(Math.sin(time / 150)) * -(canvas.height * 0.1);
                
                // Scale slightly down first so it doesn't clip off the edges as much while dancing
                ctx.scale(0.85, 0.85); 
                ctx.translate(0, bobY);
                ctx.rotate(angle);
                break;
        }
        
        // Draw image centered in the translated/rotated context
        ctx.drawImage(originalImg, -originalImg.width / 2, -originalImg.height / 2);
        ctx.restore();
        
        // Request next frame
        requestAnimationFrame(animate);
    }
    
    // Start animation loop
    animate();
    
    return canvas;
}