Image Wave Vertical And Horizontal Effect For Vegas Pro

async function processImage(originalImg, amplitude = 20, frequency = 0.05, direction = 'horizontal') {
  // Create a canvas element to perform the operations and for the output
  const canvas = document.createElement('canvas');
  // Use { willReadFrequently: true } as a performance hint for browsers
  const ctx = canvas.getContext('2d', {
    willReadFrequently: true
  });

  // Ensure the provided Image object has been fully loaded
  if (!originalImg.complete || originalImg.naturalWidth === 0) {
    try {
      await new Promise((resolve, reject) => {
        // Resolve the promise once the image is loaded
        originalImg.onload = resolve;
        // Reject the promise if the image fails to load
        originalImg.onerror = reject;
      });
    } catch (error) {
        console.error("Image failed to load:", error);
        // Draw a placeholder or return an empty canvas on error
        canvas.width = 100;
        canvas.height = 30;
        ctx.fillText("Image load error", 10, 20);
        return canvas;
    }
  }

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

  // Set the canvas dimensions to match the original image
  canvas.width = width;
  canvas.height = height;

  // Step 1: Draw the original image onto the canvas to access its pixel data
  ctx.drawImage(originalImg, 0, 0);
  const sourceImageData = ctx.getImageData(0, 0, width, height);
  const sourceData = sourceImageData.data;

  // Step 2: Create a new ImageData object to store the manipulated pixels
  const destImageData = ctx.createImageData(width, height);
  const destData = destImageData.data;

  // Normalize the direction parameter to be case-insensitive
  const waveDirection = String(direction).toLowerCase();

  // Step 3: Iterate through each pixel of the destination image
  for (let y = 0; y < height; y++) {
    for (let x = 0; x < width; x++) {
      let sx = x;
      let sy = y;
      let displacement;

      // Calculate the displacement using a sine wave function
      if (waveDirection === 'vertical') {
        // Vertical waves are displaced along the y-axis, based on the x-coordinate
        displacement = amplitude * Math.sin(x * frequency);
        sy = y + displacement;
      } else {
        // Horizontal waves (default) are displaced along the x-axis, based on the y-coordinate
        displacement = amplitude * Math.sin(y * frequency);
        sx = x + displacement;
      }

      // Round the source coordinates to the nearest whole pixel
      const sourceX = Math.round(sx);
      const sourceY = Math.round(sy);

      // Calculate the array index for the current destination pixel (R, G, B, A)
      const destIndex = (y * width + x) * 4;

      // Check if the calculated source pixel is within the image bounds
      if (sourceX >= 0 && sourceX < width && sourceY >= 0 && sourceY < height) {
        // If it is, copy the pixel data from the source image
        const sourceIndex = (sourceY * width + sourceX) * 4;
        destData[destIndex] = sourceData[sourceIndex]; // Red channel
        destData[destIndex + 1] = sourceData[sourceIndex + 1]; // Green channel
        destData[destIndex + 2] = sourceData[sourceIndex + 2]; // Blue channel
        destData[destIndex + 3] = sourceData[sourceIndex + 3]; // Alpha channel
      } else {
        // If the source pixel is out of bounds, make the destination pixel transparent
        destData[destIndex] = 0;
        destData[destIndex + 1] = 0;
        destData[destIndex + 2] = 0;
        destData[destIndex + 3] = 0; // Alpha = 0 (fully transparent)
      }
    }
  }

  // Step 4: Write the manipulated pixel data back to the canvas
  ctx.putImageData(destImageData, 0, 0);

  // Return the resulting canvas element
  return canvas;
}