Function graph animation: Difference between revisions
From JSXGraph Wiki
A WASSERMANN (talk | contribs) No edit summary |
A WASSERMANN (talk | contribs) No edit summary |
||
Line 24: | Line 24: | ||
</jsxgraph> | </jsxgraph> | ||
===The JavaScript code=== | |||
<source lang="javascript"> | |||
var f = function(x) { return Math.sin(x); }; | |||
var brd = JXG.JSXGraph.initBoard('jxgbox', {boundingbox:[-5,2,5,-2], axis:true, keepaspectratio:false}); | |||
var start = -4, | |||
end = 4, | |||
x = start, | |||
step = 0.2, | |||
turtle = brd.create('turtle', [x, f(x)]); | |||
var moveForward = function() { | |||
x += step; | |||
if (x>end) { | |||
return; | |||
} | |||
turtle.moveTo([x, f(x)]); | |||
setTimeout(moveForward, 200); // delay by 200 ms | |||
}; | |||
turtle.hideTurtle(); // Hide the turtle arrow | |||
moveForward(); | |||
</source> | |||
[[Category:Examples]] | |||
[[Category:Calculus]] | |||
[[Category:Turtle Graphics]] |
Revision as of 07:28, 31 October 2012
The JavaScript code
var f = function(x) { return Math.sin(x); };
var brd = JXG.JSXGraph.initBoard('jxgbox', {boundingbox:[-5,2,5,-2], axis:true, keepaspectratio:false});
var start = -4,
end = 4,
x = start,
step = 0.2,
turtle = brd.create('turtle', [x, f(x)]);
var moveForward = function() {
x += step;
if (x>end) {
return;
}
turtle.moveTo([x, f(x)]);
setTimeout(moveForward, 200); // delay by 200 ms
};
turtle.hideTurtle(); // Hide the turtle arrow
moveForward();