Image Character Action Animator

/**
 * Animates a character image to perform a simple action.
 * @param {Image} originalImg - The javascript Image object of the character.
 * @param {string} animationType - The type of action to perform. Can be "jump", "pulse", or "shake".
 * @param {number} animationSpeed - The duration of one animation cycle in milliseconds.
 * @param {number} animationHeight - The intensity of the animation (e.g., height of the jump or width of the shake) in pixels.
 * @param {number} effectAmount - The amount of secondary effect (e.g., squash and stretch on jump, or pulse size). A value like 0.1 is 10%.
 * @returns {HTMLCanvasElement} A canvas element with the animation running.
 */
async function processImage(originalImg, animationType = "jump", animationSpeed = 1000, animationHeight = 50, effectAmount = 0.1) {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // Ensure parameters are numbers
    const speed = Number(animationSpeed);
    const height = Number(animationHeight);
    const amount = Number(effectAmount);

    const PADDING = 20; // Extra space around the image

    // Set canvas size based on animation to prevent clipping
    if (animationType === 'jump') {
        canvas.width = originalImg.width + PADDING;
        canvas.height = originalImg.height + height + PADDING;
    } else if (animationType === 'shake') {
        canvas.width = originalImg.width + height + PADDING;
        canvas.height = originalImg.height + height + PADDING;
    } else { // pulse
        canvas.width = originalImg.width * (1 + amount) + PADDING;
        canvas.height = originalImg.height * (1 + amount) + PADDING;
    }

    let startTime = 0;

    function animate(timestamp) {
        if (!startTime) {
            startTime = timestamp;
        }

        const elapsed = timestamp - startTime;
        const progress = (elapsed % speed) / speed; // A value from 0 to 1

        // Clear the canvas for the next frame
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        ctx.save();

        const centerX = canvas.width / 2;
        const centerY = canvas.height / 2;

        switch (animationType) {
            case "jump":
                {
                    // The image's baseline when on the "ground"
                    const groundY = canvas.height - PADDING / 2;

                    // Y position follows a sine wave for a smooth up-and-down arc
                    const jumpOffset = Math.sin(progress * Math.PI) * height;

                    // Squash and stretch effect is max at the bottom and zero at the peak
                    const squashFactor = (1 - Math.sin(progress * Math.PI)) * amount;
                    const scaleY = 1 - squashFactor;
                    const scaleX = 1 + squashFactor;

                    // Final position to draw the center of the image
                    const drawX = centerX;
                    const drawY = groundY - (originalImg.height * scaleY) / 2 - jumpOffset;

                    ctx.translate(drawX, drawY);
                    ctx.scale(scaleX, scaleY);
                    ctx.drawImage(originalImg, -originalImg.width / 2, -originalImg.height / 2, originalImg.width, originalImg.height);
                    break;
                }
            case "shake":
                {
                    // Shake horizontally and vertically using sine waves with different frequencies
                    const shakeX = Math.sin(progress * Math.PI * 8) * (height / 2);
                    const shakeY = Math.cos(progress * Math.PI * 10) * (height / 2);

                    // Add a slight rotation for more effect
                    const rotation = Math.sin(progress * Math.PI * 6) * (amount * 0.5); // Radians

                    ctx.translate(centerX + shakeX, centerY + shakeY);
                    ctx.rotate(rotation);
                    ctx.drawImage(originalImg, -originalImg.width / 2, -originalImg.height / 2, originalImg.width, originalImg.height);
                    break;
                }
            case "pulse":
            default:
                {
                    // Scale factor pulsates using a full sine wave cycle
                    const scale = 1 + Math.sin(progress * Math.PI * 2) * amount;

                    ctx.translate(centerX, centerY);
                    ctx.scale(scale, scale);
                    ctx.drawImage(originalImg, -originalImg.width / 2, -originalImg.height / 2, originalImg.width, originalImg.height);
                    break;
                }
        }

        ctx.restore();
        
        // Use the canvas's own DOM state to decide whether to continue.
        // This stops the animation loop if the canvas is removed from the page.
        if (canvas.isConnected) {
            requestAnimationFrame(animate);
        }
    }

    // Start the animation loop
    requestAnimationFrame(animate);

    return canvas;
}