Jackson's Orbit App is a p5.js animation simulating
Earth, the Moon, and a space station in orbit. It uses the
SketchWaveJS template and color library for canvas
management and named colors.
🎨 Design History
Original Design
Jackson M — built the core concept: scrolling
stars, a rotating Earth with landmasses and a day/night shadow, an
orbiting Moon with craters, and a space station with solar panels.
Refinements
klp & Claude (Copilot) — adapted the sketch to the
SketchWaveJS template and introduced several improvements (see below).
Date
May 2026
🚀 Improvements Over the Original
Procedural landmasses — the six identical fixed
heptagons were replaced with polar-jitter blobs. Each landmass is a
unique organic shape generated from randomized radii at evenly spaced
angles. Placement is guaranteed to stay inside the Earth circle using
geometry rather than a hardcoded magic number.
Canvas-relative sizing — all sizes (Earth, Moon,
station, orbit radii) are expressed as fractions of width
so the design scales correctly when the browser window is resized.
SketchWaveJS colors — raw RGB values replaced with
named SWColor instances (swDeepBlue,
swForestGreen, swLightGray, etc.) for
readability and easy theme changes.
💡 How to Use
Press ▶ Start to begin the animation; click again to pause.
Press ↺ Reset to regenerate the landmasses and restart.