• Choose a category
• All
• Classic-Fiction

ball.x += xunits;

ball.y += yunits;

//Draw points to illustrate path

points.push({x:ball.x,y:ball.y});

for (var i = 0; i< points.length; i++) {

context.drawImage(pointImage, points[i].x, points[i].y,1,1);

}

context.fillStyle = "#000000";

context.beginPath();

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

context.closePath();

context.fill();

}

var speed = 5;

var p1 = {x:20,y:20};

var angle = 45;

var radians = angle * Math.PI/ 180;

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

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

var ball = {x:p1.x, y:p1.y};

var points = new Array();

theCanvas = document.getElementById("canvasOne");

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

setInterval(drawScreen, 33);

}

Bouncing Off Walls

While it’s neat that we can create a vector with magnitude and direction and then move an object along it infinitely, it’s probably not something you will need to do all that often. Most of the time, you will want to see that object react to the world around it by bouncing off horizontal and vertical walls, for example.

To help you understand how to do this, there is a simple rule in physics. Although this rule is usually applied to rays of light, it can be very useful when animating 2D objects—especially when they are bouncing off horizontal and vertical walls. This rule is known as the angle of reflection:

The angle of incidence is equal to the angle of reflection.

The angle of incidence is the angle an object is traveling when it hits the walls, and the angle of reflection is the angle it travels after it bounces off the wall.

Figure 5-4 illustrates that when an object hits a wall on a line that forms a 45-degree angle with a perpendicular line drawn to the point of impact, it will bounce off (reflect) at a similar 45-degree angle.

Figure 5-4. Angle of incidence is equal to the angle of reflection

In the next section, we will create a series of examples using this rule to animate objects. The first, Example 5-4, will simply allow a single ball to bounce off the edges of the canvas.

Bouncing a Single Ball

In this first example, we will create a ball traveling on a vector. We will set the speed (magnitude) to 5 and the angle (direction) to 35 degrees. The rest of the variables are identical to those in Example 5-3. We are still moving on a vector, but now we will test to see whether the ball hits a “wall” (the edges of the canvas), in which case it will bounce off, using the rule of the angle of reflection. One big change from the previous vector example is the location in which we initialize the values for radians, xunits, and yunits. Instead of setting them up when we initialize the application in canvasApp(), we save that for a call to a new function named updateBall():

var speed = 5;

var p1 = {x:20,y:20};

var angle = 35;

var radians = 0;

var xunits = 0;

var yunits = 0;

var ball = {x:p1.x, y:p1.y};

updateBall();

The updateBall() function is called every time we set a new angle for the ball, because we need to recalculate the radians and find new values for xunits and yunits. A new angle is generated when the app starts, as well as every time the ball bounces off a wall:

function updateBall() {

radians = angle * Math.PI/ 180;

xunits = Math.cos(radians) * speed;

yunits = Math.sin(radians) * speed;

}

In drawScreen(), we update the position of the ball, and then draw it on the canvas:

ball.x += xunits;

ball.y += yunits;

context.fillStyle = "#000000";

context.beginPath();

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

context.closePath();

context.fill();

Next, we test to see whether the ball has hit a wall before we draw it to the canvas. If the ball hits the right side (ball.x > the Canvas.width) or the left side of the canvas (ball.x < 0), we set the angle to 180 degrees minus the angle of the vector