sine-waves.js

Generator multiple configurable sine waves

Basic Usage

var waves = new SineWaves({

  el: document.getElementById('waves'),

  speed: 8,

  ease: 'SineInOut',

  waveWidth: '95%',

  waves: [
    {
      timeModifier: 1,
      lineWidth: 3,
      amplitude: 150,
      wavelength: 200,
      segmentLength: 20,
      strokeStyle: 'rgba(255, 255, 255, 0.5)'
    },
    {
      timeModifier: 1,
      lineWidth: 2,
      amplitude: 150,
      wavelength: 100,
      strokeStyle: 'rgba(255, 255, 255, 0.3)'
    }
  ],

  // Perform any additional initializations here
  initialize: function (){

  },

  // This function is called whenver the window is resized
  resizeEvent: function() {

    // Here is an example on how to create a gradient stroke
    var gradient = this.ctx.createLinearGradient(0, 0, this.width, 0);
    gradient.addColorStop(0,"rgba(0, 0, 0, 0)");
    gradient.addColorStop(0.5,"rgba(255, 255, 255, 0.5)");
    gradient.addColorStop(1,"rgba(0, 0, 0, 0)");

    var index = -1;
    var length = this.waves.length;
      while(++index < length){
      this.waves[index].strokeStyle = gradient;
    }
  }
});

Easing

The default easing is `Linear` which means the waves are not modified from left to right. Additionally you can specify one of the following easing functions to the waves to modify the amplitude of each wave throughout the width of the canvas.

`Linear`

`SineIn`

`SineOut`

`SineInOut`

Alternatively you can pass a function directly to the ease option when creating a SineWaves instance.

  // Example of
  linear growth
  ease: function(percent, amplitude) {
    return amplitude * percent;
  },

Wave Types

In addition to the default Sine wave can also generate, `Square`, `Sawtooth`, and `Triangle` waves.

  waves: [
    {
      type: 'Square',
      segmentLength: 1 // The smaller the smoother
    },
    {
      type: 'Sawtooth',
      segmentLength: 1
    },
    {
      type: 'Triangle',
      segmentLength: 1
    }
  ],

SineWaves

sine-waves.js

Basic Usage

Easing

Wave Types

Examples on Codepen

License

Release Histort