Image Losky Klasky Csupo Effect Generator

function processImage(originalImg, effectMode = "I KILLED X", mirrorSide = "left-to-right", intensity = 1, applyGlitch = "yes") {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    
    // Set canvas size to match the original image
    const w = originalImg.width;
    const h = originalImg.height;
    canvas.width = w;
    canvas.height = h;

    let filterStr = "";
    const mode = effectMode.toUpperCase();
    const inten = parseFloat(intensity) || 1;

    // Generate standard Klasky Csupo / YouTube Poop (YTP) color distortions
    if (mode.includes("I KILLED X") || mode.includes("SCARY")) {
        // Demonic Red & Black High Contrast effect
        filterStr = `invert(100%) sepia(100%) hue-rotate(310deg) saturate(${300 * inten}%) contrast(${150 * inten}%)`;
    } else if (mode.includes("LOSKY")) {
        // Classic inverted Yellow/Blue/Pink weird shift
        filterStr = `invert(100%) hue-rotate(90deg) saturate(${400 * inten}%) contrast(${120 * inten}%)`;
    } else {
        // General exaggerated distortion fallback
        filterStr = `invert(100%) hue-rotate(${180 * inten}deg) saturate(${200 * inten}%) contrast(${150 * inten}%)`;
    }

    // 1. Draw base image with the crazy color filter
    ctx.filter = filterStr;
    ctx.drawImage(originalImg, 0, 0, w, h);

    // 2. Apply mirroring effect (very common in these logo mutations)
    if (mirrorSide !== "none" && mirrorSide !== "") {
        ctx.save();
        ctx.filter = filterStr; // Ensure mirrored portion has the same color effect
        
        // Use Math.ceil to prevent a 1px transparent seam gap in the middle for odd dimensions
        const halfW = Math.ceil(w / 2);
        const halfH = Math.ceil(h / 2);
        
        if (mirrorSide === "left-to-right") {
            ctx.translate(w, 0);
            ctx.scale(-1, 1);
            // Source left half, draw over right half mirrored
            ctx.drawImage(originalImg, 0, 0, halfW, h, 0, 0, halfW, h);
        } else if (mirrorSide === "right-to-left") {
            ctx.translate(w, 0);
            ctx.scale(-1, 1);
            // Source right half, draw over left half mirrored
            ctx.drawImage(originalImg, halfW, 0, halfW, h, halfW, 0, halfW, h);
        } else if (mirrorSide === "top-to-bottom") {
            ctx.translate(0, h);
            ctx.scale(1, -1);
            // Source top half, draw over bottom half mirrored
            ctx.drawImage(originalImg, 0, 0, w, halfH, 0, 0, w, halfH);
        } else if (mirrorSide === "bottom-to-top") {
            ctx.translate(0, h);
            ctx.scale(1, -1);
            // Source bottom half, draw over top half mirrored
            ctx.drawImage(originalImg, 0, halfH, w, halfH, 0, halfH, w, halfH);
        }
        ctx.restore();
    }

    // Reset filter for subsequent overlays
    ctx.filter = "none";

    // 3. Apply VHS / Scanline and Vignette Overlays for extra "creepypasta" vibe
    if (inten > 0) {
        ctx.globalCompositeOperation = 'source-over';
        
        // Scanlines
        ctx.fillStyle = `rgba(0, 0, 0, ${0.15 * Math.min(inten, 3)})`;
        const scanlineSize = Math.max(2, Math.floor(h / 300));
        for (let y = 0; y < h; y += scanlineSize * 2) {
            ctx.fillRect(0, y, w, scanlineSize); 
        }
        
        // Dark Vignette around edges
        const gradient = ctx.createRadialGradient(w / 2, h / 2, w / 4, w / 2, h / 2, w);
        gradient.addColorStop(0, 'rgba(0,0,0,0)');
        gradient.addColorStop(1, `rgba(0,0,0,${Math.min(0.8, 0.4 * inten)})`);
        ctx.fillStyle = gradient;
        ctx.fillRect(0, 0, w, h);
    }

    // 4. Apply Horizontal Glitch/Displacement Effect
    if (applyGlitch.toLowerCase() === "yes" && inten > 0) {
        // Buffer current canvas state
        const glitchCanvas = document.createElement('canvas');
        glitchCanvas.width = w;
        glitchCanvas.height = h;
        const gCtx = glitchCanvas.getContext('2d');
        gCtx.drawImage(canvas, 0, 0);
        
        // Clear main canvas for redraw
        ctx.clearRect(0, 0, w, h);
        
        // Calculate block size for glitch
        const sliceHeight = Math.max(2, Math.floor(h / 150));
        
        // Re-combine slices from buffer with random shifts
        for (let y = 0; y < h; y += sliceHeight) {
            let shift = 0;
            // Introduce a probability for a glitch tear based on intensity
            if (Math.random() > Math.max(0.2, 1 - 0.15 * inten)) {
                shift = (Math.random() - 0.5) * (30 * inten);
            }
            
            ctx.drawImage(glitchCanvas, 0, y, w, sliceHeight, shift, y, w, sliceHeight);
        }
    }

    return canvas;
}