HTML and CSS Reference

In-Depth Information

var p = this.p;

p.t += dt;

p.x = p.x0 + p.vx0 * p.t + 0.5 * p.ax * (p.t * p.t);

p.y = p.y0 + p.vy0 * p.t + 0.5 * p.ay * (p.t * p.t);

}

Q.gameLoop(function(dt) {

Q.clear();

ball1.step(dt);

ball1.draw(Q.ctx);

});

});

Much of the code consists of setting up the initial values for the ball's position and velocity, and the actual

position is calculated using just the two lines at the bottom of the update function. These two lines mirror Equa-

tion 4 exactly, once for the x direction and once for the y direction. Finally, the
gameLoop
function is written

explicitly; it clears the Canvas before updating the ball's position and calling the draw method. If you want to

follow the path of the ball explicitly, you can remove the call to
this.clear()
and the ball leaves a trail.

Switching to an Iterative Solution

Equation 4 is a closed form solution in that you can express the exact position of the cannonball at any point in

time just by plugging
t
into the one equation. You can do this because you are modeling such a simple object.

The minute you get something more complex, such as an object involving interactions with other objects or

input from the user, you won't come up with a closed form solution without hiring some mathematicians from

MIT.

Instead, you need to go back to your first set of differential equations (Equations 1 through 3) and turn them

into something more computer-friendly. The easiest way to do this is to use a
discrete integration technique
.

Discrete integration means instead of using calculus to determine an exact solution, you can use an actual, albeit

small value for
dt
to find an approximate solution. The most commonly used method for discrete integration

also happens to be the simplest and is known as
Forward Euler
, named after the famous Swiss mathematician

Leonhard Euler. This method translates well to computer simulation. This means you can assume that over any

small chunk of time, any of your potentially changing values, such as acceleration or velocity, are constant. The

velocity and position equations now become the following:

Equation 5:
v
=
v
t-1
+
a
t
×
dt

Equation 6:
p
=
p
t-1
+
v
t
×
dt

In the preceding equations,
dt
is no longer an instantaneous delta but rather is a small but measurable amount

of time. In the game, it will be approximately 1/30th of a second, or one frame of animation.

These equations aren't written in terms of
v
0
and
p
0
(velocity and position at time zero) but rather in terms

of
v
t-1
and
p
t-1
(velocity and position at the last simulation step). This means that you can't say exactly where

the ball is at any given point just by plugging in a value of
t
; rather you can incrementally calculate only the

position based on the previous position.