Please bookmark this page to avoid losing your image tool!

Image Vertical And Horizontal Wave 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.
/**
 * 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;
}

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 Vertical and Horizontal Wave Effect for Vegas Pro’ tool allows users to apply a wave distortion effect to images, with options to manipulate the distortion in either a vertical, horizontal, or both directions. Users can customize the amplitude, frequency, and phase of the wave, creating a dynamic visual effect suitable for enhancing video or image projects. This tool is particularly useful for video editors, graphic designers, and content creators looking to add artistic effects to their media.

Leave a Reply

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