RSS Twitter Facebook

2014/09/02 (2014年09月 のアーカイブ)

映像効果のvjプラグイン仕様を考えてみた

シェア


LiveBeatsのビジュアライザーを分離してプラグイン化しました。デフォルトで波形/スペクトラム表示プラグインとマトリックス風エフェクトを読み込むようになっていますが、基本的にはただのJSファイルで描画部分の関数だけを書いたものです。これをカスタムしてLiveBeatsにドロップすると読み込めます。

DOMエレメントを作って描画する部分だけの関数になっていますので、ホストアプリ側で必要な場所にエレメントを貼り付ける構造です。何か共通規格的なものにできれば良いんですが。


//-- 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"},
	};
}

vjプラグイン仕様
ちょっと色々やりすぎてMBAだと厳しくなってきました。たまにひっかかる。

Posted by g200kg : 2014/09/02 03:39:52