net-balls.js

// requestAnimFrame; find variable for all browsers supporting animation
window.requestAnimFrame = (function() {
  return window.requestAnimationFrame ||
    window.webkitRequestAnimationFrame ||
    window.mozRequestAnimationFrame ||
    window.msRequestAnimationFrame ||
    window.oRequestAnimationFrame ||
    function(callback) {
      setTimeout(callback, 1000 / 60)
    }
})();

// init() canvas
var c = document.createElement("canvas"),
  ctx = c.getContext('2d'),
  particles = [],
  part_count = 150,
  min_dist = 70,
  CW = window.innerWidth,
  CH = window.innerHeight;
c.width = CW;
c.height = CH;
document.body.appendChild(c);
document.body.style.background = 'black';
document.body.style.margin = 0;
document.body.style.display = 'block';
document.body.style.overflow = 'hidden';

// int main() function
window.onload = main;

function main() {
  requestAnimFrame(main);
  c_clear();
  draw_grid();
  render();
}

// c_clear(); clear canvas function
function c_clear() {
  ctx.fillStyle = 'black';
  ctx.fillRect(0, 0, CW, CH);
}

// draw_grid(); function that draws grid
function draw_grid() {
  for (var i = 0.5; i < CW || i < CH; i += 35) {
    ctx.moveTo(i, 0);
    ctx.lineTo(i, CH);
    ctx.moveTo(0, i);
    ctx.lineTo(CW, i);
  }
  ctx.lineWidth = '0.3';
  ctx.strokeStyle = 'white';
  ctx.stroke();
}

// Particle(); a single particle constructor
function Particle() {
  this.x = Math.random() * CW;
  this.y = Math.random() * CH;
  this.vx = Math.random() * 2 - 1;
  this.vy = Math.random() * 2 - 1;
  this.r = 4;
  this.draw = function() {
    ctx.beginPath();
    ctx.fillStyle = 'green';
    ctx.arc(this.x, this.y, this.r, 0, Math.PI * 2);
    ctx.fill();
  }
}

// distance(); function that calculates distance between 2 points
function distance(p1, p2) {
  var dist, dx, dy;
  dx = p1.x - p2.x;
  dy = p1.y - p2.y;
  dist = Math.sqrt(Math.pow(dx, 2) + Math.pow(dy, 2));

  // draws a line of 2 particles are close together
  if (dist <= min_dist) {
    ctx.beginPath();
    ctx.strokeStyle = 'orange';
    ctx.moveTo(p1.x, p1.y);
    ctx.lineTo(p2.x, p2.y);
    ctx.stroke();
    ctx.closePath();

    var ax, ay;
    ax = dx / 2000;
    ay = dy / 2000;

    p1.vx -= ax;
    p1.vy -= ay;
    p2.vx += ax;
    p2.vy += ay;
  }
}

// a for loop that initializes all the particles in an array
for (var i = 0; i < part_count; i++) {
  particles.push(new Particle());
}

// draws everything in the canvas
function render() {

  for (var i = 0; i < particles.length; i++) {

    p = particles[i];
    p.draw();
  }
  update();
}

// contains the logic of the animation
function update() {
  for (var i = 0; i < particles.length; i++) {
    p = particles[i];
    p.x += p.vx;
    p.y += p.vy;

    if (p.x - p.r <= 0) {
      p.x = CW - p.r;
    } else if (p.x >= CW - p.r) {
      p.x = p.r;
    }

    if (p.y - p.r <= 0) {
      p.y = CH - p.r;
    } else if (p.y >= CH - p.r) {
      p.y = p.r;
    }

    for (var j = i + 1; j < particles.length; j++) {
      p2 = particles[j];
      distance(p, p2);
    }
  }
}