HTML and CSS Reference

In-Depth Information

ball
.
t
+=
ball
.
speed
;

Then we use the
t
value to calculate the
x
and
y
values (
xt
,
yt
) using the Bezier curve equa-

tions:

var

var
xt
=
ax
*
(
t
*
t
*
t
)
+
bx
*
(
t
*
t
)
+
cx
*
t
+
p0
.
x
;

var

var
yt
=
ay
*
(
t
*
t
*
t
)
+
by
*
(
t
*
t
)
+
cy
*
t
+
p0
.
y
;

We add the
speed
to the
t
value of
ball
and then check to see whether
t
is greater than
1
. If

so, we don't increase it any further because we have finished moving on the curve:

ball
.
t
+=
ball
.
speed
;

iif
(
ball
.
t
>
1
) {

ball
.
t
=
1
;

}

Finally, when we draw the
ball
object on the canvas, we use the
xt
and
yt
values:

context
.
arc
(
xt
,
yt
,
5
,
0
,
Math
.
PI
*
2
,
true

true
);

Figure 5-15
shows what
Example 5-11
(
CH5EX11.html
) looks like when it is executed in a

web browser. In addition to drawing the points of the path using the
points
array, we also

draw the four points of the Bezier curve. These illustrate the relationship of the points to the

curve itself. Notice that the curve does not pass through
p1
or
p2
.