Please bookmark this page to avoid losing your image tool!

Image Wave Vertical And Horizontal Effect For Vegas Pro

(Free & Supports Bulk Upload)

Drag & drop your images here or

The result will appear here...
You can edit the below JavaScript code to customize the image tool.
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;
}

Free Image Tool Creator

Can't find the image tool you're looking for?
Create one based on your own needs now!

Description

The Image Wave Vertical and Horizontal Effect for Vegas Pro is a tool that allows users to apply wave distortion effects to images in either a vertical or horizontal direction. By adjusting parameters such as amplitude and frequency, users can create visually striking effects that can enhance videos or images. This tool can be particularly useful for graphic designers, video editors, and content creators looking to add dynamic visual elements to their projects.

Leave a Reply

Your email address will not be published. Required fields are marked *