Image Ripple Effect Generator

function processImage(originalImg, amplitude = 20, wavelength = 60, phase = 0, centerXRatio = 0.5, centerYRatio = 0.5) {
    // Parse parameters to ensure they are treated as numbers
    amplitude = Number(amplitude);
    wavelength = Number(wavelength);
    phase = Number(phase);
    centerXRatio = Number(centerXRatio);
    centerYRatio = Number(centerYRatio);

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

    const canvas = document.createElement('canvas');
    canvas.width = width;
    canvas.height = height;
    const ctx = canvas.getContext('2d');
    
    // Draw original image to get its pixel data
    ctx.drawImage(originalImg, 0, 0);
    const srcData = ctx.getImageData(0, 0, width, height);
    const dstData = ctx.createImageData(width, height);
    
    const src = srcData.data;
    const dst = dstData.data;
    
    // Determine the exact pixel coordinates for the ripple center
    const cx = width * centerXRatio;
    const cy = height * centerYRatio;
    const factor = (2 * Math.PI) / wavelength;
    
    for (let y = 0; y < height; y++) {
        for (let x = 0; x < width; x++) {
            const dx = x - cx;
            const dy = y - cy;
            const distance = Math.sqrt(dx * dx + dy * dy);
            
            const dstIdx = (y * width + x) * 4;

            // Handle the extreme center pixel to avoid division by zero
            if (distance === 0) {
                dst[dstIdx] = src[dstIdx];
                dst[dstIdx + 1] = src[dstIdx + 1];
                dst[dstIdx + 2] = src[dstIdx + 2];
                dst[dstIdx + 3] = src[dstIdx + 3];
                continue;
            }
            
            // Calculate radial offset based on a sine wave function
            const amount = amplitude * Math.sin(distance * factor + phase);
            
            // Map the current pixel backwards to the source coordinates pushing along the radial vector
            let srcX = x + amount * (dx / distance);
            let srcY = y + amount * (dy / distance);
            
            // Clamp coordinates to image boundaries
            srcX = Math.max(0, Math.min(width - 1, srcX));
            srcY = Math.max(0, Math.min(height - 1, srcY));
            
            // Perform Bilinear interpolation for smooth distortion rather than chunky pixels
            const x0 = Math.floor(srcX);
            const x1 = Math.min(x0 + 1, width - 1);
            const y0 = Math.floor(srcY);
            const y1 = Math.min(y0 + 1, height - 1);
            
            const tX = srcX - x0;
            const tY = srcY - y0;
            
            const idx00 = (y0 * width + x0) * 4;
            const idx10 = (y0 * width + x1) * 4;
            const idx01 = (y1 * width + x0) * 4;
            const idx11 = (y1 * width + x1) * 4;
            
            for (let c = 0; c < 4; c++) {
                const val00 = src[idx00 + c];
                const val10 = src[idx10 + c];
                const val01 = src[idx01 + c];
                const val11 = src[idx11 + c];
                
                // Interpolate horizontally, then vertically
                const val0 = val00 * (1 - tX) + val10 * tX;
                const val1 = val01 * (1 - tX) + val11 * tX;
                const val = val0 * (1 - tY) + val1 * tY;
                
                dst[dstIdx + c] = val;
            }
        }
    }
    
    // Draw the processed pixel dataset to output canvas
    ctx.putImageData(dstData, 0, 0);
    return canvas;
}