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 .
Search WWH ::

Custom Search