Interactive 2D Projectile Motion Simulator

Explore kinematic equations with our real-time 2D Projectile Motion lab. Simulate trajectories, calculate max height, and analyze range with precision.

Click here to access.

1. The Core Engine

The logic is driven by the Three.js framework, but the "brain" is a custom Integration Engine that handles real-time physical states.

• Time-Step Integration: The engine uses a high-precision clock (performance.now()) to calculate positions. This ensures the simulation remains physically accurate regardless of frame rate fluctuations.
• Pause Logic: It features a sophisticated state handler for pausing. It calculates totalPausedTime to ensure the kinematic equations resume exactly where they left off without "teleporting" the projectile.
• Integrity System: A background "Security Guard" runs every 3 seconds, monitoring the DOM for the presence of developer attribution. If the footer is removed, the engine triggers a location.reload() to protect intellectual property.

2. Rendering Technology

The visuals utilize a Post-Processing WebGL Stack to achieve a "Computer Terminal" aesthetic.

• Effect Composer: Rather than rendering directly to the screen, the engine renders into a buffer.
• Unreal Bloom Pass: This specific pass creates the glowing "neon" effect. It identifies high-intensity colors (like the projectile's emissive orange) and bleeds them into adjacent pixels.
• Orthographic Camera: The lab uses an OrthographicCamera. Unlike a perspective camera, it eliminates depth distortion, which is critical for scientific measurement. This ensures that a distance of 50m looks identical at the front or back of the scene.
• Dynamic Canvas Textures: The liveHUD and labels are rendered using a "Canvas-within-a-Texture" approach. JavaScript draws text onto an off-screen HTML5 canvas, which is then mapped onto 3D Sprites in real-time.

3. Mathematical Tools

The simulation is a direct implementation of Classical Kinematics and Vector Analysis.

• Parabolic Equations: The $x$ and $y$ coordinates are calculated every frame using:

• Vector Calculus: The engine calculates the Instantaneous Velocity Vector by finding the square root of the sum of squared components:

• Geometric Projections: The code uses Spline-like trail mapping. As the projectile moves, its previous coordinates are pushed into an array (trailPoints) and converted into a BufferGeometry to render the path.

4. Front-End Environment

The environment is a Hybrid UI/3D Workspace built on modern web standards.

• Import Maps: The project uses native browser importmap to resolve dependencies like three and lil-gui directly from CDNs without needing a build tool like Webpack or Vite.
• lil-gui Integration: It includes a floating "control deck" that allows users to manipulate parameters (velocity, angle, gravity) in real-time.
• Responsive CSS Overlays: The overlay div uses pointer-events: none, which allows users to read the data while still interacting with the 3D scene (panning and orbiting) underneath the text.
• Typeface Rendering: The environment uses the Courier New monospace font to reinforce the technical, laboratory theme of the application.