Turtle animation of the "8": Difference between revisions

From JSXGraph Wiki
No edit summary
No edit summary
 
(2 intermediate revisions by the same user not shown)
Line 1: Line 1:
Use the JSXGraph turtle to draw a simple "8". 
<jsxgraph width="500" height="500">
<jsxgraph width="500" height="500">
var brd = JXG.JSXGraph.initBoard('jxgbox',{boundingbox: [-250, 250, 250, -250]});
var brd = JXG.JSXGraph.initBoard('jxgbox',{boundingbox: [-250, 250, 250, -250]});
Line 7: Line 8:
   
   
var run = function() {
var run = function() {
   t.fd(2);
   t.forward(2);
   if (Math.floor(alpha / 360) % 2 === 0) {
   if (Math.floor(alpha / 360) % 2 === 0) {
       t.left(1);
       t.left(1);       // turn left by 1 degree
   } else {
   } else {
       t.right(1);
       t.right(1);       // turn right by 1 degree
   }
   }


   alpha += 1;
   alpha += 1;
    
    
   if (alpha < 1440) {
   if (alpha < 1440) { // stop after two rounds
       setTimeout(run,25);
       setTimeout(run, 20);  
   }
   }
}
}
Line 27: Line 28:
===The JavaScript code===
===The JavaScript code===
<source lang="javascript">
<source lang="javascript">
    var brd = JXG.JSXGraph.initBoard('jxgbox',{boundingbox: [-250, 250, 250, -250]});
var brd = JXG.JSXGraph.initBoard('jxgbox',{boundingbox: [-250, 250, 250, -250]});
    var t = brd.create('turtle',[0, 0], {strokeOpacity:0.5});
var t = brd.create('turtle',[0, 0], {strokeOpacity:0.5});
    t.setPenSize(3);
t.setPenSize(3);
    t.right(90);
t.right(90);
    var alpha = 0;
var alpha = 0;
   
   
    var run = function() {
var run = function() {
      t.fd(2);
  t.forward(2);
      if (Math.floor(alpha / 360) % 2 === 0) {
  if (Math.floor(alpha / 360) % 2 === 0) {
          t.left(1);
      t.left(1);       // turn left by 1 degree
      } else {
  } else {
          t.right(1);
      t.right(1);       // turn right by 1 degree
      }
  }


      alpha += 1;
  alpha += 1;
     
 
      if (alpha < 1440) {
  if (alpha < 1440) { // stop after two rounds
          setTimeout(run,25);
      setTimeout(run, 20);  
      }
  }
    }
}


    run();
run();
</source>
</source>


[[Category:Examples]]
[[Category:Examples]]
[[Category:Turtle Graphics]]
[[Category:Turtle Graphics]]

Latest revision as of 07:48, 28 August 2013

Use the JSXGraph turtle to draw a simple "8".

The JavaScript code

var brd = JXG.JSXGraph.initBoard('jxgbox',{boundingbox: [-250, 250, 250, -250]});
var t = brd.create('turtle',[0, 0], {strokeOpacity:0.5});
t.setPenSize(3);
t.right(90);
var alpha = 0;
 
var run = function() {
   t.forward(2);
   if (Math.floor(alpha / 360) % 2 === 0) {
      t.left(1);        // turn left by 1 degree
   } else {
      t.right(1);       // turn right by 1 degree
   }

   alpha += 1;
   
   if (alpha < 1440) {  // stop after two rounds
       setTimeout(run, 20); 
   }
}

run();