EffectHub.com: your best source for gaming

Recommendation

More Effects...

var App = {};

jQuery(document).ready(function() {
  // Setup canvas and app
  App.setup();
  // Launch animation loop
  App.frame = function() {
    App.update();
    window.requestAnimationFrame(App.frame);
  };
	App.frame();
});

App.setup = function() {
  // Setup canvas and get canvas context
  var canvas = document.createElement('canvas');
  canvas.height = window.innerHeight;
  canvas.width = window.innerWidth;
  canvas.id = 'ourCanvas';
  document.body.appendChild(canvas);
  this.ctx = canvas.getContext('2d');
  this.width = canvas.width;
  this.height = canvas.height;
  
  // Define a few useful elements
  this.particles = [];
  this.stepCount = 0;
  this.xC = canvas.width / 2;
  this.yC = canvas.height / 2;
  this.birthPeriod = 5;
  this.maxPop = 50;
};
App.update = function() {
  // Evolve system
  this.evolve();
  // Move particles
  this.move();
  // Draw particles
  this.draw();
};
App.evolve = function() {
  this.stepCount++;
  if (this.stepCount % this.birthPeriod == 0 && this.particles.length < this.maxPop) {
    this.birth();
  }
  if (this.stepCount == 50) this.kill('seed10');
};
App.birth = function() {
  var particle = {
    x: this.width * Math.random(),
    y: this.height * (0.5 + 0.5 * Math.random()),
    xSpeed: 0,
    ySpeed: 0,
    name: 'seed' + this.stepCount
  };
  
  this.particles.push(particle);
};
App.kill = function(particleName) {
 this.particles = _(this.particles).reject(function(seed) {
    return (seed.name == particleName);
  });
};
App.move = function() {
  for (var i = 0; i < this.particles.length; i++) {
    var particle = this.particles[i];
    particle.y -= 4;
    if (particle.y < 0) this.kill(particle.name);
  }
};
App.draw = function() {
  // Add 99% transparent layer to canvas
  this.ctx.beginPath();
  this.ctx.rect(0, 0, this.width, this.height);
  this.ctx.fillStyle = 'rgba(0, 0, 0, 0.03)';
  this.ctx.fill();
  
  // Draw particles
  for (var i = 0; i < this.particles.length; i++) {
    var particle = this.particles[i];
    var distance = Math.sqrt(Math.pow(particle.x - this.xC, 2) + Math.pow(particle.y - this.yC, 2));
    
    var rParticle = distance;
    // Draw particle
    this.ctx.beginPath();
    this.ctx.arc(particle.x, particle.y, rParticle, 0, 2 * Math.PI, false);
    this.ctx.strokeStyle = 'rgba(255, 255, 255, 0.03)';
    this.ctx.stroke();
  }
};

CSS

HTML

Recommendation

Join Effecthub.com