HTML and CSS Reference
In-Depth Information
Chapter 6
Boundaries and Friction
What we'll cover in this chapter:
Environmental boundaries
Friction
You covered a lot of ground in the preceding chapters. You can create graphics with the canvas drawing
API and use all kinds of forces to move them around the screen. However, you've probably run into a
small annoyance with many of the examples: If an object moves off the screen, it's gone. Sometimes, you
have no way of knowing how to get it back and your only option is to reload the web page.
In most real-world scenarios, some
boundaries
exist, usually the ground beneath you, and sometimes
walls with a ceiling. Unless you're making a space simulator, you want some environmental barriers to
keep your objects in view. And if your scene does take place in space, you need a way to keep your main
objects in view.
Another annoyance with the examples so far is the animation environment fails to have any effect on the
object as it moves. The object starts moving, and it keeps on going in the direction it's headed at the same
speed, until you apply some other force. Actually, this isn't a bug at all, but the way the universe works.
Inertia
is the tendency of an object in motion to stay in motion unless acted on by another force. Or from a
programming perspective, the object's velocity won't change unless something changes it. One thing in the
physical world that changes an object's velocity is some sort of
friction
, even if only the friction of air. So,
although you successfully simulated an object moving in a vacuum, you might want to create a scene
more like your everyday environment.
This chapter covers both of these issues: First, you learn how to add boundaries to contain your objects,
and then how to apply friction to these objects.
