tunnel animation

animate circle progression

by rob Davis

HTML

<div id="container">
    <div>
        <canvas id="starfield" />
    </div>
    <div>
        <canvas id="tunnel" />
    </div>
</div>

CSS

#container { background-color:yellow;
        width:500px;
    height:500px;
    position:relative;
}
#tunnel    {position:absolute; top:0px; left:0px; }
#starfield {position:absolute; top:0px; left:0px; }

JavaScript

console.log('new run');
drawStarfield('starfield');
var width=400;
var height=400;
var running=true;
var tunnel = [];
var globalCx = 200;
var globalCy = 200;
var globalDir = 0;
var globalDirLength=0;
var fps=25;
buildTunnel(tunnel, 7);
drawTunnel('tunnel', tunnel);
setInterval(frameStep, 1000/fps);


$('#container').click(function(){
    running=!running;
});

function frameStep() {
    if(!running) return;
    for (var i=0;i<tunnel.length;i++) {
        tunnel[i].z+=0.01;
        if (tunnel[i].z>1.0) {
            tunnel[i]=getNewTunnelElement(0.3);
        }
    }
    drawTunnel('tunnel', tunnel);
}

function buildTunnel(tunnel, total){
    var z=0.3;
    for (var i=0;i<total;i++) {
        tunnel.push(getNewTunnelElement(z));
        z-=0.1
    }
}

function getNewTunnelElement(z) {
    //console.log('new element gDL='+globalDirLength);
    if (globalDirLength<=0){
        globalDirLength = getRandomRangeWhole(0,10);
        globalDir=getRandomRangeWhole(0,8);
        //console.log('new gDL='+globalDirLength);
    } else {
        globalDirLength--;
    }
    console.log('gD='+globalDir);
    var vectorMax=10;
    var vector = getRandomRangeWhole(1,vectorMax);;
    switch (globalDir) {
        case 0:
            globalCx+=vector;
            break;
        case 1:
            globalCx-=vector;
            break;
        case 2:
            globalCy+=vector;
            break;
        case 3:
            globalCy-=vector;
            break;
        case 4:
            globalCx+=vector;
            globalCy+=vector;
            break;
        case 5:
            globalCx+=vector;
            globalCy-=vector;
            break;
        case 6:
            globalCx-=vector;
            globalCy+=vector;
            break;
        case 7:
            globalCx-=vector;
            globalCy-=vector;
            break;
        default:
            // no change
            break;
    }
    if ( (globalCx<10) ||
         (globalCx>width-10) ||
        (globalCy<10)...