Minimalist Canvas Waves In JavaScript – wavy.js

Preview:

Description:

A super tiny JavaScript library to create animated waves on a canvas element similar to the sound waveform.

How to use it:

1. Create an HTML5 canvas element on the page.

<canvas id="canvas"></canvas>

2. Load the JavaScript file wavy.min.js right before the closing body tag.

<script src="wavy.min.js"></script>

3. Create a new wavy instance.

let myWave = new wavy('canvas', {
    // options here
});

4. Render & animate the wave.

// 60 FPS
myWave.animate60();
// 30 FPS
myWave.animate30();

5. Config the animate wave with the following parameters:

let myWave = new wavy('canvas', {
    width: window.innerWidth,
    height: window.innerHeight,
    phase: 360,
    color: "blue",
    radius: 1,
    origin: { x: 0, y: this.c.height / 2 },
    amplitude: this.c.height / 2.5,
    speed: 10,
    requency: 1,
    wavelength: this.c.width
}),