Please bookmark this page to avoid losing your image tool!

Image Soap Bubble Filter Effect Tool

(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, distortionAmount = 15, iridescenceStrength = 40, effectScale = 60) {
    // Parameter sanitization
    let distAmt = Number(distortionAmount);
    let iridStr = Number(iridescenceStrength);
    let effScale = Number(effectScale);

    if (isNaN(distAmt)) distAmt = 15;
    if (isNaN(iridStr)) iridStr = 40;
    if (isNaN(effScale) || effScale <= 0) effScale = 60;

    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

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

    ctx.drawImage(originalImg, 0, 0);

    if (width === 0 || height === 0) {
        // Handle empty image case (e.g., if originalImg hasn't loaded or is 0x0)
        return canvas;
    }
    
    const srcImageData = ctx.getImageData(0, 0, width, height);
    const srcData = srcImageData.data;
    const dstImageData = ctx.createImageData(width, height);
    const dstData = dstImageData.data;

    const clamp = (value, min = 0, max = 255) => Math.max(min, Math.min(max, value));

    // Coefficients for wave patterns (chosen to give a somewhat organic look)
    // Distortion coefficients
    const d_nx_coeff1 = 1.3 * Math.PI; const d_ny_coeff1 = 2.1 * Math.PI;
    const d_phase1_x = 1.2;            const d_phase1_y = 0.7;
    const d_nx_coeff2 = 1.8 * Math.PI; const d_ny_coeff2 = 2.5 * Math.PI;
    const d_phase2_x = 0.5;            const d_phase2_y = 1.9;

    // Color iridescence coefficients
    const c_nx_coeff = 1.5 * Math.PI;  const c_ny_coeff = 0.8 * Math.PI;


    for (let y = 0; y < height; y++) {
        for (let x = 0; x < width; x++) {
            const nx = x / effScale; // Normalized x coordinate based on effectScale
            const ny = y / effScale; // Normalized y coordinate based on effectScale

            // 1. Calculate distortion
            // Combine sine/cosine waves for a fluid-like distortion
            const sin_val_x1 = Math.sin(nx * d_nx_coeff1 + d_phase1_x);
            const sin_val_y1 = Math.sin(ny * d_ny_coeff1 + d_phase1_y);
            const cos_val_x2 = Math.cos(nx * d_nx_coeff2 + d_phase2_x);
            const cos_val_y2 = Math.cos(ny * d_ny_coeff2 + d_phase2_y);
            
            const offsetX = distAmt * (sin_val_y1 + cos_val_x2) * 0.5; // Average of two wave contributions
            const offsetY = distAmt * (sin_val_x1 + cos_val_y2) * 0.5;

            const sampleX = clamp(Math.round(x + offsetX), 0, width - 1);
            const sampleY = clamp(Math.round(y + offsetY), 0, height - 1);

            // 2. Sample pixel from original image using distorted coordinates
            const srcPixelIndex = (sampleY * width + sampleX) * 4;
            let r = srcData[srcPixelIndex];
            let g = srcData[srcPixelIndex + 1];
            let b = srcData[srcPixelIndex + 2];
            const a = srcData[srcPixelIndex + 3];

            // 3. Apply iridescent color shift
            // Calculate a base angle for color cycling, creating rainbow patterns
            const colorAngleBase = (nx * c_nx_coeff) + (ny * c_ny_coeff);
            
            const r_shift = iridStr * Math.sin(colorAngleBase);
            const g_shift = iridStr * Math.sin(colorAngleBase + (2 * Math.PI / 3)); // Phase shift for green
            const b_shift = iridStr * Math.sin(colorAngleBase + (4 * Math.PI / 3)); // Phase shift for blue

            r = clamp(r + r_shift);
            g = clamp(g + g_shift);
            b = clamp(b + b_shift);

            // 4. Write to destination pixel
            const dstPixelIndex = (y * width + x) * 4;
            dstData[dstPixelIndex] = r;
            dstData[dstPixelIndex + 1] = g;
            dstData[dstPixelIndex + 2] = b;
            dstData[dstPixelIndex + 3] = a;
        }
    }

    ctx.putImageData(dstImageData, 0, 0);
    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 Soap Bubble Filter Effect Tool allows users to transform images by applying a unique soap bubble filter effect. This tool creates a visually striking distortion and iridescent color shifts, mimicking the appearance of bubbles. The distortion can be adjusted for intensity, along with the strength of the iridescence and the overall scale of the effect. Users can utilize this tool for creative projects such as graphic design, art enhancements, social media imagery, or to add a whimsical flair to photographs.

Leave a Reply

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