Image Wave Effect Generator

function processImage(originalImg, amplitude = 20, wavelength = 100, phase = 0, direction = 'horizontal', edgeMode = 'transparent') {
    const canvas = document.createElement('canvas');
    const width = originalImg.width;
    const height = originalImg.height;

    canvas.width = width;
    canvas.height = height;
    
    const ctx = canvas.getContext('2d', { willReadFrequently: true });
    ctx.drawImage(originalImg, 0, 0);

    const imgData = ctx.getImageData(0, 0, width, height);
    const data = imgData.data;

    const outputData = ctx.createImageData(width, height);
    const outBase = outputData.data;

    // Parse parameters
    const amp = parseFloat(amplitude) || 0;
    const wave = parseFloat(wavelength) || 1; // Prevent division by zero
    const ph = parseFloat(phase) || 0;
    const dir = String(direction).toLowerCase();
    const edge = String(edgeMode).toLowerCase();

    for (let y = 0; y < height; y++) {
        for (let x = 0; x < width; x++) {
            let srcX = x;
            let srcY = y;

            if (dir === 'horizontal' || dir === 'both') {
                srcX = x - amp * Math.sin((y / wave) * 2 * Math.PI + ph);
            }
            if (dir === 'vertical' || dir === 'both') {
                srcY = y - amp * Math.sin((x / wave) * 2 * Math.PI + ph);
            }

            // Nearest-neighbor interpolation
            srcX = Math.round(srcX);
            srcY = Math.round(srcY);

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

            // Handle out of bounds pixels based on edgeMode
            if (srcX < 0 || srcX >= width || srcY < 0 || srcY >= height) {
                if (edge === 'clamp') {
                    srcX = Math.max(0, Math.min(width - 1, srcX));
                    srcY = Math.max(0, Math.min(height - 1, srcY));
                    const srcIdx = (srcY * width + srcX) * 4;
                    outBase[destIdx] = data[srcIdx];
                    outBase[destIdx + 1] = data[srcIdx + 1];
                    outBase[destIdx + 2] = data[srcIdx + 2];
                    outBase[destIdx + 3] = data[srcIdx + 3];
                } else if (edge === 'wrap') {
                    srcX = (srcX % width + width) % width;
                    srcY = (srcY % height + height) % height;
                    const srcIdx = (srcY * width + srcX) * 4;
                    outBase[destIdx] = data[srcIdx];
                    outBase[destIdx + 1] = data[srcIdx + 1];
                    outBase[destIdx + 2] = data[srcIdx + 2];
                    outBase[destIdx + 3] = data[srcIdx + 3];
                } else {
                    // Default missing pixels to transparent
                    outBase[destIdx] = 0;
                    outBase[destIdx + 1] = 0;
                    outBase[destIdx + 2] = 0;
                    outBase[destIdx + 3] = 0;
                }
            } else {
                const srcIdx = (srcY * width + srcX) * 4;
                outBase[destIdx] = data[srcIdx];
                outBase[destIdx + 1] = data[srcIdx + 1];
                outBase[destIdx + 2] = data[srcIdx + 2];
                outBase[destIdx + 3] = data[srcIdx + 3];
            }
        }
    }

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