Difference between revisions of "Function graph animation"

From JSXGraph Wiki
Jump to navigationJump to search
(Created page with "<jsxgraph width="600" height="600"> var brd = JSX.JSXGraph.initBoard('jxgbox', {boundingbox:[-5,2,5,-2], axis:true, keepaspectratio:false}); </jsxgraph>")
 
 
(7 intermediate revisions by the same user not shown)
Line 1: Line 1:
 
<jsxgraph width="600" height="600">
 
<jsxgraph width="600" height="600">
   var brd = JSX.JSXGraph.initBoard('jxgbox', {boundingbox:[-5,2,5,-2], axis:true, keepaspectratio:false});
+
  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);
 +
    };
 +
 
 +
  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