tagr · January 23, 2015 04:17
diff --git a/HTML5-Canvas-Sine-Plotting.markdown b/HTML5-Canvas-Sine-Plotting.markdown
diff --git a/index.jade b/index.jade
 canvas(id='c',width='800',height='600')
diff --git a/script.js b/script.js
 $(function() {
  var canvas = $('canvas')[0],
      context = canvas.getContext('2d'),
      _points = 6400,
      _r = 0,
      _g = 0,
      _b = 255,
      _a = 1,
      plot = function(p) {
        _g = Math.floor(Math.random()*255);
        _b = Math.floor(Math.random()*128+127);
        context.fillStyle = 'rgba('+_r+','+_g+','+_b+','+_a+')';
        context.fillRect(p/4,64/Math.sin(p)-64,2,2);
      }
  
  setInterval(function(){
    var originalValue = _points;
    while(_points--) plot(_points);
    _points = originalValue;
  },60)
 });
diff --git a/style.scss b/style.scss

 body {
  background: #000;
 }
 canvas {
  border: 1px solid rgba(64,4,255,0.3);
 }