An interactive web-based physics simulation that teaches Newton's First Law of Motion through hands-on experimentation. Students can launch objects in different environments and observe how inertia affects motion in real-time.
- Overview
- Features
- Educational Objectives
- Technology Stack
- Installation
- Usage
- Game Mechanics
- Physics Implementation
- Project Structure
- Development
- Educational Content
- Browser Compatibility
- Contributing
- License
The Inertia Physics Lab is an educational web application designed to make physics concepts accessible and engaging through interactive visualization. Students can experiment with object motion across four different environments, each demonstrating different aspects of Newton's First Law of Motion.
- Understanding of inertia and Newton's First Law
- Effect of friction on moving objects
- Impact of gravity on object trajectories
- Relationship between force, motion, and external influences
- Click-and-drag launching system - Intuitive object launching mechanism
- Real-time physics simulation - Accurate physics calculations running at 60 FPS
- Visual feedback system - Motion trails and velocity vectors for clear visualization
- Four progressive levels - Each with unique physics parameters
- Motion trails - Colored paths showing object movement history
- Velocity vectors - Yellow arrows indicating speed and direction
- Physics parameter controls - Adjustable friction and gravity settings
- Performance metrics - Energy scores and launch statistics
- Responsive design - Works on desktop, tablet, and mobile devices
- Space-themed interface - Engaging cosmic visual design
- Smooth animations - Optimized rendering for fluid motion
- Contextual instructions - Built-in tutorial and guidance system
- Newton's First Law Mastery - "Objects in motion stay in motion unless acted upon by an external force"
- Force and Motion Relationships - Understanding how external forces affect object behavior
- Friction Understanding - Observing how resistance forces slow down objects
- Gravity Effects - Seeing how gravitational force changes motion paths
- Middle School Students (Ages 11-14) - Introduction to physics concepts
- High School Students (Ages 14-18) - Reinforcement of mechanics principles
- Physics Teachers - Interactive demonstration tool for classroom use
- Self-learners - Anyone interested in understanding basic physics
- React 18.3.1 - Component-based UI framework
- TypeScript 5.5.3 - Type-safe JavaScript for better development experience
- Vite 5.4.2 - Fast build tool and development server
- Tailwind CSS 3.4.1 - Utility-first CSS framework for rapid styling
- Lucide React 0.344.0 - Beautiful icon library for UI elements
- ESLint - Code linting and quality enforcement
- PostCSS - CSS processing and optimization
- Autoprefixer - Automatic vendor prefix handling
- HTML5 Canvas - High-performance 2D graphics rendering
- RequestAnimationFrame - Smooth 60 FPS animations
- ES6+ Features - Modern JavaScript for clean, efficient code
- Node.js (version 18 or higher)
- npm or yarn package manager
- Modern web browser with Canvas support
# Clone the repository
git clone https://github.com/sahalpk007/InertiaPhysicsLab.git
# Navigate to project directory
cd InertiaPhysicsLab
# Install dependencies
npm install
# Start development server
npm run dev
# Open browser to http://localhost:5173# Create optimized production build
npm run build
# Preview production build locally
npm run preview- Launch the application in your web browser
- Read the instructions - Click the info button for detailed gameplay guide
- Start with Level 1 - "Frictionless Space" to understand basic inertia
- Launch objects - Click and drag on the canvas to launch colored objects
- Observe physics - Watch motion trails and velocity vectors
- Progress through levels - Each level introduces new physics concepts
- Environment: No friction, no gravity
- Learning Goal: Objects continue moving indefinitely
- Key Observation: Perfect demonstration of inertia
- Environment: Friction enabled, no gravity
- Learning Goal: External forces slow down objects
- Key Observation: Gradual deceleration due to friction
- Environment: Low friction, gravity enabled
- Learning Goal: Gravitational force affects motion paths
- Key Observation: Curved trajectories and acceleration
- Environment: Full friction and gravity
- Learning Goal: Combined effects in realistic conditions
- Key Observation: Complex motion patterns
- Mouse Click + Drag: Launch objects with variable force
- Friction Slider: Adjust air resistance (0-10%)
- Gravity Checkbox: Toggle gravitational force
- Reset Button: Clear all objects from simulation
- Next Level: Progress to more complex physics scenarios
// Core physics update loop
const updatePhysics = () => {
objects.forEach(object => {
// Apply gravity (downward acceleration)
if (gravity) object.vy += 0.3;
// Apply friction (velocity reduction)
if (friction > 0) {
object.vx *= (1 - friction);
object.vy *= (1 - friction);
}
// Update position based on velocity
object.x += object.vx;
object.y += object.vy;
// Handle wall collisions with energy loss
if (wallCollision) {
velocity *= -0.8; // 20% energy loss on bounce
}
});
};- Position (x, y) - Current location in pixels
- Velocity (vx, vy) - Speed and direction vectors
- Mass - Currently uniform (future enhancement opportunity)
- Size - Visual radius for rendering and collision detection
- Color - Randomly assigned from predefined palette
- Trail - Historical position data for motion visualization
- Energy Score - Based on launch velocity magnitude
- Object Count - Total number of launched objects
- Level Progress - Current stage completion
The simulation accurately represents the principle that "an object in motion stays in motion unless acted upon by an external force" through:
- Inertial Motion - Objects maintain constant velocity in frictionless space
- External Forces - Friction and gravity modify object trajectories
- Force Visualization - Velocity vectors show current motion state
- Energy Conservation - Realistic energy loss during collisions
// Friction force calculation
newVelocity = currentVelocity * (1 - frictionCoefficient);
// Gravitational acceleration
velocityY += gravitationalConstant * timeStep;
// Position integration
newPosition = currentPosition + velocity * timeStep;
// Collision response with energy loss
velocityAfterCollision = velocityBeforeCollision * restitutionCoefficient;InertiaPhysicsLab/
├── public/ # Static assets
├── src/
│ ├── components/
│ │ └── InertiaGame.tsx # Main game component
│ ├── App.tsx # Root application component
│ ├── main.tsx # Application entry point
│ ├── index.css # Global styles
│ └── vite-env.d.ts # TypeScript environment definitions
├── package.json # Project dependencies and scripts
├── vite.config.ts # Vite build configuration
├── tailwind.config.js # Tailwind CSS configuration
├── tsconfig.json # TypeScript configuration
├── eslint.config.js # ESLint linting rules
└── README.md # Project documentation
- Canvas Management - HTML5 Canvas setup and event handling
- Physics Engine - Real-time simulation calculations
- UI Controls - Level selection, physics parameters, game controls
- Rendering System - Object drawing, trails, and visual effects
- Game State Management - Level progression and scoring
- Mobile-first approach - Optimized for touch devices
- Flexible canvas sizing - Adapts to different screen sizes
- Touch-friendly controls - Large buttons and intuitive gestures
# Start development server with hot reload
npm run dev
# Run linting checks
npm run lint
# Build for production
npm run build- TypeScript - Full type safety for better maintainability
- ESLint - Consistent code style and error detection
- React Hooks - Modern React patterns for state management
- Performance Optimization - Memoization and efficient rendering
- Physics Debugging - Console logging for velocity and position data
- Performance Monitoring - Frame rate and memory usage tracking
- Canvas Inspection - Visual debugging of game objects
- NGSS Standards - Next Generation Science Standards compliance
- Physics Concepts - Mechanics, forces, and motion
- Mathematical Skills - Vector mathematics and graphical analysis
- Lesson Plans - Structured activities for classroom use
- Discussion Questions - Critical thinking prompts
- Assessment Ideas - Evaluation methods for student understanding
- Experiment Design - Students create their own physics scenarios
- Data Collection - Recording and analyzing motion data
- Real-world Connections - Relating simulation to everyday physics
- Mathematical Modeling - Calculating trajectories and velocities
- Chrome 88+ (Recommended for best performance)
- Firefox 85+
- Safari 14+
- Edge 88+
- HTML5 Canvas - 2D graphics rendering
- ES6+ JavaScript - Modern language features
- CSS Grid & Flexbox - Layout technologies
- Mouse and Touch Events - User interaction handling
- 60 FPS Target - Smooth animation on modern devices
- Memory Management - Efficient object lifecycle handling
- Canvas Optimization - Minimal redraw operations
We welcome contributions from educators, developers, and physics enthusiasts!
- Bug Reports - Help us identify and fix issues
- Feature Requests - Suggest new educational tools
- Code Contributions - Implement improvements and new features
- Educational Content - Create lesson plans and activities
- Testing - Validate functionality across different devices
# Fork the repository
git fork https://github.com/sahalpk007/InertiaPhysicsLab.git
# Create feature branch
git checkout -b feature/your-feature-name
# Make changes and commit
git commit -m "Add your feature description"
# Push and create pull request
git push origin feature/your-feature-name- TypeScript - All new code should be properly typed
- React Best Practices - Use hooks and functional components
- Performance - Consider impact on simulation framerate
- Educational Value - Ensure changes enhance learning outcomes
This project is licensed under the MIT License - see the LICENSE file for details.
- Physics Concepts - Based on Newtonian mechanics principles
- Educational Design - Influenced by constructivist learning theory
- Icon Library - Lucide React for beautiful, consistent icons
- Live Demo: View Application
- GitHub Repository: Source Code
- Issue Tracker: Report Bugs
- Discussions: Community Forum
Project Owner: Muhammed Sahal P K
GitHub: @sahalpk007