//window.addEventListener('load', init2, false);


window.requestAnimationFrame=(function(){
    return window.requestAnimationFrame || 
        window.webkitRequestAnimationFrame || 
        window.mozRequestAnimationFrame || 
        function(callback){window.setTimeout(callback,17);};
})();
    
		    var QUALITY = 4,
			//WIDTH = Math.floor(window.innerWidth / QUALITY), HEIGHT = Math.floor(window.innerHeight / QUALITY), SIZE = WIDTH * HEIGHT,
//WIDTH = Math.floor(100 / QUALITY), HEIGHT = Math.floor(100 / QUALITY), SIZE = WIDTH * HEIGHT,
//WIDTH = Math.floor(window.innerWidth), HEIGHT = Math.floor(window.innerHeight), SIZE = WIDTH * HEIGHT,
			WIDTH = Math.floor(window.innerWidth / QUALITY), HEIGHT = Math.floor(window.innerHeight / QUALITY), SIZE = WIDTH * HEIGHT,
		    context, image, data,
			buffer1, buffer2, tempbuffer,

			isUserInteracting, pointers;

		  init2();
		   loop();
		   // setInterval(loop, 1000 / 60);

		    function init2() {

		        var container, canvas2;
/**/
		        container = document.getElementById('container2');//container2

		        canvas2 = document.createElement("canvas");
			     canvas2.id = "midisplay";
		        canvas2.width = WIDTH;
		        canvas2.height = HEIGHT;
		        canvas2.style.width =   100 +"%"//+"%";// window.innerWidth + "px";window.innerWidth + "%";// 100+"%";//
		       canvas2.style.height = 100+ "%" //+"%"; //window.innerHeight + "%";//100+"%"; //window.innerHeight + "px";
		      
	
			     
			
			container.appendChild(canvas2);
		      

		       context = canvas2.getContext("2d");
		       
		       
		        context.fillStyle = "#0A1B1D"; /*#0A1B1D*/
		        context.fillRect(0, 0, WIDTH, HEIGHT);
		        

		        image = context.getImageData(0, 0, WIDTH, HEIGHT);
		        data = image.data;

		        buffer1 = [];
		        buffer2 = [];

		        for (var i = 0; i < SIZE; i++) {

		            buffer1[i] = 0;
		            buffer2[i] = i > WIDTH && i < SIZE - WIDTH && Math.random() > 0.995 ? 255 : 0;
		        }

		       // document.addEventListener('mousedown', onDocumentMouseDown, false);
		      //  document.addEventListener('mousemove', onDocumentMouseMove, false);
		       // document.addEventListener('mouseup', onDocumentMouseUp, false);
		       // document.addEventListener('mouseout', onDocumentMouseOut, false);

		        document.addEventListener('touchstart', onDocumentTouchStart, false);
		        document.addEventListener('touchmove', onDocumentTouchMove, false);
		        document.addEventListener('touchend', onDocumentTouchEnd, false);

		        document.addEventListener('keyup', onDocumentKeyUp, false);
		    }

		    // Event Handlers
/*
		    function onDocumentMouseDown(event) {

		        event.preventDefault();

		        isUserInteracting = true;

		        pointers = [[event.clientX / QUALITY, event.clientY / QUALITY]];
		    }

		    function onDocumentMouseMove(event) {

		        pointers = [[event.clientX / QUALITY, event.clientY / QUALITY]];
		    }

		    function onDocumentMouseUp(event) {

		        isUserInteracting = false;

		    }

		    function onDocumentMouseOut(event) {

		        isUserInteracting = false;

		    }
		    
		    */
/**/
		    function onDocumentTouchStart(event) {

		        isUserInteracting = true;

		        event.preventDefault();

		        pointers = [];

		        for (var i = 0; i < event.touches.length; i++) {

		            pointers.push([event.touches[i].pageX / QUALITY, event.touches[i].pageY / QUALITY]);

		        }

		    }

		    function onDocumentTouchMove(event) {

		        event.preventDefault();

		        pointers = [];

		        for (var i = 0; i < event.touches.length; i++) {

		            pointers.push([event.touches[i].pageX / QUALITY, event.touches[i].pageY / QUALITY]);

		        }

		    }

		    function onDocumentTouchEnd(event) {

		        event.preventDefault();

		        isUserInteracting = false;

		    }

		    function onDocumentKeyUp(e) {

		        emit(Math.random() * WIDTH, Math.random() * HEIGHT);

		    }

		    //

		    function emit(x, y) {

		        buffer1[Math.floor(x) + (Math.floor(y) * WIDTH)] = 255;

		    }

		    function loop() {
		    
		     requestAnimationFrame(loop);

		        if (isUserInteracting) {

		            for (var i = 0; i < pointers.length; i++) {

		                emit(pointers[i][0], pointers[i][1]);

		            }
		        }

		        var pixel;
		        var iMax = (WIDTH * HEIGHT) - WIDTH;

		        for (var i = WIDTH; i < iMax; i++) {

		            pixel = ((buffer1[i - 1] + buffer1[i + 1] + buffer1[i - WIDTH] + buffer1[i + WIDTH]) >> 1) - buffer2[i];
		            pixel -= pixel >> 20;

		            buffer2[i] = pixel;

		            pixel = pixel > 255 ? 255 : pixel < 0 ? 0 : pixel;

		            data[(i * 4) + 1] = pixel;
		            data[((i + 1) * 4) + 2] = pixel;

		        }

		        tempbuffer = buffer1;
		        buffer1 = buffer2;
		        buffer2 = tempbuffer;

		        context.putImageData(image, 0, 0);

		    }
		


