Difference between revisions of "Function graph animation"
From JSXGraph Wiki
Jump to navigationJump to searchA WASSERMANN (talk | contribs) |
A WASSERMANN (talk | contribs) |
||
(5 intermediate revisions by the same user not shown) | |||
Line 6: | Line 6: | ||
var start = -4, | var start = -4, | ||
end = 4, | end = 4, | ||
− | turtle = brd.create('turtle', [ | + | x = start, |
+ | step = 0.2, | ||
+ | turtle = brd.create('turtle', [x, f(x)]); | ||
− | turtle.moveTo( | + | var moveForward = function() { |
+ | x += step; | ||
+ | if (x>end) { | ||
+ | return; | ||
+ | } | ||
+ | turtle.moveTo([x, f(x)]); | ||
+ | setTimeout(moveForward, 200); | ||
+ | }; | ||
+ | |||
+ | turtle.hideTurtle(); | ||
+ | moveForward(); | ||
+ | |||
</jsxgraph> | </jsxgraph> | ||
+ | |||
+ | ===The JavaScript code=== | ||
+ | |||
+ | <source lang="javascript"> | ||
+ | |||
+ | // User supplied function to be drawn. | ||
+ | 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(); // Start the drawing | ||
+ | </source> | ||
+ | |||
+ | [[Category:Examples]] | ||
+ | [[Category:Calculus]] | ||
+ | [[Category:Turtle Graphics]] |
Latest revision as of 09:30, 31 October 2012
The JavaScript code
// User supplied function to be drawn.
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(); // Start the drawing