Difference between revisions of "Function graph animation"
From JSXGraph Wiki
Jump to navigationJump to searchA WASSERMANN (talk | contribs) |
A WASSERMANN (talk | contribs) |
||
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 09: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();