Video Mirror And Kaleidoscope Effect Tool

function processImage(originalImg, segmentsParam = "8", zoomParam = "1.5", animatedParam = "1", modeParam = "kaleidoscope") {
    // 1. Process parameters & defaults
    let segments = parseInt(segmentsParam, 10);
    if (isNaN(segments) || segments < 2) segments = 8;
    // Kaleidoscopes require an even number of segments to mirror correctly
    if (segments % 2 !== 0) segments += 1; 

    // If "mirror" mode is explicitly selected, force 2 segments
    const mode = String(modeParam).toLowerCase().trim();
    if (mode === "mirror") {
        segments = 2;
    }

    let zoom = parseFloat(zoomParam);
    if (isNaN(zoom) || zoom <= 0) zoom = 1.5;

    const animated = (String(animatedParam) === "1" || String(animatedParam).toLowerCase() === "true");

    // 2. Setup the Canvas
    const canvas = document.createElement("canvas");
    // Determine an ideal square canvas size
    const size = Math.min(1080, Math.max(originalImg.width, originalImg.height, 600));
    canvas.width = size;
    canvas.height = size;
    
    // Add CSS properties so it scales responsively inside its container
    canvas.style.maxWidth = "100%";
    canvas.style.height = "auto";
    canvas.style.display = "block";
    canvas.style.margin = "0 auto";

    const ctx = canvas.getContext("2d");

    // 3. Math Constants
    const cx = size / 2;
    const cy = size / 2;
    // Radius must cover the corners of the square canvas
    const radius = Math.sqrt(cx * cx + cy * cy) + 10; 
    const angle = (Math.PI * 2) / segments;

    // Ensure image is originally scaled large enough that there are no empty gaps
    const baseScale = (radius * 2) / Math.min(originalImg.width, originalImg.height);
    const imgW = originalImg.width * baseScale * zoom;
    const imgH = originalImg.height * baseScale * zoom;

    const startTime = Date.now();

    // 4. Drawing Logic
    function draw() {
        const time = animated ? Date.now() - startTime : 0;
        
        // Clear frame
        ctx.clearRect(0, 0, size, size);
        ctx.fillStyle = "#000000";
        ctx.fillRect(0, 0, size, size);

        // Slow continuous rotations & panning to create the "Video" / fluid effect
        const kaleidoRot = animated ? time * 0.0001 : 0;
        const imgRot = animated ? time * 0.00015 : 0;
        
        // Lissajous curves to make the image slowly drift inside the wedges
        const animX = Math.sin(time * 0.0003) * (imgW * 0.15);
        const animY = Math.sin((time * 0.0002) + Math.PI / 2) * (imgH * 0.15); // Use sin offset so it starts at 0

        ctx.save();
        ctx.translate(cx, cy);
        
        // Global orientation: Start pointing left/right for mirror, or angled for kaleidoscope
        ctx.rotate(-Math.PI / 2 + kaleidoRot);

        for (let i = 0; i < segments; i++) {
            ctx.save();

            // Alternate reflections on odd segments
            if (i % 2 === 0) {
                ctx.rotate(i * angle);
            } else {
                ctx.rotate((i + 1) * angle);
                ctx.scale(1, -1);
            }

            // Define the wedge boundary for clipping
            ctx.beginPath();
            ctx.moveTo(0, 0);
            
            // Note: We use a slight overlap (-0.01 to angle + 0.01) to completely eliminate 
            // hairline seams caused by canvas anti-aliasing edges
            ctx.lineTo(radius * Math.cos(-0.01), radius * Math.sin(-0.01));
            ctx.lineTo(radius * Math.cos(angle + 0.01), radius * Math.sin(angle + 0.01));
            ctx.closePath();
            ctx.clip(); // Mask rendering to this specific wedge

            // Apply drifting and rotation to the original image inside the bounds
            ctx.rotate(imgRot);
            ctx.translate(-imgW / 2 + animX, -imgH / 2 + animY);

            // Draw image slice
            ctx.drawImage(originalImg, 0, 0, imgW, imgH);

            ctx.restore();
        }

        ctx.restore();

        // 5. Animation loop
        if (animated) {
            // Memory leak safety check: stop animating if element was removed from the DOM
            // We give it a 3s startup grace period for the parent script to attach it.
            if (Date.now() - startTime > 3000 && !canvas.isConnected) {
                return;
            }
            requestAnimationFrame(draw);
        }
    }

    // Trigger initial render / loop
    draw();

    return canvas;
}