HTML and CSS Reference
In-Depth Information
Figure 5-22. Ship taking off (easing in)
First, we set the beginning position of the ship ( p1 ) to the bottom center of the canvas.
Then, we set the beginning speed of the ship very low ( .5 pixels per frame), and set the
angle to 270 (straight up the canvas). We then calculate the x and y velocity values for
the ship :
var p1 = {x:240,y:470};
var tempSpeed = .5;
var tempAngle = 270 ;
var tempRadians = tempAngle * Math.PI/ 180;
var tempvelocityx = Math.cos(tempRadians) * tempSpeed;
var tempvelocityy = Math.sin(tempRadians) * tempSpeed;
var ship = {x:p1.x, y:p1.y, velocityx:tempvelocityx, velocityy:tempvelocityy};
In drawScreen() , instead of finding the distance between two points, we add the ease
Value to the x and y velocities on each frame, and then apply it to the ship x and y values
before drawing it to the canvas. This creates a linear increase in speed, resulting in the
easing-in effect we want to see:
Search WWH ::

Custom Search