Interactive learning · Front-end development
Interactive Gravity & Orbit Simulation
A browser-based simulation that makes invisible forces explorable through direct manipulation and immediate visual feedback.
The challenge
Gravity and orbital motion are difficult to teach because the forces are invisible and static diagrams show only one moment. Learners needed a way to change variables, make predictions, and see the system respond.
The experience had to balance scientific credibility with an interface simple enough for classroom exploration.
The learning experience
The simulation lets learners manipulate variables and observe how the modeled orbit changes in real time. Immediate feedback supports an inquiry cycle: predict, adjust, observe, and explain.
Rather than using interactivity as decoration, each control exists to help the learner notice a relationship.
Implementation
The simulation was built as a self-contained HTML, CSS, and JavaScript experience so it could run in a browser without specialized software. Development focused on:
- Physics-model refinement
- Clear, classroom-ready controls
- Responsive animation
- Efficient rendering and event handling
- Cross-browser and embedding behavior
- Repeated testing and debugging
Tradeoff
Scientific models can become more accurate and less teachable at the same time. The product required deliberate simplification: preserve the relationships learners needed to explore while keeping controls and feedback understandable.
Evidence status: The current public portfolio provides the project narrative but not the interactive build, screenshots, test protocol, or learning evidence. Those artifacts are required before publication.
What this project demonstrates
- Translating an abstract concept into a manipulable system
- Connecting learning objectives to interface controls
- Building a dependency-light interactive experience
- Refining responsiveness and browser performance through iteration