Image Resize Vegas Swirl

function processImage(originalImg, width = 0, height = 0, angle = 270, radius = 0, centerXRatio = 0.5, centerYRatio = 0.5) {
    // 1. Determine output dimensions, preserving aspect ratio if one dimension is 0
    const iw = originalImg.naturalWidth;
    const ih = originalImg.naturalHeight;
    const aspect = iw / ih;

    let outputWidth = width > 0 ? width : iw;
    let outputHeight = height > 0 ? height : ih;

    if (width > 0 && height <= 0) {
        outputHeight = Math.round(width / aspect);
    } else if (height > 0 && width <= 0) {
        outputWidth = Math.round(height * aspect);
    }

    // 2. Create a source canvas and draw the resized image onto it for pixel sampling
    const sourceCanvas = document.createElement('canvas');
    sourceCanvas.width = outputWidth;
    sourceCanvas.height = outputHeight;
    const sourceCtx = sourceCanvas.getContext('2d', { willReadFrequently: true });
    sourceCtx.drawImage(originalImg, 0, 0, outputWidth, outputHeight);
    const sourceImageData = sourceCtx.getImageData(0, 0, outputWidth, outputHeight);
    const sourcePixels = sourceImageData.data;

    // 3. Create the destination canvas where the final image will be drawn
    const destCanvas = document.createElement('canvas');
    destCanvas.width = outputWidth;
    destCanvas.height = outputHeight;
    const destCtx = destCanvas.getContext('2d');
    const destImageData = destCtx.createImageData(outputWidth, outputHeight);
    const destPixels = destImageData.data;

    // 4. Calculate swirl parameters in pixels
    const centerX = outputWidth * centerXRatio;
    const centerY = outputHeight * centerYRatio;
    const swirlRadius = radius > 0 ? radius : Math.min(outputWidth, outputHeight) / 2;
    const swirlAngleRad = angle * Math.PI / 180;

    // Helper to get a pixel's color using bilinear interpolation
    const getInterpolatedPixel = (x, y) => {
        const x1 = Math.floor(x);
        const y1 = Math.floor(y);
        const x2 = Math.min(x1 + 1, outputWidth - 1);
        const y2 = Math.min(y1 + 1, outputHeight - 1);

        const p1_idx = (y1 * outputWidth + x1) * 4;
        const p2_idx = (y1 * outputWidth + x2) * 4;
        const p3_idx = (y2 * outputWidth + x1) * 4;
        const p4_idx = (y2 * outputWidth + x2) * 4;
        
        const fx = x - x1;
        const fy = y - y1;
        const fx1 = 1 - fx;
        const fy1 = 1 - fy;

        const result = [0, 0, 0, 0];
        for (let i = 0; i < 4; i++) {
             const top = sourcePixels[p1_idx + i] * fx1 + sourcePixels[p2_idx + i] * fx;
             const bottom = sourcePixels[p3_idx + i] * fx1 + sourcePixels[p4_idx + i] * fx;
             result[i] = top * fy1 + bottom * fy;
        }
        return result;
    };


    // 5. Main loop: iterate over each destination pixel
    for (let y = 0; y < outputHeight; y++) {
        for (let x = 0; x < outputWidth; x++) {
            const dx = x - centerX;
            const dy = y - centerY;
            const distance = Math.sqrt(dx * dx + dy * dy);

            let sourceX = x;
            let sourceY = y;

            // Apply swirl transformation if inside the radius
            if (distance < swirlRadius) {
                const originalAngle = Math.atan2(dy, dx);
                
                // Use a squared falloff for a smoother effect at the edges
                const falloff = 1 - distance / swirlRadius;
                const swirlAmount = swirlAngleRad * falloff * falloff;
                
                const newAngle = originalAngle + swirlAmount;

                sourceX = centerX + distance * Math.cos(newAngle);
                sourceY = centerY + distance * Math.sin(newAngle);
            }

            const destIndex = (y * outputWidth + x) * 4;
            
            // Check if source coordinates are within bounds before interpolating
            if (sourceX >= 0 && sourceX < outputWidth && sourceY >= 0 && sourceY < outputHeight) {
                const color = getInterpolatedPixel(sourceX, sourceY);
                destPixels[destIndex]     = color[0]; // R
                destPixels[destIndex + 1] = color[1]; // G
                destPixels[destIndex + 2] = color[2]; // B
                destPixels[destIndex + 3] = color[3]; // A
            } else {
                 // If out of bounds, make it transparent or a background color
                 destPixels[destIndex + 3] = 0;
            }
        }
    }

    // 6. Put the manipulated pixel data onto the destination canvas and return it
    destCtx.putImageData(destImageData, 0, 0);
    return destCanvas;
}