HTML and CSS Reference

In-Depth Information

Moving Between Two Points: The Distance of a Line

Movement based on constant changes to the
x
or
y
position of an object works well for some

applications, but at other times you will need to be more precise. One such instance is when

you need to move an object from point A to point B at a constant rate of speed.

In mathematics, a common way to find the length of an unknown oline is to use the

Pythagorean theorem:

A
2
+ B
2
= C
2

In this equation, C is the unknown side of a triangle when A and B are already known.

However, we need to translate this equation into something that we can use with the points

and pixels we have available on the canvas.

This is a good example of using a mathematical equation in your application. In this case, we

want to find the distance of a line, given two points. In English, this equation reads like this:

The distance equals the square root of the square of the difference between the x value of the

second point minus the x value of the first point, plus the square of the difference between the y

value of the second point minus the y value of the first point.

You can see this in
Figure 5-1
. It's much easier to understand in this format.

Figure 5-1. Distance equation

In the second example, we need to create some new variables in the
canvasApp()
function.

We will still use a
speed
variable, just like in the first example, but this time we set it to
5
,

which means it will move
5
pixels on every call to
drawScreen()
:

var

var
speed
=
5
;

We then create a couple of dynamic objects—each with an
x
and a
y
property—that will rep-

resent the two points we want to move between. For this example, we will move our circle

from
20
,
250
to
480
,
250
:

var

var
p1
=
{
x
:
20
,
y
:
250
};

var

var
p2
=
{
x
:
480
,
y
:
250
};

Nowitistimetore-create thedistance equationin
Figure 5-1
.Thefirststepistocalculate the

differences between the second and first
x
and
y
points: