Nonvoluntary Professional Mangling
Get unlimited public & private packages + team-based management with npm Teams.Learn more »

fluctus

1.0.2 • Public • Published

A Javascript package for creating beautiful wave forms.

Introduction

This package provides the ability to create beautiful waves with the use of the HTML canvas element. Fluctus uses vanilla JS and is super lightweight.

Quick Start

Install through npm

npm install fluctus

Then require or import Fluctus in:

import fluctus from 'fluctus'

Install through repo files

Fluctus Requires 2 things:

  1. A Canvas element <canvas class="fluctus" id="wave1"></canvas>
  2. The Javascript <script src="/js/fluctus.js"></script>

Usage

Creating a new wave is as simple as passing in 6 arguments into the Fluctus method:

fluctus(ID,Color, Zoom, Delay, Opacity, Height); 

Parameters

  1. ID

    The ID of the canvas element the wave should be drawn on.

  2. Color

    The fill color (HEX) of the wave.

  3. Zoom

    The Zoom value should be anywhere from 0 to 2.5 to produce desirable results. The lower the zoom value, the more waves the Fluctus will produce.

  4. Delay

    The Delay value shifts the wave left and right. Lower values shift the wave to the right while higher values shift the wave to the left. Nominal values are 0 through 1000.

  5. Opacity

    The opacity parameter sets the alpha of the wave. A value of 1 would be completely opaque while a value of 0 would be completely transparant.

  6. Height

    The Height parameter manipulates the height of the wave. This is useful for "stacking" waves. The default height is 80.

Mess around with the Zoom, Delay, Opacity, and Height values to get the desired effect.

Examples

Single Wave

<canvas id="wave"></canvas>
fluctus("wave", "#66a6ff", 1.2, 0, 1, 80);

Multiple Stacked Waves

<canvas id="wave1"></canvas>
<canvas id="wave2"></canvas>
<canvas id="wave3"></canvas>
fluctus("wave1", "#66a6ff", 1.2, 350, 1, 80);
fluctus("wave2", "#89DDFF", 1.2, 0, 0.5, 80);
fluctus("wave3", "#89f7fe", 0.9, 450, 0.5, 150);

Install

npm i fluctus

DownloadsWeekly Downloads

6

Version

1.0.2

License

ISC

Last publish

Collaborators

  • avatar