Difference between revisions of "User:Cleonis/sandbox/requestAnimationFrame"

From JSXGraph Wiki
Jump to: navigation, search
(Created page with "<jsxgraph width="500" height="500"> var board = JXG.JSXGraph.initBoard( 'jxgbox', {boundingbox:[-1.5,1.5,1.5,-1.5], keepaspectratio:true, axis:true} ); var isPlaying = fals...")
 
 
Line 20: Line 20:
 
   board.update();
 
   board.update();
 
   requestId = window.requestAnimationFrame(playing);
 
   requestId = window.requestAnimationFrame(playing);
}
+
};
  
 
function play() {
 
function play() {
Line 28: Line 28:
 
     window.requestAnimationFrame(playing);
 
     window.requestAnimationFrame(playing);
 
   }
 
   }
}
+
};
  
 
function resetAnimation() {
 
function resetAnimation() {
Line 37: Line 37:
 
   isPlaying = false;
 
   isPlaying = false;
 
   board.update();
 
   board.update();
}
+
};
  
 
</jsxgraph>
 
</jsxgraph>
Line 45: Line 45:
 
&nbsp;&nbsp;<button id="playbutton" onclick="play()">play</button>&nbsp;&nbsp;<button id="resetanimation" onclick="resetAnimation()">reset</button>
 
&nbsp;&nbsp;<button id="playbutton" onclick="play()">play</button>&nbsp;&nbsp;<button id="resetanimation" onclick="resetAnimation()">reset</button>
 
</html>
 
</html>
 +
  
 
===The JavaScript code===
 
===The JavaScript code===
Line 68: Line 69:
 
   board.update();
 
   board.update();
 
   requestId = window.requestAnimationFrame(playing);
 
   requestId = window.requestAnimationFrame(playing);
}
+
};
  
 
function play() {
 
function play() {
Line 76: Line 77:
 
     window.requestAnimationFrame(playing);
 
     window.requestAnimationFrame(playing);
 
   }
 
   }
}
+
};
  
 
function resetAnimation() {
 
function resetAnimation() {
Line 85: Line 86:
 
   isPlaying = false;
 
   isPlaying = false;
 
   board.update();
 
   board.update();
}
+
};
 
</source>
 
</source>
  
Line 92: Line 93:
 
&nbsp;&nbsp;<button id="playbutton" onclick="play()">play</button>&nbsp;&nbsp;<button id="resetanimation" onclick="resetAnimation()">reset</button>
 
&nbsp;&nbsp;<button id="playbutton" onclick="play()">play</button>&nbsp;&nbsp;<button id="resetanimation" onclick="resetAnimation()">reset</button>
 
</source>
 
</source>
 +
 +
 +
Note that the command 'requestAnimationFrame' must be given twice; it's present both in the function 'play()' and in the function 'playing()'.<br>
 +
<br>
 +
The function Date.now() returns a timestamp in miliseconds. To make the variable timeElapsed count time in seconds the number (Date.now() - starttime) is divided by 1000.<br>
 +
<br>
 +
The function Date.now() is a relative new addition to Javascript. In the case of Internet Explorer: support of Date.now() was introduced in IE9.
 +
  
 
[[Category:Examples]]
 
[[Category:Examples]]

Latest revision as of 22:00, 26 August 2014


    


The JavaScript code

var board = JXG.JSXGraph.initBoard(
  'jxgbox',
  {boundingbox:[-1.5,1.5,1.5,-1.5], keepaspectratio:true, axis:true}
);

var isPlaying = false;
var starttime = 0;
var timeElapsed = 0;
var requestId = 0;

var p = board.create(
  'point',
  [function() {return Math.cos(timeElapsed)}, function() {return Math.sin(timeElapsed)}]
);

function playing() {
  timeElapsed = (Date.now() - starttime)/1000;
  board.update();
  requestId = window.requestAnimationFrame(playing);
};

function play() {
  if (!isPlaying) {
    starttime = Date.now();
    isPlaying = true;
    window.requestAnimationFrame(playing);
  }
};

function resetAnimation() {
  if (requestId) {
    window.cancelAnimationFrame(requestId);
  }
  timeElapsed = 0;
  isPlaying = false;
  board.update();
};

The HTML

&nbsp;&nbsp;<button id="playbutton" onclick="play()">play</button>&nbsp;&nbsp;<button id="resetanimation" onclick="resetAnimation()">reset</button>


Note that the command 'requestAnimationFrame' must be given twice; it's present both in the function 'play()' and in the function 'playing()'.

The function Date.now() returns a timestamp in miliseconds. To make the variable timeElapsed count time in seconds the number (Date.now() - starttime) is divided by 1000.

The function Date.now() is a relative new addition to Javascript. In the case of Internet Explorer: support of Date.now() was introduced in IE9.