ok

1 files changed, 202 insertions, 0 deletions

diff --git a/public/js/grid.js b/public/js/grid.js
new file mode 100644
index 0000000..e23c0e6
--- /dev/null
+++ b/public/js/grid.js
@@ -0,0 +1,202 @@
+function Grid (app){
+  var base = this;
+
+  function setNote (data) {
+    console.log(data.step, data.channel, data.state, pattern[data.step]);
+    pattern[data.step][data.channel] = data.state;
+    drawNote(data.step, data.channel);
+  };
+  base.setBeat = function(beatId) {
+    beat = beatId;
+  };
+  base.setTempo = function(tempo) {
+    tick = tempo;
+  }
+  base.toggle = toggle;
+  
+  var tog = 0;
+  var playing = false;
+  var playingInterval = false;
+  var tick = 125;
+  var pattern = undefined;
+  var channels = [];
+  var channelsOn = [];
+  var activecoloron = 'rgb(255,255,255)';
+  var activecoloroff = 'rgb(202,202,202)';
+  var inactivecoloron = 'rgb(152,152,152)';
+  var inactivecoloroff = 'rgb(28,28,28)';
+  var gridSize = Math.floor(600/16);
+  var lastStep = 16;
+  var channelCount = 8;
+  var beat = lastStep-1;
+  var inset = 5;
+
+	var canvas = document.getElementById('canvas'); //.offset();
+	var ctx = canvas.getContext('2d');
+  init();
+  
+  function init(){
+    bind();
+    load();
+  }
+
+  function bind(){
+    app.receive("event-grid", loadGrid);
+    app.receive("event-note", setNote);
+    
+  	$('#start').click(start);
+  	$('#stop').click(stop);
+  	$('#tempo').change(function() {
+  	  resetTempo( document.getElementById('tempo').value )
+  	});
+  	$('#canvas').click(function(e){
+      var x = e.pageX-canvas.offsetLeft-10;
+      var y = e.pageY-canvas.offsetTop-10;
+
+	  	x = Math.floor(x / gridSize);
+    	y = Math.floor(y / gridSize);
+
+    	toggleNote(x, y);
+    	
+    	app.send("event-note", {
+    	  'step': x,
+    	  'channel': y,
+    	  'state': pattern[x][y]
+    	});
+    });
+  }
+  
+  function loadGrid(data){
+    pattern = data.pattern;
+    tempo = data.tempo;
+    stop();
+    start();
+  }
+  
+  function load(){
+  	if (playing) {
+  		playingInterval = setInterval(make, tick);
+  	}
+  	makeGrid();
+  }
+
+  function toggle(){
+    playing ? stop() : start();
+  }
+
+  function start() {
+  	reset();
+  	playing = true;
+  	load();
+  	document.body.bgColor = "#000000";
+  	for (var i = 0; i < channelCount; i++)	{
+  		channels[i] = document.getElementById('sound' + i);
+  		channelsOn[i] = false;
+  	}
+  	for (var i = 0; i < channelCount; i++) {
+  		channels[i+8] = document.getElementById('sound' + i + 'a');
+  	}
+  }
+  function stop() {
+  	playing = false;
+  	document.body.bgColor = "#444444";
+  	for (var i = 0; i < channelCount; i++)	{
+  		document.getElementById('sound' + i).pause();
+  		document.getElementById('sound' + i + 'a').pause();
+  	}
+  	reset();
+  }
+  function reset() {
+  	clearInterval(playingInterval);
+  	ctx.clearRect(0,0, canvas.width, canvas.height);
+  	beat = lastStep-1;
+  }
+  function resetTempo(tempo) {
+  	if (tempo <= 1 || tempo >= 800)	{
+  		tempo = 120;
+  	}
+  	tick = (1000 / (tempo / 60))/4;
+  	$("#alertDisp").html( "Set tempo to " + tempo );
+  	if (playing) {
+  		clearInterval(playingInterval);
+  		playingInterval = setInterval(make, tick);
+  	}
+  }
+
+  function make() {
+  	beat += 1;
+  	if (beat == lastStep)	{
+  		makeColumn(beat-1,activecoloroff,inactivecoloroff,false);
+  		beat = 0;
+  		makeColumn(beat,activecoloron,inactivecoloron,true);
+  	}
+  	else {
+  		makeColumn(beat,activecoloron,inactivecoloron,true);
+  		makeColumn(beat-1,activecoloroff,inactivecoloroff,false);
+  	}
+  }
+  function makeColumn(x,active,inactive,goplaysample) {
+  	for (var y = 0; y < channelCount; y += 1) {
+  		if (pattern[x][y] == 1)	{
+  			if (goplaysample === true)	{
+  //				ctx.fillStyle = active;
+  				ctx.fillStyle = random_color();
+  				var tmpAudio;
+  				if (channelsOn[y] == true)	{
+  					channelsOn[y] = false;
+  					tmpAudio = channels[y+8];
+  				}
+  				else	{
+  					tmpAudio = channels[y];
+  				}
+  				tmpAudio.currentTime = 0;
+  				if (tmpAudio.paused)
+  					tmpAudio.play();
+  			}
+  			else	{
+  				ctx.fillStyle = active;
+  			}
+  			ctx.fillRect((x*gridSize) + inset, (y*gridSize) + inset, gridSize - 2*inset, gridSize - 2*inset);
+  		}
+  		else	{
+  			ctx.fillStyle = inactive;
+  		}
+  	}
+  }
+  function makeGrid() {
+  	for (var x = 0; x < lastStep; x += 1)	{
+  		for (var y = 0; y < channelCount; y += 1)	{
+  			if (pattern && pattern[x][y] == 1)	{
+  				ctx.fillStyle = activecoloroff;
+  			}
+  			else {
+  				ctx.fillStyle = inactivecoloroff;
+  			}
+  			ctx.fillRect((x*gridSize) + inset, (y*gridSize) + inset, gridSize - 2*inset, gridSize - 2*inset);
+  		}
+  	}
+  }
+  function drawNote(x,y) {
+  	if (pattern[x][y] == 1) {
+  		ctx.fillStyle = activecoloroff;
+    } else {
+  		ctx.fillStyle = inactivecoloroff;
+    }
+		ctx.fillRect((x*gridSize) + inset, (y*gridSize) + inset, gridSize - 2*inset, gridSize - 2*inset);
+  }
+  function toggleNote(x,y) {
+  	if (pattern[x][y] == 1) {
+  		pattern[x][y] = 0;
+  	}
+    else {
+  		pattern[x][y] = 1;
+  	}
+  	drawNote(x,y);
+  }
+
+  function random_color() {
+  	var rint = Math.round(0xffffff * Math.random());
+  	return 'rgb(' + (rint >> 16) + ',' + (rint >> 8 & 255) + ',' + (rint & 255) + ')';
+  }
+
+};