JSX Trigonometrische Funktionen

Aus Wiki1

(Unterschied zwischen Versionen)
Wechseln zu: Navigation, Suche
 
(Der Versionsvergleich bezieht 31 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:
+
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!):
 +
<jsxgraph box="box" width="400" height="400">
 +
var brd = JXG.JSXGraph.initBoard('box', {boundingbox: [-3, 3, 3, -3]});
 +
var ax = brd.create('line',[[0,0],[1,0]],{visible:false});
 +
var ay = brd.create('line',[[0,0],[0,1]],{visible:false});
 +
 +
var p0 = brd.create('point',[0,0],{fixed:true,visible:false});
 +
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 width="500" height="500">
+
siehe auch: [[Geogebra]]
-
var board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-10, 10, 10, -10]});
+
-
var a = board.create('slider', [[1,9],[5,9],[0,1,4]],{name:'a'});
+
-
var c1 = board.create('curve', [function(phi){return a.Value()*Math.sqrt(phi); }, [0, 0],0, 8*Math.PI],
+
-
            {curveType:'polar', strokewidth:4});       
+
-
var c2 = board.create('curve', [function(phi){return -a.Value()*Math.sqrt(phi); }, [0, 0],0, 8*Math.PI],
+
-
            {curveType:'polar', strokewidth:4});   
+
-
</jsxgraph>
+
-
 
+
-
 
+
 +
Weiter Beispiele: [[Jansen Theo]]
[[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

Persönliche Werkzeuge