JSX Trigonometrische Funktionen

Aus Wiki1

(Unterschied zwischen Versionen)
Wechseln zu: Navigation, Suche
Zeile 2: Zeile 2:
<jsxgraph box="box" width="400" height="400">
<jsxgraph box="box" width="400" height="400">
-
var board = JXG.JSXGraph.initBoard('box', {boundingbox: [-1.33, 1.33, 1.33, -1.33], axis: true});
+
var brd = JXG.JSXGraph.initBoard('box', {boundingbox: [-3, 3, 3, -3]});
-
board.suspendUpdate();
+
var ax = brd.create('line',[[0,0],[1,0]],{visible:false});
-
var b1c1 = board.create('circle', [[0,0], [1,0]]);
+
var ay = brd.create('line',[[0,0],[0,1]],{visible:false});
-
var b1p1 = board.create('point', [2, 0], {slideObject: b1c1});
+
-
var perp = board.create('perpendicular', [board.defaultAxes.x,b1p1],[{strokeColor: '#ff0000', visible: true}, {visible: false}]);
+
var p0 = brd.create('point',[0,0],{fixed:true,visible:false});
-
var perp2 = board.create('perpendicular',[board.defaultAxes.y,b1p1],[{strokeColor: '#0000ff', visible: true}, {visible: false}]);
+
var p1 = brd.create('point',[1,0],{name:'',visible:false,fixed:true});
-
board.unsuspendUpdate();
+
var c = brd.create('circle',[p0,p1],{dash:2,strokeWidth:1,strokeOpacity:0.6});
-
 
+
var p2 = brd.create('glider',[0.4,1.0,c],{name:'',withLabel:false});
-
// Animation
+
var p3 = brd.create('point',[function(){return p2.X();},0.0],{visible:false,name:'',withLabel:false});
-
var animated = false;
+
var p4 = brd.create('point',[0.0,function(){return p2.Y();}],{visible:false,name:'',withLabel:false});
-
function animate(point, direction, count) {
+
-
    if(animated) {
+
brd.create('line',[p0,p2],{straightFirst:false,straightLast:false,strokeColor:'black'});   // Hypotenuse
-
        point.stopAnimation();
+
brd.create('line',[p2,p3],{straightFirst:false,straightLast:false,strokeColor:'red'});    // sin
-
        animated = false;
+
brd.create('line',[p2,p4],{straightFirst:false,straightLast:false,strokeColor:'red'});    // cos
-
    } else {
+
-
        point.startAnimation(direction, count);
+
var t = brd.create('tangent',[p2],{visible:false});
-
        animated = true;
+
var p5 = brd.create('intersection',[t,ax,0],{visible:false,name:'',withLabel:false});
-
     }
+
var p6 = brd.create('intersection',[t,ay,0],{visible:false,name:'',withLabel:false});
-
}
+
brd.create('line',[p5,p6],{straightFirst:false,straightLast:false});                      // tan + cot
-
</jsxgraph>
+
brd.create('line',[p0,p6],{straightFirst:false,straightLast:false,strokeColor:'green'});  // csc
-
<jsxgraph box="box2" width="400" height="400">
+
brd.create('line',[p0,p5],{straightFirst:false,straightLast:false,strokeColor:'green'});   // sec
-
var board2 = JXG.JSXGraph.initBoard('box2', {boundingbox: [-1, 1.33, 7, -1.33], axis: true});
+
-
board2.suspendUpdate();
+
brd.create('text',[
-
board2.create('ticks', [board2.defaultAxes.x, [Math.PI, 2*Math.PI]], {strokeColor: 'green', strokeWidth: 2});
+
        function(){return (p0.X()+p2.X())*0.5;},
-
 
+
        function(){return (p0.Y()+p2.Y())*0.5;},
-
// sine:
+
        '1'],{});
-
var b2p1 = board2.create('point', [
+
-
            function(){ return JXG.Math.Geometry.rad([1,0],[0,0],b1p1); },  
+
brd.create('text',[
-
            function() { return b1p1.Y() }],  
+
        function(){return (p2.X()+p4.X())*0.3;},
-
            {fixed: true, trace: true, color: '#ff0000', name: 'S'});
+
        function(){return (p2.Y()+p4.Y())*0.5;},
-
// cosine:
+
        'cos'],{});
-
var b2p2 = board2.create('point', [
+
-
            function(){ return JXG.Math.Geometry.rad([1,0],[0,0],b1p1); },  
+
brd.create('text',[
-
            function() { return b1p1.X() }],  
+
        function(){return (p2.X()+p3.X())*0.5;},
-
            {fixed: true, trace: true, color: '#0000ff', name: 'C'});
+
        function(){return (p2.Y()+p3.Y())*0.5;},
-
// Dependencies (only necessary if b2p1 or b2p2 is deleted)
+
        'sin'],{});
-
b1p1.addChild(b2p1);
+
-
b1p1.addChild(b2p2);
+
brd.create('text',[
-
board2.unsuspendUpdate();
+
        function(){return 0.1+(p2.X()+p5.X())*0.5;},
-
 
+
        function(){return 0.1+(p2.Y()+p5.Y())*0.5;},
-
board.addChild(board2);
+
        'tan'],{});
 +
 +
brd.create('text',[
 +
        function(){return 0.1+(p2.X()+p6.X())*0.5;},
 +
        function(){return 0.1+(p2.Y()+p6.Y())*0.5;},
 +
        'cot'],{});
 +
 +
brd.create('text',[
 +
        function(){return -0.2+(p0.X()+p6.X())*0.5;},
 +
        function(){return (p0.Y()+p6.Y())*0.5;},
 +
        'csc'],{});
 +
 +
brd.create('text',[
 +
        function(){return (p0.X()+p5.X())*0.5;},
 +
        function(){return (p0.Y()+p5.Y())*0.5;},
 +
        'sec'],{});
</jsxgraph>
</jsxgraph>
[[Kategorie:Bilder]]
[[Kategorie:Bilder]]
[[Kategorie:Wissen]]
[[Kategorie:Wissen]]

Version vom 20:06, 23. Nov. 2013

Mit Hilfe des Programmpakets JSXGraph (siehe http://jsxgraph.uni-bayreuth.de/wp/) können komplexe, interaktive Grafiken nur mit Hilfe von JavaScript in Webseiten integriert werden. Hier ein Beispiel zur Darstellung der Trigonometrischen Funktionen (der rote Punkt kann mit der Maus bewegt werden!):

Von „https://www.technikundkultur.de/wiki1/index.php5?title=JSX_Trigonometrische_Funktionen“
Persönliche Werkzeuge