Mikan Orbit

What inspired me

I've always been fascinated by orbital mechanics — how something as simple as F = G·m₁·m₂/r² produces the elegant dance of planets. But most gravity simulators are either black boxes or so simplified they don't actually conserve energy. I wanted to build one where the physics is real and verifiable — where you can watch energy conservation happen live on screen.

How I built it

Mikan Orbit is a single HTML file with zero dependencies, built on Canvas 2D.

Physics core:

• Full O(n²) pairwise Newtonian gravity — every body attracts every other body
• Velocity Verlet integration (symplectic) with 10 substeps per frame
• Softening parameter (ε² = 25 px²) to prevent numerical singularities in close encounters

The key engineering challenge was numerical stability. My first version drifted 55% in total energy within seconds — orbits decayed visibly. I diagnosed it as timestep coarseness and fixed it by increasing substeps and reducing the integration step, bringing drift down to under 0.3% — a 170× improvement. The energy drift counter in the stats bar is deliberately visible so anyone can verify conservation in real time.

Interaction: slingshot-creation (drag to launch a body with velocity), right-click removal, zoom/pan, live sliders for gravity strength, time speed, and trail length.

What I learned

• Symplectic integrators like Verlet keep energy bounded over long runs, unlike naive Euler
• Softening is essential — without it, close encounters cause explosive errors
• Making the physics visible (the drift counter) turns a demo into a teaching tool

Challenges

The hardest part was balancing accuracy against performance in vanilla JS. The solution: Float64Array for the force computation and adaptive substeps — accurate enough for stable orbits, fast enough for 60fps in a browser tab.

Built With

• canvas
• html
• javascript
• physics-simulation