Updated HTML5 Canvas Interactive Ball Physics
I have updated the code to use the 3.10.0 of KineticJS library
HTML
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<script src="http://www.html5canvastutorials.com/libraries/kinetic-v3.10.0.js"></script>
<script>
/**
* This is an upgrade of the "HTML5 Canvas Interactive Ball Physics"
* on http://www.html5canvastutorials.com/labs/html5-canvas-interactive-ball-physics/#comment-16368
* upgraded by Junaid Qadir Baloch <[email protected]>
*/
window.requestAnimFrame = (function(callback){
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function(callback){
window.setTimeout(callback, 1000 / 60);
};
})();
function animate(lastTime, ball){
var stage = ball.getStage();
var layer = ball.getLayer();
var date = new Date();
var time = date.getTime();
var timeDiff = time - lastTime;
// update
updateBall(timeDiff, ball);
// draw
layer.draw();
// request new frame
requestAnimFrame(function(){
animate(time, ball);
});
}
function updateBall(timeDiff, ball){
var stage = ball.getStage();
var ballX = ball.getX();
var ballY = ball.getY();
console.log(ballY)
var vx = ball.getAttrs().velocity.x,
vy = ball.getAttrs().velocity.y;
// physics variables
var gravity = 20; // px / second^2
...