View source for User:Cleonis/sandbox/setInterval

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

function play() {
  if (!isPlaying) {
    starttime = Date.now();
    isPlaying = true;
    interval = setInterval(playing,50);
  }
}

function resetAnimation() {
  clearInterval(interval);
  timeElapsed = 0;
  isPlaying = false;
  board.update();
}
</jsxgraph>

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


===The JavaScript code===
<source lang="javascript">

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

function play() {
  if (!isPlaying) {
    starttime = Date.now();
    isPlaying = true;
    interval = setInterval(playing,50);
  }
}

function resetAnimation() {
  clearInterval(interval);
  timeElapsed = 0;
  isPlaying = false;
  board.update();
}
</source>

===The HTML===
<source>
<button id="playbutton" onclick="play()">play</button><button id="resetanimation" onclick="resetAnimation()">reset</button>
</source>




[[Category:Examples]]