Simulating Projectile Motion with CesiumJS and Quadratic Equations

In this blog post, we’ll dive into the fascinating world of projectile motion and how we can simulate it using CesiumJS, a powerful library for creating 3D globes and maps. We’ll break down the key concepts used in our simulation, including the quadratic equation, and explain how they come together to create an interactive visualization of projectile motion.

The Basics of Projectile Motion

Projectile motion is a form of motion where an object is launched into the air and travels along a curved path under the influence of gravity. Think of a ball thrown into the air or a cannon firing a projectile. The path this object follows is called a parabola.

The Quadratic Equation in Projectile Motion

At the heart of our simulation lies the quadratic equation. In the context of projectile motion, we use two quadratic equations:

1. For the horizontal distance (x):
   x = v₀ * cos(θ) * t
2. For the vertical distance (y):
   y = v₀ * sin(θ) * t – (1/2) * g * t²

Where:

• v₀ is the initial velocity
• θ is the launch angle
• t is time
• g is the acceleration due to gravity

The equation for y is a quadratic equation in its standard form (ax² + bx + c). This quadratic nature is what gives the projectile its parabolic path.

Full Source Code

Key Concepts in Our Simulation

1. Initialization

We start by setting up a CesiumJS viewer, which provides the 3D globe on which we’ll visualize our projectile:

const viewer = new Cesium.Viewer('cesiumContainer');

2. User Input

We allow users to input three key parameters:

• Initial velocity
• Launch angle
• Gravity

These inputs directly feed into our quadratic equations.

3. Time of Flight Calculation

We calculate the total time the projectile will be in the air:

const timeOfFlight = 2 * initialVelocity * Math.sin(launchAngle) / gravity;

This formula is derived from the quadratic equation for vertical motion, solving for when y = 0 (i.e., when the projectile hits the ground).

4. Generating Projectile Positions

We use a loop to generate positions for the projectile at small time intervals:

for (let t = 0; t <= timeOfFlight; t += 0.1) {
    const x = initialVelocity * Math.cos(launchAngle) * t;
    const y = initialVelocity * Math.sin(launchAngle) * t - 0.5 * gravity * t * t;
    // ...
}

Here, we’re directly applying our quadratic equations to calculate x and y positions over time.

5. Visualization

We use CesiumJS entities to visualize the projectile path:

• A red polyline shows the entire trajectory.
• A yellow point represents the projectile itself.

6. Animation

We animate the projectile using setInterval, updating its position every 100 milliseconds:

animationInterval = setInterval(() => {
    // Update projectile position
}, 100);

The Power of the Quadratic Equation

The quadratic equation is crucial in this simulation because it accurately models the parabolic path of a projectile under constant acceleration (gravity). The term -0.5 * gravity * t * t in our vertical distance equation is what causes the projectile to fall back to Earth, creating the characteristic parabolic arc.

The Quadratic Equation in Our Code

In our simulation code, the quadratic equation is not explicitly written out in its standard form (ax² + bx + c = 0). Instead, it’s implemented in its parametric form for projectile motion. Let’s look at the relevant part of the code:

for (let t = 0; t <= timeOfFlight; t += 0.1) {
    const x = initialVelocity * Math.cos(launchAngle) * t;
    const y = initialVelocity * Math.sin(launchAngle) * t - 0.5 * gravity * t * t;

    // Convert local coordinates to geographic coordinates
    const position = Cesium.Cartesian3.fromDegrees(
        -75.59777 + x / 111000,
        40.03883,
        y  // Use y directly for altitude
    );
    positions.push(position);
}

The quadratic equation is represented in the calculation of y:

const y = initialVelocity * Math.sin(launchAngle) * t - 0.5 * gravity * t * t;

This is the equation for the vertical displacement of a projectile under constant acceleration due to gravity.

Derivation of the Quadratic Equation for Projectile Motion

To understand how this equation is derived, let’s break it down step by step:

1. In projectile motion, we have two key equations:

• Velocity: v = v₀ + at
• Position: y = y₀ + v₀t + ½at² Where v₀ is initial velocity, a is acceleration, t is time, and y₀ is initial position.

1. For vertical motion in our simulation:

• Initial vertical velocity: v₀y = initialVelocity * sin(launchAngle)
• Acceleration: a = -gravity (negative because gravity acts downward)
• Initial position: y₀ = 0 (we start at ground level)

1. Substituting these into the position equation:
   y = 0 + (initialVelocity * sin(launchAngle)) * t + ½(-gravity) * t²
2. Simplifying:
   y = (initialVelocity * sin(launchAngle)) * t – ½ * gravity * t²

This is exactly the equation we see in our code for calculating y.

The Quadratic Nature of the Equation

While it might not look like the standard form of a quadratic equation (ax² + bx + c = 0), our equation for y is indeed quadratic in terms of time t:

• The t² term: -½ * gravity * t²
• The t term: initialVelocity * sin(launchAngle) * t
• The constant term: 0 (implicit, since we start at y = 0)

This quadratic relationship between y and t is what gives the projectile its parabolic path.

How the Code Uses the Quadratic Equation

In our simulation:

1. We calculate y for various values of t using this quadratic equation.
2. We pair each y with a corresponding x (which has a linear relationship with t).
3. These (x, y) pairs form the points of our projectile’s path.
4. We convert these local (x, y) coordinates to geographic coordinates for display on the globe.

By repeatedly applying this equation for different time values, we generate the entire parabolic trajectory of the projectile.

Conclusion

By combining the mathematical precision of the quadratic equation with the visualization capabilities of CesiumJS, we’ve created an interactive and educational tool for understanding projectile motion. This simulation allows users to experiment with different initial conditions and see how they affect the projectile’s path, providing an intuitive understanding of the physical principles at work.

Whether you’re a student learning about physics, an educator looking for interactive teaching tools, or just someone curious about the math behind everyday phenomena, this projectile motion simulation offers valuable insights into the elegant mathematics that governs the world around us.

I hope this tutorial will create a good foundation for you. If you want tutorials on another GIS topic or you have any queries, please send an mail at contact@spatial-dev.guru.