JSX Trigonometrische Funktionen

Aus Wiki1

(Unterschied zwischen Versionen)
Wechseln zu: Navigation, Suche
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. Hier ein Beispiel zur Darstellung der Trigonometrischen Funktionen (der rote Punkt kann mit der Maus bewegt werden!):
-
<jsxgraph box="jxgbox1" width="700" height="300">
+
<jsxgraph box="box" width="400" height="400">
-
board1 = JXG.JSXGraph.initBoard('jxgbox1', {axis:true, boundingbox: [-6, 3, 8, -3]});
+
var board = JXG.JSXGraph.initBoard('box', {boundingbox: [-1.33, 1.33, 1.33, -1.33], axis: true});
-
board1.suspendUpdate();
+
board.suspendUpdate();
-
board1.create('functiongraph', [function(t){ return Math.sin(t); },-10, 10],{strokeColor: "#cccccc"});
+
var b1c1 = board.create('circle', [[0,0], [1,0]]);
-
var s = board1.create('slider', [[0.75,-1.5],[5.75,-1.5],[0,0,10]], {name:'S',snapWidth:1});
+
var b1p1 = board.create('point', [2, 0], {slideObject: b1c1});
-
board1.create('functiongraph', [
+
var perp = board.create('perpendicular', [board.defaultAxes.x,b1p1],[{strokeColor: '#ff0000', visible: true}, {visible: false}]);
-
function(t) {
+
var perp2 = board.create('perpendicular',[board.defaultAxes.y,b1p1],[{strokeColor: '#0000ff', visible: true}, {visible: false}]);
-
var val = 0, i, sv = s.Value()+1;
+
board.unsuspendUpdate();
-
for(i = 0; i < sv; i++) {
+
-
  val = val + Math.pow(-1, i) * Math.pow(t, 2 * i + 1) / JXG.Math.factorial(2*i+1);
+
-
}
+
-
return val;
+
-
},
+
-
-10, 10], {strokeColor: "#bb0000"});
+
-
board1.unsuspendUpdate();
+
-
</jsxgraph>
+
 +
// Animation
 +
var animated = false;
 +
function animate(point, direction, count) {
 +
    if(animated) {
 +
        point.stopAnimation();
 +
        animated = false;
 +
    } else {
 +
        point.startAnimation(direction, count);
 +
        animated = true;
 +
    }
 +
}
 +
</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:
 +
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);
-
== Power Series for Cosine ==
+
-
<jsxgraph box="jxgbox2" width="700" height="300">
+
-
board2 = JXG.JSXGraph.initBoard('jxgbox2', {axis:true, boundingbox: [-6, 3, 8, -3]});
+
-
board2.suspendUpdate();
+
-
board2.create('functiongraph', [function(t){ return Math.cos(t); }, -10, 10],{strokeColor: "#cccccc"});
+
-
var s2 = board2.create('slider', [[0.75,-1.5],[5.75,-1.5],[0,0,10]], {name:'T',snapWidth:1});
+
-
board2.create('functiongraph', [
+
-
function(t) {
+
-
var val = 0, i, sv = s2.Value()+1;
+
-
for(i = 0; i < sv; i++) {
+
-
  val = val + Math.pow(-1, i) * Math.pow(t, 2 * i) / JXG.Math.factorial(2*i);
+
-
}
+
-
return val;
+
-
},
+
-
-10, 10],{strokeColor: "#009900"});
+
-
board2.unsuspendUpdate();
+
</jsxgraph>
</jsxgraph>
-
 
[[Kategorie:Bilder]]
[[Kategorie:Bilder]]
[[Kategorie:Wissen]]
[[Kategorie:Wissen]]

Version vom 20:00, 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