tunnel element spacing logical/physical

make Z and easy to increment value with the rendering placing the in the correct depth/size

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 canvas = document.getElementById('tunnel');
    var context = canvas.getContext('2d');
    // clear the tunnel canvas
    var width=400; // todo: get
    var height=400; // these values
    setCanvasSize(canvas, width, height);


var tunnel = [];
// add a single element in center and set z to furthest point
tunnel.push({"x":200, "y":200, "z": 0.3});
tunnel.push({"x":200, "y":200, "z": 0.2});
tunnel.push({"x":200, "y":200, "z": 0.1});
tunnel.push({"x":200, "y":200, "z": 0.0});
drawTunnel('tunnel', tunnel);

$('#container').click(function(){
    frameStep();
});

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

function createTunnel(cx, cy) {
    var max=16;
    var newTunnel = [];
    newTunnel.push({"x":cx, "y":cy, "z": 0.2});
    for (var i=0;i<max;i++) {
        newTunnel.push(new tunnelElement(newTunnel[i]));
        newTunnel[newTunnel.length-1].z = Math.pow(2, (i+1)*0.5);
    }
    return newTunnel;
}

function tunnelElement(parent) {
    var distance = 1;
    this.x = parent.x + getRandomRange(0, distance)-(distance/2);
    this.y = parent.y + getRandomRange(0, distance)-(distance/2);
    this.z = parent.z;
}

function drawTunnel(elementId, tunnel) {
    var canvas = document.getElementById(elementId);
    var context = canvas.getContext('2d');
    // clear the tunnel canvas
    var width=400; // todo: get
    var height=400; // these values
    setCanvasSize(canvas, width, height);
    var alpha=1.0;
    for (var i=0;i<tunnel.length;i++) {
        console.log('z:'+tunnel[i].z);
        if (tunnel[i].z>0 && tunnel[i].z<=1.0) {
            alpha = 1.0; // todo: base on z
            drawTunnelSection(context, tunnel[i].x, tunnel[i].y, alpha, getTunnelSize(tunnel[i].z));
        }
    }
}

function getTunnelSize(z) {
    return Math.pow(2,...