Physics ball JAVASCRIPT

[Racoon200]

I request a ball that can be thrown to the 'walls' of the webpage and it will bounce, like in real life. With real physic constants.

http://www.freewebs.com/racoon200

There i have a ball, but it only bounces vertically, I want a ball that you hold click on it to drag it, and when you loose the click, it will bounce against the walls.

Thanks :)

[MattEvans]

In re. to what you said here: http://www.daniweb.com/techtalkforums/thread71134.html
Asking for help is one thing; requesting it be done is another.

Personally, I don't have time to do this; it would take a couple of hours minimum : Time isn't free, and I don't come here for job offers =P

There's a few things you need to be able to do in order to do this. There's lots of ways you could go about it, but this is one method:

- First, you need to impart the ball with some information about where it's going. Webpages are generally 2D; so, you need to give the ball an X heading, and a Y heading. These will always be small values; and importantly; they'll change over time.
- Secondly, you need to keep the ball moving. A timer every t milliseconds could be used to move the ball to the position it is now, added to the X and Y heading you've stored in the ball.
- Now, you need to sense when the ball is about to hit the edges of the screen; and 'bounce' it off the walls. With headings, this is easy. You invert (multiply by -1) the heading that corresponds to a side (left and right; invert X; top and bottom; invert Y). Don't invert both, that's weird physics.

If you've done that, you've got a very rigid permanent bouncing. This will be a bit like the bouncing in Pong! - Noteably, there's no momentum, and no gravity.

Gravity is relativly easy to implement; in the same timer that moves the ball; multiply the Y heading by a (< 1) constant. This is faked physics, and you'll have to mess with the constant to get it right; but it will look ok (in a small environment, it's not too bad in terms of 'realism'). Your timer that checks for the ball hitting the edge of the screen should keep the ball bouncing as the gravity kicks in; but eventually it will stop.

Ha. In theory this would all work; in practise, you'll find:
- The top of the screen is Y = 0; so if you follow what I said about gravity; the ball will be pulled to the top of the screen. You need to take that into account; and make all calculations upside down.
- Checking if the ball is at Y=0 or X=0 to see if it's hit an edge wont be effective unless you always move by 1 unit between checks. You need to check a range from the edge of the ball to the edge of the screen. Bear in mind that ALL measurements of screen objects are from top left, so an object at X=0, Y=0 has its top-left corner at X=0,Y=0. Basically, if ball.myX < 0; ball is at left edge; if (ball.myX + ball.myWidth) > screen.myWidth; ball is at right edge. Those properties aren't correct; you could bind those properties yourself; but perhaps some of them are easy to determine as-standard.
- Even if you do a correct range check, you still may hit problems if the ball slips so far behind an edge that inverting its headings puts it back on the wrong side of the edge. Quick trick is to move the ball inwards a little before 'letting it go' so to speak. That also makes a visually attractive bounce.

If you got this far, you can try momentum. You'll need to be able to detect a mousedown on the ball, and then a released click; more importantly WHERE the released click was (in X and Y) . Then, find the angle between the ball and the released click

Then calculate a new heading in X and Y to give to the ball. Perhaps use the length of the vector between the mousedown and mouseup points to derive the headings' magnitude for added realism. Your timer will detect the ball should be moving, and then gravity will kick in again, and so on.

You know, this would be done better in something like Flash. With JS you'll have to jump through lots of hoops; it's not strictly what JS was designed for...

Still. Give it a go if you want it done.

[MattEvans]

Or alternatively, go somewhere like: http://www.irt.org/articles/js214/index.htm

At the least; it's a good starting point.

[Racoon200]

Well, i was asking if you knew one. But yea, iam going to start working in it. Luckyly, i got the formula for the bounce (ball bounces in an equal angle with a perpendicular line to the bouncing surface, the output angle is equal to the input angle.

[Racoon200]

Oh, i found a guy who gave me the code. Just give me your email, and ill send it to you. Maybe you could add some gravity to it, but the balls bounce correctly!

[MattEvans]

You'll find it easier technically if you 'ignore' the vector the ball is travelling in, and work in terms of the X and Y increments that compose that vector from the ball's present location. That way, you don't have to do a trigonomic calculation every timer iteration; you just apply a 2D transformation. The same thing happens as if you were to work with a vector all the time (angle + magnitude) for the ball; but it's making it alot easier for the computer to calculate individual movements; if you work directly with those individual movements.

If you keep track of the ball's heading as a vector:

**
ball.x += (sin(vectorAngle) * vectorMagnitude);
ball.y += (cos(vectorAngle) * vectorMagnitude);

To do a bounce now, you rotate the vector (increment the vectorAngle by a +/- 90 degree value in radians) the rotation angle is dependant on the edge that's been bounced into. Technically, you should reduce the magnitude of the vector by a function* (always), as the ball looses momentum; and reduce the magnitude by a function* (when the ball bounces) because the ball disparts alot of energy into the 'wall' of the screen.

If you keep track of headings: (which can be calculated from vecors, and vice versa)

**
ball.x += xHeading;
ball.y += yHeading;

now, to 'bounce' you multiply xHeading OR yHeading by -1 (creates the same travelling vector as a +/- 90 degree rotation), and to reduce the magnitude; decrease yHeading and xHeading simultaneously.

Instead of holding a vector of force along an arbitrary angle, you're holding 2 vectors of force, one along X and along Y.

* I use function here in its mathematic context, not in its programming context
** This isn't javascript, it's pseudocode

[MattEvans]

Hi Racoon200,

I posted my reply before I read your last reply; in reply to that reply;

send it to me as a PM on here, or better, attach it to a reply in this thread. I'll certainly have a look, but I can't promise I'll spend much time on it.

The advantage if you attach it to a reply here, is that other people might take alook at it aswel.

[Racoon200]

I prefer to send it by email because iam working on my dad's computer. Thats why i don't want to download stuff, or start making javascripts. When i get my computer back, ill start right off and make the ball myself if i dont have it.:)