Particles Random Animation in Canvas

Particles Random Animation in Canvas

HTML

<footer class="content-footer">
  <canvas id="nokey" width="800" height="800">
    Your Browser Don't Support Canvas, Please Download Chrome ^_^``
</canvas>
</footer>

CSS

* {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
  background-color: #1B1B1B;
  overflow: hidden;
}

.content-footer {
  border: 1px solid #fff;
  /*padding:10px;*/
}

canvas {
  background-color: #000;
}

JavaScript

var canvas = document.getElementById('nokey'),
  can_w = parseInt(canvas.getAttribute('width')),
  can_h = parseInt(canvas.getAttribute('height')),
  ctx = canvas.getContext('2d');

// console.log(typeof can_w);

var ball = {
    x: 0,
    y: 0,
    vx: 0,
    vy: 0,
    r: 0,
    alpha: 4,
    phase: 0
  },
  ball_color = {
    r: 20,
    g: 57,
    b: 255
  },
  R = 1
  balls = [],
  alpha_f = 0.08,
  alpha_phase = 0,

  // Line
  link_line_width = 0.5,
  dis_limit = 550,
  add_mouse_point = true,
  mouse_in = false,
  mouse_ball = {
    x: 10,
    y: 0,
    vx: 0,
    vy: 0,
    r: 0,
    type: 'mouse'
  };

// Random speed
function getRandomSpeed(pos) {
  var min = -1,
    max = 1;
  switch (pos) {
    case 'top':
      return [randomNumFrom(min, max), randomNumFrom(0.1, max)];
      break;
    case 'right':
      return [randomNumFrom(min, -0.1), randomNumFrom(min, max)];
      break;
    case 'bottom':
      return [randomNumFrom(min, max), randomNumFrom(min, -0.1)];
      break;
    case 'left':
      return [randomNumFrom(0.1, max), randomNumFrom(min, max)];
      break;
    default:
      return;
      break;
  }
}

function randomArrayItem(arr) {
  return arr[Math.floor(Math.random() * arr.length)];
}

function randomNumFrom(min, max) {
  return Math.random() * (max - min) + min;
}
console.log(randomNumFrom(0, 10));
// Random Ball
function getRandomBall() {
  var pos = randomArrayItem(['top', 'right', 'bottom', 'left']);
  switch (pos) {
    case 'top':
      return {
        x: randomSidePos(can_w),
        y: -R,
        vx: getRandomSpeed('top')[0],
        vy: getRandomSpeed('top')[1],
        r: R,
        alpha: 1,
        phase: randomNumFrom(0, 10)
      }
      break;
    case 'right':
      return {
        x: can_w + R,
        y: randomSidePos(can_h),
        vx: getRandomSpeed('right')[0],
        vy: getRandomSpeed('right')[1],
        r: R,
        alpha: 1,
        phase: randomNumFrom(0, 10)
      }
      break;
    case 'bottom':
     ...