$( document ).ready(function() {
  
  var space = document.getElementById("surface");
  var surface = space.getContext("2d");
  surface.scale(1,1);
  
  //Grid With and Height and Size of DIV pixel
  var w=128;
  var h=128;
  var vmax = 128;
  var hmax = 64;
  var vnoise = 8;
  var size = 4;
  var val = 0;
  var time = 0;

  // Vars used to calculate color
  var color;
  var convert;

  // Define function to get the distance of a-b and c-d
  dist = function (a,b,c,d) {
    return Math.sqrt(((a - c) * (a - c) + (b - d) * (b - d)));
  }
  
  // Shim layer with setTimeout fallback from Paul Irish
  window.requestAnimFrame = (function(){
    return  window.requestAnimationFrame       ||
            window.webkitRequestAnimationFrame ||
            window.mozRequestAnimationFrame    ||
            function( callback ){
              window.setTimeout(callback, 1000 / 60);
            };
  })();
  
  /* Read sliders */
  $('#vmax').on('change', function() {
    vmax = $(this).val()
  });
  
    $('#hmax').on('change', function() {
    hmax = $(this).val()
  });
  
  $('#vnoise').on('change', function() {
    vnoise = $(this).val()
  });
  
  /* Plasma Function */
  plasma = function (){
    
  for(var x = 0; x < w; x++) {
    for(var y = 0; y < h; y++) {
      
      /* Formula Blocks */
      val = Math.sin(dist(x + time, y, 128.0, 128.0) / vnoise)
                         + Math.sin(dist(x, y, 64.0, 64.0) / vnoise)
                         + Math.sin(dist(x, y + time / 7, 192.0, 64.0) / 7.0)
                         + Math.sin(dist(x, y, 192.0, 100.0) / vnoise);
      
      /* Convert to color */
      color = parseInt((4 + val)) * 32;
      convert = Math.floor(color);

      /* Draw Plasma */
      surface.fillStyle = "rgb("+(hmax-convert)+","+(convert*.5)+","+(vmax-convert)+")";
      surface.fillRect(x*size,y*size,size,size);
      
    }
  }
  
    /* Move time for Sin Function Animation */
  time+=1;
  requestAnimFrame(plasma);
    
}

  /* Kick it all off */
plasma();

});