# Difference between revisions of "Function graph animation"

From JSXGraph Wiki

Jump to navigationJump to searchA WASSERMANN (talk | contribs) |
A WASSERMANN (talk | contribs) |
||

(3 intermediate revisions by the same user not shown) | |||

Line 16: | Line 16: | ||

} | } | ||

turtle.moveTo([x, f(x)]); | turtle.moveTo([x, f(x)]); | ||

− | setTimeout(moveForward, | + | setTimeout(moveForward, 200); |

}; | }; | ||

turtle.hideTurtle(); | turtle.hideTurtle(); | ||

− | moveForward(); | + | 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 08: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
```