Quantum Orbitals

About Quantum Orbitals

Understanding the physics behind electron orbital visualization

What Are Quantum Orbitals?

An atomic orbital is a mathematical function describing the wave-like behavior of an electron in an atom. It does not describe a definite path - instead, it gives the probability of finding an electron at any point in space.

The shape and size of an orbital are determined by three quantum numbers:

n

Principal

Determines energy level and size. n = 1, 2, 3, ... Higher n means larger orbital and higher energy.

l

Angular Momentum

Determines orbital shape. l = 0 (s), 1 (p), 2 (d), 3 (f). Range: 0 to n-1.

m

Magnetic

Determines orientation in space. Range: -l to +l. Gives 2l+1 possible orientations.

Orbital Shapes

l=0

s orbitals

Spherically symmetric. The probability density depends only on the distance from the nucleus.

Examples: 1s, 2s, 3s

l=1

p orbitals

Dumbbell-shaped with one nodal plane through the nucleus. Three orientations (m = -1, 0, +1).

Examples: 2p, 3p, 4p

l=2

d orbitals

Cloverleaf patterns with two nodal surfaces. Five orientations (m = -2 to +2).

Examples: 3d, 4d, 5d

l=3

f orbitals

Complex multi-lobed shapes with three nodal surfaces. Seven orientations (m = -3 to +3).

Examples: 4f, 5f

The Wave Function

The hydrogen atom wave function is:

ψ(r,θ,φ) = Rₙₗ(r) × Yₗᵐ(θ,φ)

Where R(r) is the radial part (depends on distance from nucleus) and Y(\u03B8,\u03C6) is the angular part (determines shape).

The probability of finding an electron at any point is |\u03C8|\u00B2. This is what we visualize - brighter regions have higher probability density.

How This Visualizer Works
  1. CDF Sampling - Build cumulative distribution functions from the radial and angular probability densities
  2. Inverse Transform Sampling - Draw uniform random numbers and map them through the CDF to get physically distributed r, \u03B8, \u03C6 coordinates
  3. Color Mapping - Compute |\u03C8|\u00B2 at each point and map to a fire heatmap (black \u2192 purple \u2192 red \u2192 orange \u2192 yellow \u2192 white)
  4. GPU Rendering - Send positions and colors to WebGL as point particles with bloom post-processing for glow
Technology Stack
Next.js 16React 19Three.jsreact-three-fiberRust + WASMC++23 + Emscriptenshadcn/uiTailwind CSS v4Zustand

Inspired by kavan010/Atoms - a C++ OpenGL hydrogen quantum orbital visualizer.