S2JS - How to fall and bounce convincingly : Implementing bounciness2

As that last example clearly showed, we should also apply the same idea to the x-velocity.

We do this at the point we're handling the vertical bounce, and we simply reduce the x-velocity by the bounciness factor as well. If we wanted to be fussy, we might have a separate bounciness factor for horizontal behaviour, perhaps related to the roughness of the surface. But for simplicity we'll use the same factor for both.

this.velocity_x= this.velocity_x * this.bounciness // also slow horizontally

Now our tennis ball really is bouncing like a real-world ball.

We could get even fancier and add some air-resistance so it even slows down while in flight, but this is a pretty accurate simulation as it stands.

<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 the 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 this.velocity_x= this.velocity_x * this.bounciness // also slow horizontally } 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>