App Documentation
Two visualization tools built on the wabis / jsgraph engine.
Interactive 3D simulation of the flat earth dome cosmology. Shows how the sun, moon and stars move over a flat disc with a dome, and compares predicted shadows and eclipses to real astronomical events.
Playback animation
Day / night cycle
Solar & lunar eclipses
Equinox / solstice scenarios
Observer position
Date & time picker
Canvas controls
| Input | Action |
|---|
| Drag | Rotate view around the scene |
| Two-finger pinch | Zoom in / out |
| Scroll wheel | Zoom in / out |
| Ctrl + drag | Move observer position on the flat earth |
| Move button (⊕) + drag | Move observer (alternative to Ctrl-drag) |
Top bar
| Element | What it does |
|---|
| ▶ / ⏸ Play | Start or pause the time animation |
| ⏮ / ⏭ Step | Step one cycle backward or forward |
| ↺ Reset | Return to the initial state |
| Speed button | Cycle through animation speeds (click forward, Shift-click back) |
| Demo tabs (Intro … Stars) | Load a preset scenario; each unlocks a guided sub-demo sequence |
| ☀ Eclipse tab | Jump directly to the total solar eclipse scenario |
Timeline strip
| Element | What it does |
|---|
| Mode button (1h / 1d / 1y) | Switch the scrubber range between one hour, one day, or one year |
| Scrubber | Drag to jump to any point in the selected range |
Date & time picker (top-right)
Scroll or click the ▲▼ arrows on each field (month, day, year, hour, minute) to set the simulation date. The sun ☀ and moon ☾ azimuth / elevation update live below the picker.
Bottom bar — layer toggles
| Button | Toggles |
|---|
| Grid | Flat earth grid lines |
| Dome | Dome hemisphere wireframe |
| Shadow | Shadow cone cast by the moon |
| P·Dome | Personal dome (observer-relative sky sphere) |
| Sun / Moon / Stars | Show or hide each luminary |
| Orbits | Sun and moon orbital tracks |
| D·Rays | Dome light rays from the sun |
| P·Rays | Parallel rays on the personal dome |
Parameter sliders (desktop, bottom-right)
| Slider | Controls |
|---|
| M.Ecl | Moon ecliptic angle (±90°) |
| ☀Dist | Sun distance (log scale, km) |
| DomeH | Dome height (km) |
| DomeSz | Dome size (× FE radius) |
| RayP | Ray convergence parameter |
Calculates and visualizes how much of a distant target is hidden below the horizon from a given observer altitude, comparing the globe earth and flat earth models side by side, with optional atmospheric refraction.
Globe vs. flat earth
Atmospheric refraction
Two targets
Metric & imperial units
URL state sharing
Screenshot export
Bottom bar
| Button | Opens panel |
|---|
| 📐 Measures | Observer height, target distance & size, view angle |
| 🔬 Optics | Refraction model (standard, custom, off) |
| 📊 Data | Read-only results: hidden height, horizon distance, etc. |
| Globe / FE / Both | Switch which model(s) are drawn on the canvas |
| Units | Switch between metric and imperial |
Panel drawer (slides up from bottom)
Tap any section button to open the drawer. Inside, each section is collapsible. Tap the section title to expand or collapse it. Tap the ▼ button at the bottom to close the drawer.
Measures panel
| Field | Description |
|---|
| Observer height | Eye height above the surface |
| Target distance | Horizontal distance to the target |
| Target height | Total height of the target object |
| View angle | Vertical tilt of the camera |
Optics panel
| Setting | Effect |
|---|
| Standard refraction | Applies the standard 7/6 earth-radius refraction model |
| Custom k | Set a custom refraction coefficient |
| Off | No refraction (geometric only) |
Distance Data panel (read-only results)
| Field | Meaning |
|---|
| Hidden height | How much of the target is below the horizon line |
| Horizon distance | Distance to the optical horizon from the observer |
| Drop | Geometric earth drop over the target distance |
| Bulge | Mid-distance bulge (sagitta) |
Top bar
| Button | Action |
|---|
| 📷 Screenshot | Save the current canvas as a PNG file |
Sharing a scenario
The full app state is encoded in the URL (via DataX). Copy the address bar to share the exact configuration with someone else, or bookmark it to return later.
Developer setup
Requirements
- Node ≥ 18 and pnpm ≥ 8
- Run through Vite — bare specifiers won't resolve without it
Commands
pnpm install # install workspace deps
pnpm dev # serve both apps (Vite root)
pnpm --filter fed-wabis dev # serve only fed-wabis
pnpm --filter earth-drop-calc dev # serve only drop-calc
pnpm build # build → dist/ (GitHub Pages)
pnpm preview # preview dist/ locally
pnpm characterize # safety net: math + canvas snapshots
pnpm lint # ESLint
⚠ Do not open index.html directly (file://) — bare ESM specifiers only resolve under Vite.
Repo structure
apps/
earth-drop-calc/ Curvature / drop calculator
fed-wabis/ Flat Earth Dome Model
packages/
jsgraph-vendor/ Shared wabis engine + design tokens