Parametric curve plotter: Difference between revisions

From JSXGraph Wiki
No edit summary
No edit summary
Line 3: Line 3:
   <textarea cols=60 rows=4 id="eingabe">function x(t) {return Math.cos(t); };
   <textarea cols=60 rows=4 id="eingabe">function x(t) {return Math.cos(t); };
function y(t) {return Math.sin(t); };</textarea><br />
function y(t) {return Math.sin(t); };</textarea><br />
   <input type="button" value="plot" onClick="doIt()">
   <input type="button" value="plot" onClick="plot()">
   <input type="button" value="clear all" onClick="clearAll()">
   <input type="button" value="clear all" onClick="clearAll()">
</p>
</p>
Line 11: Line 11:
a = board.createElement('slider', [[0,-1],[3,-1],[-4*Math.PI,0,0]], {style:6, name:'a'});
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,1,4*Math.PI]], {style:6, name:'b'});
b = board.createElement('slider', [[0,-2],[3,-2],[0,1,4*Math.PI]], {style:6, name:'b'});
function doIt(){
function plot(){
   eval(document.getElementById("eingabe").value);
   eval(document.getElementById("eingabe").value);
   graph = board.createElement('curve', [
   graph = board.createElement('curve', [
Line 22: Line 22:
   board.update();
   board.update();
}  
}  
doIt();
 
function clearAll() {  
function clearAll() {  
   JXG.JSXGraph.freeBoard(board);
   JXG.JSXGraph.freeBoard(board);
Line 29: Line 29:
   b = board.createElement('slider', [[0,-2],[5,-2],[0,1,4*Math.PI]], {style:6, name:'b'});
   b = board.createElement('slider', [[0,-2],[5,-2],[0,1,4*Math.PI]], {style:6, name:'b'});
}
}
plot();
</jsxgraph>
</jsxgraph>


===The JavaScript code===
===The JavaScript code===
<source lang="xml">
<source lang="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,1,4*Math.PI]], {style:6, name:'b'});
function plot(){
  eval(document.getElementById("eingabe").value);
  graph = board.createElement('curve', [
            x,y,
            function(){return a.Value();},
            function(){return b.Value();}
            ],
            {strokeColor:'red', strokeWidth:2}
          );
  board.update();
}
 
function clearAll() {
  JXG.JSXGraph.freeBoard(board);
  board = JXG.JSXGraph.initBoard('jxgbox', {axis:true, originX: 250, originY: 250, unitX: 50, unitY: 50});
  a = board.createElement('slider', [[0,-1],[5,-1],[-4*Math.PI,0,0]], {style:6, name:'a'});
  b = board.createElement('slider', [[0,-2],[5,-2],[0,1,4*Math.PI]], {style:6, name:'b'});
}
 
plot();
<source>
<source>


[[Category:Examples]]
[[Category:Examples]]
[[Category:Calculus]]
[[Category:Calculus]]

Revision as of 19:44, 1 July 2009


The JavaScript code

<source lang="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,1,4*Math.PI]], {style:6, name:'b'}); function plot(){

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

}

function clearAll() {

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

}

plot(); <source>