Ball Bouncing Off Walls Example
Today I learned about utilizing angle of reflection in physics to simulate bouncing. Basically the idea is that the angle of incidence (incoming angle) = angle of reflection (outgoing angle). This is usually used for calculation of light rays, but it can also be applied to simulate an object bounce.
This example isn’t perfect – you’ll notice the ball goes halfway into the wall before the bouncing occurs – but it captures the basic concept quite well.
The JavaScript Code
$(document).ready(function() {
// Uses Modernizr.js to check for canvas support
function canvasSupport() {
return Modernizr.canvas;
}
canvasApp();
function canvasApp() {
// Check for canvas support
if (!canvasSupport()) {
return;
} else {
// Grab the canvas and set the context to 2d
var theCanvas = document.getElementById('canvasOne');
var context = theCanvas.getContext("2d");
}
// Variables
var speed = 5;
var position1 = {x:20, y: 20};
var angle = 35;
var radians = 0;
var xUnits = 0; // represents pixels to move along the x-axis
var yUnits = 0; // represents pixels to move along the y-axis
var ball = {x: position1.x, y: position1.y};
updateBall();
// Drawing interval
setInterval(drawScreen, 33);
// Functions
function updateBall () {
// Called every time we set a new angle for the ball.
// Recalculations radians and sets new xUnits and yUnits values.
radians = angle * Math.PI/180;
xUnits = Math.cos(radians) * speed;
yUnits = Math.sin(radians) * speed;
}
function drawScreen() {
// Reset canvas
context.fillStyle = "#ffffff";
context.fillRect(0, 0, theCanvas.width, theCanvas.height);
// Outside border
context.strokeStyle = "#000000";
context.strokeRect(1, 1, theCanvas.width - 2, theCanvas.height - 2);
// Update the position of the ball and draw it
ball.x += xUnits;
ball.y += yUnits;
// Draw the ball object
context.fillStyle = "#000000";
context.beginPath();
context.arc(ball.x, ball.y, 15, 0, Math.PI * 2, true);
context.closePath();
context.fill();
// Check if ball has hit a wall. If so, then call updateBall
if (ball.x > theCanvas.width || ball.x < 0) { // new angle = 180 - angle of incidence angle = 180 - angle; updateBall(); } else if (ball.y > theCanvas.height || ball.y < 0) {
angle = 360 - angle;
updateBall();
}
}
}
});
The Example App
You can find the code running live here: https://www.zesix.com/html5/ballBouncingOffWalls/