Parametric curve plotter: Difference between revisions
From JSXGraph Wiki
A WASSERMANN (talk | contribs) No edit summary |
A WASSERMANN (talk | contribs) No edit summary |
||
(6 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=" | <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> | ||
</html> | </html> | ||
<jsxgraph width=" | <jsxgraph width="500" height="500"> | ||
board = JXG.JSXGraph.initBoard('jxgbox', {axis:true, | board = JXG.JSXGraph.initBoard('jxgbox', {axis:true, boundingbox:[-5,5,5,-5]}); | ||
a = board. | a = board.create('slider', [[0,-1],[3,-1],[-4*Math.PI,0,0]], {style:6, name:'a'}); | ||
b = board. | b = board.create('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. | graph = board.create('curve', [ | ||
x,y, | x,y, | ||
function(){return a.Value();}, | function(){return a.Value();}, | ||
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. | a = board.create('slider', [[0,-1],[3,-1],[-4*Math.PI,0,0]], {style:6, name:'a'}); | ||
b = board. | 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=" | <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 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();