Function graph animation: Difference between revisions
From JSXGraph Wiki
A WASSERMANN (talk | contribs) No edit summary |
A WASSERMANN (talk | contribs) No edit summary |
||
(4 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)]); | |||
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 07: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