README.md

metadata

title: Electron Cloud Visualizer
emoji: ⚛️
colorFrom: blue
colorTo: purple
sdk: static
pinned: false
license: mit

Electron Cloud Visualizer

An interactive 3D visualization tool for exploring atomic electron orbitals and electron clouds using quantum mechanics principles.

Introduction Video: https://youtu.be/lwqq6FTS6bQ

Features

• Interactive 3D Visualization: Explore electron orbitals in real-time with mouse controls
• All Elements: Visualize electron configurations for all 118 elements
• Individual Orbital Control: Toggle visibility and customize colors for each orbital (s, p, d, f)
• Quantum Mechanics Accurate: Uses real wave functions and CDF sampling for accurate probability distributions
• Progressive Loading: Smooth rendering with progressive particle generation
• Advanced Controls:
  • Particle count adjustment (5,000 - 1,000,000 particles)
  • Particle size and opacity controls
  • Atom scaling
  • Animation with adjustable speed
  • Color hue gradient with adjustable intensity
  • Multi-axis clipping planes for cross-sectional views
  • Coordinate axes display
  • Auto-rotation with axis selection
  • Individual orbital color customization

Demo

Open index.html in a modern web browser to start exploring electron orbitals.

Usage

1. Select an Element: Use the "Atomic Number" slider and click "Update Element"
2. Choose Orbitals: Expand orbital shells in the "Orbital Selection" panel to show/hide specific orbitals
3. Customize Colors: Click on color folders to customize individual orbital colors
4. Adjust Display: Modify particle count, size, opacity, and scale in "Display Options"
5. Camera Controls:
   • Left mouse: Rotate view
   • Right mouse: Pan
   • Scroll: Zoom
   • Use "Auto Rotate" for automatic rotation

Technical Details

Quantum Mechanics Implementation

• Uses hydrogen-like wave functions with Z=1 for accurate orbital shapes
• Implements real spherical harmonics for proper orbital orientation
• CDF (Cumulative Distribution Function) sampling for probability-based particle distribution
• Radial probability function: r² × |R(n,l,r)|²

Technology Stack

• Three.js r128: 3D rendering and visualization
• lil-gui: User interface controls
• Vanilla JavaScript: No build tools required
• WebGL: Hardware-accelerated graphics

Project Structure

electron-cloud-visualizer/
├── index.html              # Main HTML file
├── styles.css              # Styling
├── js/
│   ├── constants.js        # Physical and mathematical constants
│   ├── math-utils.js       # Mathematical utilities and spherical harmonics
│   ├── quantum-mechanics.js # Wave function calculations
│   ├── particle-sampler.js # CDF-based particle generation
│   ├── electron-configuration.js # Electron configuration system
│   ├── visualization-renderer.js # Three.js rendering
│   ├── gui-controller.js   # User interface controls
│   ├── app-controller.js   # Application coordination
│   └── main.js             # Entry point
└── README.md

Browser Compatibility

Requires a modern browser with WebGL support:

• Chrome 90+
• Firefox 88+
• Safari 14+
• Edge 90+

Performance

• Default particle count: 100,000
• Maximum particle count: 1,000,000
• GPU acceleration via WebGL
• Progressive loading for smooth user experience
• Optimized for high atomic numbers

Credits

Created by Andy Kong

License

MIT License - See LICENSE file for details

Acknowledgments

• Inspired by Kavan Ghaderpour's Atom Visualizer
• Quantum mechanics principles from standard atomic physics textbooks
• Three.js community for excellent 3D rendering library