visualizerjs

Canvas Visualization (library/class/whathaveyou)

VisualizerJS

Canvas visualization library, was originally part of my Soundcloud radio but decided to roll it out as a separate library.

###Requirements

  1. Node 0.10.18

###Installing

Clone this repo and install the dependencies. Then build with Browserify

npm install
npm run minify

Usage:

var viz = new Visualizer();
viz.init({dataStream: yourdatastream,container: 'cont'})
  .barGraph({bgColor:'#000000',color:'#235478'})
  .start();

API:

funcoptions
initcontainer: id for your canvas container
datastream: array of the data to be visualized
barGraphbgColor: background color
color: foreground color
width: bar width
start

###Adding your own visualization functions

var drawPeaks = function($ctx,$dataStream){
// this exposes the 2d context and datastream
// to your function
  var step = 3;
  $ctx.fillStyle = '#FFFFFF';
  $ctx.fillRect(0,0,$ctx.canvas.width,$ctx.canvas.height);
  $ctx.fillStyle = '#000000';
  for(var i = 0;i<$dataStream.length;i++){
    $ctx.fillRect(i*step,Math.floor(64 - 64*($dataStream[i]/256)),step,2);
  }
};
viz.addEffect(drawPeaks);

###TODO

  1. Write some tests maybe
  2. Get more graphs and visualizations built in.