Progress slipping away

index.html

<canvas/>

Progress-slipping-away.markdown

Progress slipping away

Was looking at a tumblr, http://consciousfree.tumblr.com/post/113765639190/106-365 and thought I'd give it a try. I feel like it's doing something different, but I still like it.

A Pen by Brandel Zachernuk on CodePen.

License.

script.js

var c = document.querySelector('canvas');
var g = c.getContext('2d');
c.width = innerWidth;
c.height = innerHeight;
var TOTALRAD = innerHeight/5;
update();


function ease(pi,a,b) {
  var ip = 1-pi;
  return 3*ip*ip*pi*(a||0.05) +
      3*ip*pi*pi*(b||0.95)+
      1*pi*pi*pi;
  
}
function update() {
  c.width= innerWidth;
  g.translate(innerWidth/2, innerHeight*1/2);
  g.strokeStyle = "#802020";
  var DURATION = 3.5;
  var LAYERS = 7;
 	g.lineWidth= TOTALRAD/LAYERS+0.2;
  var now = (new Date().getTime()/1000)%DURATION;
	g.rotate(-now*Math.PI/DURATION-0.5);  
  for(var i =0;i<LAYERS;i++) {
	  var pi = now/DURATION;
    pi = ease(pi);
		pi = Math.max(0,Math.min(0.999, pi+i/20));
    pi = ease(pi);
    pi = ease(pi);
    pi = ease(pi);
    pi = ease(pi);
    pi = ease(pi);
    pi +=1;
    
    g.globalAlpha =0.9-i/LAYERS;
    g.beginPath();
 	  g.arc(0,0,TOTALRAD+TOTALRAD*i/LAYERS, Math.PI*pi,Math.PI*pi+Math.PI);
    g.stroke();
  }
  
  
  requestAnimationFrame(update);
  
}

style.css

canvas
{
  
  top:0px;
  left:0px;
}

body
{
  margin:0;
  padding:0;
  background-color:#252018;
  box-shadow:inset 0px 0px 120px rgba(60,10,0,0.5);
  overflow:hidden;
}