Please bookmark this page to avoid losing your image tool!

Image Resize Vegas Swirl

(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.
function processImage(originalImg, width = 0, height = 0, angle = 270, radius = 0, centerXRatio = 0.5, centerYRatio = 0.5) {
    // 1. Determine output dimensions, preserving aspect ratio if one dimension is 0
    const iw = originalImg.naturalWidth;
    const ih = originalImg.naturalHeight;
    const aspect = iw / ih;

    let outputWidth = width > 0 ? width : iw;
    let outputHeight = height > 0 ? height : ih;

    if (width > 0 && height <= 0) {
        outputHeight = Math.round(width / aspect);
    } else if (height > 0 && width <= 0) {
        outputWidth = Math.round(height * aspect);
    }

    // 2. Create a source canvas and draw the resized image onto it for pixel sampling
    const sourceCanvas = document.createElement('canvas');
    sourceCanvas.width = outputWidth;
    sourceCanvas.height = outputHeight;
    const sourceCtx = sourceCanvas.getContext('2d', { willReadFrequently: true });
    sourceCtx.drawImage(originalImg, 0, 0, outputWidth, outputHeight);
    const sourceImageData = sourceCtx.getImageData(0, 0, outputWidth, outputHeight);
    const sourcePixels = sourceImageData.data;

    // 3. Create the destination canvas where the final image will be drawn
    const destCanvas = document.createElement('canvas');
    destCanvas.width = outputWidth;
    destCanvas.height = outputHeight;
    const destCtx = destCanvas.getContext('2d');
    const destImageData = destCtx.createImageData(outputWidth, outputHeight);
    const destPixels = destImageData.data;

    // 4. Calculate swirl parameters in pixels
    const centerX = outputWidth * centerXRatio;
    const centerY = outputHeight * centerYRatio;
    const swirlRadius = radius > 0 ? radius : Math.min(outputWidth, outputHeight) / 2;
    const swirlAngleRad = angle * Math.PI / 180;

    // Helper to get a pixel's color using bilinear interpolation
    const getInterpolatedPixel = (x, y) => {
        const x1 = Math.floor(x);
        const y1 = Math.floor(y);
        const x2 = Math.min(x1 + 1, outputWidth - 1);
        const y2 = Math.min(y1 + 1, outputHeight - 1);

        const p1_idx = (y1 * outputWidth + x1) * 4;
        const p2_idx = (y1 * outputWidth + x2) * 4;
        const p3_idx = (y2 * outputWidth + x1) * 4;
        const p4_idx = (y2 * outputWidth + x2) * 4;
        
        const fx = x - x1;
        const fy = y - y1;
        const fx1 = 1 - fx;
        const fy1 = 1 - fy;

        const result = [0, 0, 0, 0];
        for (let i = 0; i < 4; i++) {
             const top = sourcePixels[p1_idx + i] * fx1 + sourcePixels[p2_idx + i] * fx;
             const bottom = sourcePixels[p3_idx + i] * fx1 + sourcePixels[p4_idx + i] * fx;
             result[i] = top * fy1 + bottom * fy;
        }
        return result;
    };


    // 5. Main loop: iterate over each destination pixel
    for (let y = 0; y < outputHeight; y++) {
        for (let x = 0; x < outputWidth; x++) {
            const dx = x - centerX;
            const dy = y - centerY;
            const distance = Math.sqrt(dx * dx + dy * dy);

            let sourceX = x;
            let sourceY = y;

            // Apply swirl transformation if inside the radius
            if (distance < swirlRadius) {
                const originalAngle = Math.atan2(dy, dx);
                
                // Use a squared falloff for a smoother effect at the edges
                const falloff = 1 - distance / swirlRadius;
                const swirlAmount = swirlAngleRad * falloff * falloff;
                
                const newAngle = originalAngle + swirlAmount;

                sourceX = centerX + distance * Math.cos(newAngle);
                sourceY = centerY + distance * Math.sin(newAngle);
            }

            const destIndex = (y * outputWidth + x) * 4;
            
            // Check if source coordinates are within bounds before interpolating
            if (sourceX >= 0 && sourceX < outputWidth && sourceY >= 0 && sourceY < outputHeight) {
                const color = getInterpolatedPixel(sourceX, sourceY);
                destPixels[destIndex]     = color[0]; // R
                destPixels[destIndex + 1] = color[1]; // G
                destPixels[destIndex + 2] = color[2]; // B
                destPixels[destIndex + 3] = color[3]; // A
            } else {
                 // If out of bounds, make it transparent or a background color
                 destPixels[destIndex + 3] = 0;
            }
        }
    }

    // 6. Put the manipulated pixel data onto the destination canvas and return it
    destCtx.putImageData(destImageData, 0, 0);
    return destCanvas;
}

Free Image Tool Creator

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

Description

Image Resize Vegas Swirl is a powerful web-based tool that enables users to resize and apply a unique swirl distortion effect to images. Users can specify the desired width and height for the output image while maintaining the aspect ratio if necessary. The tool also allows adjustments to the swirl angle, radius, and center point, enabling creative transformations of images. This tool is ideal for graphic designers, social media content creators, and anyone looking to enhance their images with visually striking effects and tailored dimensions.

Leave a Reply

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