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 width="600" height="600">
+
<html>
-
var brd = JXG.JSXGraph.initBoard('jxgbox', {boundingbox:[-2,2,2,-2], axis:true});
+
<p>
 +
  <textarea cols=60 rows=4 id="eingabe">function r(t) {return 0.2*t; };
 +
</textarea><br />
 +
  <input type="button" value="plot" onClick="plot()">
 +
  <input type="button" value="clear all" onClick="clearAll()">
 +
</p>
 +
</html>
 +
<jsxgraph width="500" height="500">
 +
board = JXG.JSXGraph.initBoard('jxgbox', {axis:true, boundingbox:[-5,5,5,-5]});
 +
a = board.createElement('slider', [[0,-1],[3,-1],[-4*Math.PI,0,0]], {style:6, name:'a'});
 +
b = board.createElement('slider', [[0,-2],[3,-2],[0,7,4*Math.PI]], {style:6, name:'b'});
 +
function plot(){
 +
  eval(document.getElementById("eingabe").value);
 +
  graph = board.createElement('curve', [
 +
            r, [0,0],
 +
            function(){return a.Value();},
 +
            function(){return b.Value();}
 +
            ],
 +
            {curveType:'polar',strokeColor:'red', strokeWidth:2}
 +
          );
 +
  board.update();
 +
}
-
var p = [];
+
function clearAll() {  
-
for (var i=0; i<4; i++) {
+
  JXG.JSXGraph.freeBoard(board);
-
    p.push(brd.create('point', [Math.random()*3.6-1.8, Math.random()*3.6-1.8]));
+
  board = JXG.JSXGraph.initBoard('jxgbox', {axis:true, boundingbox: [-5, 5, 5, -5]});
 +
  a = board.createElement('slider', [[0,-1],[3,-1],[-4*Math.PI,0,0]], {style:6, name:'a'});
 +
  b = board.createElement('slider', [[0,-2],[3,-2],[0,7,4*Math.PI]], {style:6, name:'b'});
}
}
-
var pol = brd.create('polygon',p,{
+
plot();
-
    withLines:false,
+
-
    withLabel: true,
+
-
    name: function () {
+
-
        return "lala  " + p[1].Dist(p[2]).toFixed(2) + "m";
+
-
    },
+
-
    id: p[0].X() + "_" + p[1].Y(),
+
-
    label: {offset:[-200,100]}          // Pixel values
+
-
});
+
</jsxgraph>
</jsxgraph>
 +
 +
===The JavaScript code===
 +
<code javascript>
 +
board = JXG.JSXGraph.initBoard('jxgbox', {axis:true, boundingbox:[-5,5,5,-5]});
 +
a = board.createElement('slider', [[0,-1],[3,-1],[-4*Math.PI,0,0]], {style:6, name:'a'});
 +
b = board.createElement('slider', [[0,-2],[3,-2],[0,7,4*Math.PI]], {style:6, name:'b'});
 +
function plot(){
 +
  eval(document.getElementById("eingabe").value);
 +
  graph = board.createElement('curve', [
 +
            r, [0,0],
 +
            function(){return a.Value();},
 +
            function(){return b.Value();}
 +
            ],
 +
            {curveType:'polar',strokeColor:'red', strokeWidth:2}
 +
          );
 +
  board.update();
 +
}
 +
 +
function clearAll() {
 +
  JXG.JSXGraph.freeBoard(board);
 +
  board = JXG.JSXGraph.initBoard('jxgbox', {axis:true, boundingbox: [-5, 5, 5, -5]});
 +
  a = board.createElement('slider', [[0,-1],[3,-1],[-4*Math.PI,0,0]], {style:6, name:'a'});
 +
  b = board.createElement('slider', [[0,-2],[3,-2],[0,7,4*Math.PI]], {style:6, name:'b'});
 +
}
 +
 +
plot();
 +
</code>
[[Kategorie:Bilder]]
[[Kategorie:Bilder]]
[[Kategorie:Wissen]]
[[Kategorie:Wissen]]

Version vom 19:55, 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!):

<html>

<textarea cols=60 rows=4 id="eingabe">function r(t) {return 0.2*t; }; </textarea>
<input type="button" value="plot" onClick="plot()"> <input type="button" value="clear all" onClick="clearAll()">

</html>

The JavaScript code

board = JXG.JSXGraph.initBoard('jxgbox', {axis:true, boundingbox:[-5,5,5,-5]}); a = board.createElement('slider', [[0,-1],[3,-1],[-4*Math.PI,0,0]], {style:6, name:'a'}); b = board.createElement('slider', [[0,-2],[3,-2],[0,7,4*Math.PI]], {style:6, name:'b'}); function plot(){ 

 eval(document.getElementById("eingabe").value);
 graph = board.createElement('curve', [
           r, [0,0], 
           function(){return a.Value();}, 
           function(){return b.Value();}
           ], 
           {curveType:'polar',strokeColor:'red', strokeWidth:2}
         );
 board.update();

}

function clearAll() { 

 JXG.JSXGraph.freeBoard(board);
 board = JXG.JSXGraph.initBoard('jxgbox', {axis:true, boundingbox: [-5, 5, 5, -5]});
 a = board.createElement('slider', [[0,-1],[3,-1],[-4*Math.PI,0,0]], {style:6, name:'a'});
 b = board.createElement('slider', [[0,-2],[3,-2],[0,7,4*Math.PI]], {style:6, name:'b'});

}

plot();

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