var canvas = document.getElementById('stage');
var ctx = canvas.getContext('2d');

var _last = {};
var _circles = [];
var _circCount = 0;

canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

function mousemove(e) {
  if(!_last.x) {
    _last.x = e.x;
    _last.y = e.y;
  } else {
    var velocity = {
      x: Math.abs(e.x) - Math.abs(_last.x),
      y: Math.abs(e.y) - Math.abs(_last.y)
    }
    
    if(Math.abs(velocity.x*velocity.y) > 2) {
      if(_circles.length == 200) {
        console.log(_circles[_circCount]);
        _circles[_circCount].update(e.x, e.y, velocity);
        if(_circCount == 199) _circCount = 0;
        else _circCount++;
      } else {
        var c = new Circle(e.x, e.y, velocity, '#362154');
        _circles.push(c);
      }
      
    }
    _last.x = e.x;
    _last.y = e.y;
  }
}

function loop() {
  ctx.clearRect(0,0,window.innerWidth, window.innerHeight);
  for(var i = 0; i<_circles.length; i++) {
    _circles[i].draw();
  }
  requestAnimationFrame(loop);
}

function Circle(x,y,v,color) {
  var _this = this;
  
  this.x = x-6;
  this.y = y-6;
  this.color = color;
  this.v = {};
  this.v.x = v.x*0.3;
  this.v.y = v.y*0.3;
  this.radius = 4;
  
  this.update = function(x,y,v) {
    _this.x = x-6;
    _this.y = y-6;
    _this.v.x = v.x*0.3;
    _this.v.y = v.y*0.3;
    _this.radius = 4;
  }
  
  this.draw = function() {
    ctx.beginPath();
    ctx.arc(_this.x, _this.y, _this.radius, 0, 2 * Math.PI, false);
    ctx.strokeStyle = _this.color;
    ctx.lineWidth = 2;
    ctx.stroke();
    
    _this.x += this.v.x;
    _this.y += this.v.y;
    if(_this.radius < 14) _this.radius += 0.02;
        
    if(this.v.x > 0) this.v.x -= 0.01;
    else if(this.v.x < 0) this.v.x += 0.01;
    if(this.v.y > 0) this.v.y -= 0.01;
    else if(this.v.y < 0) this.v.y += 0.01;
  } 
}

window.onmousemove = mousemove;
requestAnimationFrame(loop);