Rain
Forked and edited the colors
<canvas id='display' width='1' height='1'/>
<canvas id='display' width='1' height='1'/>
body{
body{background:#111;
color:white;
overflow:hidden;
padding:0;
margin:0;
}
//just tweaking @hunterloftis demo for some NeatNait rain particles
//just tweaking @hunterloftis demo for some NeatNait rain particles//credits goes -> http://www.playfuljs.com/particle-effects-are-easy/var DAMPING = 0.999;
var GRAVITY = 0.2;
var MAXAGE = 200;
function Particle(x, y) {
this.x = this.oldX = x;
this.y = this.oldY = y;
this.age = 0;//added age
}
Particle.prototype.integrate = function() {
var velocity = this.getVelocity();
this.oldX = this.x;
this.oldY = this.y;
this.x += velocity.x * DAMPING;
this.y += velocity.y * DAMPING;
};
Particle.prototype.getVelocity = function() {
return {x: this.x - this.oldX,
y: this.y - this.oldY
};
};
Particle.prototype.move = function(x, y) {
this.x += x;
this.y += y;
this.age++;
};
Particle.prototype.bounce = function() {
if (this.y > height) {
var velocity = this.getVelocity();
this.oldY = height;
this.y = this.oldY - velocity.y * Math.random()*0.2;
}
};
//remove items if age is greater than MAXAGE thresholdParticle.prototype.remove = function(arr) {
if (this.age > MAXAGE) {
arr.splice(arr.indexOf(this), 1);
}
};
Particle.prototype.draw = function() {
ctx.strokeStyle = '#f06';
ctx.lineWidth = 1;
ctx.beginPath();
ctx.moveTo(this.oldX, this.oldY);
ctx.lineTo(this.x, this.y);
ctx.stroke();
};
var display = document.getElementById('display');
var ctx = display.getContext('2d');
var drops = [];
var width = display.width = window.innerWidth;
var height = display.height = window.innerHeight;
ctx.globalCompositeOperation = 'overlay';
requestAnimationFrame(frame);
var z = -5;
function frame() {
requestAnimationFrame(frame);
ctx.clearRect(0, 0, width, height);
for (var j = 0; j < 5; j++) {
var drop = new Particle(width * 0.5, 0);
drop.move(Math.random() * 8 - 4, -10);
drops.push(drop);
}
for (var i = 0; i < drops.length; i++) {
drops[i].integrate();
drops[i].move(0, GRAVITY);
drops[i].bounce();
drops[i].draw();
drops[i].remove(drops);//killing old particles
}
}