Home ] Up ] [ Andis BallMenu - Physics ] BallMenu - Javascript ]

Andis BallMenuTM
Physics behind the scenes

 

 

Here I want to introduce the physical concepts and formulae used in Andis BallMenu.

Balls movement

Every ball with ball-number [Graphics:Images/index_gr_1.gif] carries a mass [Graphics:Images/index_gr_2.gif], coordinates [Graphics:Images/index_gr_3.gif], a velocity [Graphics:Images/index_gr_4.gif] and an acceleration [Graphics:Images/index_gr_5.gif]. If a total force [Graphics:Images/index_gr_6.gif] acts on the ball (we will see later how to calculate the force), then after a time step Δt the properties of the ball change according to

[Graphics:Images/index_gr_7.gif]
[Graphics:Images/index_gr_8.gif]
[Graphics:Images/index_gr_9.gif]

Notice that these are equations for vectors, so for each equation here we have to write two equations in a JavaScript program for the [Graphics:Images/index_gr_10.gif] and for the [Graphics:Images/index_gr_11.gif] part. After every time-step we have to go through this calculation for every ball.

Notice: If there is no force (always [Graphics:Images/index_gr_12.gif]) acting on the balls, then [Graphics:Images/index_gr_13.gif]never changes and [Graphics:Images/index_gr_14.gif] is always changed by a constant (constant motion), the ball moves with a constant velocity.

Simplification: In Andis BallMenu we used the following simplifications: All balls have the same mass ([Graphics:Images/index_gr_15.gif]) and the time-step is always [Graphics:Images/index_gr_16.gif].

Elastic impact on window border

We can compare the coordinates to the window coordinates WindowTop, WindowRight, WindowBottom, and WindowLeft. For example if

[Graphics:Images/index_gr_17.gif]

then we have to change the direction of the current velocity in x-direction

[Graphics:Images/index_gr_18.gif]
[Graphics:Images/index_gr_19.gif]

but leave the velocity in y-direction unchanged. We check accordingly for the other 3 borders.

Tip: Under certain conditions the program runs more stable if we explicitly choose the sign by [Graphics:Images/index_gr_20.gif] on WindowLeft and [Graphics:Images/index_gr_21.gif] on WindowRight instead of just flipping the sign.

Implementation Notice: In Andis BallMenu the coordinates [Graphics:Images/index_gr_22.gif] and [Graphics:Images/index_gr_23.gif] denote the upper left corner of the ball graphics, not its ball center. Therefore the left check is [Graphics:Images/index_gr_24.gif] and the right check is [Graphics:Images/index_gr_25.gif]. Here the diameter is always [Graphics:Images/index_gr_26.gif].

Elastic impact between balls


Only the normal velocity component (blue) is affected by an elastic impact. The tangential velocity component (green) is left unchanged. As a result the initial direction (violet) changes to a new direction (red).

First we have to check, if two balls touch each other. We use the Pythagorean theorem to check if two balls i and j with coordinates x and y and a radius r touch each other.

[Graphics:Images/index_gr_27.gif]

If [Graphics:Images/index_gr_28.gif] then the two balls touch, and we have to calculate new velocities for the balls.

Next we form a unit vector pointing in the direction from ball i to ball j

[Graphics:Images/index_gr_29.gif]

Now the following calculation applies to equal masses [Graphics:Images/index_gr_30.gif]. We calculate the relative velocity of the two balls.

[Graphics:Images/index_gr_31.gif]

We exchange the normal components of the velocities of the two balls, but keep the tangential components.

[Graphics:Images/index_gr_32.gif]
[Graphics:Images/index_gr_33.gif]

Notice: If the masses are not equal, then we have to use the center-of-mass frame, and the calculation gets a little bit more difficult.

Implementation Notice: In Andis BallMenu the balls are also displaced without force so that they never overlap each other: [Graphics:Images/index_gr_34.gif], [Graphics:Images/index_gr_35.gif], [Graphics:Images/index_gr_36.gif].

Friction

Since we have always the same time-step Δt=1, friction is most easily and in a very stable way implemented by multiplying the velocity by a number < 1 at each time step. For example with friction=0.995 we can set

[Graphics:Images/index_gr_37.gif]

Earth gravity

The force always points "downwards". This is quite easily implemented in our formalism. It means we have a constant force

[Graphics:Images/index_gr_38.gif]

with [Graphics:Images/index_gr_39.gif] being standard acceleration of gravity.

Notice: On earth the value of the standard acceleration of gravity is g = 9.806 [Graphics:Images/index_gr_40.gif]. In Andis BallMenu we choose the value g = 0.04 (the units would be [Graphics:Images/index_gr_41.gif]).

Planetary gravity

This is a force between two balls. We use the law of universal gravitation by Newton which is given by

[Graphics:Images/index_gr_42.gif]

This can be written in terms of vectors. Again we use the unit vector [Graphics:Images/index_gr_43.gif] and the distance d from above and calculate

[Graphics:Images/index_gr_44.gif]
[Graphics:Images/index_gr_45.gif]

Notice: The Newtonian constant of gravitation is given by [Graphics:Images/index_gr_46.gif]. In Andis BallMenu this constant is set to G=5000 (with units [Graphics:Images/index_gr_47.gif]). It is chosen relatively large so that the effects of gravitation can be seen easily.

Implementation notice: The displacement routine above at elastic impact increases the total energy of the system, thus breaking conservation of energy. The effect is that balls get faster and faster after elastic impacts under central gravitation. This can be accounted for by an additional energy correction. Therefore we have to subtract the energy gain [Graphics:Images/index_gr_48.gif] from this virtual motion. The energy gain is subtracted from the normal component of the velocity, while the transversal component is left unchanged. Notice that this breaks rotational invariance in a way that balls rotate faster and faster after a while, and should be accounted for by additional corrections. But I didn't correct that anymore, since it's kinda neat =)

 

The physics-related JavaScript code can be found in ballnavigation.js.

Notice about my JavaScript Code: You are free to use the cross-browser specific part of my code in browserspecific.js. If you want to use the JavaScript physics engine ballnavigation.js or the menu-preparation-module menupreparation.js, I kindly ask you to notify me and put a link on your web-page pointing to this web-site (strange.itp.tuwien.ac.at/~ipp).


Formula TypeSet Converted by Mathematica   

 

 
 

 Home ] Up ] [ Andis BallMenu - Physics ] BallMenu - Javascript ]
© 2002, Andreas Ipp