Boundaries and Friction - HTML5 Animation with JavaScript - page 141

If you hold the most rubbery, bounciest ball ever made out at arm's length and drop it, it would fall to the
floor and bounce back up almost to where it started—never making it all the way back to your hand. This is
because the ball loses a little bit of energy in the bounce. It might lose some energy in the form of sound,
maybe a little heat, the floor will absorb some of the energy, and maybe the surrounding air will, too.
However it works out, the important point is that the ball travels slower after the bounce than before. In
other words, it loses some velocity on the axis of the bounce.

You can easily re-create this in the animation. So far, you've used -1 as the bounce factor. That means
that the object bounces back with 100% of the force it hit with. To make it lose some energy, simply use a
fraction of -1. As with other numeric values, it's best to define this as a variable at the top of your script and
reference that in your code. Just create a variable named bounce and set it to something like -0.7:

var bounce = -0.7;
Then replace each instance of -l in the if statements with the variable bounce . Go ahead and try that,
and you'll see how much more real the bounces look. Try different factors for the bounce variable until you
get a feel for how it works.

One of the best ways to understand these concepts is to take each principle you learn and see how many
other principles you can combine it with. You can check the example files at www.apress.com fo r
document 05-bouncing-2.html , which demonstrates bouncing and gravity, but you should have enough
knowledge to start adding things like this on your own. Perhaps you want to try using the keyboard to add
acceleration to the ball, or apply something else you've already learned.

Let's leave behind the discussion of boundaries and look at what happens between the boundaries, when
your object is moving through space.

Friction

So far, you've seen two scenarios:

 The object is simply moving with whatever velocity it has until it hits a boundary.

 Either the object itself or some external force is applying acceleration to the object, changing its

velocity.

With either setup, unless the object is pushed or pulled, or it hits something, it keeps moving in the same
direction at the same speed. But in the real world, it doesn't happen just like that.

Here's an example, grab a piece of paper, crumple it up, and throw it as hard as you can. There's a good
chance it didn't even make it across the room. Sure, gravity pulls it down (y axis), but when it left your
hand, it was moving pretty fast on the x axis. And yet, very quickly, it had almost zero x velocity.

Obviously, no “negative acceleration” was pulling the paper back toward your hand, but its velocity
changed. This is known as friction, drag, resistance, or damping. Although it's not technically a force, it
does act that way; it changes an object's velocity. The rule is that friction reduces only the magnitude of
the velocity, not the direction. In other words, friction can reduce velocity to zero, but it will never make an
object turn around and move in the other direction.