• Choose a category
• All
• Classic-Fiction

function eventWindowLoaded() {

canvasApp();

}

function canvasSupport () {

return Modernizr.canvas;

}

function canvasApp() {

if (!canvasSupport()) {

return;

}

function drawScreen () {

context.fillStyle = '#EEEEEE';

context.fillRect(0, 0, theCanvas.width, theCanvas.height);

//Box

context.strokeStyle = '#000000';

context.strokeRect(1, 1, theCanvas.width-2, theCanvas.height-2);

ball.velocityx = ball.velocityx - ( ball.velocityx*friction);

ball.velocityy += gravity;

if ((ball.y + ball.radius) > theCanvas.height) {

ball.velocityy = -(ball.velocityy)*ball.elasticity;

}

ball.y += ball.velocityy;

ball.x += ball.velocityx;

context.fillStyle = "#000000";

context.beginPath();

context.arc(ball.x,ball.y,ball.radius,0,Math.PI*2,true);

context.closePath();

context.fill();

}

var speed = 6;

var gravity = .1;

var friction = .008;

var elasticity = .5;

var angle = 285;

var radians = angle * Math.PI/ 180;

var radius = 15;

var vx = Math.cos(radians) * speed;

var vy = Math.sin(radians) * speed;

theCanvas = document.getElementById("canvasOne");

context = theCanvas.getContext("2d");

var p1 = {x:20,y:theCanvas.width-radius};

var ball = {x:p1.x, y:p1.y, velocityx: vx, velocityy:vy, radius:radius,

elasticity: elasticity};

setInterval(drawScreen, 33);

}

Easing

Easing is a technique used in animation to make an object smoothly enter or leave a location. The idea of easing is that instead of uniformly applying movement to every frame of animation, you instead increase (easing in) or decrease (easing out) the number of pixels you move on each frame. The result is that movement appears to be more realistic and smooth. There are many different ways to create easing animations. We will concentrate on two simple examples that will help pave the way for you to further explore the subject on your own.

Easing Out (Landing the Ship)

The process of easing out refers to easing at the end of an animation: an object moving from one point to another, starting out fast, and slowing down as it reaches the second point. To illustrate the concept, we will use the example of a spaceship landing. A spaceship starts out very fast, applies negative thrust to slow down, and, by the time it reaches the ground, is moving slowly enough to land without incident. If you’ve ever played the video game Lunar Lander, you will understand exactly the type of movement we are trying to accomplish.

To create this easing-out effect, we need to find two distinct points and then move an object between them, slowing down the object in linear fashion as it nears the second point. To achieve this effect, we first calculate the distance between the points. Next, we select a percentage value (easeValue) that we will use to move the object across that distance on each frame. As the distance gets shorter, the amount we move gets shorter as well. This gives the object the appearance of traveling slower and slower as it moves from the starting point to the ending point, as illustrated in Figure 5-21. We have drawn the points to show the easing values as the ship nears the bottom of the screen. Notice that the points get closer and closer until there is almost no distance between them.

Figure 5-21. Spaceship landing (easing out)

Figure 5-21 displays the results of CH5EX18.html. Now, let’s look at how this example works in detail. First, we will load in the ship.png image the same way we have loaded images previously in this chapter:

var shipImage;

function eventWindowLoaded() {

shipImage = new Image();

shipImage.src = "ship.png"

shipImage.onload = eventAssetsLoaded;

}

function eventAssetsLoaded() {

canvasApp();

}

Then in canvasApp(), we create a variable named easeValue, which represents the percentage to move the ship across the remaining distance between the two points.