Image Wave Distortion Tool

function processImage(originalImg, amplitude = 20, wavelength = 100, direction = 'horizontal', edgeMode = 'transparent', phase = 0) {
    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 the initial image
    ctx.drawImage(originalImg, 0, 0);

    // If there's no wave distortion, return the canvas immediately
    if (amplitude === 0) return canvas;

    const srcData = ctx.getImageData(0, 0, width, height);
    const destData = ctx.createImageData(width, height);
    const srcBuffer = srcData.data;
    const destBuffer = destData.data;

    // Prevent issues with zero or extremely small wavelength
    const safeWavelength = Math.max(0.1, Math.abs(wavelength));
    const factor = (2 * Math.PI) / safeWavelength;

    // Normalize parameters
    const dir = String(direction).toLowerCase();
    const mode = String(edgeMode).toLowerCase();

    // Precalculate sine waves for optimal performance 
    const sinTableCol = new Float32Array(height);
    for (let y = 0; y < height; y++) {
        sinTableCol[y] = amplitude * Math.sin(y * factor + phase);
    }

    const sinTableRow = new Float32Array(width);
    for (let x = 0; x < width; x++) {
        sinTableRow[x] = amplitude * Math.sin(x * factor + phase);
    }

    for (let y = 0; y < height; y++) {
        const xOffsetFromY = sinTableCol[y];
        
        for (let x = 0; x < width; x++) {
            let srcX = x;
            let srcY = y;

            if (dir === 'horizontal') {
                srcX = x - xOffsetFromY;
            } else if (dir === 'vertical') {
                srcY = y - sinTableRow[x];
            } else if (dir === 'both') {
                srcX = x - xOffsetFromY;
                srcY = y - sinTableRow[x];
            } else {
                // Default to horizontal if direction is unrecognized
                srcX = x - xOffsetFromY;
            }

            // Using nearest neighbor interpolation for performance
            let fetchX = Math.round(srcX);
            let fetchY = Math.round(srcY);
            let outOfBounds = false;

            // Handle edge behaviors limits
            if (fetchX < 0 || fetchX >= width || fetchY < 0 || fetchY >= height) {
                if (mode === 'clamp') {
                    fetchX = Math.max(0, Math.min(width - 1, fetchX));
                    fetchY = Math.max(0, Math.min(height - 1, fetchY));
                } else if (mode === 'wrap') {
                    fetchX = (fetchX % width + width) % width;
                    fetchY = (fetchY % height + height) % height;
                } else {
                    // Default to transparent
                    outOfBounds = true;
                }
            }

            const destIdx = (y * width + x) * 4;

            if (!outOfBounds) {
                const srcIdx = (fetchY * width + fetchX) * 4;
                destBuffer[destIdx]     = srcBuffer[srcIdx];       // R
                destBuffer[destIdx + 1] = srcBuffer[srcIdx + 1];   // G
                destBuffer[destIdx + 2] = srcBuffer[srcIdx + 2];   // B
                destBuffer[destIdx + 3] = srcBuffer[srcIdx + 3];   // A
            } else {
                destBuffer[destIdx]     = 0;
                destBuffer[destIdx + 1] = 0;
                destBuffer[destIdx + 2] = 0;
                destBuffer[destIdx + 3] = 0;
            }
        }
    }

    ctx.putImageData(destData, 0, 0);
    return canvas;
}