Rain of Fire

Rain-of-Fire.markdown

Rain of Fire

A take on Nate Wiley's pen (http://codepen.io/natewiley/details/aeAGL/), tweaked for object pooling. Also based the speed of fall on the size of particle and added a slow fade on drops.

A Pen by Rob Glazebrook on CodePen.

License.

script.js

var s = new Sketch.create({autoclear: false}),
    drops = [],
    maxDrops = 200,
    Drop = function() {};
Drop.prototype.setup = function() {
  this.x = random(0, s.width);
  this.y = random(-200, -5);
  this.radius = random(1,4);
  this.vy = this.radius + random();
  this.h = random(0,30);
  this.s = 100;
  this.l = random(40,50);
  this.color = 'hsla('+random(0,30)+', 100%, 50%, 1)';     
}
Drop.prototype.update = function() {
  this.x += random(-1,1);
  this.y += this.vy;
  var r = random();
  if (r < .4) this.l -= r;
   
}
Drop.prototype.draw = function() {
  s.fillStyle = 'hsl('+this.h+','+this.s+'%,'+this.l+'%)'
  s.beginPath();
  s.arc(this.x, this.y, this.radius, 0, TWO_PI);
  s.fill();
  s.closePath();  
}

s.setup = function() {
  for(var i=0; i<maxDrops; i++) {
    drops[i] = new Drop();
    drops[i].setup();
  }
}
s.update = function() {
  var i = drops.length;
  while(i--) {
    drops[i].update();
    if (drops[i].l < 0 || drops[i].y - drops[i].radius > s.height) {
      drops[i].setup();
    }
  }
}
s.draw = function() {
  s.fillStyle = 'rgba(0,0,0,.1)';
  s.fillRect(0,0,s.width,s.height);
  for (var i = 0; i < drops.length; i++) {
    drops[i].draw();
  }
}

style.scss

@import "compass/css3";
html, body {
  background: #000;
  margin: 0;
  padding: 0;
  overflow: hidden;
}