index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>The Periodic Table of Orbitals</title>
    <link rel="stylesheet" href="./styles/style.css">
    <link rel="shortcut icon" href="favicon.png" type="image/x-icon">
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <meta name="author" content="Liam Ilan">
    <meta
      name="description"
      content="The Periodic Table of Orbitals lets you browse high quality cross sections and 3d renders of electron orbitals."
    />
    <script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
  </head>
  <body>
    <h1>The Periodic Table of Orbitals</h1>
    
    <div id='container'>
      <div id='select' class='section'>
        <div id='mode-selection'>
          <a id="cross-select" class="selectable-mode">Cross Section</a>
          <a id="3d-real-select" class="selectable-mode">Real Orbital</a>
          <a id="3d-complex-select" class="selectable-mode">Complex Orbital</a>
        </div>

        <div id='select-table'></div>
      </div>
      <div id='graph' class='section'>
        <img id='image'></img>
      </div>
    </div>
    <div id="about">
      <h2>About</h2>
      <p>All software used to generate these graphs and build this site, as well as all the graphs themselves, can be found at <a href="https://github.com/liam-ilan/electron-orbitals">https://github.com/liam-ilan/electron-orbitals</a>. Built by <a href="https://www.liamilan.com/">Liam Ilan</a>.
      <p class="note">
        Note: the following is just a summary. I highly recommend reading <a href="https://en.wikipedia.org/wiki/Wave_function#Hydrogen_atom">this Wikipedia article</a>, and <a href="https://chem.libretexts.org/Bookshelves/Physical_and_Theoretical_Chemistry_Textbook_Maps/Map%3A_Physical_Chemistry_for_the_Biosciences_(Chang)/11%3A_Quantum_Mechanics_and_Atomic_Structure/11.10%3A_The_Schrodinger_Wave_Equation_for_the_Hydrogen_Atom">this LibreTexts article</a>. A large amount of the following explanation uses both of these articles as a source. Additionally, <a href="https://physics.stackexchange.com/q/190730">this explanation</a> on stack exchange on the difference between real and complex orbitals was extremely useful.
      </p>

      <p>
        Classical models of the atom, such as Bohr's model, model electrons as particles with definitive positions and momenta. This model does not account for various observed wave phenomena (see <a href="https://en.wikipedia.org/wiki/Double-slit_experiment">Double-slit Experiment</a>). In reality, it is observed that particles, such as electrons, exhibit both particle and wave behavior.
      </p>

      <p>
        In the quantum model of an atom, electrons do not exist in definite positions, rather, they are described by their wave functions (denoted \(\psi\)). According to the <a href="https://en.wikipedia.org/wiki/Born_rule">Born interpretation</a>, the value of the probability distribution function describing the chance of an electron being found at any given position, can be calculated by taking the amplitude of the wave function, and then squaring it (\(|\psi|^2\)). The graphs of this project are of this probability distribution function.
      </p>

      <p>
        The wave function for an electron around a hydrogen nucleus (single proton), is defined in spherical coordinates as follows: $$\psi_{n,l,m}(r,\theta,\phi)=R_{n,l}(r)Y_{l,m}(\theta,\phi)$$
        Where,
        <ul>
          <li>\(n =\) The principal quantum number, refers to the energy level of the electron, \(0 &lt; n\)</li>
          <li>\(l =\) The azimuthal quantum number, refers to the subshell of the electron, \(0 \le l \le n - 1\)</li>
          <li>\(m =\) The magnetic quantum number, refers to the specific orbital within the subshell, \(-l \le m \le l\)</li>
          <li>\(Y_{l,m}(\theta,\phi) =\) spherical harmonics of l, order m (provided by Scipy's <code>scipy.special.sph_harm</code>)</li>
          <li>\(R_{n,l}(r) =\) the radial function (provided by <a href="https://dpotoyan.github.io/Chem324/H-atom-wavef.html">Prof. Davit Potoyan and Mr. Zachery Crandall</a>)</li>
        </ul>
      </p>

      <p class="note">
        Note: in chemistry class, you may have learned that subshells are labeled s, p, d, f, g, h, and i. These refer to the azimuthal quantum numbers (\(l\)) 0, 1, 2, 3, 4, 5, and 6 respectively.
      </p>

      <p>
        The diagrams generated from this project are titled with the three numbers characterizing electrons, (n, l, m). 
      </p>

      <p>
        This wave function is most often used in physics, and is always rotationally symmetrical around the z-axis. With that being said, the most common visual of an electron orbital is its real orbital. This is likely the orbital you've seen in a highschool textbook. Real orbital wave functions are superpositions of the two complex orbital wave functions, \(\psi_{n,l,m}(r,\theta,\phi)\) and \(\psi_{n,l,-m}(r,\theta,\phi)\). Since both of these are complex conjugates of each other, the resulting wave function is real-valued. The real orbital wave function can be computed as follows,
        
        $$\psi^{real}_{n,l,m}(r,\theta,\phi)=
        \begin{cases}
        \sqrt{2}(-1)^{m}Im(\psi_{n,l,|m|}(r,\theta,\phi)) & \text{if } m < 0\\
        \psi_{n,l,|m|}(r,\theta,\phi) & \text{if } m = 0 \\
        \sqrt{2}(-1)^{m}Re(\psi_{n,l,|m|}(r,\theta,\phi)) & \text{if } m > 0
        \end{cases}
        $$
      </p>

      <p>
        Rendering the probability distribution function, is done by sampling and even distribution of points in cartesian space, converting the cartesian coordinates to spherical coordinates, and computing \(|\psi|^2\) at that point. This is done either in a two dimensional grid for the cross section diagrams, or in a 3d grid for the 3d diagrams. The cross section diagrams are sampled in a \(400 \times 400\) grid (160,000 data points total), and the 3d diagrams are sampled in a \(100 \times 100 \times 100\) grid (1,000,000 data points total).
      </p>

      <p>
        For easier depth perception, each point in the 3d graphs gets its color from its cartesian coordinates. The red channel corresponds to the x-axis, the blue channel to the y-axis, and the green channel to the z-axis.
      </p>

      <p>Cross sections are provided only for complex orbitals.</p>

      <div id="credit">
        <h3>Credit</h3>
        <ul>
          <li>Built by <a href="https://www.liamilan.com/">Liam Ilan</a></li>
          <li>Credit to <a href="https://dpotoyan.github.io/Chem324/H-atom-wavef.html">Prof. Davit Potoyan and Mr. Zachery Crandall</a> for the radial function</li>
        </ul>        
      </div>
    </div>
    

    <script src="./scripts/index.js"></script>
  </body>
</html>