EffectHub.com: your best source for gaming

Recommendation

More Effects...

var can = document.getElementById("c");
var ctx = can.getContext("2d");
var w = can.width = window.innerWidth;
var h = can.height = window.innerHeight;
var maxParticles = 800;
var particles = [];
var index = 0;

function random(min, max) {
    return Math.random() * (max - min) + min;
}

function distance(x1, y1, x2, y2){
	return Math.sqrt((x1-x2)*(x1-x2) + (y1-y2)*(y1-y2));
}

function Particle(){
	this.x = w/2;
	this.y = h/2;
	this.size = random(1, 2);
	particles[index] = this;
	index++;
}

Particle.prototype.draw = function(){
		ctx.fillStyle = 'hsl('+distance(this.x, this.y, w/2, h/2)*2+', 100%, 50%)';
		ctx.fillRect(this.x, this.y, this.size, this.size);
		this.update();
};

Particle.prototype.update = function(){
		this.x += random(-3, 3);
		this.y += random(-3, 3);
		this.size += .0001;
	  if(this.x > window.innerWidth || this.x < -this.size || this.y > window.innerHeight || this.y < -this.size){
			this.reset();
		}
}

Particle.prototype.reset = function(){
	this.x = w/2;
	this.y = h/2;
	this.size = random(1, 2);
}

window.addEventListener("resize", function(){
	w = can.width = window.innerWidth;
  h = can.height = window.innerHeight;
});

function anim(){
	ctx.fillStyle = "rgba(0,0,0,.04)";
	ctx.fillRect(0, 0, w, h);
	for(var i in particles){
		particles[i].draw();
	}
	window.requestAnimationFrame(anim);
}

function init(){
	for(var i=0; i<maxParticles; i++){
		setTimeout(function(){
			new Particle();
		}, i * 10);
	}
	anim();
}

init();

CSS

HTML

Recommendation

Join Effecthub.com