Overview

vj_plugin is a visualizer plugin module spec that is used in LiveBeats performance application.

This visualizer plugin will be loaded to LiveBeats with file-drop, and automatically new visual effect plane is added.

plugin file is a .js file and the filename should start with 'vj_'. In this file, the function should be defined that has same name as filename (except extension).
For example, if the plugin name is "test", filename is "vj_test.js" and the function "vj_test()" should be defined.

LiveBeats is here : LiveBeats

Sample code

//-- vj_simplewave.js --
vj_simplewave=function(param) {
	this.w=param.w;
	this.h=param.h;
	this.n=param.n;
	this.wavedat=param.wavedat;
	this.freqdat=param.freqdat;
	this.elem=document.createElement("canvas");
	this.elem.width=this.w;
	this.elem.height=this.h;
	this.ctx=this.elem.getContext("2d");
	this.ctx.lineJoin="round";
	this.anim=function(timestamp) {
		this.ctx.strokeStyle=this.param.col.value;
		this.ctx.lineWidth=this.param.line.value;
		this.ctx.clearRect(0,0,this.w,this.h);
		this.ctx.beginPath();
		this.ctx.moveTo(0,this.h/2-(this.wavedat[0]-128)*this.h/512);
		for(var i=1;i<this.n;i+=2) {
			var x=this.w*i/this.n;
			var y=this.h/2-(this.wavedat[i]-128)*this.h/512;
			this.ctx.lineTo(x,y);
		}
		this.ctx.stroke();
	};
	this.param={
	"line":{"value":3,"type":"double","min":1,"max":10},
	"col":{"value":"#f00","type":"string"},
	};
}

Plugin Behavior:

Host app pass a object to fuction that include environment. The invokation will be following:

	new vj_simplewave({"w":1024,"h":768,"wavedat":wavdat,"freqdat":freqdat})

Arguments are:

"w"	Horizontal resolution. Plugin should make DOM-element with this resolution.
"h"	Vertical resolution. Plugin should make DOM-element width this resolution.
"wavedat"	Uint8Array of wave-data. The value 128 indicate center, and the range is 0-255. This is match to Web Audio API AnalyserNode's getByteTimeDomationData().
"freqdat"	Uint8Array of spectrum data. The value is appropreately scaled to the range 0-255. This is match to Web Audio data AnalyserNode's getByteFrequencyData().

Function properties

this.elem	Drawing DOM-element, e.g. canvas. Plugin should newly make element that has the size "w"/"h" and store to "this.elem". Host app will appropriately place this element to view area.
this.anim	Animation function. Host app will invoke this function periodically with current-time argument. Because this invocation is not so accurate time managed, plugin should manage the animation speed if needed. This invocation is assumed with requestAnimationFrame().
this.param	The list of controllable parameters. Host app will change these parameters for dynamic visual effects. For example, LiveBeats can do parameter change by command input. Each param has sub-properties. "type" is a parameter type that means "double" for contiguous value, "int" for integer value and "string" for string. "value" is a initial value, "min" is typical minimum value and "max" is typical max value. Additionally even these properties are plugin specific, host app may add more properties that can make effect by CSS. For example LiveBeats adds "a":alpha, "w":width, "h":height, "x":x-pos, "y":y-pos, "z":zoom factor, "blur":blur effect and "rot":rotation.

//-- vj_simplewave.js --
vj_simplewave=function(param) {
	this.w=param.w;
	this.h=param.h;
	this.n=param.n;
	this.wavedat=param.wavedat;
	this.freqdat=param.freqdat;
	this.elem=document.createElement("canvas");
	this.elem.width=this.w;
	this.elem.height=this.h;
	this.ctx=this.elem.getContext("2d");
	this.ctx.lineJoin="round";
	this.anim=function(timestamp) {
		this.ctx.strokeStyle=this.param.col.value;
		this.ctx.lineWidth=this.param.line.value;
		this.ctx.clearRect(0,0,this.w,this.h);
		this.ctx.beginPath();
		this.ctx.moveTo(0,this.h/2-(this.wavedat[0]-128)*this.h/512);
		for(var i=1;i<this.n;i+=2) {
			var x=this.w*i/this.n;
			var y=this.h/2-(this.wavedat[i]-128)*this.h/512;
			this.ctx.lineTo(x,y);
		}
		this.ctx.stroke();
	};
	this.param={
	"line":{"value":3,"type":"double","min":1,"max":10},
	"col":{"value":"#f00","type":"string"},
	};
}

	new vj_simplewave({"w":1024,"h":768,"wavedat":wavdat,"freqdat":freqdat})