JSX Trigonometrische Funktionen

Aus Wiki1

(Unterschied zwischen Versionen)
Wechseln zu: Navigation, Suche
 
(Der Versionsvergleich bezieht 21 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 width="600" height="600" box="box">
+
Unter http://jsxgraph.uni-bayreuth.de/wiki/index.php/Category:Examples sind Beispiele für unzählige mathematische Fragestellungen verfügbar.  
-
var brd = JXG.JSXGraph.initBoard('box', {originX: 300, originY: 300, grid:true, unitX: 100, unitY: 100});
+
-
var ax = brd.createElement('line',[[0,0],[1,0]],{visible:true});
+
-
var ay = brd.createElement('line',[[0,0],[0,1]],{visible:true});
+
-
var p0 = brd.createElement('point',[0,0],{fixed:true,visible:false});
+
Hier ein Beispiel zur Darstellung der Trigonometrischen Funktionen (der rote Punkt kann mit der Maus bewegt werden!):
-
var p1 = brd.createElement('point',[1,0],{name:'',visible:false,fixed:true});
+
-
var c = brd.createElement('circle',[p0,p1],{dash:2,strokeWidth:1,strokeOpacity:0.6});
+
-
var p2 = brd.createElement('glider',[0.4,1.0,c],{name:'',withLabel:false});
+
-
var p3 = brd.createElement('point',[function(){return p2.X();},0.0],{visible:false,name:'',withLabel:false});
+
-
var p4 = brd.createElement('point',[0.0,function(){return p2.Y();}],{visible:false,name:'',withLabel:false});
+
-
brd.createElement('line',[p0,p2],{straightFirst:false,straightLast:false,strokeColor:'black'});  // Hypotenuse
+
<jsxgraph box="box" width="400" height="400">
-
brd.createElement('line',[p2,p3],{straightFirst:false,straightLast:false,strokeColor:'red'});    // sin
+
var brd = JXG.JSXGraph.initBoard('box', {boundingbox: [-3, 3, 3, -3]});
-
brd.createElement('line',[p2,p4],{straightFirst:false,straightLast:false,strokeColor:'red'});    // cos
+
var ax = brd.create('line',[[0,0],[1,0]],{visible:false});
-
 
+
var ay = brd.create('line',[[0,0],[0,1]],{visible:false});
-
var t = brd.createElement('tangent',[p2],{visible:true});
+
-
var p5 = brd.createElement('point',[brd.intersectionFunc(t,ax,0)],{visible:true,name:'',withLabel:true});
+
var p0 = brd.create('point',[0,0],{fixed:true,visible:false});
-
var p6 = brd.createElement('point',[brd.intersectionFunc(t,ay,0)],{visible:true,name:'',withLabel:false});
+
var p1 = brd.create('point',[1,0],{name:'',visible:false,fixed:true});
-
brd.createElement('line',[p5,p6],{straightFirst:false,straightLast:false});                      // tan + cot
+
var c = brd.create('circle',[p0,p1],{dash:2,strokeWidth:1,strokeOpacity:0.6});
-
brd.createElement('line',[p0,p6],{straightFirst:false,straightLast:falbe,strokeColor:'blue'});  // csc
+
var p2 = brd.create('glider',[0.4,1.0,c],{name:'',withLabel:false});
-
brd.createElement('line',[p0,p5],{straightFirst:false,straightLast:false,strokeColor:'blue'});  // sec
+
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.createElement('text',[function(){return (p0.X()+p2.X())*0.5;},function(){return (p0.Y()+p2.Y())*0.5;},'1'],{});
+
-
 
+
brd.create('line',[p0,p2],{straightFirst:false,straightLast:false,strokeColor:'black'});  // Hypotenuse
-
brd.createElement('text',[
+
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.X()+p4.X())*0.3;},
         function(){return (p2.Y()+p4.Y())*0.5;},
         function(){return (p2.Y()+p4.Y())*0.5;},
         'cos'],{});
         'cos'],{});
-
 
+
-
brd.createElement('text',[
+
brd.create('text',[
         function(){return (p2.X()+p3.X())*0.5;},
         function(){return (p2.X()+p3.X())*0.5;},
         function(){return (p2.Y()+p3.Y())*0.5;},
         function(){return (p2.Y()+p3.Y())*0.5;},
         'sin'],{});
         'sin'],{});
-
 
+
-
brd.createElement('text',[
+
brd.create('text',[
         function(){return 0.1+(p2.X()+p5.X())*0.5;},
         function(){return 0.1+(p2.X()+p5.X())*0.5;},
         function(){return 0.1+(p2.Y()+p5.Y())*0.5;},
         function(){return 0.1+(p2.Y()+p5.Y())*0.5;},
         'tan'],{});
         'tan'],{});
-
 
+
-
brd.createElement('text',[
+
brd.create('text',[
         function(){return 0.1+(p2.X()+p6.X())*0.5;},
         function(){return 0.1+(p2.X()+p6.X())*0.5;},
         function(){return 0.1+(p2.Y()+p6.Y())*0.5;},
         function(){return 0.1+(p2.Y()+p6.Y())*0.5;},
         'cot'],{});
         'cot'],{});
-
 
+
-
brd.createElement('text',[
+
brd.create('text',[
         function(){return -0.2+(p0.X()+p6.X())*0.5;},
         function(){return -0.2+(p0.X()+p6.X())*0.5;},
         function(){return (p0.Y()+p6.Y())*0.5;},
         function(){return (p0.Y()+p6.Y())*0.5;},
         'csc'],{});
         'csc'],{});
-
 
+
-
brd.createElement('text',[
+
brd.create('text',[
         function(){return (p0.X()+p5.X())*0.5;},
         function(){return (p0.X()+p5.X())*0.5;},
         function(){return (p0.Y()+p5.Y())*0.5;},
         function(){return (p0.Y()+p5.Y())*0.5;},
         'sec'],{});
         'sec'],{});
-
 
</jsxgraph>
</jsxgraph>
 +
siehe auch: [[Geogebra]]
 +
 +
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

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