Parallel projection of a sphere: Difference between revisions

From JSXGraph Wiki
No edit summary
No edit summary
 
(5 intermediate revisions by the same user not shown)
Line 7: Line 7:
showNavigation:true,
showNavigation:true,
pan:false,
pan:false,
grid:true,
grid:false,
zoom:  
zoom:  
Line 14: Line 14:
factorY : 1.25,
factorY : 1.25,
wheel: false
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});


navbar:
 
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:  
{
{
strokeColor: '#aaaaaa',
factorX : 1.25,
fillColor: '#f5f5f5',
factorY : 1.25,
padding: '2px',
wheel: false
position: 'absolute',
}
fontSize: '10px',
cursor: 'pointer',
zIndex: '100',
right: '5px',
bottom: '5px'
},
});
});


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


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


var sRadius = board.create('slider', [[1, -8.5], [6, -8.5], [-10, 0 ,10]], {name:'Radius', snapWidth:1});
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 M = board.create('point', [0, r], {visible:false});
Line 101: Line 180:


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

Latest revision as of 14:52, 1 June 2012

JavaScript code

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]);