Image Earthquake Wave Filter Effect Tool

function processImage(originalImg, p_amplitude = 10, p_frequency = 0.1, p_phase = 0) {
    // Ensure parameters are numbers and provide defaults if they are not valid
    // or if non-numeric strings are passed.
    const amplitudeNum = Number(p_amplitude);
    const frequencyNum = Number(p_frequency);
    const phaseNum = Number(p_phase);

    const finalAmplitude = isNaN(amplitudeNum) ? 10 : amplitudeNum;
    const finalFrequency = isNaN(frequencyNum) ? 0.1 : frequencyNum;
    const finalPhase = isNaN(phaseNum) ? 0 : phaseNum;

    // Use naturalWidth and naturalHeight for intrinsic image dimensions
    const width = originalImg.naturalWidth;
    const height = originalImg.naturalHeight;

    // If image dimensions are invalid (e.g., image not loaded or src is invalid),
    // return an empty canvas.
    if (width === 0 || height === 0) {
        console.warn("Image has zero width or height. Ensure it is loaded and valid before processing.");
        const emptyCanvas = document.createElement('canvas');
        emptyCanvas.width = 0;
        emptyCanvas.height = 0;
        return emptyCanvas;
    }

    // Create a temporary canvas to draw the original image and get its pixel data
    const tempCanvas = document.createElement('canvas');
    tempCanvas.width = width;
    tempCanvas.height = height;
    const tempCtx = tempCanvas.getContext('2d');

    tempCtx.drawImage(originalImg, 0, 0, width, height);
    const originalImageData = tempCtx.getImageData(0, 0, width, height);
    const originalData = originalImageData.data;

    // Create ImageData for the output (processed image)
    // We'll use the same temporary context to create it, but it could be any context.
    const outputImageData = tempCtx.createImageData(width, height);
    const outputData = outputImageData.data;

    // Iterate over each pixel of the destination image
    for (let y = 0; y < height; y++) {
        // Calculate the horizontal displacement for this row using a sine wave.
        // The displacement varies with 'y' to create horizontal waves.
        const displacement = finalAmplitude * Math.sin(finalFrequency * y + finalPhase);

        for (let x = 0; x < width; x++) {
            // Calculate the source x-coordinate from which to pick the pixel.
            // This is applying the displacement to the current x-coordinate.
            // Math.round is used for nearest-neighbor sampling.
            const srcX = Math.round(x - displacement);

            // Calculate the array index for the destination pixel
            const destIndex = (y * width + x) * 4;

            if (srcX >= 0 && srcX < width) {
                // If the source x-coordinate is within the bounds of the original image
                const srcIndex = (y * width + srcX) * 4;
                outputData[destIndex]     = originalData[srcIndex];     // Red
                outputData[destIndex + 1] = originalData[srcIndex + 1]; // Green
                outputData[destIndex + 2] = originalData[srcIndex + 2]; // Blue
                outputData[destIndex + 3] = originalData[srcIndex + 3]; // Alpha
            } else {
                // If the source x-coordinate is out of bounds (i.e., shifted "off-screen")
                // Make this pixel transparent black.
                outputData[destIndex]     = 0; // Red
                outputData[destIndex + 1] = 0; // Green
                outputData[destIndex + 2] = 0; // Blue
                outputData[destIndex + 3] = 0; // Alpha (fully transparent)
            }
        }
    }

    // Create a new canvas for the final result
    const resultCanvas = document.createElement('canvas');
    resultCanvas.width = width;
    resultCanvas.height = height;
    const resultCtx = resultCanvas.getContext('2d');

    // Put the processed image data onto the result canvas
    resultCtx.putImageData(outputImageData, 0, 0);

    return resultCanvas;
}