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 vx = Math.cos(radians) * speed;
var vy = Math.sin(radians) * speed;
theCanvas = document.getElementById("canvasOne");
context = theCanvas.getContext("2d");
elasticity: elasticity};
setInterval(drawScreen, 33);
}
</script>
<body>
<div style="position: absolute; top: 50px; left: 50px;">
<canvas id="canvasOne" width="500" height="500">
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