Difference between revisions of "Parallel projection of a sphere"

From JSXGraph Wiki
Jump to navigationJump to search
 
(4 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});
 +
 
 +
 
 +
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'});
  
navbar:
+
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'
 
},
 
 
});
 
});
  
Line 35: Line 114:
 
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 16: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]);