body { background-color: #1f2937; color: #e5e7eb; font-family: system-ui; padding: 2rem; } .canvas-container { position: relative; width: 800px; height: 500px; border: 2px solid #4b5563; margin: 2rem auto; } canvas { background: #111827; } .controls { text-align: center; margin: 1rem; } button { background: #3b82f6; color: white; border: none; padding: 0.5rem 1rem; border-radius: 0.25rem; cursor: pointer; margin: 0 0.5rem; } button:hover { background: #2563eb; } button:disabled { background: #6b7280; cursor: not-allowed; } .info { max-width: 800px; margin: 2rem auto; background: #374151; padding: 1rem; border-radius: 0.5rem; } .stats { background: rgba(17, 24, 39, 0.7); position: absolute; top: 10px; right: 10px; padding: 8px; border-radius: 4px; font-size: 14px; } .math-visualization { background: rgba(17, 24, 39, 0.7); position: absolute; bottom: 10px; left: 10px; padding: 12px; border-radius: 4px; font-size: 14px; width: 320px; } .math-visualization h3 { margin-top: 0; color: #10b981; } .math-visualization .equation { font-family: monospace; margin: 8px 0; } .math-visualization .highlight { color: #10b981; font-weight: bold; } .math-visualization .separator { border-top: 1px solid rgba(255,255,255,0.1); margin: 10px 0; } .trajectory { stroke: rgba(16, 185, 129, 0.3); stroke-width: 1.5; stroke-dasharray: 4, 4; fill: none; } .hit-animation { position: absolute; pointer-events: none; } .settings { display: flex; justify-content: center; margin-bottom: 1rem; flex-wrap: wrap; } .setting-group { margin: 0 1rem; } .setting-group label { display: block; margin-bottom: 0.25rem; font-size: 0.875rem; } input[type="range"] { width: 120px; } .vector-component { font-family: monospace; padding: 2px 5px; border-radius: 3px; } .vector-x { background-color: rgba(239, 68, 68, 0.2); } .vector-y { background-color: rgba(16, 185, 129, 0.2); } .force-lines { stroke-width: 1.5; } /* New styles for fullscreen */ .fullscreen { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 1000; margin: 0; border: none; } .fullscreen canvas { width: 100%; height: 100%; } .toggle-btn { display: flex; align-items: center; } .toggle-switch { position: relative; display: inline-block; width: 44px; height: 24px; margin-left: 10px; } .toggle-switch input { opacity: 0; width: 0; height: 0; } .toggle-slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #4b5563; transition: .4s; border-radius: 24px; } .toggle-slider:before { position: absolute; content: ""; height: 18px; width: 18px; left: 3px; bottom: 3px; background-color: white; transition: .4s; border-radius: 50%; } input:checked + .toggle-slider { background-color: #3b82f6; } input:checked + .toggle-slider:before { transform: translateX(20px); } .fullscreen-button { position: absolute; top: 10px; left: 10px; background: rgba(17, 24, 39, 0.7); border: none; color: white; border-radius: 4px; width: 30px; height: 30px; cursor: pointer; display: flex; align-items: center; justify-content: center; } .fullscreen-button:hover { background: rgba(17, 24, 39, 0.9); }

Kinematic Intercept Visualization

This demo visualizes the mathematics of intercepting a moving target. The blue circle represents a target moving in a straight line at constant velocity, and the red circle is your projectile launcher.

The green dotted line shows the calculated trajectory to intercept the target. The visualization panel shows the actual equations being used to determine the perfect velocity for interception.

Status: Ready

Interception Mathematics

Start the simulation to see the equations in action