Image Tsunami Wave Filter Effect

function processImage(originalImg, amplitude = 50, frequency = 0.02, phase = 0) {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // Ensure originalImg is an Image-like object with necessary properties
    if (!originalImg || typeof originalImg.naturalWidth === 'undefined' || typeof originalImg.naturalHeight === 'undefined' || typeof originalImg.complete === 'undefined') {
        console.error("Invalid image object provided. It lacks necessary properties (naturalWidth, naturalHeight, complete).");
        canvas.width = 0;
        canvas.height = 0;
        return canvas;
    }

    const imgWidth = originalImg.naturalWidth;
    const imgHeight = originalImg.naturalHeight;

    // Check if the image is loaded and has valid (non-zero) dimensions
    if (!originalImg.complete || imgWidth === 0 || imgHeight === 0) {
        console.error("Image is not fully loaded, is invalid, or has zero dimensions. Cannot process.");
        // Set canvas to 0x0 or image dimensions if available but not complete, then return.
        // This ensures a canvas of correct size is returned, though it might be blank or incomplete.
        canvas.width = imgWidth || 0;
        canvas.height = imgHeight || 0;
        // Optionally, try to draw if dimensions are known, acknowledging it might be incomplete.
        if (imgWidth > 0 && imgHeight > 0 && originalImg.complete === false) {
             // console.warn("Attempting to draw an image that is not fully loaded.");
             try {
                ctx.drawImage(originalImg, 0, 0, imgWidth, imgHeight);
             } catch(e) {
                // console.error("Error drawing an incomplete image: ", e);
             }
        }
        return canvas; // Return canvas, potentially empty or with a partially drawn image.
    }

    canvas.width = imgWidth;
    canvas.height = imgHeight;

    // Draw the original image onto the canvas
    try {
        ctx.drawImage(originalImg, 0, 0, imgWidth, imgHeight);
    } catch (e) {
        console.error("Error drawing image to canvas:", e);
        // Return the canvas, which might be blank if drawing failed.
        return canvas;
    }

    // Get pixel data from the source canvas
    let sourceImageData;
    try {
        sourceImageData = ctx.getImageData(0, 0, imgWidth, imgHeight);
    } catch (e) {
        console.error("Error getting image data (possibly due to tainted canvas from cross-origin image):", e);
        // If canvas is tainted, getImageData will throw. Return the canvas with the original image drawn.
        return canvas;
    }
    
    const sourceData = sourceImageData.data;
    const outputImageData = ctx.createImageData(imgWidth, imgHeight);
    const outputData = outputImageData.data;

    // Apply the Tsunami Wave effect
    for (let y = 0; y < imgHeight; y++) {
        // Calculate horizontal shift for this row. The wave pattern runs vertically.
        const shiftX = amplitude * Math.sin(y * frequency + phase);
        
        for (let x = 0; x < imgWidth; x++) {
            // Determine the x-coordinate in the source image to fetch the pixel from.
            // A positive shiftX means pixels at (x,y) are pulled from (x - shiftX, y).
            const currentSrcX = x - shiftX;
            
            // Ensure srcX is within the image bounds and round to the nearest integer.
            const roundSrcX = Math.round(currentSrcX);
            const clampedSrcX = Math.max(0, Math.min(imgWidth - 1, roundSrcX));
            
            // The y-coordinate (srcY) remains the same for this horizontal wave effect.
            const srcY = y;

            // Calculate array indices for the target (output) and source pixels.
            // Each pixel is 4 bytes (R, G, B, A).
            const targetIdx = (y * imgWidth + x) * 4;
            const srcIdx = (srcY * imgWidth + clampedSrcX) * 4;

            // Copy the RGBA values from the source pixel to the target pixel.
            outputData[targetIdx]     = sourceData[srcIdx];     // Red
            outputData[targetIdx + 1] = sourceData[srcIdx + 1]; // Green
            outputData[targetIdx + 2] = sourceData[srcIdx + 2]; // Blue
            outputData[targetIdx + 3] = sourceData[srcIdx + 3]; // Alpha
        }
    }

    // Put the modified pixel data back onto the canvas
    ctx.putImageData(outputImageData, 0, 0);

    return canvas;
}