Interactive physics presentations with real-time simulations. An open-source educational resource designed to build intuition through visualization and interaction.
This project provides a collection of interactive presentations covering fundamental physics concepts. Each presentation features real-time simulations that respond to user input, allowing learners to explore physical phenomena directly.
| Presentation | Topics Covered |
|---|---|
| Wave Mechanics | Superposition, interference, standing waves, Doppler effect |
| Orbital Mechanics | Gravitation, Kepler's laws, orbital energy, Hohmann transfers, three-body problem |
| Electromagnetism | Electric fields, magnetic fields, Coulomb's law, Lorentz force, EM waves |
| Quantum Mechanics | Wave functions, uncertainty, double-slit experiment, quantum tunneling |
| Thermodynamics | Kinetic theory, heat engines, entropy, phase transitions |
| Classical Mechanics | Projectile motion, pendulums, springs, collisions, friction, energy conservation |
| Fluid Dynamics | Pressure, buoyancy, Bernoulli's principle, viscosity, laminar/turbulent flow |
| Optics | Reflection, refraction, lenses, total internal reflection, prism dispersion |
| Special Relativity | Time dilation, length contraction, relativistic energy, twin paradox |
| Nuclear Physics | Atomic structure, radioactive decay, alpha/beta/gamma radiation, fission, fusion |
- Node.js 18+
- npm or yarn
# Clone the repository
git clone https://github.com/ElScelt/physics-presentations.git
cd physics-presentations
# Install dependencies
npm install
# Start development server
npm run dev
# Build for production
npm run buildThe project builds to static files and can be deployed to any static hosting service:
- Vercel (Recommended) - Just connect your GitHub repo
- GitHub Pages
- Netlify
- Any web server
| Key | Action |
|---|---|
Arrow Right/Down |
Next slide |
Arrow Left/Up |
Previous slide |
Space |
Pause/resume simulation |
R |
Reset current simulation |
- Use sliders and controls to adjust simulation parameters
- Observe how changes affect the physical behavior in real-time
- Mathematical equations are rendered with KaTeX
- Vanilla JavaScript - No framework dependencies for maximum portability
- Canvas API - Hardware-accelerated 2D rendering
- KaTeX - Fast, high-quality math typesetting
- Vite - Modern build tooling
physics-presentations/
├── index.html # Homepage
├── public/
│ ├── favicon.svg # Site favicon
│ ├── og-image.svg # Social sharing image
│ └── robots.txt # Search engine directives
├── styles/
│ ├── design-system.css # Global design tokens
│ └── presentation.css # Shared presentation styles
├── scripts/
│ └── simulation-core.js # Shared simulation framework
├── presentations/
│ ├── waves/ # Wave Mechanics
│ ├── orbital/ # Orbital Mechanics
│ ├── electromagnetism/ # Electromagnetism
│ ├── quantum/ # Quantum Mechanics
│ ├── thermodynamics/ # Thermodynamics
│ ├── classical/ # Classical Mechanics
│ ├── fluids/ # Fluid Dynamics
│ ├── optics/ # Optics
│ ├── relativity/ # Special Relativity
│ └── nuclear/ # Nuclear Physics
├── package.json
├── vite.config.js
├── vercel.json # Vercel deployment config
└── LICENSE
The Simulation base class handles:
- Canvas sizing and DPI scaling
- Animation loop with delta time
- Visibility-aware rendering (pauses when tab is hidden)
- ResizeObserver for responsive canvas sizing
- Lazy initialization for performance
Contributions are welcome! Please follow these guidelines:
- Open an issue to discuss significant changes before implementing
- Follow the existing code style and conventions
- Test your changes across different browsers and screen sizes
- Update documentation as needed
See CONTRIBUTING.md for more details.
# Run development server with hot reload
npm run dev
# Build for production
npm run build
# Preview production build
npm run previewElScelt - https://edgarr.ee
- GitHub: @ElScelt
This project is licensed under the MIT License. See LICENSE for details.
- KaTeX for mathematical typesetting
- Vite for build tooling
- The physics education community for inspiration
Physics belongs to everyone. Education should be accessible to all.