Difference between revisions of "Parametric curve plotter"
From JSXGraph Wiki
Jump to navigationJump to searchA WASSERMANN (talk | contribs) |
A WASSERMANN (talk | contribs) |
||
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 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 | + | 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); | ||
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=" | + | <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 21: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>