Difference between revisions of "Parametric curve plotter"

From JSXGraph Wiki
Jump to navigationJump to search
 
(7 intermediate revisions by 2 users 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="doIt()">
+
   <input type="button" value="plot" onClick="plot()">
 
   <input type="button" value="clear all" onClick="clearAll()">
 
   <input type="button" value="clear all" onClick="clearAll()">
−
  <input type='button' value='Zoom In' onclick='board.zoomIn()' >
 
−
  <input type='button' value='Zoom Out' onclick='board.zoomOut()' >
 
−
  <input type='button' value='Zoom 100%' onclick='board.zoom100()'>
 
 
</p>
 
</p>
 
</html>
 
</html>
−
<jsxgraph width="600" height="400">
+
<jsxgraph width="500" height="500">
−
board = JXG.JSXGraph.initBoard('jxgbox', {axis:true, originX: 250, originY: 250, unitX: 50, unitY: 50});
+
board = JXG.JSXGraph.initBoard('jxgbox', {axis:true, boundingbox:[-5,5,5,-5]});
−
a = board.createElement('slider', [[0,-1],[5,-1],[-4*Math.PI,0,0]], {style:6, name:'a'});
+
a = board.create('slider', [[0,-1],[3,-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'});
+
b = board.create('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.create('curve', [
 
             x,y,  
 
             x,y,  
 
             function(){return a.Value();},  
 
             function(){return a.Value();},  
Line 25: Line 22:
 
   board.update();
 
   board.update();
 
}  
 
}  
−
doIt();
+
 
 
function clearAll() {  
 
function clearAll() {  
 
   JXG.JSXGraph.freeBoard(board);
 
   JXG.JSXGraph.freeBoard(board);
−
   board = JXG.JSXGraph.initBoard('jxgbox', {axis:true, originX: 250, originY: 250, unitX: 50, unitY: 50});
+
   board = JXG.JSXGraph.initBoard('jxgbox', {axis:true, boundingbox: [-5, 5, 5, -5]});
−
   a = board.createElement('slider', [[0,-1],[5,-1],[-4*Math.PI,0,0]], {style:6, name:'a'});
+
   a = board.create('slider', [[0,-1],[3,-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'});
+
   b = board.create('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="xml">
+
<source lang="javascript">
−
<source>
+
board = JXG.JSXGraph.initBoard('jxgbox', {axis:true, boundingbox:[-5,5,5,-5]});
 +
a = board.create('slider', [[0,-1],[3,-1],[-4*Math.PI,0,0]], {style:6, name:'a'});
 +
b = board.create('slider', [[0,-2],[3,-2],[0,1,4*Math.PI]], {style:6, name:'b'});
 +
function plot(){
 +
  eval(document.getElementById("eingabe").value);
 +
  graph = board.create('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.create('slider', [[0,-1],[3,-1],[-4*Math.PI,0,0]], {style:6, name:'a'});
 +
  b = board.create('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]]

Latest revision as of 15:06, 3 March 2021


The JavaScript code

board = JXG.JSXGraph.initBoard('jxgbox', {axis:true, boundingbox:[-5,5,5,-5]});
a = board.create('slider', [[0,-1],[3,-1],[-4*Math.PI,0,0]], {style:6, name:'a'});
b = board.create('slider', [[0,-2],[3,-2],[0,1,4*Math.PI]], {style:6, name:'b'});
function plot(){
  eval(document.getElementById("eingabe").value);
  graph = board.create('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.create('slider', [[0,-1],[3,-1],[-4*Math.PI,0,0]], {style:6, name:'a'});
  b = board.create('slider', [[0,-2],[3,-2],[0,1,4*Math.PI]], {style:6, name:'b'});
}

plot();
Retrieved from "http://jsxgraph.org/wiki/index.php?title=Parametric_curve_plotter&oldid=7130"