Image Hypnosis Effect Creator

/**
 * Creates a hypnosis swirl effect on an image by twisting pixels around a center point.
 * This is a common "twirl" or "swirl" image filter.
 *
 * @param {Image} originalImg The original javascript Image object.
 * @param {number} angle The maximum rotation angle in degrees at the center of the swirl. Negative values will swirl in the opposite direction. Default is 360.
 * @param {number} radius The radius of the swirl effect in pixels. If 0 or less, the radius is automatically calculated to cover the entire image from the center point. Default is 0.
 * @param {number} centerX The normalized horizontal center of the swirl (0.0 to 1.0, where 0.5 is the middle). Default is 0.5.
 * @param {number} centerY The normalized vertical center of the swirl (0.0 to 1.0, where 0.5 is the middle). Default is 0.5.
 * @returns {HTMLCanvasElement} A new canvas element with the hypnosis effect applied.
 */
function processImage(originalImg, angle = 360, radius = 0, centerX = 0.5, centerY = 0.5) {
    // 1. Create a canvas and get its 2D rendering context
    const canvas = document.createElement('canvas');
    // Using { willReadFrequently: true } is a performance hint for browsers
    const ctx = canvas.getContext('2d', {
        willReadFrequently: true
    });

    const width = originalImg.naturalWidth;
    const height = originalImg.naturalHeight;
    canvas.width = width;
    canvas.height = height;

    // 2. Draw the original image to the canvas to be able to read 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 transformed pixels
    const destImageData = ctx.createImageData(width, height);
    const destData = destImageData.data;

    // 4. Calculate effect parameters in absolute pixel coordinates
    const cx = width * centerX;
    const cy = height * centerY;

    // 5. Determine the effective radius of the swirl
    let effRadius;
    if (radius <= 0) {
        // If radius is not specified, calculate it as the distance from the center to the furthest corner
        const maxDistToCornerX = Math.max(cx, width - cx);
        const maxDistToCornerY = Math.max(cy, height - cy);
        effRadius = Math.sqrt(maxDistToCornerX * maxDistToCornerX + maxDistToCornerY * maxDistToCornerY);
    } else {
        effRadius = radius;
    }

    // Convert the angle from degrees to radians for JS Math functions
    const maxAngleRad = angle * Math.PI / 180;

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

            const destIndex = (y * width + x) * 4;

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

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

            // If the pixel is inside the effect radius, apply the swirl
            if (distance < effRadius) {
                // The swirl effect is strongest at the center and fades to zero at the radius edge.
                // A non-linear (quadratic) falloff creates a more natural-looking swirl.
                const swirlFactor = 1 - (distance / effRadius);
                const angleOffset = maxAngleRad * (swirlFactor * swirlFactor);

                // Calculate the new, swirled angle
                const newAngle = originalAngle + angleOffset;

                // Find the coordinates of the source pixel by rotating back from the new angle
                const sourceX = cx + distance * Math.cos(newAngle);
                const sourceY = cy + distance * Math.sin(newAngle);

                // Use nearest-neighbor sampling by rounding to the nearest source pixel
                const sx = Math.round(sourceX);
                const sy = Math.round(sourceY);

                // Check if the calculated source pixel is within the image bounds
                if (sx >= 0 && sx < width && sy >= 0 && sy < height) {
                    const sourceIndex = (sy * width + sx) * 4;
                    // Copy 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; // Set Alpha to 0
                }

            } else {
                // If the pixel is outside the effect radius, just copy the original pixel data
                destData[destIndex] = sourceData[destIndex];
                destData[destIndex + 1] = sourceData[destIndex + 1];
                destData[destIndex + 2] = sourceData[destIndex + 2];
                destData[destIndex + 3] = sourceData[destIndex + 3];
            }
        }
    }

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

    // 8. Return the canvas element with the final image
    return canvas;
}