HTML and CSS Reference
In-Depth Information
</script>
</head>
<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>
Gravity with Bounce and Applied Simple Elasticity
In physics, the
elasticity
of a bouncing ball refers to how much energy is conserved
when a ball bounces off a surface. We already covered a bit about conservation of energy
when we discussed balls colliding, but when we are simulating objects falling, we need
to take a slightly different path with our code. In
Example 5-15
, we applied 100%
elasticity and the ball bounced forever (actually, this was only implied since we did not
consider elasticity at all). However, in real life, balls usually lose some of their energy
every time they bounce off a surface. The amount of energy conserved depends on the
material the ball is made from, as well as the surface it is bouncing on. For example, a
rubber Super Ball is much more elastic than a cannonball and will bounce higher on
the first bounce off a surface. Both will bounce higher off a concrete surface than a
surface made of thick mud. Eventually, both will come to rest on the surface as all the
energy is transferred away from the ball.
We can simulate simple elasticity by applying a constant value to the ball when it
bounces off the ground. For this example, we will set the
speed
of the ball to
6
pixels
per frame, and the
angle
to
285
. We will keep our
gravity
at
.1
, but set a new variable
named
elasticity
to
.5
. To make this more straightforward, we will also assume that
the surface the ball is bouncing on does not add or subtract from the elasticity of the ball.
In
canvasApp()
we would set the new properties like this:
var speed = 6;
var gravity = .1;
var elasticity = .5;
var angle = 285;
We then add the new
elasticity
property to the
ball
object because, unlike
gravity
,
elasticity describes a property of an object, not the entire world it resides within. This
means that having multiple balls with different values for elasticity would be very easy
to implement:
var ball = {x:p1.x, y:p1.y, velocityx: vx, velocityy:vy, radius:radius,
elasticity: elasticity};
