Please bookmark this page to avoid losing your image tool!

Image Hypnosis Effect Creator

(Free & Supports Bulk Upload)

Drag & drop your images here or

The result will appear here...
You can edit the below JavaScript code to customize the image tool.
/**
 * 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;
}

Free Image Tool Creator

Can't find the image tool you're looking for?
Create one based on your own needs now!

Description

The Image Hypnosis Effect Creator allows users to apply a unique hypnosis swirl effect to images. By twisting pixels around a specified center point, this tool creates a visually captivating swirled appearance. Users can customize parameters such as the maximum rotation angle, radius of the swirl effect, and the center of the effect within the image. This tool is ideal for graphic designers, digital artists, and anyone looking to enhance their images with a dramatic, artistic twist suitable for creative projects, social media posts, and visual entertainment.

Leave a Reply

Your email address will not be published. Required fields are marked *