HTML and CSS Reference

In-Depth Information

Equation 2:
v
=
v
0
+
a
×
dt

Equation 3:
p
=
p
0
+
v
×
dt

These are the basic 2-D dynamics equations that define the acceleration on a body as a function of its mass

and the forces acting on it, and the position of a rigid body in relation to a combination of its starting position,

its velocity, and its acceleration.

Equation 1 spells out that the acceleration on an object is equal to the force being applied to it divided by the

object's mass. Equation 2 calculates the current velocity
v
if you know the initial velocity
v
0
and the acceler-

ation from Equation 1. The symbol
dt
represents an instantaneous delta of time. Finally, Equation 3 calculates

the position of the object given the initial position and the current velocity from Equation 2.

Assuming that force and thus acceleration is a constant, with a little bit of calculus, you can unify the last

two equations down to a single equation:

Equation 4:
p
=
p
0
+
v
0
×
t
+
1
/
2
×
a
×
t
2

This equation tells you that the position of an object with constant acceleration can be determined as a func-

tion of its initial position
p
0
, initial velocity
v
0
, and constant acceleration
a
. For any number of
t
seconds that you

plug into the equation, you can calculate the position. What's a good example of constant acceleration? Well,

gravity, for one, can be modeled as a constant force of 9.8 m/s
2
.

Modeling a Projectile

Given the preceding equation, you can easily model a projectile launched into the air because its vertical ac-

celeration will just be governed by gravity (a constant), and its horizontal acceleration will be 0 (which also

happens to be a constant). Because you haven't created any sort of vector classes, the easiest way to handle a

2-D position is to evaluate the equation twice each frame, once for the
x
direction and once for the
y
direction.

For the
x
direction, you can simplify the equation further by completely dropping the
x
acceleration compon-

ent, but leave it in for completeness.

Listing 17-1
takes the preceding equation and uses Quintus to run a simple simulation of a projectile

launched into the air. You can modify any of the initial values to see how they affect behavior.

Listing 17-1:
Modeling a projectile with a closed form solution

var Q = Quintus().include("Sprites").setup()

Q.load(['cannonball.png','cannonball2.png'],function() {

var ball1 = new Q.Sprite({

asset: 'cannonball.png',

x0: 0, // Initial X position

vx0: 20, // X velocity

ax: 0, // X acceleration

y0: 380, // Initial Y position

vy0:-100, // Y Velocity

ay: 20, // Constant Y acceleration

t: 0 // Starting time

});

ball1.step = function(dt) {