Skip to content

vladimirlopez/Hydrogen-Atom-HTML5

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

5 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Interactive Hydrogen Atom Simulation

🚀 A beautiful, interactive web-based quantum mechanics visualization

License: MIT WebGL Three.js

Experience the quantum mechanical world of the hydrogen atom through stunning 3D visualizations, interactive controls, and guided tutorials. Perfect for students, educators, and anyone curious about quantum physics!

🎯 Quick Start

  1. Download or clone this repository
  2. Open in browser
    • Start with demo.html for an overview
    • Launch index.html for the full simulation
  3. No installation required - runs directly in your browser!

✨ Features

🔬 Scientific Visualizations

  • 3D Probability Density Clouds - See where electrons are most likely to be found
  • 2D Cross-Sectional Views - Explore XZ, XY, and YZ plane cuts
  • Radial Wave Functions - Graph the mathematical functions
  • Energy Level Diagrams - Visualize quantized energy states

🎮 Interactive Controls

  • Real-time Quantum Numbers - Adjust n, l, m parameters instantly
  • Multiple View Modes - Switch between visualization types
  • Camera Controls - Orbit, zoom, and pan around orbitals
  • Customizable Display - Adjust opacity, thresholds, and colors

🎓 Educational Features

  • Guided Tutorial System - Step-by-step quantum mechanics learning
  • Mathematical Equations - See the actual wave functions
  • Orbital Information - Energy levels, nodes, and properties
  • Comparison Tools - Compare different orbitals side-by-side

🧮 Scientific Accuracy

This simulation uses exact quantum mechanical calculations:

  • Schrödinger Equation Solutions for hydrogen atom
  • Associated Laguerre Polynomials for radial functions
  • Spherical Harmonics for angular components
  • Correct Energy Levels: E = -13.6/n² eV
  • Proper Normalization and physical constants

🎯 Controls Guide

Quantum Numbers

  • n (Principal): Energy level and size (1-4)
  • l (Angular): Orbital shape (0 to n-1)
  • m (Magnetic): Orientation (-l to +l)

Keyboard Shortcuts

  • Ctrl+1 → 1s orbital
  • Ctrl+2 → 2s orbital
  • Ctrl+Shift+2 → 2p orbital
  • Ctrl+3 → 3s orbital
  • Ctrl+R → Reset view
  • Ctrl+A → Toggle animation

🛠️ Technology Stack

  • Frontend: HTML5, CSS3, JavaScript ES6+
  • 3D Graphics: Three.js with WebGL
  • Math: Custom quantum mechanics calculations
  • UI: Responsive design with modern CSS

🌐 Browser Support

Recommended: Chrome 80+, Firefox 75+, Safari 13+, Edge 80+ Requirements: WebGL, ES6 JavaScript, Canvas 2D API

🎓 Educational Use

Perfect for:

  • Physics Courses - Quantum mechanics visualization
  • Chemistry Classes - Atomic structure understanding
  • Online Learning - Interactive quantum education
  • Self-Study - Explore quantum concepts at your own pace

📄 License

MIT License - Feel free to use for educational purposes!


Built with ❤️ for quantum education and scientific visualization

Explore the quantum world - one orbital at a time! 🔬✨

About

No description or website provided.

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors