Function graph animation: Difference between revisions

From JSXGraph Wiki
No edit summary
No edit summary
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 07: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();