S2JS - How to fall and bounce convincingly : Rebound solution 1

The problem is caused because we're adding acceleration even at the moment of the bounce.

Gravity causes things to accelerate. But not everything. For example, not chairs sitting on the floor.

At the instant the ball is bouncing, there should be no acceleration added.

We can reflect this in the code by changing

this.velocity_y = this.velocity_y + gravity;

and

if (this.y + this.MyImg.height > myCanvas.height) {this.velocity_y= -this.velocity_y}

to become

if (this.y + this.MyImg.height > myCanvas.height) { // bounce this.velocity_y= -this.velocity_y; } else { // accelerate by gravity this.velocity_y = this.velocity_y + gravity; }

In other words, if we're at the bottom then bounce. If we're not at the bottom, then add some acceleration due to gravity.

Now we're bouncing perfectly.

<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 var FPS = 40; // How many frames per second function MySprite (img_url) { this.x = 0; this.y = 0; this.visible= true; this.velocity_x = 0; this.velocity_y = 0; this.MyImg = new Image(); this.MyImg.src = img_url ; } var gravity = 0.25; 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}; if (this.x + this.MyImg.width > myCanvas.width) {this.velocity_x= -this.velocity_x}; if (this.y + this.MyImg.height > myCanvas.height) { // bounce this.velocity_y= -this.velocity_y; } 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"); MyBall.velocity_x= 0; MyBall.velocity_y= 0; MyBall.y= 80; 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>