Hyperbolic Geometry & Special Relativity

An interactive, single-page explainer on hyperbolic rotation and how it underpins Einstein's special theory of relativity — including animated visualizations of the Lorentz boost and the invariant spacetime interval.

Live Demo

🔗 https://alfredang.github.io/hyperbolicgeometry/

What it covers

The page builds the physics from one geometric idea, step by step:

1. Circles vs. hyperbolas — Euclidean rotation preserves x² + y² (circles); hyperbolic rotation preserves t² − x² (hyperbolas). That single sign flip is the seed of relativity.
2. Hyperbolic rotation (animated) — drag the rapidity φ or press Play to watch a point glide along its invariant hyperbola while the grid shears into a Lorentz transformation. Live readouts show β = tanh φ, γ = cosh φ, and the constant interval.
3. Special relativity — the Lorentz boost is a hyperbolic rotation; rapidities add, giving Einstein's velocity-addition rule, time dilation, and length contraction.
4. The invariant interval (animated) — boost a time-like, space-like, or light-like event between frames and watch s² = (ct)² − x² stay fixed while the individual coordinates change.

Key ideas at a glance

Euclidean	Hyperbolic / Relativistic
Rotation angle θ	Rapidity φ
x' = x cos θ − y sin θ	x' = x cosh φ + t sinh φ
Invariant x² + y²	Invariant t² − x²
Traces a circle	Traces a hyperbola
—	γ = cosh φ, β = tanh φ

Tech stack

• Plain HTML / CSS / JavaScript — a single self-contained index.html, no build step and no external libraries.
• HTML5 Canvas 2D — three independent animations: a drifting hyperbola field in the hero, the interactive hyperbolic-rotation lab, and the invariant-interval lab.
• Device-pixel-ratio aware rendering for crisp visuals on high-DPI displays, with responsive layout down to mobile.

Run locally

It's a static page — just open it:

# Option 1: open the file directly
open index.html

# Option 2: serve over HTTP (recommended)
python3 -m http.server 8000
# then visit http://localhost:8000

Project structure

.
├── index.html      # entire app: markup, styles, and canvas animations
├── screenshot.png  # README preview
└── README.md

Acknowledgements

Powered by Tertiary Infotech Academy Pte Ltd.