From JSXGraph Wiki
The printable version is no longer supported and may have rendering errors. Please update your browser bookmarks and please use the default browser print function instead.


The JavaScript code

var board = JXG.JSXGraph.initBoard(
  {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(
  [function() {return Math.cos(timeElapsed)}, function() {return Math.sin(timeElapsed)}]

function playing() {
  timeElapsed = ( - starttime)/1000;
  requestId = window.requestAnimationFrame(playing);

function play() {
  if (!isPlaying) {
    starttime =;
    isPlaying = true;

function resetAnimation() {
  if (requestId) {
  timeElapsed = 0;
  isPlaying = false;


&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 returns a timestamp in miliseconds. To make the variable timeElapsed count time in seconds the number ( - starttime) is divided by 1000.

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