Projectile Motion from a Building: 2D Trajectory Explorer

We model the motion of a ball thrown from the top of a building using standard projectile motion equations.

---

Problem Setup

A ball is thrown from the top of a building:

• Building height: $h_0 = 20\,\text{m}$
• Initial speed: $v_0 = 15\,\text{m/s}$
• Launch angle: $\theta = 30^\circ$ above the horizontal
• Gravitational acceleration: $g \approx 9.8\,\text{m/s}^2$ (downward)

We assume:

• No air resistance
• Constant gravitational field
• 2D motion (horizontal $x$ and vertical $y$)

We choose the origin at the base of the building, with:

• $x$ axis: horizontal, positive to the right
• $y$ axis: vertical, positive upward

Thus the ball starts at $(x_0, y_0) = (0, 20)$.

---

Decomposing the Initial Velocity

The initial velocity vector $\vec v_0$ is split into horizontal and vertical components:

$$\begin{aligned} v_{0x} &= v_0 \cos\theta \\ v_{0y} &= v_0 \sin\theta \end{aligned}$$

For $v_0 = 15$ and $\theta = 30^\circ$:

$$\cos 30^\circ = \frac{\sqrt{3}}{2} \approx 0.866,\quad \sin 30^\circ = \tfrac{1}{2} = 0.5$$

So:

$$\begin{aligned} v_{0x} &\approx 15 \cdot 0.866 \approx 12.99\,\text{m/s} \\ v_{0y} &= 15 \cdot 0.5 = 7.5\,\text{m/s} \end{aligned}$$

---

Position as a Function of Time

Ignoring air resistance, the horizontal motion is uniform, and the vertical motion is uniformly accelerated.

Horizontal position:

$$x(t) = x_0 + v_{0x} t = v_{0x} t$$

(since we choose $x_0 = 0$).

Vertical position:

$$y(t) = y_0 + v_{0y} t - \tfrac{1}{2} g t^2$$

with $y_0 = 20$.

So explicitly:

$$\begin{aligned} x(t) &= v_0\cos\theta \; t \\ y(t) &= 20 + v_0\sin\theta \; t - \tfrac{1}{2} g t^2 \end{aligned}$$

---

Time of Flight (Landing Time)

The ball hits the ground when $y(t) = 0$.

Solve

$$0 = 20 + v_0 \sin\theta \; t - \tfrac{1}{2} g t^2.$$

This is a quadratic in $t$:

$$-\tfrac{1}{2} g t^2 + v_0 \sin\theta \; t + 20 = 0.$$

Multiply by $-1$ for convenience:

$$\tfrac{1}{2} g t^2 - v_0 \sin\theta \; t - 20 = 0.$$

Using the quadratic formula $at^2 + bt + c = 0$ with:

• $a = \tfrac{1}{2}g$
• $b = -v_0 \sin\theta$
• $c = -20$

$$t = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}$$

Plugging in values (keeping it symbolic here):

$$t = \frac{v_0 \sin\theta \pm \sqrt{(v_0\sin\theta)^2 + 2 g \cdot 20}}{g}.$$

There will be two solutions, one negative (non-physical for forward time) and one positive. We take the positive root as the total time of flight $T$.

Once $T$ is known, the horizontal range is:

$$R = x(T) = v_0 \cos\theta\; T.$$

The visualization computes this time numerically and shows:

• The full trajectory curve from $t = 0$ to $T$.
• The ball position at an animated time $t_\text{anim}$ that loops from launch to landing.

---

Understanding the Visualization

This interactive canvas shows:

• A dark background with neon curves for the trajectory.
• A building on the left with its height representing $20\,\text{m}$.
• The ball moving along the parabolic path.
• Vector arrows for the initial velocity components, $v_{0x}$ and $v_{0y}$ (when toggled on).
• (Optionally) a faded ghost trajectory for reference while you change parameters.

Controls

• Initial Velocity (m/s): Changes $v_0$ and therefore both range and maximum height.
• Angle (degrees): Changes $\theta$, controlling how much of $v_0$ is vertical vs horizontal.
• Gravity (m/s²): Adjusts $g$, letting you explore motion on different planets.
• Time Scale: Speeds up or slows down the animation in time.
• Show Vectors: Toggles the display of the initial velocity components.
• Show Full Path: Toggles the drawn full trajectory.

Cartesian vs Canvas Coordinates

The math uses a standard Cartesian system with $y$ positive upwards, but the HTML canvas has $y$ increasing downwards. To map physics coordinates $(x, y)$ to canvas $(X_c, Y_c)$, we use:

$$\begin{aligned} X_c &= x_\text{offset} + x \cdot s, \\ Y_c &= y_\text{offset} - y \cdot s, \end{aligned}$$

where $s$ is a pixel-per-meter scale and the offsets place the origin near the ground at the base of the building.

---

How to Use This to Understand the Problem

1. Start with the default values (15 m/s, 30°) and watch the trajectory.
2. Increase the angle towards 90° to see more vertical motion and shorter horizontal range.
3. Decrease the angle towards 0° to see a flatter, more horizontal throw from the building.
4. Change gravity to see how the same initial throw behaves on different worlds (e.g., Moon vs Earth).

Under the hood, the animation simply evaluates:

$$x(t) = v_0\cos\theta \; t, \quad y(t) = 20 + v_0\sin\theta \; t - \tfrac{1}{2} g t^2$$

for many points in time between $t=0$ and the landing time $T$, and then maps these coordinates to the canvas for drawing the smooth path and the moving ball.