Time for action — bouncing ball

  1. Open ch5_BouncingBalls.html in your HTML5-enabled Internet browser.
  2. The orbiting camera is activated by default. Move the camera and you will see how all the objects adjust to the global transform (camera) and yet they keep bouncing according to its local transform (bouncing ball).
    Time for action — bouncing ball
  3. Let's explain here a little bit more in detail how we keep track of each ball.
    • First of all let's define some global variables and constants:
    var ball = []; //Each element of this array is a ball
var BALL_GRAVITY = 9.8; //Earth acceleration 9.8 m/s2
var NUM_BALLS = 50; //Number of balls in this simulation
    • Next, we need to initialize the ball array. We use a for loop in the load function to achieve it:
    for (var i=0;i<NUM_BALLS;i++){
ball.push(new BouncingBall());
Scene.loadObject('models/geometry/ball.json','ball'+i);
}
    • The BouncingBall function initializes the simulation variables for each ball in the ball array. One of this attributes is the position, which we select randomly. You can see how we do this by using the generatePosition function.
    • After adding a new ball to the ball array, we add a new ball object (geometry) to the Scene object. Please notice that the alias that we create includes the current index of the ball object in the ball array. For example, if we are adding the 32nd ball to the array, the alias that the corresponding geometry will have in the Scene will be ball32.
    • The only other object that we add to the scene here is the Floor object. We have used this object in previous exercises. You can find the code for the Floor object in /js/webgl/Floor.js.
  4. Now let's talk about the draw function. Here, we go through the elements of the Scene and retrieve each object's alias. If the alias starts with the word ball then we know that the reminder of the alias corresponds to its index in the ball array. We could have probably used an associative array here to make it look nicer but it does not really change the goal. The main point here is to make sure that we can associate the simulation variables for each ball with the corresponding object (geometry) in the Scene.

    It is important to notice here that for each object (ball geometry) in the scene, we extract the current position and the color from the respective BouncingBall object in the ball array.

    Also, we alter the current Model-View matrix for each ball using a matrix stack to handle local transformations, as previously described in this chapter. In our case, we want the animation for each ball to be independent from the camera transform and from each other.

  5. Up to this point, we have described how the bouncing balls are created (load) and how they are rendered (draw). None of these functions modify the current position of the balls. We do that using BouncingBall.update(). The code there uses the animation time (global variable named sceneTime) to calculate the position for the bouncing ball. As each BouncingBall has its own simulation parameters, we can calculate the position for each given position when a sceneTime is given. In short, the ball position is a function of time and as such, it falls into the category of motion described by parametric curves.
  6. The BouncingBall.update() method is called inside the animate function. As we saw before, this function is invoked by the animation timer each time the timer is up. You can see inside this function how the simulation variables are updated in order to reflect the current state of that ball in the simulation.

What just happened?

We have seen how to handle several object local transformations using the matrix stack strategy while we keep global transformation consistent through each rendering frame.

In the bouncing ball example, we have used an animation timer for the animation that is independent from the rendering timer.

The bouncing ball update method shows how parametric curves work.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
3.19.30.232