var app = {
  initialize: function() {
    var w = window.innerWidth;
    var h = window.innerHeight;
    var l = Math.sqrt((w*w)+(h*h)) / 2;

    var canvas = document.getElementById('el');
    canvas.width = w; canvas.height = h;

    var ctx = canvas.getContext("2d");
    var c = [86, 26, 175];
    var o = [w/2,h/2];

    var get = function() {
      return [o[0], o[1], Math.random()*360, Math.random()*2+1];
    };
    
    var ps = (function() {
      var a=[];
      var i=0;
      while(i++ < 200){
        a.push(get());
      }
      return a;
    })();

    var f = function() {
      if (ps.length < 1500){
        ps.push(get(), get());
      }
    };
    
    var r = function(){
      [].forEach.call(ps, function(p, i) {
        p[0] += p[3] * Math.cos(p[2]);
        p[1] += p[3] * Math.sin(p[2]);

        var diffX = p[0] - o[0];
        var diffY = p[1] - o[1];
        var dis = Math.sqrt((diffX*diffX)+(diffY*diffY));

        if (dis > l*0.1){
          p[2] += 0.05;
        }

        var size = i%2 == 0 ? 1 : 2;

        ctx.fillStyle = 'rgba('+c.join()+',1)';
        ctx.fillRect(p[0],p[1],size,size);
      });
    };
    
    var step = function(){
      requestAnimationFrame(step);
      ctx.clearRect(0,0,w,h);
      f();
      r();
    };
    
    step();
  }
};

document.addEventListener('DOMContentLoaded', function(){
   app.initialize();
});