Turtle animation of the "8": Difference between revisions

From JSXGraph Wiki
No edit summary
No edit summary
 
(One intermediate revision 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);        // turn left by 1 degree
       t.left(1);        // turn left by 1 degree
Line 34: Line 35:
   
   
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);  
   }
   }
}
}

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();