Image Super Magnet Tool

function processImage(originalImg, strength = 0.6, radius = 0, centerX = 0.5, centerY = 0.5) {
    // Process input parameters
    const pullStrength = Math.min(Math.max(-0.99, Number(strength)), 0.99); // Pinch/Magnet effect: >0 pulls in, <0 bulges out
    const cX = Number(centerX);
    const cY = Number(centerY);
    let r = Number(radius);

    const canvas = document.createElement('canvas');
    const width = originalImg.width;
    const height = originalImg.height;
    
    // Set canvas dimensions to match the original image
    canvas.width = width;
    canvas.height = height;
    const ctx = canvas.getContext('2d');
    
    // Draw original image to read its pixel data
    ctx.drawImage(originalImg, 0, 0);
    const imgData = ctx.getImageData(0, 0, width, height);
    const data = imgData.data;
    
    // Create new image data for the output
    const outputData = ctx.createImageData(width, height);
    const out = outputData.data;

    // Define the focal point and radius of the "magnet"
    const cxObj = cX * width;
    const cyObj = cY * height;
    
    // If radius is 0 or unprovided, set a default covering a large portion of the image
    if (r <= 0) {
        r = Math.max(width, height) * 0.75;
    }

    // Power mapping base for the pinch effect
    // If pullStrength is 0.6, p becomes 0.4. Normalizing distance to 0-1 and raising to 0.4 
    // forces it to fetch source pixels from further out, creating an attractive suction (magnet) effect.
    const p = 1.0 - pullStrength; 

    // Helper function to get the nearest valid pixel index
    const getIdx = (ix, iy) => {
        const clampedX = Math.max(0, Math.min(width - 1, ix));
        const clampedY = Math.max(0, Math.min(height - 1, iy));
        return (clampedY * width + clampedX) * 4;
    };

    // Iterate over every pixel in the destination canvas
    for (let y = 0; y < height; y++) {
        for (let x = 0; x < width; x++) {
            const dx = x - cxObj;
            const dy = y - cyObj;
            const distance = Math.sqrt(dx * dx + dy * dy);
            
            let sx = x;
            let sy = y;
            
            // Only apply effect within the defined radius
            if (distance < r && distance > 0) {
                // Normalized distance (from 0 to 1)
                const nd = distance / r;
                
                // Map the normalized distance for the magnet effect
                const mapped_nd = Math.pow(nd, p);
                const mapped_distance = mapped_nd * r;
                
                // Preserve the vector angle, only scale the magnitude
                const ratio = mapped_distance / distance;
                sx = cxObj + dx * ratio;
                sy = cyObj + dy * ratio;
            }
            
            // Perform Bilinear Interpolation to ensure a smooth, high-quality morph
            const x1 = Math.floor(sx);
            const y1 = Math.floor(sy);
            const x2 = x1 + 1;
            const y2 = y1 + 1;
            
            const dxFrac = sx - x1;
            const dyFrac = sy - y1;
            
            const w11 = (1 - dxFrac) * (1 - dyFrac);
            const w21 = dxFrac * (1 - dyFrac);
            const w12 = (1 - dxFrac) * dyFrac;
            const w22 = dxFrac * dyFrac;
            
            const i11 = getIdx(x1, y1);
            const i21 = getIdx(x2, y1);
            const i12 = getIdx(x1, y2);
            const i22 = getIdx(x2, y2);
            
            const outIdx = (y * width + x) * 4;
            
            // Calculate final RGB/Alpha values from the four nearest source pixels
            for (let c = 0; c < 4; c++) {
                out[outIdx + c] = 
                    data[i11 + c] * w11 +
                    data[i21 + c] * w21 +
                    data[i12 + c] * w12 +
                    data[i22 + c] * w22;
            }
        }
    }
    
    // Draw the processed pixel data back to the canvas
    ctx.putImageData(outputData, 0, 0);
    return canvas;
}