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
.
