Image Swirl Effect Creator

/**
 * Applies a swirl effect to an image.
 *
 * @param {Image} originalImg The original image object to apply the effect to.
 * @param {number} [centerX=50] The x-coordinate of the swirl center, as a percentage of the image width (0-100).
 * @param {number} [centerY=50] The y-coordinate of the swirl center, as a percentage of the image height (0-100).
 * @param {number} [radius=200] The radius of the swirl effect in pixels.
 * @param {number} [angle=90] The angle of the swirl in degrees. Positive values swirl counter-clockwise, negative values swirl clockwise.
 * @returns {HTMLCanvasElement} A new canvas element with the swirl effect applied.
 */
function processImage(originalImg, centerX = 50, centerY = 50, radius = 200, angle = 90) {
    // 1. Create a new canvas to draw the result
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    const width = originalImg.width;
    const height = originalImg.height;
    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 srcImageData = ctx.getImageData(0, 0, width, height);
    const srcData = srcImageData.data;

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

    // 4. Convert parameters to pixel coordinates and radians
    const cx = width * (centerX / 100);
    const cy = height * (centerY / 100);
    const swirlAngle = angle * (Math.PI / 180);

    // 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 and angle of the pixel from the center
            const distance = Math.sqrt(dx * dx + dy * dy);
            const originalAngle = Math.atan2(dy, dx);

            let srcX, srcY;

            // If the pixel is outside the radius, it's not affected
            if (distance >= radius) {
                srcX = x;
                srcY = y;
            } else {
                // The pixel is inside the swirl radius
                // Calculate how much to twist the pixel
                const factor = (radius - distance) / radius;
                const twistAngle = swirlAngle * factor;

                // Calculate the new angle by subtracting the twist
                const newAngle = originalAngle - twistAngle;

                // Find the source coordinates by rotating back
                srcX = cx + distance * Math.cos(newAngle);
                srcY = cy + distance * Math.sin(newAngle);
            }

            // Find the destination index in the 1D pixel array
            const destIndex = (y * width + x) * 4;

            // Use nearest-neighbor sampling to get the source pixel color
            const sx = Math.round(srcX);
            const sy = Math.round(srcY);

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

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

    // 7. Return the canvas with the swirl effect
    return canvas;
}