// s is the scale factor, starts off very small to shrink the tunnel
// lim limit when the scale factor is reset to very small
// a is the number of divisions (arcs), clicking the canvas reduces this by one each time
var f=window,w=f.innerWidth,h=f.innerHeight,el=document.getElementById("c"), c=el.getContext("2d"),a=10,r=0,s=0.001,x=0,y=1,lim=500,ang=Math.PI/a;
el.width=w;
el.height=h;
// this is what sets the width of the squares/arcs
c.lineWidth=w/4;
el.onmousemove=function(e){
x=e.clientX-w/2;
y=e.clientY/h;
};
el.onclick=function(e){
a=a>1?a-1:10;
};
var p=function(){
// y value (mouse y axis) changes how quickly previous image is fading out
c.fillStyle="rgba(255,255,255,"+y+")";
c.fillRect(0,0,w,h);
c.fillStyle="#000";
c.save();
c.translate(w/2,h/2);
// overall rotation of canvas
c.rotate(0.02*r);
r+=x/10;
// overall scale factor of canvas
c.scale(s,s);
s*=1.05;
// reset to small
if (s>lim)
s=0.005;
// works backwards creating the largest ring first and then reducing in size
for (var i=0;i<30;i++)
{
// draw arcs for one ring
for (var j=0;j<a;j++)
{
c.beginPath();
c.arc(0, 0, w, 0, -ang,true);
c.stroke();
c.closePath();
c.rotate(ang*2);
}
c.rotate(ang);
c.scale(0.8,0.8);
}
c.restore();
};
setInterval(p,50);