EffectHub.com: your best source for gaming

Recommendation

More Effects...

var w = c.width = window.innerWidth,
    h = c.height = window.innerHeight,
    ctx = c.getContext( '2d' ),
    
    opts = {
      
      count: 50,
      variation: .3,
      baseLife: 50,
      addedLife: 20,
      
      cx: w / 2,
      cy: h / 2,
      
      repaintAlpha: .1
    },
    
    snakes = [],
    first = true;

function init() {
  
  snakes.length = 0;
  
  ctx.fillStyle = 'black';
  ctx.fillRect( 0, 0, w, h );
  
  if( first ) {
    
    anim();
    first = false;
  }
}

function anim() {
  
  window.requestAnimationFrame( anim );
  
  update();
  render();
}

function Snake() {
  
  this.reset();
}
Snake.prototype.reset = function() {
  
  this.x1 = opts.cx + Math.random();
  this.x2 = opts.cx + Math.random();
  this.x3 = opts.cx + Math.random();
  this.y1 = opts.cy + Math.random();
  this.y2 = opts.cy + Math.random();
  this.y3 = opts.cy + Math.random();
  
  this.rad = Math.random() * Math.PI * 2;
  
  this.direction = Math.random() < .5 ? 1 : -1;
  this.size = 1;
  this.life = opts.baseLife + Math.random() * opts.addedLife;
}

Snake.prototype.update = function() {
  
  --this.life;
  
  this.size += 1 * ( Math.random() / 2 + .5 );
  this.direction *= -1; // if you don't understand why, try commenting it out. this makes the triangles go in opposite directions to create lines
  this.rad += Math.random() * opts.variation * ( Math.random() < .5 ? 1 : -1 ) + Math.PI / 2 * this.direction;
    
  var x4 = this.x3 + Math.cos( this.rad ) * this.size,
      y4 = this.y3 + Math.sin( this.rad ) * this.size;
  
  this.x1 = this.x2; this.y1 = this.y2;
  this.x2 = this.x3; this.y2 = this.y3;
  this.x3 = x4; this.y3 = y4;
  
  if( this.life <= 0 || this.x1 > w || this.x1 < 0 || this.y1 > h || this.y1 < 0 ) this.reset();
}
Snake.prototype.render = function() {
  
  ctx.fillStyle = 'hsla(0, 0%, light%, .5)'.replace( 'light', 25 + Math.random() * 50 );
  ctx.beginPath();
  ctx.moveTo( this.x1, this.y1 );
  ctx.lineTo( this.x2, this.y2 );
  ctx.lineTo( this.x3, this.y3 );
  ctx.fill();
}

init();

CSS

HTML

Recommendation

Join Effecthub.com