Image And Audio Effects For YTP Tennis Rounds Tool

async function processImage(originalImg, hueShiftRate = 2, saturation = 1.5, contrast = 1.2, waveDistortionAmount = 10, waveDistortionSpeed = 0.05, pixelationLevel = 1, strobeSpeed = 0, invertColors = 'false') {
    
    // Create the main canvas that will be returned
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    canvas.width = originalImg.naturalWidth;
    canvas.height = originalImg.naturalHeight;

    // Create an offscreen canvas for intermediate steps like pixelation
    // to prevent it from being drawn to the final canvas prematurely.
    const offscreenCanvas = document.createElement('canvas');
    const offscreenCtx = offscreenCanvas.getContext('2d');
    offscreenCanvas.width = canvas.width;
    offscreenCanvas.height = canvas.height;

    let frame = 0;
    const shouldInvertBase = (String(invertColors) === 'true');

    function animate() {
        frame++;

        // --- Step 1: Prepare the source image ---
        // The source for this frame will either be the original image or a pixelated version.
        let sourceImage = originalImg;
        if (pixelationLevel > 1) {
            // Ensure pixelation level is an integer and at least 1
            const pLevel = Math.max(1, Math.floor(pixelationLevel));
            
            // To create a pixelated effect:
            // 1. Turn off image smoothing.
            // 2. Draw the original image onto the offscreen canvas at a very small size.
            // 3. Draw that small image back onto the same canvas but scaled up to the original size.
            offscreenCtx.imageSmoothingEnabled = false;
            offscreenCtx.clearRect(0, 0, canvas.width, canvas.height);

            const smallWidth = canvas.width / pLevel;
            const smallHeight = canvas.height / pLevel;

            offscreenCtx.drawImage(originalImg, 0, 0, smallWidth, smallHeight);
            offscreenCtx.drawImage(offscreenCanvas, 0, 0, smallWidth, smallHeight, 0, 0, canvas.width, canvas.height);
            
            sourceImage = offscreenCanvas; // Use the pixelated canvas as the source now
        }

        // --- Step 2: Build the CSS filter string for color effects ---
        const hue = (frame * hueShiftRate) % 360;

        let finalInvertValue = shouldInvertBase ? 1 : 0;
        if (strobeSpeed > 0) {
            // Assuming 60fps, calculate if this frame should be strobed (inverted)
            // A strobeSpeed of 1 means one full flash cycle (on/off) per second.
            const framesPerFlash = 60 / strobeSpeed;
            if (Math.floor(frame / (framesPerFlash / 2)) % 2 === 0) {
                 finalInvertValue = 1 - finalInvertValue; // XOR the inversion
            }
        }
        
        const filterString = `hue-rotate(${hue}deg) saturate(${saturation}) contrast(${contrast}) invert(${finalInvertValue})`;
        
        // --- Step 3: Clear the main canvas and apply the filters ---
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        ctx.filter = filterString;
        
        // --- Step 4: Draw the final image, applying wave distortion if needed ---
        if (waveDistortionAmount > 0) {
            // To create a wave effect, we draw the image one vertical slice at a time,
            // offsetting each slice horizontally based on a sine wave.
            for (let y = 0; y < canvas.height; y++) {
                // Calculate the horizontal offset for this specific row (y-coordinate)
                const xOffset = Math.sin((y / 20) + (frame * waveDistortionSpeed)) * waveDistortionAmount;
                
                // Draw a 1-pixel-high slice of the source image to the destination canvas
                ctx.drawImage(
                    sourceImage,
                    0, y, sourceImage.width, 1,   // Source: (x, y, width, height) of the slice
                    xOffset, y, canvas.width, 1   // Destination: (x, y, width, height) of the slice
                );
            }
        } else {
            // If no distortion, just draw the source image directly.
            // The filter will be applied automatically by the context.
            ctx.drawImage(sourceImage, 0, 0);
        }

        // --- Step 5: Loop the animation ---
        requestAnimationFrame(animate);
    }

    // Start the animation loop
    animate();

    // Return the canvas element, which will continuously update.
    return canvas;
}