Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Hydrogen Atom Wave Function Visualization</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdn.plot.ly/plotly-latest.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/mathjs/11.9.1/math.js"></script> | |
| <style> | |
| .wavefunction-equation { | |
| font-size: 1.2rem; | |
| line-height: 2; | |
| } | |
| .orbital-canvas { | |
| width: 100%; | |
| height: 400px; | |
| background: #f0f0f0; | |
| } | |
| .slider-container { | |
| transition: all 0.3s ease; | |
| } | |
| .slider-container:hover { | |
| transform: scale(1.02); | |
| } | |
| .navbar { | |
| backdrop-filter: blur(10px); | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-100 text-gray-800 font-sans"> | |
| <!-- Navigation --> | |
| <nav class="navbar bg-blue-600 text-white p-4 sticky top-0 z-50 shadow-lg"> | |
| <div class="container mx-auto flex justify-between items-center"> | |
| <h1 class="text-2xl font-bold">Hydrogen Atom Wave Function Visualizer</h1> | |
| <div class="space-x-4"> | |
| <a href="#theory" class="hover:text-blue-200">Theory</a> | |
| <a href="#visualizer" class="hover:text-blue-200">Visualizer</a> | |
| <a href="#interactive" class="hover:text-blue-200">Interactive</a> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <section class="bg-gradient-to-r from-blue-500 to-purple-600 text-white py-20"> | |
| <div class="container mx-auto px-4 text-center"> | |
| <h1 class="text-4xl md:text-5xl font-bold mb-6">Explore Quantum Realms</h1> | |
| <p class="text-xl mb-8 max-w-3xl mx-auto">Visualize the mysterious wave functions of the hydrogen atom in 3D space</p> | |
| <a href="#visualizer" class="bg-white text-blue-600 px-6 py-3 rounded-full font-bold hover:bg-gray-100 transition duration-300 inline-block"> | |
| Start Exploration | |
| </a> | |
| </div> | |
| </section> | |
| <!-- Theory Section --> | |
| <section id="theory" class="py-16 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-3xl font-bold mb-8 text-center text-blue-600">Quantum Theory of Hydrogen Atom</h2> | |
| <div class="grid md:grid-cols-2 gap-8 items-center"> | |
| <div> | |
| <h3 class="text-xl font-semibold mb-4 text-purple-600">The Wave Function ψ<sub>nlm</sub>(r,θ,φ)</h3> | |
| <p class="mb-4">The hydrogen atom's wave functions are solutions to the Schrödinger equation for a Coulomb potential. Each solution is described by three quantum numbers:</p> | |
| <ul class="list-disc pl-6 mb-6 space-y-2"> | |
| <li><strong>n</strong> - Principal quantum number (energy level, n ≥ 1)</li> | |
| <li><strong>l</strong> - Angular momentum quantum number (0 ≤ l < n)</li> | |
| <li><strong>m</strong> - Magnetic quantum number (-l ≤ m ≤ l)</li> | |
| </ul> | |
| <p class="mb-6">The wave function separates into radial and angular components:</p> | |
| <div class="wavefunction-equation bg-gray-100 p-4 rounded-lg text-center mb-6"> | |
| ψ<sub>nlm</sub>(r,θ,φ) = R<sub>nl</sub>(r) Y<sub>l</sub><sup>m</sup>(θ,φ) | |
| </div> | |
| </div> | |
| <div class="bg-gray-100 p-6 rounded-lg"> | |
| <h4 class="text-lg font-semibold mb-4 text-blue-600">Radial Part R<sub>nl</sub>(r)</h4> | |
| <p class="mb-4">Describes electron distribution as function of distance from nucleus:</p> | |
| <div class="bg-white p-3 rounded mb-4 overflow-x-auto"> | |
| R<sub>nl</sub>(r) ∝ e<sup>-r/(na<sub>0</sub>)</sup> (2r/(na<sub>0</sub>))<sup>l</sup> L<sub>n-l-1</sub><sup>2l+1</sup>(2r/(na<sub>0</sub>)) | |
| </div> | |
| <p>Where L are associated Laguerre polynomials and a<sub>0</sub> is the Bohr radius.</p> | |
| <h4 class="text-lg font-semibold mt-6 mb-4 text-blue-600">Angular Part Y<sub>l</sub><sup>m</sup>(θ,φ)</h4> | |
| <p class="mb-4">Spherical harmonics describing angular distribution:</p> | |
| <div class="bg-white p-3 rounded overflow-x-auto"> | |
| Y<sub>l</sub><sup>m</sup>(θ,φ) ∝ P<sub>l</sub><sup>|m|</sup>(cosθ) e<sup>imφ</sup> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Visualizer Section --> | |
| <section id="visualizer" class="py-16 bg-gray-50"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-3xl font-bold mb-8 text-center text-blue-600">Wave Function Visualizer</h2> | |
| <div class="bg-white p-6 rounded-lg shadow-lg"> | |
| <div class="grid md:grid-cols-3 gap-6 mb-8"> | |
| <div class="slider-container"> | |
| <label for="n-slider" class="block text-sm font-medium text-gray-700 mb-2">Principal Quantum Number (n)</label> | |
| <input type="range" id="n-slider" min="1" max="6" value="1" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer"> | |
| <div class="flex justify-between text-xs text-gray-500 mt-1"> | |
| <span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span> | |
| </div> | |
| <div class="text-center mt-2"> | |
| <span id="n-value" class="font-bold text-blue-600">1</span> | |
| </div> | |
| </div> | |
| <div class="slider-container"> | |
| <label for="l-slider" class="block text-sm font-medium text-gray-700 mb-2">Angular Quantum Number (l)</label> | |
| <input type="range" id="l-slider" min="0" max="5" value="0" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer"> | |
| <div class="flex justify-between text-xs text-gray-500 mt-1"> | |
| <span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span> | |
| </div> | |
| <div class="text-center mt-2"> | |
| <span id="l-value" class="font-bold text-blue-600">0</span> | |
| </div> | |
| </div> | |
| <div class="slider-container"> | |
| <label for="m-slider" class="block text-sm font-medium text-gray-700 mb-2">Magnetic Quantum Number (m)</label> | |
| <input type="range" id="m-slider" min="-5" max="5" value="0" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer"> | |
| <div class="flex justify-between text-xs text-gray-500 mt-1"> | |
| <span>-5</span><span>-3</span><span>-1</span><span>0</span><span>1</span><span>3</span><span>5</span> | |
| </div> | |
| <div class="text-center mt-2"> | |
| <span id="m-value" class="font-bold text-blue-600">0</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="grid md:grid-cols-2 gap-6"> | |
| <div> | |
| <h3 class="text-xl font-semibold mb-4 text-center text-purple-600">Probability Density |ψ(r,θ,φ)|²</h3> | |
| <div id="plot3d" class="orbital-canvas rounded-lg shadow-md"></div> | |
| </div> | |
| <div> | |
| <h3 class="text-xl font-semibold mb-4 text-center text-purple-600">Cross-Section View</h3> | |
| <div id="plot2d" class="orbital-canvas rounded-lg shadow-md"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Interactive Explanation --> | |
| <section id="interactive" class="py-16 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-3xl font-bold mb-8 text-center text-blue-600">Interactive Explanation</h2> | |
| <div class="bg-gray-50 p-6 rounded-lg shadow-lg"> | |
| <div class="grid md:grid-cols-2 gap-6"> | |
| <div> | |
| <h3 class="text-xl font-semibold mb-4 text-purple-600">What You're Seeing</h3> | |
| <ul class="space-y-4"> | |
| <li class="flex items-start"> | |
| <div class="bg-blue-100 p-2 rounded-full mr-3"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-blue-600" viewBox="0 0 20 20" fill="currentColor"> | |
| <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2h-1V9z" clip-rule="evenodd" /> | |
| </svg> | |
| </div> | |
| <div> | |
| <strong class="text-blue-600">3D Plot:</strong> Shows the probability density (darker regions indicate higher probability of finding the electron) | |
| </div> | |
| </li> | |
| <li class="flex items-start"> | |
| <div class="bg-blue-100 p-2 rounded-full mr-3"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-blue-600" viewBox="0 0 20 20" fill="currentColor"> | |
| <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2h-1V9z" clip-rule="evenodd" /> | |
| </svg> | |
| </div> | |
| <div> | |
| <strong class="text-blue-600">2D Slice:</strong> Displays a cross-section through the center of the atom (x-z plane) | |
| </div> | |
| </li> | |
| <li class="flex items-start"> | |
| <div class="bg-blue-100 p-2 rounded-full mr-3"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-blue-600" viewBox="0 0 20 20" fill="currentColor"> | |
| <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2h-1V9z" clip-rule="evenodd" /> | |
| </svg> | |
| </div> | |
| <div> | |
| <strong class="text-blue-600">Quantum Numbers:</strong> Change n, l, m to see different orbitals (1s, 2p, 3d, etc.) | |
| </div> | |
| </li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-xl font-semibold mb-4 text-purple-600">Key Observations</h3> | |
| <div class="space-y-4"> | |
| <div class="flex items-start"> | |
| <div class="bg-green-100 p-2 rounded-full mr-3"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-green-600" viewBox="0 0 20 20" fill="currentColor"> | |
| <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" /> | |
| </svg> | |
| </div> | |
| <div> | |
| <strong>n determines:</strong> Number of radial nodes (n-l-1) and size of orbital | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="bg-green-100 p-2 rounded-full mr-3"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-green-600" viewBox="0 0 20 20" fill="currentColor"> | |
| <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" /> | |
| </svg> | |
| </div> | |
| <div> | |
| <strong>l determines:</strong> Shape of orbital (s=sphere, p=dumbbell, d=cloverleaf, etc.) | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="bg-green-100 p-2 rounded-full mr-3"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-green-600" viewBox="0 0 20 20" fill="currentColor"> | |
| <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" /> | |
| </svg> | |
| </div> | |
| <div> | |
| <strong>m determines:</strong> Orientation of orbital in space | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <footer class="bg-gray-800 text-white py-8"> | |
| <div class="container mx-auto px-4 text-center"> | |
| <p class="mb-4">Hydrogen Atom Wave Function Visualizer</p> | |
| <p class="text-sm text-gray-400">Created with Plotly.js, Math.js, and Tailwind CSS</p> | |
| <p class="text-sm text-gray-400 mt-2">© 2023 Quantum Visualization Project</p> | |
| </div> | |
| </footer> | |
| <script> | |
| // Initialize quantum numbers | |
| let n = 1, l = 0, m = 0; | |
| // Update display values when sliders change | |
| document.getElementById('n-slider').addEventListener('input', function() { | |
| n = parseInt(this.value); | |
| document.getElementById('n-value').textContent = n; | |
| updateLMax(); | |
| updateWaveFunction(); | |
| }); | |
| document.getElementById('l-slider').addEventListener('input', function() { | |
| l = parseInt(this.value); | |
| document.getElementById('l-value').textContent = l; | |
| updateMMax(); | |
| updateWaveFunction(); | |
| }); | |
| document.getElementById('m-slider').addEventListener('input', function() { | |
| m = parseInt(this.value); | |
| document.getElementById('m-value').textContent = m; | |
| updateWaveFunction(); | |
| }); | |
| // Constrain l to be less than n | |
| function updateLMax() { | |
| const lSlider = document.getElementById('l-slider'); | |
| const currentL = parseInt(lSlider.value); | |
| const newMax = n - 1; | |
| lSlider.max = newMax; | |
| if (currentL > newMax) { | |
| l = newMax; | |
| lSlider.value = newMax; | |
| document.getElementById('l-value').textContent = newMax; | |
| } | |
| } | |
| // Constrain |m| to be ≤ l | |
| function updateMMax() { | |
| const mSlider = document.getElementById('m-slider'); | |
| const currentM = parseInt(mSlider.value); | |
| mSlider.min = -l; | |
| mSlider.max = l; | |
| if (Math.abs(currentM) > l) { | |
| m = 0; | |
| mSlider.value = 0; | |
| document.getElementById('m-value').textContent = 0; | |
| } | |
| } | |
| // Generate data for the wave function | |
| function generateWaveFunctionData(n, l, m) { | |
| // Constants | |
| const a0 = 1; // Bohr radius | |
| const numPoints = 50; | |
| const maxR = 5 * n; // Scale with n | |
| // Radial grid | |
| const r = math.linspace(0.1, maxR, numPoints); | |
| // Angular grid | |
| const theta = math.linspace(0, Math.PI, numPoints); | |
| const phi = math.linspace(0, 2 * Math.PI, numPoints); | |
| // Combined grid for probability density calculation | |
| const xArr = [], yArr = [], zArr = [], cArr = []; | |
| const xSlice = [], zSlice = [], cSlice = []; // For 2D slice at y=0 | |
| for (let i = 0; i < numPoints; i++) { | |
| for (let j = 0; j < numPoints; j++) { | |
| for (let k = 0; k < numPoints; k += 5) { // Sample sparsely in z for performance | |
| const rad = r[i]; | |
| const thetaVal = theta[j]; | |
| const phiVal = phi[k]; | |
| // Convert to cartesian | |
| const x = rad * Math.sin(thetaVal) * Math.cos(phiVal); | |
| const y = rad * Math.sin(thetaVal) * Math.sin(phiVal); | |
| const z = rad * Math.cos(thetaVal); | |
| // Simple approximation of probability density (actual would need proper wave functions) | |
| // Radial part (simplified) | |
| const radialPart = Math.exp(-rad/(n*a0)) * Math.pow(rad, l); | |
| // Angular part (simplified) | |
| let angularPart; | |
| if (l === 0) { // s orbital | |
| angularPart = 1; | |
| } else if (l === 1) { // p orbital | |
| if (m === 0) angularPart = Math.cos(thetaVal); | |
| else angularPart = Math.sin(thetaVal) * Math.cos(phiVal); | |
| } else { // d and higher (simplified) | |
| angularPart = Math.pow(Math.sin(thetaVal), Math.abs(m)) * Math.cos(m*phiVal); | |
| } | |
| // Probability density (absolute square of wave function) | |
| const probDensity = Math.pow(radialPart * angularPart, 2); | |
| // Only plot points with significant probability | |
| if (probDensity > 0.001 * Math.max(1, n*n)) { | |
| xArr.push(x); | |
| yArr.push(y); | |
| zArr.push(z); | |
| cArr.push(probDensity); | |
| // For 2D slice (y=0 plane) | |
| if (Math.abs(phiVal) < 0.3 || Math.abs(phiVal - Math.PI) < 0.3) { | |
| xSlice.push(x); | |
| zSlice.push(z); | |
| cSlice.push(probDensity); | |
| } | |
| } | |
| } | |
| } | |
| } | |
| return {x3d: xArr, y3d: yArr, z3d: zArr, c3d: cArr, | |
| x2d: xSlice, z2d: zSlice, c2d: cSlice}; | |
| } | |
| // Update the plots with new wave function data | |
| function updateWaveFunction() { | |
| const data = generateWaveFunctionData(n, l, m); | |
| // 3D plot | |
| const trace3d = { | |
| x: data.x3d, | |
| y: data.y3d, | |
| z: data.z3d, | |
| mode: 'markers', | |
| marker: { | |
| size: 3, | |
| color: data.c3d, | |
| colorscale: 'Viridis', | |
| opacity: 0.8, | |
| showscale: true, | |
| colorbar: { | |
| title: 'Probability<br>Density' | |
| } | |
| }, | |
| type: 'scatter3d' | |
| }; | |
| Plotly.newPlot('plot3d', [trace3d], { | |
| title: `Hydrogen Orbital (n=${n}, l=${l}, m=${m})`, | |
| scene: { | |
| xaxis: {title: 'x'}, | |
| yaxis: {title: 'y'}, | |
| zaxis: {title: 'z'}, | |
| aspectratio: {x: 1, y: 1, z: 1} | |
| }, | |
| margin: {l: 0, r: 0, b: 0, t: 40} | |
| }); | |
| // 2D plot | |
| const trace2d = { | |
| x: data.x2d, | |
| y: data.z2d, | |
| mode: 'markers', | |
| marker: { | |
| size: 5, | |
| color: data.c2d, | |
| colorscale: 'Viridis', | |
| opacity: 0.8, | |
| showscale: true | |
| }, | |
| type: 'scatter' | |
| }; | |
| Plotly.newPlot('plot2d', [trace2d], { | |
| title: `2D Cross-Section (x-z plane)`, | |
| xaxis: {title: 'x'}, | |
| yaxis: {title: 'z', scaleanchor: 'x'}, | |
| margin: {l: 50, r: 0, b: 50, t: 40} | |
| }); | |
| } | |
| // Initialize | |
| updateWaveFunction(); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=holyhigh666/hydrogen" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |