EffectHub.com: your best source for gaming

Recommendation

More Effects...

var w = c.width =
    h = c.height = 400,
    ctx = c.getContext('2d'),
    
    total = 50,
    particlesParRow = 10,
    minValue = 30,
    updatesBeforeStart = 500,
    repaintColor = 'rgba(0, 0, 0, .04)',
    templateColor = 'hsl(hue, 80%, 50%)',
    
    particles = [],
    colors = [],
    radiants = [],
    colorPart = 360/total,
    radiantPart = Math.PI*2/total,
    alphaValue = true;

for(var i = 0; i < total; ++i){
  
  var array = [];
  particles.push(array);
  colors.push(templateColor.replace('hue', colorPart * i));
  radiants.push(radiantPart * i);
  
  for(var j = 0; j < particlesParRow; ++j){
    array.push(i * minValue);
  }
}

for(var i = 0; i < updatesBeforeStart; ++i) update();

anim();

alpha.addEventListener('click', function(){
  if(alphaValue){
    alphaValue = false;
    repaintColor = 'black';
    alpha.textContent = 'solid';
  } else {
    alphaValue = true;
    repaintColor = 'rgba(0, 0, 0, .04)';
    alpha.textContent = 'alpha';
  }
})

CSS

HTML

Recommendation

Join Effecthub.com