There are many situations where we don't know the exact position that an object will have at a given time but we know an equation that describe its movement. These equations are known as parametric curves and are called like that because the position depends on one parameter: the time.
There are many examples of parametric curves. We can think for instance of a projectile that we shoot on a game, a car that is going downhill or a bouncing ball. In each case, there are equations that describe the motion of these objects under ideal conditions. The next diagram shows the parametric equation that describes free fall motion.
We are going to use parametric curves for animating objects in a WebGL scene. In this example, we will model a set of bouncing balls.
We will create a global variable that will store the time (simulation time).
var sceneTime = 0;
We also create the global variables that regulate the animation:
var animationRate = 15; /* 15 ms */ var elapsedTime = undefined; var initialTime = undefined;
The load function is updated to load a bunch of balls using the same geometry (same JSON file) but adding it several times to the scene object. The code looks like this:
function load(){
Floor.build(80,2);
Axis.build(82);
Scene.addObject(Floor);
for (var i=0;i<NUM_BALLS;i++){
var pos = generatePosition();
ball.push(new BouncingBall(pos[0],pos[1],pos[2]));
Scene.loadObject('models/geometry/ball.json','ball'+i);
}
}
Notice that here we also populate an array named ball[]. We do this so that we can store the ball positions every time the global time changes. We will talk in depth about the bouncing ball simulation in the next Time for action section. For the moment, it is worth mentioning that it is on the load function that we load the geometry and initialize the ball array with the initial ball positions.
The startAnimation and onFrame functions look exactly as in the previous examples:
function onFrame() {
elapsedTime = (new Date).getTime() - initialTime;
if (elapsedTime < animationRate) { return;} //come back later
var steps = Math.floor(elapsedTime / animationRate);
while(steps > 0){
animate();
steps -= 1;
}
initialTime = (new Date).getTime();
}
function startAnimation(){
initialTime = (new Date).getTime();
setInterval(onFrame,animationRate/1000); // animation rate }
The animate function passes the sceneTime variable to the update method of every ball in the ball array. Then, sceneTime is updated by a fixed amount. The code looks like this:
function animate(){
for (var i = 0; i<ball.length; i++){
ball[i].update(sceneTime);
}
sceneTime += 33/1000; //simulation time
draw();
}
Again, parametric curves are really helpful because we do not need to know beforehand the location of every object that we want to move. We just apply a parametric equation that gives us the location based on the current time. This occurs for every ball inside its update method.
In the draw function, we use matrix stack to save the state of the Model-View matrix before applying a local transformation for each one of the balls. The code looks like this:
transforms.calculateModelView();
transforms.push();
if (object.alias.substring(0,4) == 'ball'){
var index = parseInt(object.alias.substring(4,8));
var ballTransform = transforms.mvMatrix;
mat4.translate(ballTransform,ball[index].position);
object.diffuse = ball[index].color;
}
transforms.setMatrixUniforms();
transforms.pop();
The trick here is to use the number that makes part of the ball alias to look up the respective ball position in the ball array. For example, if the ball being rendered has the alias ball32 then this code will look for the current position of the ball whose index is 32 in the ball array. This one-to-one correspondence between the ball alias and its location in the ball array was established in the load function.
In the following Time for action section, we will see the bouncing balls animation working. We will also discuss some of the code details.