window.requestAnimFrame = (function(callback) {
return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||
function(callback) {
    window.setTimeout(callback, 1000 / 60);
        };
})();

var c = document.getElementById('canv');
var $ = c.getContext('2d');

var s = 80; //grid square size
var mv = 20; //moving areas
var sp = 5; //move speed
var clm = 24; //columns
var rw = 14; //rows
var x = []; //x array
var y = []; //y array
var X = []; //starting X array
var Y = []; //starting Y array

//color update var not used in the demo but available to be activated by uncommenting. See below jolt() for further details.
//var ŭ = 0;

for(var i = 0; i < clm * rw; i ++){
    x[i] = ((i % clm) - 0.5) * s ;
    y[i] = (Math.floor(i / clm) - 0.5) * s;
    X[i] = x[i];
    Y[i] = y[i];
}
var t = 0;

function jolt(){
  
    $.fillRect(0,0,1380,980);
  
//color update to be used if changing hues are activated.
//  ŭ-=.5; 
  
    for(var i = 0; i < clm * rw; i ++){
        if(i % clm != clm - 1 && i < clm * (rw - 1) - 1){
          
//uncomment the below strokeStyle if you want a solid background with only line hue changes. (comment out the active strokStyle below && uncomment the update var (ŭ) in both places above)
          
 //  $.strokeStyle = "hsla(" + (ŭ % 360) + ",100%,50%,1)";
          
//if you want a hue changing background with solid lines then uncomment the below fillStyle. (comment out the active one beneath it  && uncomment the update var (ŭ) in both places above)
          
// $.fillStyle = "hsla(" + (ŭ % 360) + ",100%,50%,1)";
 
//active styles
$.fillStyle = "hsla(0,0%,0%,1)";
$.strokeStyle = "hsla(255,255%,255%,1)";
            $.lineWidth = 5;
            $.beginPath();
            $.moveTo(x[i], y[i]);
            $.lineTo(x[i + 1], y[i + 1]);
            $.lineTo(x[i + clm + 1], y[i + clm + 1]);
            $.lineTo(x[i + clm], y[i + clm]);
            $.closePath();
            $.stroke();
            $.fill();
        }
    }
    for(var i = 0; i < rw * clm; i ++){
        if((x[i] < X[i] + mv) 
           && (x[i] > X[i] - mv) 
           && (y[i] < Y[i] + mv) 
           && (y[i] > Y[i] - mv)){
       x[i] = x[i] + Math.floor(Math.random() * (sp * 2 + 1)) - sp;
       y[i] = y[i] + Math.floor(Math.random() * (sp * 2 + 1)) - sp;
        }else if(x[i] >= X[i] + mv){
            x[i] = x[i] - sp;
        }else if(x[i] <= X[i] - mv){
            x[i] = x[i] + sp;
        }else if(y[i] >= Y[i] + mv){
            y[i] = y[i] - sp;
        }else if(y[i] <= Y[i] + mv){
            y[i] = y[i] + sp;
        }
    }
  //controls time of electric shake> when counter equals 0, it will reset for 5s then start again.
    if(t % 1350 == 0){
        setTimeout('jolt()', 5);
        t ++;
    }else{
        setTimeout('jolt()', 5);
        t ++;
    }
}
 window.requestAnimFrame(jolt);