javascript - Simple Bouncing Ball won't stop bouncing - Stack Overflow

admin管理员组

文章数量:1415655

This is a general problem that I have encountered across many languages. When I am first learning the language, one of the first things I attempt to do is to make a bouncing ball.

However, every time I do it, I am left with a very annoying problem - the ball just keeps on bouncing just a little bit at the bottom.

Here is an example of the problem I came across today while learning about the Html5 Canvas -

You can just copy and paste that into a HTML file and run it yourself if you like. Even though I have it set to lose 20% of its 'energy' after each bounce, it continues to bounce a little at the bottom.

I would be very grateful if someone could point out my error

This is a general problem that I have encountered across many languages. When I am first learning the language, one of the first things I attempt to do is to make a bouncing ball.

However, every time I do it, I am left with a very annoying problem - the ball just keeps on bouncing just a little bit at the bottom.

Here is an example of the problem I came across today while learning about the Html5 Canvas - http://pastebin./aM1svKMJ

You can just copy and paste that into a HTML file and run it yourself if you like. Even though I have it set to lose 20% of its 'energy' after each bounce, it continues to bounce a little at the bottom.

I would be very grateful if someone could point out my error

• javascript
• html
• physics

Share Improve this question Follow asked Apr 21, 2011 at 22:21 Mark DMark D 1,32744 gold badges2020 silver badges3838 bronze badges 2

• 7 Removing 20% every time never lets the 'bounce' diminish to zero; it simply approaches zero, and the size of the reduction bees less every time. Ideally, when the bounce gets below a certain (arbitrarily small) value, you'd simply round down to zero, rather than a further 20% decrease. – David Thomas Commented Apr 21, 2011 at 22:22
• @David, in the discrete world of floating point arithmetic that needn't be the case depending on how underflow is handled. An alternative to introducing a delta like you mentioned would be to check whether the value has changed: while (y < old_y) ... which handles the case of round-down underflow (and y will reach zero upon which 0 >= 0), and also the case where the value remains forever positive. – davin Commented Apr 21, 2011 at 22:40

Add a ment  | 

6 Answers 6

Sorted by: Reset to default 3

you can use the original y-coordinate of the ball and use its ratio with the current y-coordinate to decrement "e" divided by a constant for sensitivity. works for me:

//line 46 add:
var initHeight = height / 2;

//line 83:
this.vy *= -1 * e;
e = e - (e* (initHeight / this.y ) / 10);

here's a working sample: http://jsfiddle/57tx3/

If you keep dividing by 20%, you'll never reach zero. Eventually, you'll be "bouncing" 20% of some infinitesimally small numbers. When it hits an amount of "energy" near the bottom percent of the original amount (say 20% or under), you'll have to hard code it to 0%.

Or better yet, every bounce needs to divide by 20% of the original amount, not the current. That will only be 5 bounces, but say you make it 5%, that's 20 bounces till zero.

You could also deduct a small amount of energy on each bounce (could be fixed, could be randomly chosen). At some point that will dominate the calculation, and take your energy to zero.

I solved this myself after tinkering with it for a bit.

Turns out everything is ok once the required steps are taken in the right order.

This means that Accelerations should be added first, then Velocities, then position checks then the drawing.

All I needed to change was

                                        this.vx += this.ax;
                                    this.vy += this.ay;

                                    this.x += this.vx;
                                    this.y += this.vy;

This is a pretty mon problem, but most of the answers don't seem to address the actual issue: You have constant gravity accelerating the ball, but you only have proportional deceleration from contact with the ground. This means that the ball is gaining energy when it's going slow enough: the ball gains velocity from gravity that would take it through the ground. You detect that and move the ball back up to ground level, but then you reverse the velocity (only taking out part of what it gained from gravity). So the ball jumps up a little bit. You need to detect resting contact.

To solve that bug the only thing i had to do was change where i put the ball after the colision.

Instead of putting it above the barrier, you put it on the barrier.

if ball.py >= surface.get_height() - self.radius:
    ball.sy = - ball.sy * ball.elasticity
    ball.py = surface.get_height() - self.radius - 1

As you can see, it still detects collision on the next frame because vy will be so small that it only moves one pixel up and puts it back on the place so it doesn't move.

if you still didn't solve it's because you have to alter the order of events.

本文标签： javascriptSimple Bouncing Ball won39t stop bouncingStack Overflow