Inside Out Image Effect Generator

function processImage(originalImg, mode = "radial", intensity = 100) {
    const canvas = document.createElement("canvas");
    const W = originalImg.width;
    const H = originalImg.height;
    
    // Validate dimensions
    if (W === 0 || H === 0) return canvas;

    canvas.width = W;
    canvas.height = H;

    const ctx = canvas.getContext("2d");
    ctx.drawImage(originalImg, 0, 0, W, H);
    
    const imgData = ctx.getImageData(0, 0, W, H);
    const src = imgData.data;
    
    const outData = ctx.createImageData(W, H);
    const dst = outData.data;

    const cx = W / 2;
    const cy = H / 2;
    const inv = intensity / 100;
    
    // Pre-calculations for different modes
    const shiftX = (W / 2) * inv;
    const shiftY = (H / 2) * inv;
    
    const R_base = Math.min(cx, cy);
    const factor = inv <= 0 ? 0.001 : inv;
    const R_scaled = R_base * factor; 

    // Compute pixel mappings
    for (let y = 0; y < H; y++) {
        for (let x = 0; x < W; x++) {
            let sx = x;
            let sy = y;

            if (mode === "cartesian") {
                // Flips each axis quadrant-by-quadrant
                let target_sx = (x < cx) ? (cx - x) : (W + cx - x - 1);
                let target_sy = (y < cy) ? (cy - y) : (H + cy - y - 1);
                sx = x * (1 - inv) + target_sx * inv;
                sy = y * (1 - inv) + target_sy * inv;
            } 
            else if (mode === "shift") {
                // Wraps the image continuously (center becomes edges)
                sx = (x + shiftX) % W;
                if (sx < 0) sx += W;
                sy = (y + shiftY) % H;
                if (sy < 0) sy += H;
            } 
            else if (mode === "geometric") {
                // True mathematical circular inversion
                let dx = x - cx;
                let dy = y - cy;
                let r = Math.sqrt(dx * dx + dy * dy);
                let angle = Math.atan2(dy, dx);
                
                let r_src_geom = (r === 0) ? 999999 : (R_scaled * R_scaled) / r;
                let r_final = r * (1 - inv) + r_src_geom * inv;
                
                sx = cx + r_final * Math.cos(angle);
                sy = cy + r_final * Math.sin(angle);
            } 
            else {
                // "radial" (default): Linear inward-outward bounds-fitted flip
                let dx = x - cx;
                let dy = y - cy;
                
                // Avoid absolute zero to compute a defined angle
                if (dx === 0 && dy === 0) {
                    dx = 0.001; 
                }
                
                let r = Math.sqrt(dx * dx + dy * dy);
                let angle = Math.atan2(dy, dx);
                let cos = Math.cos(angle);
                let sin = Math.sin(angle);
                
                // Distance from center to the bounding box edge at this angle
                let t_x = (Math.abs(cos) > 0.0001) ? Math.abs(cx / cos) : Infinity;
                let t_y = (Math.abs(sin) > 0.0001) ? Math.abs(cy / sin) : Infinity;
                let R_edge = Math.min(t_x, t_y);
                
                let r_inv = R_edge - r; 
                let r_final = r * (1 - inv) + r_inv * inv;
                
                sx = cx + r_final * cos;
                sy = cy + r_final * sin;
            }

            // Bilinear interpolation
            let ix = Math.floor(sx);
            let iy = Math.floor(sy);
            let fx = sx - ix;
            let fy = sy - iy;

            let x0 = ix;
            let x1 = ix + 1;
            let y0 = iy;
            let y1 = iy + 1;

            // Proper wrapping for seamless modes, clamping for fixed boundaries
            if (mode === "shift") {
                x0 = (x0 % W + W) % W;
                x1 = (x1 % W + W) % W;
                y0 = (y0 % H + H) % H;
                y1 = (y1 % H + H) % H;
            } else {
                x0 = x0 < 0 ? 0 : (x0 >= W ? W - 1 : x0);
                x1 = x1 < 0 ? 0 : (x1 >= W ? W - 1 : x1);
                y0 = y0 < 0 ? 0 : (y0 >= H ? H - 1 : y0);
                y1 = y1 < 0 ? 0 : (y1 >= H ? H - 1 : y1);
            }

            let idx00 = (y0 * W + x0) * 4;
            let idx10 = (y0 * W + x1) * 4;
            let idx01 = (y1 * W + x0) * 4;
            let idx11 = (y1 * W + x1) * 4;

            let dstIdx = (y * W + x) * 4;

            for (let c = 0; c < 4; c++) {
                let v00 = src[idx00 + c];
                let v10 = src[idx10 + c];
                let v01 = src[idx01 + c];
                let v11 = src[idx11 + c];

                let v0 = v00 + fx * (v10 - v00);
                let v1 = v01 + fx * (v11 - v01);
                let v = v0 + fy * (v1 - v0);

                dst[dstIdx + c] = v;
            }
        }
    }

    ctx.putImageData(outData, 0, 0);
    return canvas;
}