Ray Casting

by egon

HTML

<div id="center">
    <canvas id="canvas"></canvas>
    <hr />
    <div id="logDiv"></div>
    <script type="text/javascript">
        canvas = document.getElementById("canvas");
        W=400; H=400;
        canvas.width = W;
        canvas.height = H,
        canvas2D = canvas.getContext("2d");
        
        log = (function(){
            var logDiv = document.getElementById("logDiv");
            return function(){
                var args = [];
                for(var i=0; i < arguments.length; i++)
                    args.push( arguments[i] );
                logDiv.innerHTML = "<p>" + JSON.stringify(args) + "</p>" + logDiv.innerHTML;
            };
        })();
        
    </script>
</div>

CSS

body {
    margin : 0 0;
    width  : 100%;
    background: #000;
}
#center {
    align : center;
    margin : 0 auto;
    margin-top : 30px;
    width : 400px;
}

hr {
    color: #fff;
}

#logDiv {
    font:normal 12px/16px Courier New, monospace;
    color: #fff;
    height: 200px;
    overflow: scroll;
}

JavaScript

Object = {
    def : null,
    
};

Op = {
    union : 0,
    intersect : 1,
    subtract : 2
};

Composite = {
    left  : null,
    right : null,
    op : 0,
    intersect: function( ray ){
    }
};

Rect = {
    topLeft : V2(0,0),
    size : V2(0,0),
    intersect: function( ray ){
    }
};

Circle = {
    center : V2(10,10),
    radius : 10,
    intersect: function( ray ){
    }
};

Ray = {
    limit : 100,
    start : V2(0,0),
    direction : V2(1,1),
    segments : {},
    calculate : function( scene ){
        
    },
    draw : function(){
        
    }
};


Sys = {
    tick   : 0,
    doTick : function(){
        canvas2D.fillStyle = "#fff";
        canvas2D.fillRect(0,0,W,H);

        this.tick++;
    }
};
sys = Object.create(Sys);

function tick(){ sys.tick() };
setInterval( tick, 1000 );