Composite Animation


javascript generated sound owes credit to MIDI.js

The demo is an imitation of an existing demonstration

var frame = 0;
var notes = [];
var interval;
var objs = [];
var canvas;
var ctx;
var i;
var s;
var r;
var vib = [0,0,0];

window.onload = function () {
	MIDI.loadPlugin({
		soundfontUrl: "MIDIjs/soundfont/",
		instrument: "acoustic_grand_piano",
		callback: function() {
			var delay = 0; // play one note every quarter second
			var note = 50; // the MIDI note
			var velocity = 127; // how hard the note hits
			// play the note
			MIDI.setVolume(0, 127);
			MIDI.noteOn(0, note, velocity, delay);
			MIDI.noteOff(0, note, delay + 0.75);
			
			for(var i = 1; i < 37; i++){
				canvas = document.createElement("canvas");
				var s = 6 + i*0.5;
				canvas.width = s;
				canvas.height = s;
				ctx = canvas.getContext("2d");
				ctx.fillStyle = "rgb(" + i*6 + "," + (255-i*6) + ",0)";
				ctx.arc(s/2,s/2,s/2-2,0,6.3,1);
				ctx.closePath();
				ctx.fill();
				ctx.lineWidth = 2;
				ctx.stroke();
				ctx.font = (4 + s/4) + "px tahoma";
				ctx.fillStyle = "black";
				if(i < 10){
					ctx.fillText(i,3 + i/2,11 + i/1.7);
				}else{
					ctx.fillText(i,1 + i/2.8,11 + i/1.7);
				}
				//console.log(canvas);
				objs.push(canvas);
				$("#dump").append(canvas);
				notes.push(0);
			}
			

			
			ctx = $("#stage")[0].getContext("2d");
			ctx.translate(200,200);
			
			interval = setInterval(function(){
				ctx.clearRect(-200,-200,400,400);
				for(var i = 0; i < 36; i++){
					ctx.save();
					r = frame*(36-i)/1000;
					ctx.rotate(r);
					ctx.translate(i*5,0);
					ctx.drawImage(objs[i],-objs[i].width/2,-objs[i].height/2);//Math.random()*100,Math.random()*100);
					if(!notes[i] && r%6.28 < 0.3){
						notes[i] = 10;
						MIDI.setVolume(0, 127);
						MIDI.noteOn(0, 70-i, velocity, delay);
						MIDI.noteOff(0, 70-i, delay + 0.75);
						vib = [i,i,-1];
					}
					if(r%6.28 > 3){
						notes[i] = 0;
					}
					if(notes[i] > 1){
						ctx.drawImage(objs[i],-objs[i].width/2-notes[i]/2,-objs[i].height/2-notes[i]/2,objs[i].width+notes[i],objs[i].height+notes[i]);
						notes[i] --;
					}
					ctx.restore();
				}
				vib[1] += vib[2];
				vib[2] -= vib[1]/2;
				vib[1] *= 0.95;
				//vib[2] += vib[0]/5;
				ctx.beginPath();
				ctx.strokeStyle = "blue";
				ctx.lineWidth = 1;
				ctx.moveTo(0,0);
				ctx.quadraticCurveTo(5*vib[0],vib[1],200,0);
				ctx.stroke();
				frame++;
			}, 20);
		}
	});
	
	
};


`