View source for Parallel projection of a sphere

<jsxgraph width="700" height="700">
var board = JXG.JSXGraph.initBoard('jxgbox', 
{
	boundingbox:[-10, 10, 10, -10],
	axis:true, 
	showCopyright:true,
	showNavigation:true,
	pan:false,
	grid:false,
	
	zoom: 
	{
		factorX : 1.25,
		factorY : 1.25,
		wheel: false
	}
});

var zAxis = board.create ('axis', [[0, 0], [-1, -1]], {ticks:{majorHeight:10, drawLabels:false}});

var cam = [4,4,30];  // [x,y,z]
var r = 6.0;

var sRadius = board.create('slider', [[1, -8.5], [6, -8.5], [-10, 0 ,10]], {name:'angle', snapWidth:1});

var M = board.create('point', [0, r], {visible:false});
var ci = board.create('circle', [[0, 0], M], {strokeColor:'black', dash:1, shadow:false, fixed:true});

var p1 = board.create('point', [r, 0], {fixed:true, name:'p_1', visible:false});
var p2 = board.create('point', [-r, 0], {fixed:true, name:'p_2', visible:false});
var p3 = board.create('point', [0, r], {fixed:true, name:'p_3', visible:false});
var p4 = board.create('point', [0, -r], {fixed:true, name:'p_4', visible:false});

// Parallel projection
var project = function(crd, cam) {
        var d = - crd[2]/cam[2];
        return [1, crd[0]+d*cam[0], crd[1]+d*cam[1]];
    };

   
var A = board.create('point', [
        function() {
            var c = [r/Math.sqrt(2), 0, r/Math.sqrt(2)];
            return project(c, cam);
        }
    ], {name:'', visible:false});


var B = board.create('point', [
        function() {
            var c = [-r/Math.sqrt(2), 0, r/Math.sqrt(2)];
            return project(c, cam);
        }
    ], {name:'', visible:false});


var C = board.create('point', [
        function() {
            var c = [r/Math.sqrt(2), 0, -r/Math.sqrt(2)];
            return project(c, cam);
        }
    ], {name:'', visible:false});


var el1 = board.create('conic', [A, B, C, p2, p1]);


var I = board.create('point', [
        function(){
            var v = sRadius.Value()*Math.PI*0.5/10.0;
            return project([r*Math.sin(v), 0, r*Math.cos(v)], cam);
            }
    ], {visible:true, name:'I'});

var I2 = board.create('point', [
        function(){
            var v = sRadius.Value()*Math.PI*0.5/10.0;
            return project([-r*Math.sin(v), 0, -r*Math.cos(v)], cam);
            }
    ], {visible:true, name:'I_2'});

var I3 = board.create('point', [
        function(){
            var v = sRadius.Value()*Math.PI*0.5/10.0;
            return project([-r*Math.sin(v)/Math.sqrt(2), r/Math.sqrt(2), -r*Math.cos(v)/Math.sqrt(2)], cam);
            }
    ], {visible:true, name:'I_3'});

var el2 = board.create('conic', [I, I2, I3, p3, p4]);
</jsxgraph>

=== JavaScript code ===
<source lang="javascript">
var board = JXG.JSXGraph.initBoard('jxgbox', 
{
	boundingbox:[-10, 10, 10, -10],
	axis:true, 
	showCopyright:true,
	showNavigation:true,
	pan:false,
	grid:false,
	
	zoom: 
	{
		factorX : 1.25,
		factorY : 1.25,
		wheel: false
	}
});

var zAxis = board.create ('axis', [[0, 0], [-1, -1]], {ticks:{majorHeight:10, drawLabels:false}});

var cam = [4,4,30];  // [x,y,z]
var r = 6.0;

var sRadius = board.create('slider', [[1, -8.5], [6, -8.5], [-10, 0 ,10]], {name:'angle', snapWidth:1});

var M = board.create('point', [0, r], {visible:false});
var ci = board.create('circle', [[0, 0], M], {strokeColor:'black', dash:1, shadow:false, fixed:true});

var p1 = board.create('point', [r, 0], {fixed:true, name:'p_1', visible:false});
var p2 = board.create('point', [-r, 0], {fixed:true, name:'p_2', visible:false});
var p3 = board.create('point', [0, r], {fixed:true, name:'p_3', visible:false});
var p4 = board.create('point', [0, -r], {fixed:true, name:'p_4', visible:false});

// Parallel projection
var project = function(crd, cam) {
        var d = - crd[2]/cam[2];
        return [1, crd[0]+d*cam[0], crd[1]+d*cam[1]];
    };

   
var A = board.create('point', [
        function() {
            var c = [r/Math.sqrt(2), 0, r/Math.sqrt(2)];
            return project(c, cam);
        }
    ], {name:'', visible:false});


var B = board.create('point', [
        function() {
            var c = [-r/Math.sqrt(2), 0, r/Math.sqrt(2)];
            return project(c, cam);
        }
    ], {name:'', visible:false});


var C = board.create('point', [
        function() {
            var c = [r/Math.sqrt(2), 0, -r/Math.sqrt(2)];
            return project(c, cam);
        }
    ], {name:'', visible:false});


var el1 = board.create('conic', [A, B, C, p2, p1]);


var I = board.create('point', [
        function(){
            var v = sRadius.Value()*Math.PI*0.5/10.0;
            return project([r*Math.sin(v), 0, r*Math.cos(v)], cam);
            }
    ], {visible:true, name:'I'});

var I2 = board.create('point', [
        function(){
            var v = sRadius.Value()*Math.PI*0.5/10.0;
            return project([-r*Math.sin(v), 0, -r*Math.cos(v)], cam);
            }
    ], {visible:true, name:'I_2'});

var I3 = board.create('point', [
        function(){
            var v = sRadius.Value()*Math.PI*0.5/10.0;
            return project([-r*Math.sin(v)/Math.sqrt(2), r/Math.sqrt(2), -r*Math.cos(v)/Math.sqrt(2)], cam);
            }
    ], {visible:true, name:'I_3'});

var el2 = board.create('conic', [I, I2, I3, p3, p4]);
</source>
[[Category:Geometry]]
[[Category:Examples]]