An interactive collection of physics concepts with beautiful visualizations and real-time simulations
Physics Notebook is an open-source interactive learning platform that brings physics concepts to life through beautiful visualizations and real-time simulations. Each concept features:
- 🎨 Interactive Canvas Animations - Real-time visualizations built with HTML5 Canvas
- 🧮 Mathematical Equations - Rendered beautifully using MathJax
- 🤖 AI Integration - Quick access to AI assistants (Perplexity, Gemini, ChatGPT, Claude, Grok)
- 🎛️ Adjustable Parameters - Sliders and controls to explore different scenarios
- 🌓 Dark/Light Mode - Seamless theme switching
- 📱 Responsive Design - Works beautifully on all devices
- 🌀 Harmonic Oscillation
- 🏹 Projectile Motion
- 🪐 Orbital Mechanics
- ⏱️ Simple Pendulum
- 🌊 Wave Interference
- 🔍 Double Slit Experiment
- ⚡ Electric Fields
- Zero Dependencies - Pure vanilla JavaScript (except MathJax)
- Performance Optimized - IntersectionObserver for canvas rendering
- HiDPI/Retina Support - Crystal clear on all displays
- GSAP Animations - Smooth scroll-triggered animations
- Modular Architecture - Easy to extend with new concepts
You only need a modern web browser! No build process or dependencies required.
- Clone the repository
git clone https://github.com/CasberryIndia/Physics-Notebook.git
cd Physics-Notebook- Open
index.htmlin your browser
# Using Python's built-in server
python -m http.server 8000
# Or using Node's http-server
npx http-server- Navigate to
http://localhost:8000
That's it! 🎉
Physics-Notebook/
├── index.html # Main library page
├── CONCEPT_PATTERN.md # Guide for creating new concepts
├── Concepts/ # Individual concept pages
│ ├── simple-pendulum.html
│ ├── double-slit-experiment.html
│ ├── orbital-mechanics.html
│ └── ...
├── css/
│ ├── common.css # Shared styles
│ ├── home.css # Library page styles
│ └── article.css # Concept page styles
└── js/
└── common.js # Theme toggle & utilities
We love contributions! Whether it's a new physics concept, bug fix, or improvement, your help is welcome.
- Fork the repository
- Create a feature branch (
git checkout -b feature/amazing-concept) - Make your changes
- Test thoroughly - Open your concept in a browser
- Commit your changes (
git commit -m 'Add amazing new concept') - Push to the branch (
git push origin feature/amazing-concept) - Open a Pull Request
Follow our comprehensive CONCEPT_PATTERN.md guide. Here's the quick version:
Create a new HTML file in the Concepts/ directory:
touch Concepts/your-concept-name.htmlEvery concept should have:
-
HTML Structure
<head>with proper metadata, fonts, MathJax, GSAP, Lucide icons- Navigation bar with back button and theme toggle
- Hero section with concept title and description
- 3 sections with split-layout (content + visualization)
- References section
-
Section Components (repeat for 3 sections)
- Section label (01, 02, 03)
- Content column with:
- Title and description
- Mathematical equations in
<div class="math-block"> - Concept cards (
<div class="etu-card">) - AI assistance links (all 5 providers)
- Interactive controls (
<div class="sim-controls">)
- Visualization column with
<canvas>element
-
JavaScript Architecture
openAI()function for AI integrationsAPPobject managing initializationBaseVisualclass for canvas rendering- Specific visual classes extending BaseVisual
- IntersectionObserver for performance
- GSAP scroll animations
class MyConceptVisual extends BaseVisual {
constructor(id) {
super(id);
this.time = 0;
this.setupControls();
}
setupControls() {
const slider = document.getElementById('my-slider');
slider.addEventListener('input', (e) => {
this.parameter = parseFloat(e.target.value);
});
}
draw() {
this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
this.time += 0.03;
// Your visualization logic here
// Use this.color, this.accent, this.scale, etc.
// from BaseVisual
}
}Update index.html DATA array:
{
id: 'your-concept',
title: 'Your Concept Title',
domain: 'Mechanics', // or 'Waves', 'Electromagnetism', 'Quantum'
desc: 'Brief description for the card.',
type: 'your-type',
href: 'Concepts/your-concept-name.html'
}- ✅ Works in both light and dark themes
- ✅ All sliders update visual in real-time
- ✅ All AI links open correctly
- ✅ Equations render properly (wait for MathJax)
- ✅ Responsive on mobile devices
- ✅ Canvas animations are smooth (60fps)
- Code Style: Follow existing patterns for consistency
- Performance: Use IntersectionObserver for canvas rendering
- Accessibility: Ensure proper semantic HTML
- Physics Accuracy: Double-check equations and concepts
- Documentation: Comment complex visualization logic
- Testing: Test on Chrome, Firefox, and Safari
- CONCEPT_PATTERN.md - Detailed guide for creating concepts
- MathJax Documentation
- GSAP Documentation
- Canvas API Reference
We prioritize stunning visuals over minimal viable products. Every concept should:
- Use vibrant, harmonious color palettes
- Include smooth, engaging animations
- Provide immediate visual feedback
- Feel premium and polished
Each concept must:
- Start simple, build complexity
- Include real-world analogies
- Provide interactive exploration
- Link to academic references
- Lazy load canvas rendering (IntersectionObserver)
- HiDPI scaling for sharp visuals
- Smooth 60fps animations
- Minimal dependencies
This project is licensed under the MIT License - see the LICENSE file for details.
- Physics concepts inspired by classic textbooks (Halliday, Resnick, Walker)
- Animations powered by GSAP
- Icons by Lucide
- Mathematics rendered by MathJax
- Questions? Open a Discussion
- Found a bug? Create an Issue
- Have an idea? We'd love to hear it in Discussions
- More Mechanics concepts (Friction, Collisions)
- Thermodynamics section
- Special Relativity visualizations
- 3D visualizations using Three.js
- Mobile app (React Native)
- Offline PWA support
- Multi-language support
Made with ❤️ by the Physics Notebook Community