This is the 2D sibling of the WebGL Lunar Safety Zone De-confliction sim. The underlying model is unchanged — only the renderer is: instead of a Three.js sphere mesh, this canvas draws an azimuthal orthographic projection of the same unit-sphere direction vectors, rotated by the drag-controlled view angles and scaled by the zoom factor. Every site still lives as a real 3D unit vector on the Moon (radius R = 1,737.4 km); the canvas only ever sees its 2D screen projection.
angular radius: α = d / R (d = notified zone radius in km)
cap area: A = 2πR²(1 − cos α)
great-circle
angular distance: γ = arccos(n̂ᵢ · n̂ⱼ) (n̂ = unit vector to site)
conflict test: γ < αᵢ + αⱼ
- Click/tap the Moon — inverse-projects your click through the current view rotation onto the unit sphere (rejected if it misses the disc) and notifies a new operation there with the selected type's radius × the multiplier.
- Drag to orbit the view (yaw/pitch); scroll or pinch to zoom — purely a camera change, the site vectors and geometry never move.
- Auto de-conflict — every conflicting pair pushes both sites apart along the tangent plane, proportional to the overlap depth γ − (αᵢ+αⱼ), until the zones stop overlapping — a simple gradient-descent solver on the great-circle constraint, identical to the 3D version.
- Coverage sums each cap's own share of the Moon's total surface area (4πR²); it double-counts overlapping zones on purpose, so it is a "notified footprint" figure, not a true union.
Numerically double-checked while building this sibling: for a 300 km crewed-base radius, α ≈ 9.89°, cap area ≈ 282,000 km² and coverage share ≈ 0.74% of the Moon's surface — the 3D source's formulas (α = d/R, A = 2πR²(1−cosα)) check out exactly, so no math changes were needed, only the projection.
Real-world relevance: with dozens of Artemis-era landing sites clustering near the lunar south pole's permanently shadowed craters, this exact overlap problem is why safety-zone coordination between space agencies is an active diplomatic and operational question.