Super Magnet Image Effect Tool

function processImage(originalImg, pullStrength = 2.5, radiusRatio = 0.7, centerXRatio = 0.5, centerYRatio = 0.5) {
    pullStrength = Number(pullStrength);
    if (isNaN(pullStrength)) pullStrength = 2.5;

    radiusRatio = Number(radiusRatio);
    if (isNaN(radiusRatio)) radiusRatio = 0.7;

    centerXRatio = Number(centerXRatio);
    if (isNaN(centerXRatio)) centerXRatio = 0.5;

    centerYRatio = Number(centerYRatio);
    if (isNaN(centerYRatio)) centerYRatio = 0.5;

    // Constrain pullStrength to maximum 3.0 to prevent spatial folding back on itself
    if (pullStrength > 3.0) pullStrength = 3.0;

    const canvas = document.createElement('canvas');
    const w = originalImg.width;
    const h = originalImg.height;
    
    if (w === 0 || h === 0) return canvas;

    canvas.width = w;
    canvas.height = h;
    const ctx = canvas.getContext('2d');
    ctx.drawImage(originalImg, 0, 0);

    const imgData = ctx.getImageData(0, 0, w, h);
    const data = imgData.data;
    const outData = new Uint8ClampedArray(data.length);

    const cx = w * centerXRatio;
    const cy = h * centerYRatio;
    const radius = Math.min(w, h) * radiusRatio;
    const radiusSq = radius * radius;

    for (let y = 0; y < h; y++) {
        for (let x = 0; x < w; x++) {
            const dx = x - cx;
            const dy = y - cy;
            const distSq = dx * dx + dy * dy;

            let sx = x;
            let sy = y;

            // Apply super magnet pull (pinch/implode distortion)
            if (distSq < radiusSq && distSq > 0) {
                const dist = Math.sqrt(distSq);
                const percent = dist / radius;
                
                // M controls the scale factor along the continuous path (distance) 
                // Formula avoids C1 discontinuities (smooth interpolation at the boundary)
                const M = 1 + pullStrength * Math.pow(1 - percent, 2);
                
                sx = cx + dx * M;
                sy = cy + dy * M;
            }

            // High-quality bilinear interpolation for sub-pixel accuracy
            if (sx >= 0 && sx <= w - 1 && sy >= 0 && sy <= h - 1) {
                const x1 = Math.floor(sx);
                const y1 = Math.floor(sy);
                const x2 = Math.min(x1 + 1, w - 1);
                const y2 = Math.min(y1 + 1, h - 1);
                
                const fx = sx - x1;
                const fy = sy - y1;
                
                const w1 = (1 - fx) * (1 - fy);
                const w2 = fx * (1 - fy);
                const w3 = (1 - fx) * fy;
                const w4 = fx * fy;
                
                const p1 = (y1 * w + x1) * 4;
                const p2 = (y1 * w + x2) * 4;
                const p3 = (y2 * w + x1) * 4;
                const p4 = (y2 * w + x2) * 4;
                
                const outIdx = (y * w + x) * 4;
                
                outData[outIdx]     = data[p1] * w1 + data[p2] * w2 + data[p3] * w3 + data[p4] * w4;
                outData[outIdx + 1] = data[p1 + 1] * w1 + data[p2 + 1] * w2 + data[p3 + 1] * w3 + data[p4 + 1] * w4;
                outData[outIdx + 2] = data[p1 + 2] * w1 + data[p2 + 2] * w2 + data[p3 + 2] * w3 + data[p4 + 2] * w4;
                outData[outIdx + 3] = data[p1 + 3] * w1 + data[p2 + 3] * w2 + data[p3 + 3] * w3 + data[p4 + 3] * w4;
            } else {
                // Nearest neighbor for mapping pixels that fall outside original bounds
                const nx = Math.min(Math.max(Math.round(sx), 0), w - 1);
                const ny = Math.min(Math.max(Math.round(sy), 0), h - 1);
                const sIdx = (ny * w + nx) * 4;
                const outIdx = (y * w + x) * 4;
                
                outData[outIdx]     = data[sIdx];
                outData[outIdx + 1] = data[sIdx + 1];
                outData[outIdx + 2] = data[sIdx + 2];
                outData[outIdx + 3] = data[sIdx + 3];
            }
        }
    }

    ctx.putImageData(new ImageData(outData, w, h), 0, 0);
    return canvas;
}