# 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 08: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();
```