Parametric curve plotter: Difference between revisions
From JSXGraph Wiki
| A WASSERMANN (talk | contribs) No edit summary | No edit summary | ||
| (4 intermediate revisions by one other user not shown) | |||
| 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=" |    <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 9: | Line 9: | ||
| <jsxgraph width="500" height="500"> | <jsxgraph width="500" height="500"> | ||
| board = JXG.JSXGraph.initBoard('jxgbox', {axis:true, boundingbox:[-5,5,5,-5]}); | board = JXG.JSXGraph.initBoard('jxgbox', {axis:true, boundingbox:[-5,5,5,-5]}); | ||
| a = board.createElement('slider', [[0,-1],[ | a = board.createElement('slider', [[0,-1],[3,-1],[-4*Math.PI,0,0]], {style:6, name:'a'}); | ||
| b = board.createElement('slider', [[0,-2],[ | b = board.createElement('slider', [[0,-2],[3,-2],[0,1,4*Math.PI]], {style:6, name:'b'}); | ||
| function  | 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(); | ||
| }   | }   | ||
| function clearAll() {   | function clearAll() {   | ||
|    JXG.JSXGraph.freeBoard(board); |    JXG.JSXGraph.freeBoard(board); | ||
|    board = JXG.JSXGraph.initBoard('jxgbox', {axis:true,  |    board = JXG.JSXGraph.initBoard('jxgbox', {axis:true, boundingbox: [-5, 5, 5, -5]}); | ||
|    a = board.createElement('slider', [[0,-1],[ |    a = board.createElement('slider', [[0,-1],[3,-1],[-4*Math.PI,0,0]], {style:6, name:'a'}); | ||
|    b = board.createElement('slider', [[0,-2],[ |    b = board.createElement('slider', [[0,-2],[3,-2],[0,1,4*Math.PI]], {style:6, name:'b'}); | ||
| } | } | ||
| plot(); | |||
| </jsxgraph> | </jsxgraph> | ||
| ===The JavaScript code=== | ===The JavaScript code=== | ||
| <source lang=" | <source lang="javascript"> | ||
| <source> | 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, 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'}); | |||
| } | |||
| plot(); | |||
| </source> | |||
| [[Category:Examples]] | [[Category:Examples]] | ||
| [[Category:Calculus]] | [[Category:Calculus]] | ||
| [[Category:Curves]] | |||
Revision as of 11:23, 31 January 2013
  
  
  
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,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, 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'});
}
plot();
