Image Vertical And Horizontal Wave Effect For Vegas Pro

/**
 * Applies a vertical and/or horizontal wave effect to an image.
 * This function manipulates the pixels of an image to create a sine wave distortion.
 *
 * @param {HTMLImageElement} originalImg The original image element to process.
 * @param {string} waveType The type of wave to apply. Can be 'horizontal', 'vertical', or 'both'. Default is 'both'.
 * @param {number} amplitude The amplitude of the wave in pixels. This controls the "height" of the wave. Default is 10.
 * @param {number} frequency The number of full wave cycles across the image's dimension. Default is 4.
 * @param {number} phase The starting phase of the wave in radians. Can be used to animate the wave. Default is 0.
 * @returns {HTMLCanvasElement} A new canvas element with the wave effect applied.
 */
function processImage(originalImg, waveType = 'both', amplitude = 10, frequency = 4, phase = 0) {
    // Ensure parameters are numbers
    const numAmplitude = Number(amplitude);
    const numFrequency = Number(frequency);
    const numPhase = Number(phase);

    const width = originalImg.naturalWidth;
    const height = originalImg.naturalHeight;

    // Create a destination canvas
    const canvas = document.createElement('canvas');
    canvas.width = width;
    canvas.height = height;
    const ctx = canvas.getContext('2d');

    // Create a temporary source canvas to read pixel data from the original image
    const tempCanvas = document.createElement('canvas');
    tempCanvas.width = width;
    tempCanvas.height = height;
    const tempCtx = tempCanvas.getContext('2d', { willReadFrequently: true });
    tempCtx.drawImage(originalImg, 0, 0, width, height);

    // Get the pixel data from the source and create an empty data array for the destination
    const sourceData = tempCtx.getImageData(0, 0, width, height);
    const destData = ctx.createImageData(width, height);
    
    const sourcePixels = sourceData.data;
    const destPixels = destData.data;

    const lowerCaseWaveType = waveType.toLowerCase();

    // Iterate over each pixel in the destination canvas
    for (let y = 0; y < height; y++) {
        for (let x = 0; x < width; x++) {

            let x_offset = 0;
            let y_offset = 0;

            // Calculate vertical wave (displaces pixels horizontally)
            if (lowerCaseWaveType === 'vertical' || lowerCaseWaveType === 'both') {
                x_offset = numAmplitude * Math.sin((y / height) * numFrequency * 2 * Math.PI + numPhase);
            }

            // Calculate horizontal wave (displaces pixels vertically)
            if (lowerCaseWaveType === 'horizontal' || lowerCaseWaveType === 'both') {
                y_offset = numAmplitude * Math.sin((x / width) * numFrequency * 2 * Math.PI + numPhase);
            }
            
            // Determine the source pixel coordinates using reverse mapping
            const sx = Math.round(x - x_offset);
            const sy = Math.round(y - y_offset);

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

            // Check if the source coordinates are within the image bounds
            if (sx >= 0 && sx < width && sy >= 0 && sy < height) {
                // Get the index for the source pixel
                const sourceIndex = (sy * width + sx) * 4;

                // Copy the RGBA values from the source pixel to the destination pixel
                destPixels[destIndex] = sourcePixels[sourceIndex];
                destPixels[destIndex + 1] = sourcePixels[sourceIndex + 1];
                destPixels[destIndex + 2] = sourcePixels[sourceIndex + 2];
                destPixels[destIndex + 3] = sourcePixels[sourceIndex + 3];
            } else {
                // If out of bounds, make the pixel transparent
                destPixels[destIndex] = 0;
                destPixels[destIndex + 1] = 0;
                destPixels[destIndex + 2] = 0;
                destPixels[destIndex + 3] = 0;
            }
        }
    }

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

    return canvas;
}