Image Side Effect Visualizer

function processImage(originalImg, distortionLevel = "15", doubleVisionOffset = "20") {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    
    canvas.width = originalImg.width;
    canvas.height = originalImg.height;

    // Parse parameters
    const intensity = Number(distortionLevel) || 15;
    const offsetDV = Number(doubleVisionOffset) || 20;

    // 1. Draw the base image
    ctx.globalAlpha = 1.0;
    ctx.drawImage(originalImg, 0, 0);
    
    // 2. Add "Double Vision" (diplopia) effect by duplicating the image with an offset
    if (offsetDV > 0) {
        ctx.globalAlpha = 0.5;
        ctx.drawImage(originalImg, offsetDV, offsetDV);
    }

    // Capture the current canvas state for pixel manipulation
    const imgData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    const data = imgData.data;
    
    // Prepare the output data
    const outData = ctx.createImageData(canvas.width, canvas.height);
    const out = outData.data;
    
    // Wave parameters for a dizzy, undulating distortion
    const waveAmp = intensity * 0.8;
    const waveFreq = Math.max(1, canvas.height / 15); 

    // 3. Process pixel-by-pixel for "Chromatic Aberration" (RGB split) and "Wavy Dizziness"
    for (let y = 0; y < canvas.height; y++) {
        // Calculate the wavy horizontal offset for the current row
        const waveX = Math.round(Math.sin(y / waveFreq) * waveAmp);
        
        for (let x = 0; x < canvas.width; x++) {
            const i = (y * canvas.width + x) * 4;
            
            // X coordinate with wave applied
            const baseX = x + waveX;
            
            // Calculate indices for each color channel with a separated RGB shift
            const rx = Math.max(0, Math.min(canvas.width - 1, baseX - intensity));
            const ri = (y * canvas.width + Math.floor(rx)) * 4;
            
            const gx = Math.max(0, Math.min(canvas.width - 1, baseX));
            const gi = (y * canvas.width + Math.floor(gx)) * 4;
            
            const bx = Math.max(0, Math.min(canvas.width - 1, baseX + intensity));
            const bi = (y * canvas.width + Math.floor(bx)) * 4;
            
            // Apply separated colors simulating hallucination or lens distortion
            out[i] = data[ri];         // Red channel offset left
            out[i + 1] = data[gi + 1]; // Green channel center
            out[i + 2] = data[bi + 2]; // Blue channel offset right
            out[i + 3] = data[gi + 3]; // Alpha from center
        }
    }
    
    // Draw the processed pixel data back to the canvas
    ctx.putImageData(outData, 0, 0);
    
    return canvas;
}