Parametric curve plotter: Difference between revisions

From JSXGraph Wiki
No edit summary
No edit summary
 
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],[3,-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],[3,-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 plot(){
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 26: Line 26:
   JXG.JSXGraph.freeBoard(board);
   JXG.JSXGraph.freeBoard(board);
   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],[3,-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],[3,-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'});
}
}


Line 36: Line 36:
<source lang="javascript">
<source lang="javascript">
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],[3,-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],[3,-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 plot(){
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 53: Line 53:
   JXG.JSXGraph.freeBoard(board);
   JXG.JSXGraph.freeBoard(board);
   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],[3,-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],[3,-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'});
}
}



Latest revision as of 13: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();