Math, Physics, and Animation - HTML5 Canvas

HTML and CSS Reference

In-Depth Information

}

var speed = 6;

var gravity = .1;

var elasticity = .5;

var angle = 285;

var radians = angle * Math.PI/ 180;

var radius = 15;

var vx = Math.cos(radians) * speed;

var vy = Math.sin(radians) * speed;

theCanvas = document.getElementById("canvasOne");

context = theCanvas.getContext("2d");

var p1 = {x:20,y:theCanvas.width-radius};

var ball = {x:p1.x, y:p1.y, velocityx: vx, velocityy:vy, radius:radius,

elasticity: elasticity};

setInterval(drawScreen, 33);

}

</script>

</head>

<body>

Your browser does not support HTML5 Canvas.

</canvas>

</div>

</body>

</html>

Simple Gravity, Simple Elasticity, and Simple Friction

Now that we have a ball traveling on a vector that is affected by both gravity and

elasticity, we have one more element to add to make the animation more realistic. In

the previous example, the y velocity was affected by gravity and elasticity, but the ball

still traveled on the x-axis without any degradation in velocity. We will fix this issue

now by adding friction into the equation.

In physics, friction is a force that resists the motion of an object. We have already

discussed friction as it applies to colliding balls, and this implementation is similar

except that it affects only the x velocity. For our purposes, we will achieve simple friction

by degrading the x velocity as gravity degrades the y velocity.

Taking the code from Example 5-16 , in canvasApp() we create a new variable named

friction . This is the amount of pixels to degrade the x velocity on every frame:

var friction = .008;

Search WWH ::

Custom Search

Home