sine-waves.js

Generate multiple configurable sine waves using a canvas element

Bower

Original:

bower install sine-waves --save

CJ Modified:

bower install https://github.com/cjies/sine-waves.git --save

Basic Usage

var waves = new SineWaves({
  // Canvas Element
  el: document.getElementById('waves'),

  // General speed of entire wave system
  speed: 8,
  
  // Acceleration
  accerate: 1,

  // How many degress should we rotate all of the waves
  rotate: 0,

  // Ease function from left to right
  ease: 'Linear',

  // Specific how much the width of the canvas the waves should be
  // This can either be a number or a percent
  waveWidth: '95%'

  // An array of wave options
  waves: [
    {
      timeModifier: 1,   // This is multiplied againse `speed`
      lineWidth: 3,      // Stroke width
      amplitude: 150,    // How tall is the wave
      wavelength: 200,   // How long is the wave
      segmentLength: 20, // How smooth should the line be
      strokeStyle: 'rgba(255, 255, 255, 0.5)', // Stroke color and opacity
      fillStyle: 'rgba(255, 255, 255, 0.5)' || function, // Fill Color or gradient function(with Bound)
      fillInverse: false, // Fill Direction(true is top -> center)
      type: 'sine',       // Wave type
      yAxis: this.height * 0.5 // Custom Y Axis 
    },
    {
      timeModifier: 1,
      lineWidth: 2,
      amplitude: 150,
      wavelength: 100,
      strokeStyle: '',
      fillInverse: false,
      fillStyle: function(el, bound) {
      	var gradient = this.ctx.createLinearGradient(bound.x0, bound.y0, bound.x1, bound.y1);
        gradient.addColorStop(0, 'rgba(255, 255, 255, 0.2)');
        gradient.addColorStop(0.45, 'rgba(255, 255, 255, 0)');
        return gradient;
      },
      yAxis: function() {
        return this.height * 0.45;
      }
      
    }
  ],

  // 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,
    }
  ],

Custom Waves

You can also specify your own wave function by supplying a function to the type parameter. This function has two arguments: x and waves. x is the location of a point on the x axis and waves a helper object with the following functions in it:

waves.sine(x)
waves.sign(x)
waves.square(x)
waves.sawtooth(x)
waves.triangle(x)

  waves: [
    {
      timeModifier: 1,
      lineWidth: 2,
      amplitude: 150,
      wavelength: 200,
      segmentLength: 10,
      yAxis: this.height * 0.5,
      strokeStyle: 'rgba(255, 255, 255, 0.5)',
      fillInverse: false,
      fillStyle: '' || function(el, bound) {
      	// Maybe is gradient-style
      }
      type: function(x, waves) {
        return Math.sin(x) * waves.sawtooth(x); // Combine two together
      }
    },
    // Additional waves
  ],

Examples on Codepen

Mobile

Canvas is supported on most devices however the due limited processing power complex animations may appear choppy. You can either create simplier animations for mobile or disable the animation by setting the running property to false. Running the update() method will update the animation one frame while paused.

var waves = new SineWaves({
  // Canvas Element
  el: document.getElementById('waves'),

  running: false,

  waves: [{}]
});

// or
waves.running = false;

// And then update the animation one frame
waves.update();

TODO

Touch Interaction
Acceleration Control

License

SineWaves is open-sourced software licensed under the MIT license

Release History

v0.3.0-modified - Added yAxis, fillStyle, fillInverse, and bug fixes (CJ 2015/11/03)
v0.3.0 - Refactor, added custom waves, and bug fixes
v0.2.0-alpha - Added rotate, ease, wavesWidth and wave types options
v0.1.0-alpha - Initial Release

cjies / sine-waves