Image Soap Bubble Filter Effect 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;
}