• Choose a category
• All
• Classic-Fiction

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.velocityy += gravity;

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

ball.velocityy = -(ball.velocityy)

}

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 = 5;

var gravity = .1;

var angle = 295;

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};

setInterval(drawScreen, 33);

}

Gravity with Bounce and Applied Simple Elasticity

In physics, the elasticity of a bouncing ball refers to how much energy is conserved when a ball bounces off a surface. We already covered a bit about conservation of energy when we discussed balls colliding, but when we are simulating objects falling, we need to take a slightly different path with our code. In Example 5-15, we applied 100% elasticity and the ball bounced forever (actually, this was only implied since we did not consider elasticity at all). However, in real life, balls usually lose some of their energy every time they bounce off a surface. The amount of energy conserved depends on the material the ball is made from, as well as the surface it is bouncing on. For example, a rubber Super Ball is much more elastic than a cannonball and will bounce higher on the first bounce off a surface. Both will bounce higher off a concrete surface than a surface made of thick mud. Eventually, both will come to rest on the surface as all the energy is transferred away from the ball.

We can simulate simple elasticity by applying a constant value to the ball when it bounces off the ground. For this example, we will set the speed of the ball to 6 pixels per frame, and the angle to 285. We will keep our gravity at .1, but set a new variable named elasticity to .5. To make this more straightforward, we will also assume that the surface the ball is bouncing on does not add or subtract from the elasticity of the ball.

In canvasApp() we would set the new properties like this:

var speed = 6;

var gravity = .1;

var elasticity = .5;

var angle = 285;

We then add the new elasticity property to the ball object because, unlike gravity, elasticity describes a property of an object, not the entire world it resides within. This means that having multiple balls with different values for elasticity would be very easy to implement:

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

elasticity: elasticity};

In the drawScreen() function, we still add the gravity value to the y velocity (velocityy). However, instead of simply reversing the y velocity when the ball hits the bottom of the canvas, we also multiply the y velocity by the elasticity value stored in the ball.elasticity property. This applies the elasticity to the bounce, preserving the y velocity by the percentage value of elasticity for the object:

ball.velocityy += gravity;

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

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

}

ball.y += ball.velocityy;

ball.x += ball.velocityx;

In Figure 5-19 you can see what this application looks like when executed in a web browser.

Figure 5-19. Ball bouncing with elasticity and gravity applied

NOTE