Image Vegas Pro And NSB Swirl Ratio Effect Application

/**
 * Applies a swirl distortion effect to an image, similar to effects found in video editors.
 * The distortion originates from the center of the image and twists pixels around it.
 *
 * @param {Image} originalImg The original image object to which the effect will be applied.
 * @param {number} [amount=0.5] A number that controls the intensity and direction of the swirl.
 *                               Positive values create a clockwise swirl, negative values create a
 *                               counter-clockwise swirl. A value of 1 corresponds to roughly a
 *                               180-degree twist at the center.
 * @param {number} [radius=1.0] A number from 0.0 to 1.0 (or higher) representing the size of the
 *                              swirl effect relative to the image size. A value of 1.0 means the
 *                              swirl effect will extend to the corners of the image. A value of 0.5
 *                              confines the effect to a central circle touching the shorter edges.
 * @returns {HTMLCanvasElement} A new canvas element displaying the image with the swirl effect.
 */
function processImage(originalImg, amount = 0.5, radius = 1.0) {
    // Create a new canvas to draw the result
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // Set the canvas dimensions to match the input image
    const width = originalImg.width;
    const height = originalImg.height;
    canvas.width = width;
    canvas.height = height;

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

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

    // Define the center of the swirl effect
    const centerX = width / 2;
    const centerY = height / 2;

    // Calculate the maximum radius of the effect in pixels.
    // We use half the image diagonal so a radius of 1.0 reaches the corners.
    const maxRadiusPixels = radius * Math.sqrt(centerX * centerX + centerY * centerY);

    // Scale the amount for a more intuitive rotation angle (1.0 amount ~ 180 degrees)
    const swirlStrength = amount * Math.PI;

    // Iterate over each pixel of the destination image
    for (let y = 0; y < height; y++) {
        for (let x = 0; x < width; x++) {
            // Calculate the current pixel's position relative to the center
            const dx = x - centerX;
            const dy = y - centerY;

            // Calculate the distance and angle of the pixel from the center
            const distance = Math.sqrt(dx * dx + dy * dy);
            const angle = Math.atan2(dy, dx);

            // If the effect radius is 0, skip calculations
            if (maxRadiusPixels === 0) {
                const destIndex = (y * width + x) * 4;
                const sourceIndex = destIndex;
                destPixels[destIndex] = sourcePixels[sourceIndex];
                destPixels[destIndex + 1] = sourcePixels[sourceIndex + 1];
                destPixels[destIndex + 2] = sourcePixels[sourceIndex + 2];
                destPixels[destIndex + 3] = sourcePixels[sourceIndex + 3];
                continue;
            }
            
            // Calculate how much to swirl. This is a factor from 1 (at the center) to 0 (at the edge of the radius).
            const swirlFactor = 1 - (distance / maxRadiusPixels);

            let sourceX = x;
            let sourceY = y;
            
            // Only apply swirl if the pixel is within the effect radius
            if (swirlFactor > 0) {
                // Apply a non-linear (squared) falloff for a smoother visual transition
                const twistAngle = swirlStrength * swirlFactor * swirlFactor;
                const newAngle = angle + twistAngle;

                // Convert the polar coordinates back to Cartesian to find the source pixel
                sourceX = centerX + distance * Math.cos(newAngle);
                sourceY = centerY + distance * Math.sin(newAngle);
            }
            
            // Get the integer coordinates of the source pixel (nearest neighbor sampling)
            const sx_round = Math.round(sourceX);
            const sy_round = Math.round(sourceY);
            
            const destIndex = (y * width + x) * 4;

            // Check if the calculated source pixel is within the image bounds
            if (sx_round >= 0 && sx_round < width && sy_round >= 0 && sy_round < height) {
                const sourceIndex = (sy_round * width + sx_round) * 4;
                // Copy the RGBA values from the source pixel to the destination
                destPixels[destIndex]     = sourcePixels[sourceIndex];
                destPixels[destIndex + 1] = sourcePixels[sourceIndex + 1];
                destPixels[destIndex + 2] = sourcePixels[sourceIndex + 2];
                destPixels[destIndex + 3] = sourcePixels[sourceIndex + 3];
            } else {
                // If the source pixel is outside the image bounds, make this pixel transparent
                destPixels[destIndex]     = 0;
                destPixels[destIndex + 1] = 0;
                destPixels[destIndex + 2] = 0;
                destPixels[destIndex + 3] = 0;
            }
        }
    }

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

    // Return the final canvas element
    return canvas;
}