<canvas id="canvas"></canvas>

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  display: block;
  overflow: hidden;
  background-color: #102632;
}

function grilled() {
  this.interact = 200;
  this.radius = 1.25;
  this.maxRad = 5;
  this.dist = 30;

  this.oGrilled = {
    iCol: 0,
    iLine: 0,
    aDots: []
  };

  grilled.prototype.setGrilled = function () {
    this.oGrilled.aDots = [];

    this.oGrilled.iCol = Math.ceil(oSize.w / this.dist);
    this.oGrilled.iLine = Math.ceil(oSize.h / this.dist);
    this.oGrilled.margTop = (oSize.h - this.oGrilled.iLine * this.dist) / 2;
    this.oGrilled.margLeft = (oSize.w - this.oGrilled.iCol * this.dist) / 2;
  };

  grilled.prototype.buildGrilled = function () {
    for (var l = 0; l <= this.oGrilled.iLine; l++) {
      for (var c = 0; c <= this.oGrilled.iCol; c++) {
        this.addDot(l, c);
      }
    }
  };

  grilled.prototype.addDot = function (l, c) {
    this.oGrilled.aDots.push(this.build_dot(l, c));
  };

  grilled.prototype.build_dot = function (l, c) {
    var px = Math.ceil(c * this.dist + this.oGrilled.margLeft);
    var py = Math.ceil(l * this.dist + this.oGrilled.margTop);

    var oDot = {
      x: px,
      y: py,
      bx: px,
      by: py,
      tx: px,
      ty: py,
      s: rand(0.2, 1),
      c: "rgba( 197, 0, 62, 1)",
      r: this.radius
    };

    return oDot;
  };

  grilled.prototype.get_radius = function (dot) {
    var dx = oMouse.x - dot.x;
    var dy = oMouse.y - dot.y;
    var distance = Math.sqrt(dx * dx + dy * dy);

    var distPourcent = (distance * 100) / this.interact;

    var rad = (this.maxRad * (100 - distPourcent)) / 100;

    if (rad < this.radius) rad = this.radius;

    return rad;
  };

  grilled.prototype.check_target = function (dot) {
    if (dot.x == dot.tx && dot.y == dot.ty) return true;
    else return false;
  };

  grilled.prototype.new_target = function (dot) {};

  grilled.prototype.update = function () {
    this.update_dots();
  };

  grilled.prototype.update_dots = function () {
    var get_radius = this.get_radius.bind(this);
    var check_target = this.check_target.bind(this);

    this.oGrilled.aDots.forEach(function (dot) {
      dot.r += (get_radius(dot) - dot.r) * 0.03;

      /*if( check_target( dot ) ){

        dot.tx = rand( dot.bx - 20, dot.bx + 20 );
        dot.ty = rand( dot.by - 20, dot.by + 20 );

      }

      tx = dot.tx - dot.x,
      ty = dot.ty - dot.y,
      dist = Math.sqrt(tx * tx + ty * ty);

      //if ( dist >= dot.s ) {

        velX = Math.ceil( ( tx / dist ) * dot.s );
        velY = Math.ceil( ( ty / dist ) * dot.s );
        
      
        dot.x +=  velX;
        dot.y +=  velY;
        
      //}*/
      //}*/
    });
  };

  grilled.prototype.draw_grilled = function (ctx) {
    this.oGrilled.aDots.forEach(function (dot) {
      ctx.beginPath();
      ctx.arc(dot.x, dot.y, dot.r, 0, 2 * Math.PI, false);
      ctx.fillStyle = dot.c;
      ctx.fill();
    });
  };

  grilled.prototype.draw = function (ctx) {
    this.draw_grilled(ctx);
  };
}

/** global vars **/
var oSize = {
  h: document.body.clientHeight,
  w: document.body.clientWidth
};
var oMouse = {
  x: oSize.w / 2,
  y: oSize.h / 2
};
var bMagnet = false;

//canvas dots
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

canvas.height = oSize.h;
canvas.width = oSize.w;

rand = function (min, max) {
  return Math.ceil(Math.random() * (max - min) + min);
};
update_mouse = function (_e) {
  oMouse.y = _e.pageY;
  oMouse.x = _e.pageX;
};
onresize = function () {
  oSize.w = canvas.width = window.innerWidth;
  oSize.h = canvas.height = window.innerHeight;
  oGrilled.setGrilled();
  oGrilled.buildGrilled();
};

var oGrilled = new grilled();

document.addEventListener("mousemove", update_mouse, false);
document.addEventListener("onresize", onresize, false);
window.onresize();

oGrilled.setGrilled();
oGrilled.buildGrilled();

/** ANIMATION **/
function render() {
  ctx.clearRect(0, 0, oSize.w, oSize.h);

  oGrilled.update();

  oGrilled.draw(ctx);

  requestAnimationFrame(render);
}
render();