tunnel centering animation

center as get bigger

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, 10);
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.1) {
            tunnel[i]=getNewTunnelElement(0.0);
        }
    }
    var i=findClosest(tunnel);
    if (tunnel[i].x>globalCx) tunnel[i].x--;
    if (tunnel[i].y>globalCy) tunnel[i].x--;
    if (tunnel[i].x<globalCx) tunnel[i].x++;
    if (tunnel[i].y<globalCy) tunnel[i].x++;
    drawTunnel('tunnel', tunnel);
}

function findClosest(tunnel){
    var c={"z":0,"i":0};
    for (var i=0;i<tunnel.length;i++) {
        if (tunnel[i].z>c.z) {
            c.z=tunnel[i].z;
            c.i=i;
        }
    }
    return c.i;
}

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

function getNewTunnelElement(z) {
    if (globalDirLength<=0){
        globalDirLength = getRandomRangeWhole(0,10);
        globalDir=getRandomRangeWhole(0,8);
    } else {
        globalDirLength--;
    }
    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;
           ...