Image Ratio Swirl Effect Tool

function processImage(originalImg, swirlAngle = 360, swirlRadius = -1, centerX = 0.5, centerY = 0.5) {
    // 1. Create a canvas and get its 2D rendering context.
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // Get the dimensions of the original image.
    const width = originalImg.naturalWidth;
    const height = originalImg.naturalHeight;
    canvas.width = width;
    canvas.height = height;

    // 2. Draw the original image onto the canvas to access its pixel data.
    ctx.drawImage(originalImg, 0, 0);
    const sourceImageData = ctx.getImageData(0, 0, width, height);
    const sourceData = sourceImageData.data;

    // 3. Create a new ImageData object to store the modified pixels.
    const destImageData = ctx.createImageData(width, height);
    const destData = destImageData.data;

    // 4. Calculate parameters for the swirl effect.
    // Convert the swirl angle from degrees to radians.
    const angleRad = swirlAngle * Math.PI / 180;
    // Calculate the absolute pixel coordinates for the swirl's center.
    const cx = width * centerX;
    const cy = height * centerY;
    // Determine the radius to use. If the provided radius is invalid (<=0),
    // calculate a default based on the image dimensions.
    const radiusToUse = swirlRadius <= 0 ? Math.min(width, height) / 2 : swirlRadius;
    const radiusSquared = radiusToUse * radiusToUse; // Use squared radius for efficiency.

    // 5. Iterate over each pixel in the destination image.
    for (let y = 0; y < height; y++) {
        for (let x = 0; x < width; x++) {

            // Calculate the vector from the swirl center to the current pixel.
            const dx = x - cx;
            const dy = y - cy;

            // Calculate the distance squared from the center.
            const distanceSquared = dx * dx + dy * dy;

            // Get the destination pixel index.
            const destIndex = (y * width + x) * 4;

            let sourceX, sourceY;

            // If the pixel is outside the swirl radius, it remains unchanged.
            if (distanceSquared > radiusSquared) {
                sourceX = x;
                sourceY = y;
            } else {
                // The pixel is inside the swirl radius.
                const distance = Math.sqrt(distanceSquared);
                const originalAngle = Math.atan2(dy, dx);

                // The swirl strength decreases from the center to the edge.
                // Using a squared falloff (1 - d/r)^2 for a smoother effect.
                const swirlAmount = 1 - (distance / radiusToUse);
                const angleShift = swirlAmount * swirlAmount * angleRad;
                
                const newAngle = originalAngle + angleShift;
                
                // Find the source pixel coordinates by rotating from the new angle.
                sourceX = cx + distance * Math.cos(newAngle);
                sourceY = cy + distance * Math.sin(newAngle);
            }

            // Use nearest-neighbor sampling to find the source pixel color.
            const srcX = Math.round(sourceX);
            const srcY = Math.round(sourceY);

            // Check if the source coordinates are within the image bounds.
            if (srcX >= 0 && srcX < width && srcY >= 0 && srcY < height) {
                const sourceIndex = (srcY * width + srcX) * 4;
                // Copy the RGBA values from the source pixel to the destination.
                destData[destIndex] = sourceData[sourceIndex];
                destData[destIndex + 1] = sourceData[sourceIndex + 1];
                destData[destIndex + 2] = sourceData[sourceIndex + 2];
                destData[destIndex + 3] = sourceData[sourceIndex + 3];
            } else {
                // If the source pixel is out of bounds, make the destination pixel transparent.
                destData[destIndex + 3] = 0;
            }
        }
    }

    // 6. Put the modified pixel data back onto the canvas.
    ctx.putImageData(destImageData, 0, 0);

    // 7. Return the final canvas element.
    return canvas;
}