S2JS - How to fall and bounce convincingly : Implementing bounciness

The bounciness will be a number between zero and one. Zero indicates no bounciness. One indicates perfect bounciness, of the sort we never see in the real world.

But how to make the ball behave according to the bounciness?

Turns out it's really easy. At the moment we're making a bounce happen by doing this:

this.velocity_y= -this.velocity_y; // bounce off the bottom

All we do is multiply by our bounciness factor:

this.velocity_y= -this.velocity_y * this.bounciness; // bounce off the bottom

If bounciness is one, it will behave as before. If it's zero, it won't bounce at all. If it's 0.5, it'll rebound to half the starting height. Now the vertical bouncing is behaving more realistically, but there's obviously a problem with the horizontal behaviour.

<html> <head> <title> Bouncing objects</title> </head> <body> <canvas id="myCanvas" width=350 height=300 style="background-color:powderblue"> </canvas> <script> var ctx = myCanvas.getContext("2d"); // Get the drawing context for the canvas function MySprite (img_url, bounce) { this.x = 0; this.y = 0; this.visible= true; this.velocity_x = 0; this.velocity_y = 0; this.bounciness = bounce; this.MyImg = new Image(); this.MyImg.src = img_url ; } var gravity = 0.25; var FPS = 40; // How many frames per second MySprite.prototype.Do_Frame_Things = function() { if (this.visible) ctx.drawImage(this.MyImg, this.x, this.y); // draw the thing this.x = this.x + this.velocity_x; this.y = this.y + this.velocity_y; // move the thing if (this.x < 0) {this.velocity_x= -this.velocity_x}; // bounce off sides if (this.x + this.MyImg.width > myCanvas.width) {this.velocity_x= -this.velocity_x}; if (this.y + this.MyImg.height > myCanvas.height) { var overrun = this.y + this.MyImg.height - myCanvas.height; // calculate overrun this.velocity_y = this.velocity_y - (overrun / this.velocity_y * gravity); //adjust this.y = this.y - overrun; // be exactly at the bottom this.velocity_y= -this.velocity_y * this.bounciness; // bounce off the bottom } else { // accelerate by gravity, but only if we're not actually bouncing at this moment this.velocity_y = this.velocity_y + gravity; } } var MyBall= new MySprite("http://s2js.com/img/etc/tennis-ball.png", 0.8); MyBall.velocity_x= 3; MyBall.velocity_y= 0; MyBall.y= 0; MyBall.x= myCanvas.width / 2; function Do_a_Frame () { ctx.clearRect(0, 0, myCanvas.width, myCanvas.height); MyBall.Do_Frame_Things(); } setInterval(Do_a_Frame, 1000/FPS); // set my frame renderer </script> </body> </html>