rotating tunnel of rainbowness

index.html

<canvas id=c></canvas>
<button id=alpha>alpha</button>
<div id=overlay></div>

rotating tunnel of rainbowness.markdown

rotating tunnel of rainbowness

overlay idea from @chinchang

A Pen by towc on CodePen.

License.

script.js

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();

function anim(){
  window.requestAnimationFrame(anim);
  
  ctx.fillStyle = repaintColor;
  ctx.beginPath();
  ctx.arc(w/2, h/2, w/2 + 1, 0, Math.PI * 2);
  ctx.fill();
  ctx.closePath();
  
  ctx.translate(w/2, h/2);
  ctx.rotate(.006);
  ctx.translate(-w/2, -h/2);
  
  for(var i = 0; i < total; ++i){
    ctx.fillStyle = colors[i];
    
    for(var j = 0; j < particlesParRow; ++j){
      var particle = particles[i][j];
      
      particles[i][j] -= particle/70;
      
      ctx.beginPath();
      ctx.arc(w/2, h/2, particle, radiants[i], radiants[i] + radiantPart);
      ctx.arc(w/2, h/2, particles[i][j], radiants[i] + radiantPart, radiants[i], true);
      ctx.closePath();
      ctx.fill();
      
      if(particles[i][j] <= minValue && Math.random() < .1){
        particles[i][j] = w/2;
      }
    }
  }
}

anim();

function update(){
  for(var i = 0; i < total; ++i){
    for(var j = 0; j < particlesParRow; ++j){
      var particle = particles[i][j];
      
      particles[i][j] -= particle/70;
      
      if(particles[i][j] <= minValue && Math.random() < .1){
        particles[i][j] = w/2;
      }
    }
  }
}

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';
  }
})

style.css

body, html {
  background-color:#111;
  overflow:hidden;
  margin:0 0;
}
#c {
  position:absolute;
  top: calc(50vh - 200px);
  left: calc(50vw - 200px);
}
#alpha {
  position:absolute;
  top: calc(50vh + 220px);
  left: calc(50vw - 50px);
  width:100px;
  height:40px;
  background-color: #000;
  border:none;
  font:20px Verdana;
  color:white;
  text-shadow:0 0 2px white;
  cursor:pointer;
  
  transition:.4s;
}
#alpha:focus {
  outline:none;
}
#alpha:hover {
  background-color: #555;
}
#overlay {
  position: absolute;
  width: 400px;
  height: 400px;
  top: calc(50vh - 200px);
  left: calc(50vw - 200px);
  background-image: radial-gradient(transparent 20%, #111 69%);
}