Image Video Editor For Tennis Rounds Effects

/**
 * Applies a series of "YTP Tennis" style visual effects to an image.
 * This includes color manipulation, pixelation, and horizontal glitching.
 *
 * @param {Image} originalImg The original JavaScript Image object.
 * @param {number} hueShift The degree to shift the hue (0-360). Default is 90.
 * @param {number} saturation The percentage of color saturation (e.g., 100 is normal, 200 is double). Default is 150.
 * @param {number} contrast The percentage of contrast (e.g., 100 is normal). Default is 150.
 * @param {number} invert The percentage of color inversion (0-100). Default is 50.
 * @param {number} pixelate The size of the blocks for the pixelation effect (1 means no effect). Default is 8.
 * @param {number} glitchAmount The intensity of the horizontal slice glitch effect (0-100). Default is 20.
 * @param {number} seed A number used to seed the random number generator for reproducible glitches. Default is 12345.
 * @returns {HTMLCanvasElement} A new canvas element with the applied effects.
 */
function processImage(originalImg, hueShift = 90, saturation = 150, contrast = 150, invert = 50, pixelate = 8, glitchAmount = 20, seed = 12345) {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    const w = originalImg.naturalWidth || originalImg.width;
    const h = originalImg.naturalHeight || originalImg.height;

    if (w === 0 || h === 0) {
        // Return an empty canvas for invalid image dimensions
        canvas.width = 0;
        canvas.height = 0;
        return canvas;
    }

    canvas.width = w;
    canvas.height = h;

    // --- PRNG for reproducible "randomness" based on seed ---
    // A simple Linear Congruential Generator
    let currentSeed = seed;
    const random = () => {
        currentSeed = (currentSeed * 9301 + 49297) % 233280;
        return currentSeed / 233280;
    };

    // --- 1. Apply Base CSS-like Filters ---
    // We draw the image once with all color filters applied.
    ctx.filter = `hue-rotate(${hueShift}deg) saturate(${saturation}%) contrast(${contrast}%) invert(${invert}%)`;
    ctx.drawImage(originalImg, 0, 0, w, h);
    // Reset filter for subsequent operations
    ctx.filter = 'none';

    // --- 2. Apply Pixelation Effect ---
    // If pixelate is greater than 1, downscale then upscale the image with smoothing disabled.
    if (pixelate > 1) {
        const pixelSize = Math.max(1, Math.floor(pixelate));
        const smallW = Math.ceil(w / pixelSize);
        const smallH = Math.ceil(h / pixelSize);

        // Draw the already-filtered image to a temporary small canvas
        const tempCanvas = document.createElement('canvas');
        tempCanvas.width = smallW;
        tempCanvas.height = smallH;
        const tempCtx = tempCanvas.getContext('2d');
        tempCtx.drawImage(canvas, 0, 0, w, h, 0, 0, smallW, smallH);

        // Clear the main canvas and draw the small, pixelated image back up to full size
        ctx.clearRect(0, 0, w, h);
        ctx.imageSmoothingEnabled = false; // Crucial for a sharp, blocky effect
        ctx.drawImage(tempCanvas, 0, 0, smallW, smallH, 0, 0, w, h);
        ctx.imageSmoothingEnabled = true; // Restore for any future drawings
    }

    // --- 3. Apply Horizontal Glitch Effect ---
    // This effect displaces horizontal slices of the image.
    if (glitchAmount > 0) {
        // Create a temporary canvas with a copy of the current image data to read from.
        // This prevents a read-after-write conflict when drawing from the canvas onto itself.
        const tempCanvas = document.createElement('canvas');
        tempCanvas.width = w;
        tempCanvas.height = h;
        const tempCtx = tempCanvas.getContext('2d');
        tempCtx.drawImage(canvas, 0, 0);

        const glitchLineCount = Math.floor((glitchAmount / 100) * h * 0.4);

        for (let i = 0; i < glitchLineCount; i++) {
            const y = Math.floor(random() * h);
            const sliceHeight = Math.max(1, Math.floor(random() * (h / 25)));

            if (y + sliceHeight > h) continue;

            // Calculate a horizontal offset for the slice
            const offset = Math.floor((random() - 0.5) * (w * 0.4));
            if (offset === 0) continue;

            // Draw the shifted main part of the slice from the temp canvas to the main one
            ctx.drawImage(
                tempCanvas, // source canvas
                0, y, // source x, y
                w, sliceHeight, // source width, height
                offset, y, // destination x, y
                w, sliceHeight // destination width, height
            );

            // Handle wrapping the pixels that were pushed off-screen
            if (offset > 0) {
                // The part pushed off the right edge needs to be drawn on the left.
                ctx.drawImage(
                    tempCanvas,
                    w - offset, y, // source: the rightmost part of the original slice
                    offset, sliceHeight,
                    0, y, // destination: the leftmost edge of the canvas
                    offset, sliceHeight
                );
            } else { // offset < 0
                // The part pushed off the left edge needs to be drawn on the right.
                const absOffset = Math.abs(offset);
                ctx.drawImage(
                    tempCanvas,
                    0, y, // source: the leftmost part of the original slice
                    absOffset, sliceHeight,
                    w - absOffset, y, // destination: the rightmost edge of the canvas
                    absOffset, sliceHeight
                );
            }
        }
    }

    return canvas;
}