User:Cleonis/sandbox/requestAnimationFrame - Revision history

Cleonis at 21:00, 26 August 2014

2014-08-26T21:00:10Z

← Older revision		Revision as of 21:00, 26 August 2014
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:
	<button id="playbutton" onclick="play()">play</button>  <button id="resetanimation" onclick="resetAnimation()">reset</button>		<button id="playbutton" onclick="play()">play</button>  <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:
	<button id="playbutton" onclick="play()">play</button>  <button id="resetanimation" onclick="resetAnimation()">reset</button>		<button id="playbutton" onclick="play()">play</button>  <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]]

Cleonis: Created page with " var board = JXG.JSXGraph.initBoard( 'jxgbox', {boundingbox:[-1.5,1.5,1.5,-1.5], keepaspectratio:true, axis:true} ); var isPlaying = fals..."

2014-08-26T18:47:18Z

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..."

New page

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

</jsxgraph>

<html>
<br>
  <button id="playbutton" onclick="play()">play</button>  <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();
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();
}
</source>

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

[[Category:Examples]]