EffectHub.com: your best source for gaming

Recommendation

More Effects...

JS

var w = c.width = window.innerWidth,
    h = c.height = window.innerHeight,
    ctx = c.getContext('2d'),
    circles = [],
    colors = ['rgba(2, 25, 255, 0.04)', 'rgba(255, 25, 2, 0.04)', 'rgba(25, 255, 2, 0.04)'],
    minSize = 10,
    maxSize = 1000;

function Circle(x, y, color, min, max){
  this.x = x;
  this.y = y;
  this.color = color;
  this.size = min;
  this.max = max;
}
Circle.prototype.update = function(){
  if(this.size <= this.max)
    this.size += 10;
  
  ctx.fillStyle = this.color;
  ctx.beginPath();
  ctx.arc(this.x, this.y, this.size, 0, Math.PI*2);
  ctx.fill();
  ctx.closePath();
}
Circle.prototype.kill = function(){
	circles.splice(circles.indexOf(this), 1);  
}

function anim(){
  window.requestAnimationFrame(anim);
  
  if(circles.length < 100){
    
    var x = (Math.random()*w)|0,
        y = (Math.random()*h)|0,
        security = 100;
    
    /*while(!getNotColliding(x, y) && --security > 0){
      x = Math.random()*w;
      y = Math.random()*h;
    }*/
    
    circles.push(new Circle(x, y, colors[(Math.random()*colors.length)|0], minSize, maxSize))
  }
  
  
  for(var i = 0; i < circles.length; ++i){
    var circle = circles[i];
    circle.update();
    
    for(var j = i + 1; j < circles.length; ++j){
      if(compareDistance(circle.x, circles[j].x, circle.y, circles[j].y, circle.size + circles[j].size)){
        if(circle.size > circles[j].size) circle.kill();
        else circles[j].kill();
      }
    }
  }
}

function getNotColliding(x, y){
  var colliding = false;
  
  circles.map(function(circle){
    if(compareDistance(x, circle.x, y, circle.y, circle.size + minSize * 2))
      colliding = true;
  })
  
  return colliding;
}
function compareDistance(x1, y1, x2, y2, dist){
  return (x2-x1)*(x2-x1) + (y2-y1)*(y2-y1) <= dist*dist;
}

anim();

CSS

HTML

Join Effecthub.com

Working with Global Gaming Artists and Developers!

Login
Sign Up

Or Sign Up with Your Email Address: