EffectHub.com: your best source for gaming

Recommendation

More Effects...

// base image: http://hd4desktop.com/images/m/a-colours-circle-rainbow-HD-Wallpaper.jpg

var w = c.width = window.innerWidth,
    h = c.height = window.innerHeight,
    ctx = c.getContext( '2d' ),
    
    opts = {
      
      lineCount: 100,
      starCount: 30,
      
      radVel: .01,
      lineBaseVel: .1,
      lineAddedVel: .1,
      lineVelTilt: Math.PI / 2,
      lineBaseLife: 400,
      lineAddedLife: 20,
      
      starBaseLife: 10,
      starAddedLife: 10,
      
      ellipseTilt: -.3,
      ellipseBaseRadius: 150,
      ellipseAddedRadius: 40,
      ellipseAxisMultiplierX: 2,
      ellipseAxisMultiplierY: 1,
      ellipseCX: w / 2,
      ellipseCY: h / 2,
      
      repaintAlpha: .015
    },
    
    lines = [],
    stars = [],
    tick = 0,
    first = true;

function init() {
  
  lines.length = stars.length = 0;
  
  ctx.globalCompositeOperation = 'source-over';
  ctx.fillStyle = '#333';
  ctx.fillRect( 0, 0, w, h );
  
  if( first ) {
    
    loop();
    first = false;
  }
}

function loop() {
  
  window.requestAnimationFrame( loop );
  step();
  draw();
}

function Line() {
  
  this.reset();
}
Line.prototype.reset = function() {

this.rad = Math.random() * Math.PI * 2,
  this.len = opts.ellipseBaseRadius + Math.random() * opts.ellipseAddedRadius;
  this.lenVel = opts.lineBaseVel + Math.random() * opts.lineAddedVel;
  
  this.x = this.px = Math.cos( this.rad ) * this.len;
  this.y = this.py = Math.sin( this.rad ) * this.len;
  
  this.life = this.originalLife = opts.lineBaseLife + Math.random() * opts.lineAddedLife;
  
  this.alpha = .2 + Math.random() * .8;
}
Line.prototype.step = function() {
  
  --this.life;
  
  var ratio = 1 - .1 *  this.life / this.originalLife;
  
  this.px = this.x;
  this.py = this.y;
  
  this.rad += opts.radVel;
  this.len -= this.lenVel;
  
  this.x = Math.cos( this.rad ) * this.len;
  this.y = Math.sin( this.rad ) * this.len;
  
  if( this.life <= 0 )
    this.reset();
}
Line.prototype.draw = function() {
  
  var ratio = Math.abs( this.life / this.originalLife - 1/2 );
  
  ctx.lineWidth = ratio * 5;
  ctx.strokeStyle = ctx.shadowColor = 'hsla(hue, 80%, light%, alp)'
    .replace( 'hue', tick + this.x / ( opts.ellipseBaseRadius + opts.ellipseAddedRadius ) * 100 )
    .replace( 'light', 75 - ratio * 150 )
    .replace( 'alp', this.alpha );
  ctx.beginPath();
  ctx.moveTo( this.px, this.py );
  ctx.lineTo( this.x, this.y );
  
  ctx.stroke();
}

init();

CSS

HTML

Recommendation

Join Effecthub.com