Create a **self-contained interactive HTML/JavaScript application** demonstrating projectile motion and the numerical solution of the equations of motion. The application should be suitable for university-level introductory mechanics or numerical-methods teaching.
The entire application must run locally by opening a single `.html` file in a browser. Use only standard **HTML5, CSS, JavaScript, Canvas and/or SVG**. Do not require a server, installation, build process, or external JavaScript libraries.
## 1. Physical model
Simulate the two-dimensional motion of a projectile in the \(x-y\) plane.
Use the state vector
$$
(x,y,v_x,v_y).
$$
The equations of motion are
$$
\frac{dx}{dt}=v_x,
\qquad
\frac{dy}{dt}=v_y.
$$
Gravity acts vertically downward:
$$
\frac{dv_x}{dt}=a_x,
\qquad
\frac{dv_y}{dt}=a_y-g.
$$
Allow the user to select among three models:
### A. No air resistance
$$
a_x=0,\qquad a_y=0.
$$
Thus,
$$
\frac{dv_x}{dt}=0,
\qquad
\frac{dv_y}{dt}=-g.
$$
For this case, display both the numerical solution and the exact analytical solution
$$
x(t)=x_0+v_0\cos\theta\,t,
$$
$$
y(t)=y_0+v_0\sin\theta\,t-\frac12gt^2.
$$
Also calculate the exact impact time by solving \(y(t)=0\), rather than assuming \(y_0=0\).
### B. Linear air resistance
Use a drag acceleration proportional to velocity:
$$
\mathbf a_\mathrm{drag}=-\gamma \mathbf v,
$$
so that
$$
\frac{dv_x}{dt}=-\gamma v_x,
$$
$$
\frac{dv_y}{dt}=-g-\gamma v_y.
$$
Here \(\gamma\) has units of \(s^{-1}\).
For this case, also calculate and display the analytical solution:
$$
v_x(t)=v_{x0}e^{-\gamma t},
$$
$$
v_y(t)=
\left(v_{y0}+\frac{g}{\gamma}\right)e^{-\gamma t}
-\frac{g}{\gamma},
$$
$$
x(t)=x_0+
\frac{v_{x0}}{\gamma}
\left(1-e^{-\gamma t}\right),
$$
$$
y(t)=y_0+
\frac{v_{y0}+g/\gamma}{\gamma}
\left(1-e^{-\gamma t}\right)
-\frac{g}{\gamma}t.
$$
Handle the limit \(\gamma\rightarrow0\) safely, without numerical division-by-zero problems.
### C. Quadratic air resistance
Use
$$
\mathbf a_\mathrm{drag}=-c|\mathbf v|\mathbf v.
$$
Thus,
$$
\frac{dv_x}{dt}
=
-c\sqrt{v_x^2+v_y^2}\,v_x,
$$
$$
\frac{dv_y}{dt}
=
-g-c\sqrt{v_x^2+v_y^2}\,v_y.
$$
Clearly state that a simple elementary closed-form trajectory is not used in this case and therefore the trajectory is obtained numerically.
The parameter \(c\) should have units consistent with the acceleration formula above.
Optionally explain that this coefficient may be interpreted as
$$
c=\frac{\rho C_D A}{2m}
$$
for a conventional quadratic-drag model, where \(m\) is projectile mass, \(A\) cross-sectional area, \(\rho\) air density, and \(C_D\) drag coefficient.
## 2. Initial conditions and controls
Provide controls for:
* initial speed \(v_0\),
* launch angle \(\theta\),
* initial height \(y_0\),
* gravitational acceleration \(g\),
* drag model,
* linear-drag coefficient \(\gamma\),
* quadratic-drag coefficient \(c\),
* numerical time step \(\Delta t\),
* numerical integration method.
Use sensible defaults, for example:
* \(v_0=25\;\mathrm{m/s}\),
* \(\theta=45^\circ\),
* \(y_0=0\;\mathrm m\),
* \(g=9.81\;\mathrm{m/s^2}\),
* \(\gamma=0.1\;\mathrm{s^{-1}}\),
* \(c=0.01\;\mathrm{m^{-1}}\),
* \(\Delta t=0.02\;\mathrm s\).
Allow parameters to be changed with sliders combined with numeric input boxes where appropriate.
Changing a parameter should immediately update the simulation or provide an obvious **Recalculate** button.
Include convenient preset buttons such as:
* Earth,
* Moon,
* Mars,
* No drag,
* Weak drag,
* Strong drag.
Use approximately:
* Earth: \(g=9.81\;\mathrm{m/s^2}\),
* Moon: \(g=1.62\;\mathrm{m/s^2}\),
* Mars: \(g=3.71\;\mathrm{m/s^2}\).
## 3. Numerical integration
The central purpose of the application is to demonstrate the **numerical solution of the equations of motion**, so make the numerical procedure explicit.
Implement at least:
1. Forward Euler method,
2. fourth-order Runge–Kutta method (RK4).
Optionally also implement:
3. midpoint / RK2 method,
4. velocity Verlet for the no-drag case.
Allow the user to select the integration method.
Structure the JavaScript so that the equations of motion are represented by a derivative function such as
```javascript
derivatives(state, parameters)
```
returning
```text
(dx/dt, dy/dt, dvx/dt, dvy/dt).
```
Keep the integration algorithms separated from the physical model so that the code clearly demonstrates the distinction between:
* the differential equations,
* the numerical integration method,
* visualization.
Stop the calculation when the projectile reaches the ground,
$$
y=0,
$$
after having been above it.
Do not simply accept the first numerical point with \(y<0\). Estimate the impact position and impact time more accurately by interpolating between the last point above the ground and the first point below it.
Include safeguards against infinite loops, invalid parameter values, and extremely small or large time steps.
## 4. Main trajectory visualization
Create a large plot showing
$$
y(x).
$$
Display:
* numerical trajectory as a prominent solid curve,
* analytical trajectory, where available, as a visually distinct dashed curve,
* launch point,
* impact point,
* optionally the current projectile position during animation.
The axes must be clearly labelled:
* \(x\) [m],
* \(y\) [m].
Automatically scale the plot to contain the complete trajectory, but always keep the ground level \(y=0\) visible.
Include grid lines and sensible tick labels.
When an analytical solution is available, make it easy to see the difference between the numerical and exact curves.
Avoid connecting trajectory points after the projectile reaches the ground.
## 5. Time-dependent plots
Below or beside the trajectory plot, provide plots of important quantities versus time.
At minimum show:
$$
x(t),\qquad y(t),
$$
and
$$
v_x(t),\qquad v_y(t).
$$
Optionally also provide:
$$
|\mathbf v|(t),
$$
and acceleration magnitude.
When an analytical solution exists, overlay the numerical and analytical values on these plots.
Provide checkboxes allowing the user to show or hide individual quantities so the display does not become overcrowded.
## 6. Numerical error demonstration
Include a dedicated section demonstrating numerical error.
For cases with an analytical solution, compute errors such as
$$
\Delta x(t)=x_\mathrm{num}(t)-x_\mathrm{exact}(t),
$$
$$
\Delta y(t)=y_\mathrm{num}(t)-y_\mathrm{exact}(t).
$$
Display at least one of:
* position error magnitude
$$
\epsilon_r(t)=
\sqrt{
(x_\mathrm{num}-x_\mathrm{exact})^2+
(y_\mathrm{num}-y_\mathrm{exact})^2
},
$$
* maximum position error,
* error at impact,
* numerical versus analytical range.
Include a small error plot versus time.
This section should make it easy to demonstrate that:
* reducing \(\Delta t\) improves numerical accuracy,
* Euler usually converges much more slowly than RK4,
* sufficiently small RK4 time steps make the numerical and exact curves nearly indistinguishable.
## 7. Quantitative results
Display a compact results panel containing values such as:
* numerical flight time,
* analytical flight time, where available,
* numerical range,
* analytical range, where available,
* maximum height,
* time of maximum height,
* impact speed,
* impact angle,
* maximum numerical position error,
* number of numerical integration steps.
Use appropriate SI units.
If quadratic drag is selected, analytical-result fields should display something like:
**Not available for this model**
rather than misleading numerical values.
## 8. Comparison of physical effects
The application should make it easy to investigate the effects of:
### Initial speed
Increasing \(v_0\) should visibly affect:
* range,
* maximum height,
* flight time,
* impact speed.
### Launch angle
The user should be able to investigate how the trajectory varies with \(\theta\).
For the ideal case \(y_0=0\), optionally indicate that the maximum range occurs at \(45^\circ\).
Do not imply that \(45^\circ\) remains the optimum when air resistance or nonzero initial height is present.
### Gravity
Changing \(g\) should clearly change:
* curvature,
* maximum height,
* range,
* flight time.
### Air resistance
The comparison should clearly demonstrate that drag:
* reduces maximum height,
* reduces range,
* changes the shape of the trajectory,
* causes horizontal velocity to decrease,
* makes the ascending and descending parts of the trajectory asymmetric.
For quadratic drag, show how drag becomes stronger at larger speed.
## 9. Optional trajectory comparison mode
Add a useful teaching feature called **Compare trajectories**.
When enabled, allow several trajectories to remain displayed simultaneously while one parameter is varied.
For example, display trajectories for:
$$
\theta=30^\circ,\quad45^\circ,\quad60^\circ
$$
or several values of \(g\), \(v_0\), or drag coefficient.
Provide a **Clear comparisons** button.
Make sure individual trajectories can be identified using a legend.
## 10. Animation
Provide animation controls:
* Start/Pause,
* Reset,
* animation-speed control,
* optional single-step button.
The animation should move a projectile marker along the numerically calculated trajectory.
Display the instantaneous values
$$
t,\;x,\;y,\;v_x,\;v_y,\;|\mathbf v|.
$$
Optionally draw a velocity vector attached to the projectile.
If practical, also display the acceleration vector.
Animation should be independent of the numerical integration step: the simulation data may be calculated first and then interpolated for smooth rendering.
## 11. Educational explanation
Include a compact collapsible **Theory / Numerical method** section.
Explain:
### Equations of motion
State that Newton's second law produces a set of first-order ordinary differential equations for
$$
(x,y,v_x,v_y).
$$
### Euler method
Briefly show
$$
\mathbf s_{n+1}
=
\mathbf s_n+
\Delta t\,f(\mathbf s_n,t_n).
$$
Explain that it is simple but only first-order accurate.
### RK4
Show the standard concept of evaluating four slopes and combining them.
It is sufficient to state schematically
$$
\mathbf s_{n+1}
=
\mathbf s_n+
\frac{\Delta t}{6}
(k_1+2k_2+2k_3+k_4).
$$
Explain that RK4 has much better accuracy for a given sufficiently small time step.
### Analytical versus numerical solution
Explain that without drag, and also for linear drag, analytical solutions are available.
For quadratic drag, the coupled two-dimensional equations are normally solved numerically in this demonstration.
The explanatory text should be concise enough to fit naturally into the application rather than looking like a textbook chapter.
## 12. Suggested experiments
Include a collapsible section called **Things to try** with short exercises such as:
1. Select no air resistance, Euler integration, and \(\Delta t=0.5\) s. Compare the numerical and analytical trajectories.
2. Reduce the time step successively:
$$
0.5,\;0.2,\;0.1,\;0.05,\;0.01\;\mathrm s.
$$
Observe how the numerical error changes.
3. Repeat the experiment with RK4.
4. Compare the motion on Earth, Moon, and Mars.
5. Compare trajectories with and without air resistance.
6. Investigate whether complementary angles such as \(30^\circ\) and \(60^\circ\) give equal ranges without drag.
7. Repeat the previous experiment with air resistance.
8. Investigate how increasing the initial velocity changes the importance of quadratic drag.
These experiments should highlight both the physics and the numerical mathematics.
## 13. Interface design
Create a clean desktop-oriented educational interface.
A suggested layout is:
**Top:** title and short description.
**Left sidebar:** physical and numerical controls.
**Main area:** large trajectory plot.
**Below trajectory:** time-dependent plots and numerical-error plot.
**Right or lower panel:** numerical results.
Use responsive CSS so the application remains usable on smaller screens.
Use readable typography, clearly labelled controls, and consistent spacing.
Disable or hide controls that do not apply to the currently selected drag model. For example:
* hide \(\gamma\) when linear drag is not selected,
* hide \(c\) when quadratic drag is not selected.
Include tooltips or short descriptions for parameters whose meaning may not be obvious.
## 14. Numerical and programming requirements
Keep all numerical calculations in SI units internally.
Convert launch angle from degrees to radians internally.
Avoid unnecessary global variables.
Organize the JavaScript into clearly named functions, for example:
```text
getParameters()
derivatives()
eulerStep()
rk4Step()
integrateTrajectory()
analyticNoDrag()
analyticLinearDrag()
findImpact()
calculateStatistics()
calculateErrors()
drawTrajectory()
drawTimePlots()
drawErrorPlot()
updateResults()
startAnimation()
resetAnimation()
```
Comment the important physics and numerical sections of the source code.
Do not use arbitrary correction factors merely to make the numerical solution agree with the analytical one.
The numerical and analytical calculations must be genuinely independent.
## 15. Validation
Before considering the application complete, test several limiting cases.
### No-drag check
For \(y_0=0\), verify that the analytical range is
$$
R=\frac{v_0^2\sin 2\theta}{g},
$$
and that the analytical flight time is
$$
T=\frac{2v_0\sin\theta}{g}.
$$
### Vertical launch
For
$$
\theta=90^\circ,
$$
the horizontal position should remain constant in the no-drag model.
### Horizontal launch
For
$$
\theta=0^\circ
$$
from \(y_0>0\), the projectile should initially have zero vertical velocity but should subsequently fall.
### Numerical convergence
Verify that decreasing \(\Delta t\) makes the numerical solution approach the analytical solution.
RK4 should normally converge substantially faster than Euler.
### Zero drag limit
Linear and quadratic drag models should approach the ideal projectile trajectory when their drag coefficient approaches zero.
## 16. Final output
Return the complete working implementation as a **single HTML file** containing:
* HTML,
* CSS,
* JavaScript.
It must work immediately when opened locally in a modern browser.
Prioritize:
1. physically correct equations,
2. correct numerical integration,
3. meaningful comparison between numerical and analytical solutions,
4. clear visualization,
5. educational usefulness,
6. robust handling of parameter changes.
The final program should function both as an interactive demonstration of **projectile motion** and as a demonstration of why and how **ordinary differential equations are solved numerically**.