Minimalist Cavas Waves In JavaScript – wavy.js

Category: Animation , Javascript | April 13, 2020
Author:chtushar
Views Total:1,382 views
Official Page:Go to website
Last Update:April 13, 2020
License:MIT

Preview:

Minimalist Cavas Waves In JavaScript – wavy.js

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
}),

You Might Be Interested In:


Leave a Reply