JSX Trigonometrische Funktionen

Aus Wiki1

(Unterschied zwischen Versionen)
Wechseln zu: Navigation, Suche
 
(Der Versionsvergleich bezieht 7 dazwischenliegende Versionen mit ein.)
Zeile 1: Zeile 1:
-
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!):
+
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. Eine besonders smarte Lösung bietet die Kombination aus Mediawiki und JSXGraph. Mit der Extension für JSXGraph kann Mediawiki als "Programmierumgebung" für Berechnungsprogramme mit interaktiver Grafik genutzt werden.
-
<jsxgraph box="box" width="400" height="400">
+
Unter http://jsxgraph.uni-bayreuth.de/wiki/index.php/Category:Examples sind Beispiele für unzählige mathematische Fragestellungen verfügbar.  
-
var board = JXG.JSXGraph.initBoard('box', {boundingbox: [-1.33, 1.33, 1.33, -1.33], axis: true});
+
-
board.suspendUpdate();
+
-
var b1c1 = board.create('circle', [[0,0], [1,0]]);
+
-
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 perp2 = board.create('perpendicular',[board.defaultAxes.y,b1p1],[{strokeColor: '#0000ff', visible: true}, {visible: false}]);
+
-
board.unsuspendUpdate();
+
-
// Animation
+
Hier ein Beispiel zur Darstellung der Trigonometrischen Funktionen (der rote Punkt kann mit der Maus bewegt werden!):
-
var animated = false;
+
 
-
function animate(point, direction, count) {
+
<jsxgraph box="box" width="400" height="400">
-
    if(animated) {
+
var brd = JXG.JSXGraph.initBoard('box', {boundingbox: [-3, 3, 3, -3]});
-
        point.stopAnimation();
+
var ax = brd.create('line',[[0,0],[1,0]],{visible:false});
-
        animated = false;
+
var ay = brd.create('line',[[0,0],[0,1]],{visible:false});
-
     } else {
+
-
         point.startAnimation(direction, count);
+
var p0 = brd.create('point',[0,0],{fixed:true,visible:false});
-
         animated = true;
+
var p1 = brd.create('point',[1,0],{name:'',visible:false,fixed:true});
-
    }
+
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});
 +
var p3 = brd.create('point',[function(){return p2.X();},0.0],{visible:false,name:'',withLabel:false});
 +
var p4 = brd.create('point',[0.0,function(){return p2.Y();}],{visible:false,name:'',withLabel:false});
 +
 +
brd.create('line',[p0,p2],{straightFirst:false,straightLast:false,strokeColor:'black'});  // Hypotenuse
 +
brd.create('line',[p2,p3],{straightFirst:false,straightLast:false,strokeColor:'red'});     // sin
 +
brd.create('line',[p2,p4],{straightFirst:false,straightLast:false,strokeColor:'red'});    // cos
 +
 +
var t = brd.create('tangent',[p2],{visible:false});
 +
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
 +
brd.create('line',[p0,p6],{straightFirst:false,straightLast:false,strokeColor:'green'});  // csc
 +
brd.create('line',[p0,p5],{straightFirst:false,straightLast:false,strokeColor:'green'});  // sec
 +
 +
brd.create('text',[
 +
         function(){return (p0.X()+p2.X())*0.5;},
 +
        function(){return (p0.Y()+p2.Y())*0.5;},
 +
         '1'],{});
 +
 +
brd.create('text',[
 +
        function(){return (p2.X()+p4.X())*0.3;},
 +
        function(){return (p2.Y()+p4.Y())*0.5;},
 +
        'cos'],{});
 +
 +
brd.create('text',[
 +
        function(){return (p2.X()+p3.X())*0.5;},
 +
        function(){return (p2.Y()+p3.Y())*0.5;},
 +
        'sin'],{});
 +
 +
brd.create('text',[
 +
        function(){return 0.1+(p2.X()+p5.X())*0.5;},
 +
        function(){return 0.1+(p2.Y()+p5.Y())*0.5;},
 +
        '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>
-
<jsxgraph box="box2" width="400" height="400">
 
-
var board2 = JXG.JSXGraph.initBoard('box2', {boundingbox: [-1, 1.33, 7, -1.33], axis: true});
 
-
board2.suspendUpdate();
 
-
board2.create('ticks', [board2.defaultAxes.x, [Math.PI, 2*Math.PI]], {strokeColor: 'green', strokeWidth: 2});
 
-
// sine:
+
siehe auch: [[Geogebra]]
-
var b2p1 = board2.create('point', [
+
-
            function(){ return JXG.Math.Geometry.rad([1,0],[0,0],b1p1); },
+
-
            function() { return b1p1.Y() }],
+
-
            {fixed: true, trace: true, color: '#ff0000', name: 'S'});
+
-
// cosine:
+
-
var b2p2 = board2.create('point', [
+
-
            function(){ return JXG.Math.Geometry.rad([1,0],[0,0],b1p1); },
+
-
            function() { return b1p1.X() }],
+
-
            {fixed: true, trace: true, color: '#0000ff', name: 'C'});
+
-
// Dependencies (only necessary if b2p1 or b2p2 is deleted)
+
-
b1p1.addChild(b2p1);
+
-
b1p1.addChild(b2p2);
+
-
board2.unsuspendUpdate();
+
-
board.addChild(board2);
+
Weiter Beispiele: [[Jansen Theo]]
-
</jsxgraph>
+
[[Kategorie:Bilder]]
[[Kategorie:Bilder]]
[[Kategorie:Wissen]]
[[Kategorie:Wissen]]

Aktuelle Version vom 15:42, 27. Feb. 2017

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. Eine besonders smarte Lösung bietet die Kombination aus Mediawiki und JSXGraph. Mit der Extension für JSXGraph kann Mediawiki als "Programmierumgebung" für Berechnungsprogramme mit interaktiver Grafik genutzt werden.

Unter http://jsxgraph.uni-bayreuth.de/wiki/index.php/Category:Examples sind Beispiele für unzählige mathematische Fragestellungen verfügbar.

Hier ein Beispiel zur Darstellung der Trigonometrischen Funktionen (der rote Punkt kann mit der Maus bewegt werden!):

siehe auch: Geogebra

Weiter Beispiele: Jansen Theo

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