Turned Inside Out Image Effect Generator

function processImage(originalImg, method = "circle-inversion", wrapEdges = "true", radiusMultiplier = 1.0) {
    const canvas = document.createElement('canvas');
    const width = originalImg.width;
    const height = originalImg.height;
    
    // Handle edge case where image might not be loaded or has zero size
    if (width === 0 || height === 0) return canvas;

    canvas.width = width;
    canvas.height = height;
    
    const ctx = canvas.getContext('2d');
    ctx.drawImage(originalImg, 0, 0);
    
    const imgData = ctx.getImageData(0, 0, width, height);
    const outData = new ImageData(width, height);
    
    // In case the user meant visual color inversion (Negative) rather than spatial geometric inversion
    if (method === 'color-inversion') {
        const s8 = imgData.data;
        const d8 = outData.data;
        for (let i = 0; i < s8.length; i += 4) {
            d8[i] = 255 - s8[i];
            d8[i+1] = 255 - s8[i+1];
            d8[i+2] = 255 - s8[i+2];
            d8[i+3] = s8[i+3]; // Keep alpha intact
        }
        ctx.putImageData(outData, 0, 0);
        return canvas;
    }

    // Spatial Math for "Inside Out" mapping
    const srcData = new Uint32Array(imgData.data.buffer);
    const destData = new Uint32Array(outData.data.buffer);
    
    const cx = width / 2;
    const cy = height / 2;
    const R_max = Math.sqrt(cx * cx + cy * cy);
    
    // R is the inversion circle's radius
    const R = Math.min(cx, cy) * Number(radiusMultiplier || 1.0);
    const R2 = R * R;
    
    const isWrap = String(wrapEdges).toLowerCase() === "true";

    for (let y = 0; y < height; y++) {
        const dy = y - cy;
        for (let x = 0; x < width; x++) {
            const dx = x - cx;
            
            let src_x = 0;
            let src_y = 0;

            if (method === 'radial-reverse') {
                // Pushes center to max radius and edges to center
                const r_dest = Math.sqrt(dx * dx + dy * dy);
                if (r_dest === 0) {
                    src_x = cx + R_max;
                    src_y = cy;
                } else {
                    const ratio = (R_max - r_dest) / r_dest;
                    src_x = cx + dx * ratio;
                    src_y = cy + dy * ratio;
                }
            } else { 
                // Default: Mathematical 'circle-inversion' (Geometric inside-out transformation)
                const d2 = dx * dx + dy * dy;
                if (d2 === 0) {
                    src_x = cx + 9999999;
                    src_y = cy;
                } else {
                    const ratio = R2 / d2;
                    src_x = cx + dx * ratio;
                    src_y = cy + dy * ratio;
                }
            }

            let sx = Math.floor(src_x);
            let sy = Math.floor(src_y);
            let valid = false;

            if (isWrap) {
                // Correct negative modulo JS behavior
                sx = ((sx % width) + width) % width;
                sy = ((sy % height) + height) % height;
                valid = true;
            } else {
                // Non-wrapped goes fully transparent when outside of limits
                if (sx >= 0 && sx < width && sy >= 0 && sy < height) {
                    valid = true;
                }
            }

            const destIdx = y * width + x;
            if (valid) {
                const srcIdx = sy * width + sx;
                destData[destIdx] = srcData[srcIdx];
            } else {
                destData[destIdx] = 0; // Empty / Transparent Pixel
            }
        }
    }
    
    ctx.putImageData(outData, 0, 0);
    return canvas;
}