HTML and CSS Reference
In-Depth Information
For our purposes, the
t
value will be increased by the
speed
at which we want the object
to move. You will notice, though, that this value does not easily equate to the
speed
values we used elsewhere in this chapter. The reason is that the
t
value was not created
with movement over time for animation in mind. The speed we specify must be smaller
than
1
so the movement on the curve will be incremental enough for us to see it as part
of the animation. For our example, we will increase
t
by a speed of
.01
, so that we will
see
100
points on the movement curve (1/100 = .01). This is advantageous because we
will know our object has finished moving when the
t
value is equal to
1
.
For
Example 5-11
(
CH5EX11.html
), we will start by creating the four points of the
Bezier curve in the
canvasApp()
function:
var p0 = {x:60, y:10};
var p1 = {x:70, y:200};
var p2 = {x:125, y:295};
var p3 = {x:350, y:350};
We then create a new
ball
object with a couple differing properties from those in the
other examples in this chapter. The
speed
is
.01
, which means the object will move 100
points along the curve before it is finished. We start the
t
value at
0
, which means the
ball
will begin at
p0
:
var ball = {x:0, y:0, speed:.01, t:0};
Next, in the
drawScreen()
function, we calculate the Bezier curve coefficient values
(
ax
,
bx
,
cx
,
ay
,
by
,
cy
) based on the four points (
p0
,
p1
,
p2
,
p3
):
var cx = 3 * (p1.x - p0.x)
var bx = 3 * (p2.x - p1.x) - cx;
var ax = p3.x - p0.x - cx - bx;
var cy = 3 * (p1.y - p0.y);
var by = 3 * (p2.y - p1.y) - cy;
var ay = p3.y - p0.y - cy - by;
Then, we take our
t
value and use it with the coefficients to calculate the
x
and
y
values
for the moving object. First, we get the
t
value from the
ball
object, and store it locally
so we can use it in our calculations:
var t = ball.t;
Next, we add the
speed
to the
t
value so that we can calculate the next point on the
Bezier path:
ball.t += ball.speed;
Then, we use the
t
value to calculate the
x
and
y
values (
xt
,
yt
) using the Bezier curve
equations:
var xt = ax*(t*t*t) + bx*(t*t) + cx*t + p0.x;
var yt = ay*(t*t*t) + by*(t*t) + cy*t + p0.y;
We add the
speed
to the
t
value of
ball
, 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:
