
<?php
if(isset($_GET['show_source'])) {
    show_source(__FILE__);
    die();
}

$mode = '';
if(isset($_REQUEST['mode'])) {
    $mode = $_REQUEST['mode'];
}

function renderSphere($radius = 7, $latitudes = 25, $longitudes = 25, $xCenter = 0, $yCenter = 0, $zCenter = 0) {
    $buffer = '';
    $p = 2*M_PI;
    for($iBreed = 0; $iBreed < $latitudes; $iBreed++) {
        for($iLeng = 0; $iLeng < $longitudes; $iLeng++) {
            //opzij
            $xFrom = ((cos( $p * ($iLeng / $longitudes)) * cos( $p * ($iBreed / $latitudes))) * $radius) + $xCenter;
            $zFrom = ((sin( $p * ($iLeng / $longitudes)) * cos( $p * ($iBreed / $latitudes))) * $radius) + $yCenter;
            $yFrom = ((sin( $p * ($iBreed / $latitudes))) * $radius) + $zCenter;
            
            $xTo = ((cos( $p * (($iLeng + 1) / $longitudes)) * cos( $p * ($iBreed / $latitudes))) * $radius) + $xCenter;
            $zTo = ((sin( $p * (($iLeng + 1) / $longitudes)) * cos( $p * ($iBreed / $latitudes))) * $radius) + $yCenter;
            $yTo = ((sin( $p * ($iBreed / $latitudes))) * $radius) + $zCenter;
            
            $buffer .= '[['.round($xFrom, 11).', '.round($yFrom, 11).', '.round($zFrom, 11).'], ['.round($xTo, 11).', '.round($yTo, 11).', '.round($zTo, 11).']],'."\n";
            
            //naar beneden
            $xTo = ((cos( $p * ($iLeng / $longitudes)) * cos( $p * (($iBreed + 1) / $latitudes))) * $radius) + $xCenter;
            $zTo = ((sin( $p * ($iLeng / $longitudes)) * cos( $p * (($iBreed + 1) / $latitudes))) * $radius) + $yCenter;
            $yTo = ((sin( $p * (($iBreed + 1) / $latitudes))) * $radius) + $zCenter;
            
            $buffer .= '[['.round($xFrom, 11).', '.round($yFrom, 11).', '.round($zFrom, 11).'], ['.round($xTo, 11).', '.round($yTo, 11).', '.round($zTo, 11).']]';
            if($iBreed != $latitudes - 1 || ($iBreed == $latitudes - 1 && $iLeng != $longitudes - 1)) {
                $buffer .= ','."\n";
            }
        }
    }
    return $buffer;
}

?><!DOCTYPE HTML>
<html>
    <head>  
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        
        <title>3D Animation - Canvas Playground - HTML 5 features</title>
        
        <script type="text/javascript" src="canvas.js"></script>
        <script type="text/javascript" src="axis3d.js"></script>
        <script type="text/javascript" src="benchmark.js"></script>
        
        <script type="text/javascript">
        /* <![CDATA[ */
            var a;

            function init() {
                var c = new Canvas(document.getElementById('axis'));
                var b = new Benchmark();
                var fpsDiv = document.getElementById('fps');
                a = new Axis3D(c);
                updateFields(1);
                //lines = objects[parseInt(document.getElementById('object').value)];
                
                <? if($mode == 'isometric'): ?>
                a.zIncrease = .1;
                a.isometric = true;
                <? endif; ?>
                
                setObject();
                
                setInterval(function() {
                    paint(a);
                    b.lap();
                    fpsDiv.innerHTML = Math.round(b.rate()) + ' fps';
                }, 0);
            }

            function setProjection() {
                var val = parseInt(document.getElementById('projection').value);
                if(val == 0) {
                    a.zIncrease = .96;
                    a.isometric - false;
                } else {
                    a.zIncrease = .1;
                    a.isometric = true;
                }
                setObject();
            }
            
            var speed = [0, 0, 0];
            var lines = [];
            
            var w2 = Math.sqrt(2);
            
            var objects = [
                [ //cube
                    //bodem
                    [[5, 5, -5], [5, 5, 5]], //rechtsvoor, naar rechtsachter
                    [[5, 5, 5] , [-5, 5, 5]], //rechtsachter, naar linksachter
                    [[-5, 5, 5], [-5, 5, -5]], //linksachter, naar linksvoor
                    [[-5, 5, -5], [5, 5, -5]] //linksvoor, naar rechtsvoor
                    ,
                    //dak
                    [[5, -5, -5], [5, -5, 5]], //rechtsvoor, naar rechtsachter
                    [[5, -5, 5] , [-5, -5, 5]], //rechtsachter, naar linksachter
                    [[-5, -5, 5], [-5, -5, -5]], //linksachter, naar linksvoor
                    [[-5, -5, -5], [5, -5, -5]] //linksvoor, naar rechtsvoor
                    ,
                    //palen (4x)
                    [[5, 5, -5], [5, -5, -5]],
                    [[5, 5, 5], [5, -5, 5]],
                    [[-5, 5, 5], [-5, -5, 5]],
                    [[-5, 5, -5], [-5, -5, -5]]
                ],
                [ //pyramid
                    //bodem
                    [[5, 5, -5], [5, 5, 5]], //rechtsvoor, naar rechtsachter
                    [[5, 5, 5] , [-5, 5, 5]], //rechtsachter, naar linksachter
                    [[-5, 5, 5], [-5, 5, -5]], //linksachter, naar linksvoor
                    [[-5, 5, -5], [5, 5, -5]] //linksvoor, naar rechtsvoor
                    ,
                    //palen (4x)
                    [[5, 5, -5], [0, -5, 0]],
                    [[5, 5, 5], [0, -5, 0]],
                    [[-5, 5, 5], [0, -5, 0]],
                    [[-5, 5, -5], [0, -5, 0]]
                ],
                [ //octaeder
                    //bodem
                    [[5, 0, -5], [5, 0, 5]], //rechtsvoor, naar rechtsachter
                    [[5, 0, 5] , [-5, 0, 5]], //rechtsachter, naar linksachter
                    [[-5, 0, 5], [-5, 0, -5]], //linksachter, naar linksvoor
                    [[-5, 0, -5], [5, 0, -5]] //linksvoor, naar rechtsvoor
                    ,
                    //palen (8x)
                    [[5, 0, -5], [0, -5, 0]],
                    [[5, 0, 5], [0, -5, 0]],
                    [[-5, 0, 5], [0, -5, 0]],
                    [[-5, 0, -5], [0, -5, 0]],
                    [[5, 0, -5], [0, 5, 0]],
                    [[5, 0, 5], [0, 5, 0]],
                    [[-5, 0, 5], [0, 5, 0]],
                    [[-5, 0, -5], [0, 5, 0]]
                ],
                [ //dinges
                    //achthoek onder
                    [[2          , 2, 2 + (2*w2) ], [2 + (2*w2) , 2, 2          ]],
                    [[2 + (2*w2) , 2, 2          ], [2 + (2*w2) , 2, -2         ]],
                    [[2 + (2*w2) , 2, -2         ], [2          , 2, -2 - (2*w2)]],
                    [[2          , 2, -2 - (2*w2)], [-2         , 2, -2 - (2*w2)]],
                    [[-2         , 2, -2 - (2*w2)], [-2 - (2*w2), 2, -2         ]],
                    [[-2 - (2*w2), 2, -2         ], [-2 - (2*w2), 2, 2          ]],
                    [[-2 - (2*w2), 2, 2          ], [-2         , 2, 2 + (2*w2) ]],
                    [[-2         , 2, 2 + (2*w2) ], [2          , 2, 2 + (2*w2) ]]
                    ,
                    //achthoek boven
                    [[2          , -2, 2 + (2*w2) ], [2 + (2*w2) , -2, 2          ]],
                    [[2 + (2*w2) , -2, 2          ], [2 + (2*w2) , -2, -2         ]],
                    [[2 + (2*w2) , -2, -2         ], [2          , -2, -2 - (2*w2)]],
                    [[2          , -2, -2 - (2*w2)], [-2         , -2, -2 - (2*w2)]],
                    [[-2         , -2, -2 - (2*w2)], [-2 - (2*w2), -2, -2         ]],
                    [[-2 - (2*w2), -2, -2         ], [-2 - (2*w2), -2, 2          ]],
                    [[-2 - (2*w2), -2, 2          ], [-2         , -2, 2 + (2*w2) ]],
                    [[-2         , -2, 2 + (2*w2) ], [2          , -2, 2 + (2*w2) ]]
                    ,
                    //palen tussen achthoeken
                    [[2          , 2, 2 + (2*w2) ], [2          , -2, 2 + (2*w2) ]],
                    [[2 + (2*w2) , 2, 2          ], [2 + (2*w2) , -2, 2          ]],
                    [[2 + (2*w2) , 2, -2         ], [2 + (2*w2) , -2, -2         ]],
                    [[2          , 2, -2 - (2*w2)], [2          , -2, -2 - (2*w2)]],
                    [[-2         , 2, -2 - (2*w2)], [-2         , -2, -2 - (2*w2)]],
                    [[-2 - (2*w2), 2, -2         ], [-2 - (2*w2), -2, -2         ]],
                    [[-2 - (2*w2), 2, 2          ], [-2 - (2*w2), -2, 2          ]],
                    [[-2         , 2, 2 + (2*w2) ], [-2         , -2, 2 + (2*w2) ]]
                    ,
                    //vierkant dak
                    [[2, -2 - (2*w2), 2], [2, -2 - (2*w2), -2]],
                    [[2, -2 - (2*w2), -2], [-2, -2 - (2*w2), -2]],
                    [[-2, -2 - (2*w2), -2], [-2, -2 - (2*w2), 2]],
                    [[-2, -2 - (2*w2), 2], [2, -2 - (2*w2), 2]]
                    ,
                    //ribben naar dak
                    [[2, -2 - (2*w2), 2], [2          , -2, 2 + (2*w2) ]],
                    [[2, -2 - (2*w2), 2], [2 + (2*w2) , -2, 2          ]],
                    [[2, -2 - (2*w2), -2], [2 + (2*w2) , -2, -2         ]],
                    [[2, -2 - (2*w2), -2], [2          , -2, -2 - (2*w2)]],
                    [[-2, -2 - (2*w2), -2], [-2         , -2, -2 - (2*w2)]],
                    [[-2, -2 - (2*w2), -2], [-2 - (2*w2), -2, -2         ]],
                    [[-2, -2 - (2*w2), 2], [-2 - (2*w2), -2, 2          ]],
                    [[-2, -2 - (2*w2), 2], [-2         , -2, 2 + (2*w2) ]]
                    ,
                    //vierkant bodem
                    [[2, 2 + (2*w2), 2], [2, 2 + (2*w2), -2]],
                    [[2, 2 + (2*w2), -2], [-2, 2 + (2*w2), -2]],
                    [[-2, 2 + (2*w2), -2], [-2, 2 + (2*w2), 2]],
                    [[-2, 2 + (2*w2), 2], [2, 2 + (2*w2), 2]]
                    ,
                    //ribben naar bodem
                    [[2, 2 + (2*w2), 2], [2          , 2, 2 + (2*w2) ]],
                    [[2, 2 + (2*w2), 2], [2 + (2*w2) , 2, 2          ]],
                    [[2, 2 + (2*w2), -2], [2 + (2*w2) , 2, -2         ]],
                    [[2, 2 + (2*w2), -2], [2          , 2, -2 - (2*w2)]],
                    [[-2, 2 + (2*w2), -2], [-2         , 2, -2 - (2*w2)]],
                    [[-2, 2 + (2*w2), -2], [-2 - (2*w2), 2, -2         ]],
                    [[-2, 2 + (2*w2), 2], [-2 - (2*w2), 2, 2          ]],
                    [[-2, 2 + (2*w2), 2], [-2         , 2, 2 + (2*w2) ]]
                ],
                [
<?= renderSphere(); ?>
                ],
                [
<?= renderSphere(3, 14, 14); ?>
<?= ','."\n"; ?>
<?= renderSphere(1, 8, 8, 7, -7, 7); ?>
                ]
            ];
            
            function paint(axis) {
                axis.canvas.clear();
                //axis.drawAxis();
                for(i = 0; i < lines.length; i++) {
                    if(document.getElementById('xRotate').checked) {
                        lines[i][0] = axis.xRotate(lines[i][0], speed[0]);
                        lines[i][1] = axis.xRotate(lines[i][1], speed[0]);
                    }
                    if(document.getElementById('yRotate').checked) {
                        lines[i][0] = axis.yRotate(lines[i][0], speed[1]);
                        lines[i][1] = axis.yRotate(lines[i][1], speed[1]);
                    }
                    if(document.getElementById('zRotate').checked) {
                        lines[i][0] = axis.zRotate(lines[i][0], speed[2]);
                        lines[i][1] = axis.zRotate(lines[i][1], speed[2]);
                    } 
                    axis.drawLine(lines[i][0], lines[i][1]);
                }
                
                if(document.getElementById('xRotate').checked) {
                    speed[0] = ((parseInt(document.getElementById('xSpeed').value) / 100)) % (3600);
                }
                if(document.getElementById('yRotate').checked) {
                    speed[1] = ((parseInt(document.getElementById('ySpeed').value) / 100)) % (3600);
                }
                if(document.getElementById('zRotate').checked) {
                    speed[2] = ((parseInt(document.getElementById('zSpeed').value) / 100)) % (3600);
                }
                
            }

            function arrayToText(arr, d) {
                if(d == null) {
                    d = 0;
                }
                if(typeof(arr) != 'object') {
                    return arr;
                }
                var res = '';
                if(d > 0) {
                    res = res + '\n';
                }
                res = res + '[';
                for(var i = 0; i < arr.length; i++) {
                    res = res + arrayToText(arr[i], d + 1);
                    if(i < arr.length - 1) {
                        res = res + ', ';
                    }
                }
                return res + ']';
            }
            
            function updateFields(n) {
                if(n) {
                                        document.getElementById('object'+n).checked = 'checked';
                                }
                if(n == 1) {
                    document.getElementById('lineInput').value = arrayToText(objects[parseInt(document.getElementById('object').value)]);
                    
                } else {
                    var func = functions[document.getElementById('select2').value];
                    document.getElementById('xFunc').value = func[0];
                                    document.getElementById('yFunc').value = func[1];
                                    document.getElementById('zFunc').value = func[2];
                    document.getElementById('uFrom').value = func[3];
                                    document.getElementById('uTo').value = func[4];
                                    document.getElementById('uStep').value = func[5];
                                    document.getElementById('vFrom').value = func[6];
                                    document.getElementById('vTo').value = func[7];
                                    document.getElementById('vStep').value = func[8];
                }
                setObject(n);
            }
            
            function setObject(n) {
                if(n) {
                    document.getElementById('object'+n).checked = 'checked';
                }
                if(document.getElementById('object1').checked) {
                //    try {
                        lines = eval(document.getElementById('lineInput').value);
                //        document.getElementById('lineInput').style.border = '';
                //    } catch(e) {
                //        document.getElementById('lineInput').style.border = 'solid 3px #FF0000';
                //    }
                    //lines = objects[parseInt(document.getElementById('object').value)];
                } else {
                    tmpLines = getObject();
                    if(tmpLines != null) {
                        lines = tmpLines;
                    }
                }
            }
            
            function getObject() {
                uFrom = parse('parseFloat('+document.getElementById('uFrom').value+');', 'uFrom', 'float');
                uTo   = parse('parseFloat('+document.getElementById('uTo').value+');', 'uTo', 'float');
                uStep = parse('parseFloat('+document.getElementById('uStep').value+');', 'uStep', 'float');
                vFrom = parse('parseFloat('+document.getElementById('vFrom').value+');', 'vFrom', 'float');
                vTo   = parse('parseFloat('+document.getElementById('vTo').value+');', 'vTo', 'float');
                vStep = parse('parseFloat('+document.getElementById('vStep').value+');', 'vStep', 'float');
                
                xFunc = parse('function(u, v) { return ' + document.getElementById('xFunc').value + '; } ', 'xFunc', 'function');
                yFunc = parse('function(u, v) { return ' + document.getElementById('yFunc').value + '; } ', 'yFunc', 'function');
                zFunc = parse('function(u, v) { return ' + document.getElementById('zFunc').value + '; } ', 'zFunc', 'function');
                
                if(uFrom == null || uTo == null || uStep == null || vFrom == null || vTo == null || vStep == null || xFunc == null || yFunc == null || zFunc == null || uStep == 0 || vStep == 0 || uTo < uFrom || vTo < vFrom) {
                    return null;
                }
                
                var pointFrom = [xFunc(uFrom, vFrom), yFunc(uFrom, vFrom), zFunc(uFrom, vFrom)];
                var pointTo = [];
                var object = [];
                for(u = uFrom; u <= uTo; u = u + uStep) {
                    for(v = vFrom; v <= vTo; v = v + vStep) {
                        pointTo = [xFunc(u, v), yFunc(u, v), zFunc(u, v)];
                        object[object.length] = [[pointFrom[0], pointFrom[1], pointFrom[2]], [pointTo[0], pointTo[1], pointTo[2]]];
                        pointFrom = [pointTo[0], pointTo[1], pointTo[2]];
                    }
                }
                return object;
            }
            
            function parse(value, idToBlame, type) {
                var error = false;
                var tmp = null;
                try {
                    if (type == 'function') {
                        eval('tmp = '+value);
                    } else {
                        tmp = eval(value);
                    }
                } catch(e) {
                    error = true;
                }

                if(type == 'float') {
                    if(typeof(tmp) != 'number' || isNaN(tmp)) {
                        error = true;
                    }
                } else if (type == 'function') {
                    if(typeof(tmp) != 'function') {
                        error = true;
                    }
                }
                
                if(error) {
                        document.getElementById(idToBlame).style.border = 'solid 3px #FF0000';
                        return null;
                }
                document.getElementById(idToBlame).style.border = '';
                return tmp;
            }
            
            function debug(msg) {
                var dbg = document.getElementById('debug');
                var tmp = dbg.innerHTML;
                tmp = msg + '\n' + tmp.replace('<br />', '\n');
                if(tmp.length > 300) {
                    tmp = tmp.substring(0, 300);
                }
                dbg.innerHTML = tmp.replace('\n', '<br />');
            }
        
var functions = [
            [
                'Math.cos(u) * Math.sin(v) * 5',
                'Math.sin(u) * Math.sin(v) * 5',
                'Math.cos(v) * 5',
                '0',
                '2*Math.PI',
                '.2',
                '-Math.PI',
                                'Math.PI',
                '.2'
            ],
            [
                '(u<0)? Math.sqrt(25 - (u +5) * (u+5)) * Math.sin(v) : Math.cos(u) * Math.sin(v) * 5',
                '(u<0)? Math.sqrt(25 - (u+5) * (u+5)) * Math.cos(v) : Math.sin(u) * Math.sin(v) * 5',
                '(u<0)? -Math.round((u+5) * 5) / 5: Math.cos(v) * 5',
                '-10',
                'Math.PI',
                '.1*Math.PI',
                '-Math.PI',
                'Math.PI',
                '.1*Math.PI'
            ], [
                '5 * Math.cos(u*10) * Math.cos(u/2)',
                '5 * Math.sin(u*10) * Math.cos(u/2)',
                'u*2',
                '-Math.PI',
                'Math.PI',
                '.005 * Math.PI',
                '-Math.PI',
                'Math.PI',
                'Math.PI /2'
            ]
]

        /* ]]> */
        </script>

        <style type="text/css">
            canvas { border: 1px solid black; }
        </style>
    </head>

    <body onload="init()" style="font-family: Lucida Console; font-size: 10pt;">
        <h1>3D Animation - Canvas Playground - HTML 5 features</h1>
        As discussed at <a href="http://www.edesign.nl/">www.eDesign.nl</a> | by Jurgen Westerhof<br /><br />
            <canvas id="axis" width="400" height="400" style="float: left">
                This text is displayed if your browser does not support HTML5 Canvas.
            </canvas>
            <div style="float: right">
                    <fieldset>
                            <legend>Object to show</legend>
                <fieldset>
                    <legend> <label><input type="radio" name="object" id="object1" value="predef" checked="checked" onchange="setObject()" />Predefined</label></legend>
                    <select name="object" id="object" onchange="updateFields(1)">
                                        <option value="3">Rombo&euml;dric kubocta&euml;der</option>
                                           <option value="4">Sphere (slow in other than Chrome or Safari)</option>
                                        <option value="0">Cube</option>
                                           <option value="1">Pyramid</option>
                                           <option value="2">Octaeder</option>
                                           <option value="5">Planet and moon</option>
                                </select><br />
                    <textarea id="lineInput" cols="60" rows="10" onkeyup="setObject(1)"></textarea><br />
                </fieldset>
                            <fieldset>
                    <legend><label><input type="radio" name="object" id="object2" value="func" onchange="setObject()" />Function</label></legend>
                    <select onchange="updateFields(2)" id="select2">
                        <option value="0">0</option>
                        <option value="1">1</option>
                        <option value="2">2</option>
                    </select>
                    <a href="#"onclick="document.getElementById('jsmath').style.display = 'block'">help</a> <span style="font-size: 8px">(Help image by Visibone: http://javascript-reference.info/)</span><br />
                                 <img src="js_math.gif" id="jsmath" style="float: left; display: none;" onclick="this.style.display = 'none'"/>
                                 x(u, v) = <input type="text" name="xFunc" id="xFunc" value="Math.cos(u) * Math.sin(v) * 5" style="width: 400px;" onkeyup="setObject(2)"  /><br />
                                 y(u, v) = <input type="text" name="yFunc" id="yFunc" value="Math.sin(u) * Math.sin(v) * 5" style="width: 400px;" onkeyup="setObject(2)"  /><br />
                              z(u, v) = <input type="text" name="zFunc" id="zFunc" value="Math.cos(v) * 5" style="width: 400px;" onkeyup="setObject(2)"  /><br />
                                    Let u range from <input type="text" name="uFrom" id="uFrom" value="0" style="width: 100px;" onkeyup="setObject(2)"  /> to <input type="text" name="uTo" id="uTo" value="2 * Math.PI" style="width: 100px;" onkeyup="setObject(2)"  /> (precision <input type="text" name="uStep" id="uStep" value=".2" style="width: 100px;" onkeyup="setObject(2)"  />)<br />
                                    Let v range from <input type="text" name="vFrom" id="vFrom" value="-Math.PI" style="width: 100px;" onkeyup="setObject(2)"  /> to <input type="text" name="vTo" id="vTo" value="Math.PI" style="width: 100px;" onkeyup="setObject(2)"  /> (precision <input type="text" name="vStep" id="vStep" value=".2" style="width: 100px;" onkeyup="setObject(2)"  />)<br />
                        </fieldset>
            </div>
        <div style="clear: both"></div>
        <fieldset>
            <legend>Rotation settings</legend>
            <label><input type="checkbox" name="xRotate" checked="checked" id="xRotate" /> Rotate x-axis at</label> <select name="xSpeed" id="xSpeed">
                <option value="5">5%</option>
                <option value="10">10%</option>
                <option value="20">20%</option>
                <option value="30">30%</option>
                <option value="40">40%</option>
                <option value="50" selected="selected">50%</option>
                <option value="60">60%</option>
                <option value="70">70%</option>
                <option value="80">80%</option>
                <option value="90">90%</option>
                <option value="100">100%</option>
                <option value="150">150%</option>
                <option value="200">200%</option>
            </select> rotational speed.<br />
            <label><input type="checkbox" name="yRotate" checked="checked" id="yRotate" /> Rotate y-axis at</label> <select name="ySpeed" id="ySpeed">
                <option value="5">5%</option>
                <option value="10">10%</option>
                <option value="20">20%</option>
                <option value="30">30%</option>
                <option value="40">40%</option>
                <option value="50" selected="selected">50%</option>
                <option value="60">60%</option>
                <option value="70">70%</option>
                <option value="80">80%</option>
                <option value="90">90%</option>
                <option value="100">100%</option>
                <option value="150">150%</option>
                <option value="200">200%</option>
            </select> rotational speed.<br />
            <label><input type="checkbox" name="zRotate" checked="checked" id="zRotate" /> Rotate z-axis at</label> <select name="zSpeed" id="zSpeed">
                <option value="5">5%</option>
                <option value="10">10%</option>
                <option value="20">20%</option>
                <option value="30">30%</option>
                <option value="40">40%</option>
                <option value="50" selected="selected">50%</option>
                <option value="60">60%</option>
                <option value="70">70%</option>
                <option value="80">80%</option>
                <option value="90">90%</option>
                <option value="100">100%</option>
                <option value="150">150%</option>
                <option value="200">200%</option>
            </select> rotational speed.<br />
        </fieldset>
<br />
<?php /*
        <fieldset>
            <legend>Projection mode</legend>
            <select onchange="setProjection()" id="projection">
                <option value="0">Central projection</option>
                <option value="1">Isometric</option>
            </select>
        </fieldset>
*/ ?>
        <div id="fps"> </div>
        <div id="debug"> </div><br />
        Mode: <a href="index.php">Normal</a> <a href="index.php?mode=isometric">Isometric</a><br /><br />
<p>
    <a href="?show_source=true">Source of this PHP file</a><br />
    <a href="http://validator.w3.org/check?uri=referer"><img
        src="html5.png"
        alt="Valid HTML5" height="31" width="80" style="border: none" border="0" /></a>
</p>
    </body>
</html>