Particles

the-swarm.js

/*
@author: ormux (c) Copyright 2016
@name: Particles | The Swarm
@date: 7-22-16 | July 22, 2016
@class: Particle Effects
@version: final
*/
window.requestAnimFrame = (function() {
  return window.requestAnimationFrame ||
    window.webkitRequestAnimationFrame ||
    window.mozRequestAnimationFrame ||
    window.msRequestAnimationFrame ||
    window.oRequestAnimationFrame ||
    function(callback) {
      window.setTimeout(callback, 1000 / 60);
    }
})();

var c = document.createElement('canvas'),
  ctx = c.getContext('2d'),
  WIDTH = window.innerWidth,
  HEIGHT = window.innerHeight;
c.width = WIDTH;
c.height = HEIGHT;
document.body.appendChild(c);
document.body.style.display = "block";
document.body.style.margin = "auto";
document.body.style.overflow = "hidden";

var partNum = 50,
  partIndex = 0,
  partObj = {};

function Part() {
  this.s = 3.5;
  this.x = (WIDTH / 2 - this.s) * (Math.random() * 10 - 5);
  this.y = (HEIGHT / 2 - this.s) * (Math.random() * 10 - 5);
  this.vx = Math.random() * 10 - 5;
  this.vy = Math.random() * 10 - 5;
  this.color = "hsla(" + parseInt(Math.random() * 360, 10) + ",100%,50%, 0.7)";
  partIndex++;
  partObj[partIndex] = this;
  this.id = partIndex;
  this.life = 0;
  this.maxLife = Math.random() * 30 + 70;
}
Part.prototype.render = function() {
  ctx.fillStyle = this.color;
  ctx.fillRect(this.x, this.y, this.s, this.s);
  this.x += this.vx;
  this.y += this.vy;
  this.life++;
  if (this.life >= this.maxLife) {
    delete partObj[this.id];
  }
  if (Math.random() <= 0.1) {
    this.vx += Math.random() * 5 - 2.5;
    this.vy += Math.random() * 5 - 2.5;
  }
}

function drawText(text, x, y, font, col) {
  ctx.save();
  ctx.textAlign = 'center';
  ctx.fillStyle = col;
  ctx.font = font;
  ctx.fillText(text, x, y);
  ctx.restore();
}

window.onload = main;
function main() {
  requestAnimFrame(main);
  ctx.fillStyle = 'rgba(0, 0, 0, 0.2)';
  ctx.fillRect(0, 0, WIDTH, HEIGHT);
  drawText("The Swarm", WIDTH / 2, HEIGHT / 2, "20px Monaco", "grey");
  drawText("By Tatum Roaquin", WIDTH / 2, (HEIGHT / 2) + 30, "20px Monaco", "grey");
  for (var i = 0; i < partNum; i++) {
    new Part();
  }
  for (var i in partObj) {
    partObj[i].render();
  }

}