228

Quantum Hydrogen Orbital

Rigorous quantum mechanical visualization of the hydrogen atom wavefunction ψ_nlm(r, θ, φ). Renders volumetric 3D electron probability density clouds, spherical harmonics Y_l^m lobes, nodal boundary surfaces, and complex phase transitions for physics and chemistry study.

Playground
60 FPS Canvas 2D
Click + Drag to interact with field
</>

Full Executable Algorithm Code

// 056 - Quantum Hydrogen Orbital (physics)
// 1:1 Original algorithm engine source
function createQuantumHydrogenOrbital() {
  const POINT_COUNT = 800;
  const samples = [];
  for (let i = 0; i < POINT_COUNT; i++) {
    samples.push({
      u: Math.random() * Math.PI * 2,
      v: Math.acos(2 * Math.random() - 1),
      radMod: 0.2 + Math.random() * 0.8,
      phase: Math.random() * Math.PI * 2
    });
  }
  return {
    setup() {
    },
    render(context, timeState, params) {
      const { ctx, width, height } = context;
      const quantumN = Math.floor(Number(params.principalN || 3));
      const quantumL = Math.min(quantumN - 1, Math.floor(Number(params.angularL || 2)));
      const t = timeState.time * 0.8;
      ctx.fillStyle = "#020307";
      ctx.fillRect(0, 0, width, height);
      const cx = width * 0.5;
      const cy = height * 0.5;
      const scale = Math.min(width, height) * 0.38;
      const rotY = t * 0.35;
      const rotX = 0.45 + Math.sin(t * 0.25) * 0.15;
      const rotZ = 0;
      ctx.save();
      ctx.globalCompositeOperation = "screen";
      for (let i = 0; i < POINT_COUNT; i++) {
        const s = samples[i];
        const theta = s.v;
        const phi = s.u;
        let angularFactor = 1;
        if (quantumL === 1) {
          angularFactor = Math.abs(Math.cos(theta)) * 1.8;
        } else if (quantumL === 2) {
          angularFactor = Math.abs(3 * Math.pow(Math.cos(theta), 2) - 1) * 0.9;
        } else if (quantumL === 3) {
          const ct = Math.cos(theta);
          angularFactor = Math.abs(5 * Math.pow(ct, 3) - 3 * ct) * 0.7;
        }
        const rNorm = s.radMod * (1 + 0.12 * Math.sin(s.phase + t * 2));
        const radialProb = Math.pow(rNorm * quantumN, quantumL) * Math.exp(-rNorm * 2.2);
        const radius = scale * (0.2 + radialProb * angularFactor * 1.6);
        const rawX = radius * Math.sin(theta) * Math.cos(phi);
        const rawY = radius * Math.cos(theta);
        const rawZ = radius * Math.sin(theta) * Math.sin(phi);
        const p = project3D(rawX, rawY, rawZ, rotX, rotY, rotZ, cx, cy, 450, 520);
        const phaseHue = (phi / (Math.PI * 2) * 360 + t * 30) % 360;
        const probAlpha = Math.min(1, (0.2 + angularFactor * 0.45) * p.depth);
        ctx.fillStyle = hsla(phaseHue, 95, 70, probAlpha);
        ctx.beginPath();
        ctx.arc(p.x, p.y, (1.2 + angularFactor * 1.6) * p.depth, 0, Math.PI * 2);
        ctx.fill();
      }
      const nodalRings = 16;
      for (let nr = 0; nr < nodalRings; nr++) {
        const normNR = (nr / nodalRings - 0.5) * 2;
        const ringZ = normNR * (scale * 0.65);
        const thetaRing = Math.acos(Math.max(-1, Math.min(1, normNR)));
        let ringAmp = 1;
        if (quantumL === 1) ringAmp = Math.abs(Math.cos(thetaRing)) * 1.5;
        else if (quantumL === 2) ringAmp = Math.abs(3 * Math.pow(Math.cos(thetaRing), 2) - 1) * 0.8;
        else if (quantumL === 3) ringAmp = Math.abs(5 * Math.pow(Math.cos(thetaRing), 3) - 3 * Math.cos(thetaRing)) * 0.6;
        const ringR = Math.sin(thetaRing) * scale * 0.7 * ringAmp;
        if (ringR < 2) continue;
        ctx.beginPath();
        const steps = 40;
        for (let j = 0; j <= steps; j++) {
          const phiJ = j / steps * Math.PI * 2;
          const px = ringR * Math.cos(phiJ);
          const py = ringZ;
          const pz = ringR * Math.sin(phiJ);
          const proj = project3D(px, py, pz, rotX, rotY, rotZ, cx, cy, 450, 520);
          if (j === 0) ctx.moveTo(proj.x, proj.y);
          else ctx.lineTo(proj.x, proj.y);
        }
        ctx.closePath();
        ctx.strokeStyle = hsla((190 + nr * 8) % 360, 95, 75, 0.45);
        ctx.lineWidth = 1;
        ctx.stroke();
      }
      const pCore = project3D(0, 0, 0, rotX, rotY, rotZ, cx, cy, 450, 520);
      const coreGrad = ctx.createRadialGradient(pCore.x, pCore.y, 1, pCore.x, pCore.y, 14 * pCore.depth);
      coreGrad.addColorStop(0, "#ffffff");
      coreGrad.addColorStop(0.3, "#38bdf8");
      coreGrad.addColorStop(1, "rgba(56, 189, 248, 0)");
      ctx.fillStyle = coreGrad;
      ctx.beginPath();
      ctx.arc(pCore.x, pCore.y, 14 * pCore.depth, 0, Math.PI * 2);
      ctx.fill();
      ctx.restore();
      ctx.save();
      ctx.font = "11px monospace";
      ctx.fillStyle = "rgba(56, 189, 248, 0.9)";
      ctx.fillText(`\u03C8_nlm(r,\u03B8,\u03C6) \u2014 Hydrogen Orbital State`, 20, 28);
      ctx.fillStyle = "#94a3b8";
      ctx.fillText(`Principal (n): ${quantumN} | Angular (l): ${quantumL} (${["s", "p", "d", "f"][quantumL] || "s"}) | Magnetic (m): 0`, 20, 44);
      ctx.fillText(`P(r,\u03B8,\u03C6) = |R_nl(r)|^2 \xB7 |Y_l^m(\u03B8,\u03C6)|^2`, 20, 60);
      ctx.restore();
    }
  };
}

// Default parameters from content metadata
const defaultParams = [
  {
    "key": "principalN",
    "label": "Principal (n)",
    "type": "range",
    "min": 1,
    "max": 4,
    "step": 1,
    "defaultValue": 3,
    "description": "Principal quantum energy level n"
  },
  {
    "key": "angularL",
    "label": "Angular (l)",
    "type": "range",
    "min": 0,
    "max": 3,
    "step": 1,
    "defaultValue": 2,
    "description": "Orbital angular momentum quantum number (0=s, 1=p, 2=d, 3=f)"
  }
];

if (!window.__art_instances) window.__art_instances = {};
if (!window.__art_instances['quantum-hydrogen-orbital']) {
  const inst = typeof createQuantumHydrogenOrbital === 'function' ? createQuantumHydrogenOrbital() : null;
  if (inst && inst.setup) {
    inst.setup({ ctx, width, height, dpr: 1, aspectRatio: width / height }, defaultParams);
  }
  window.__art_instances['quantum-hydrogen-orbital'] = inst;
}

const instance = window.__art_instances['quantum-hydrogen-orbital'];
if (instance && instance.render) {
  instance.render(
    { ctx, width, height, dpr: 1, aspectRatio: width / height },
    { time, deltaTime: dt, frameCount: Math.floor(time * 60), fps: 60 },
    defaultParams
  );
}
Edit in Interactive Playground Zero Dependencies • Standalone Canvas 2D
ƒ

Mathematical Formulation

high
Analytical Equation
ψnlm(r,θ,ϕ)=Rnl(r)Ylm(θ,ϕ),P(r,θ,ϕ)=ψnlm2\psi_{nlm}(r,\theta,\phi) = R_{nl}(r) Y_l^m(\theta,\phi), \quad P(r,\theta,\phi) = |\psi_{nlm}|^2
Click to expand
Compact Formula
P = Math.pow(r*n, l) * Math.exp(-r*2) * Math.abs(Y_lm(theta, phi))

Mathematical Tags

#quantum-mechanics #physics-study #schrodinger-equation #hydrogen-orbital #spherical-harmonics #3d-cloud
Author: Quantum Physics Core Target: 60 FPS

Export & Embed: Quantum Hydrogen Orbital

4K PNG Snapshot

High-resolution single frame render

WebM Video (5s Loop)

60 FPS browser-captured stream

Standalone JS Script

Complete executable Canvas 2D algorithm

HTML Iframe Embed

<iframe src="https://art.fazleyrabbi.xyz/embed/quantum-hydrogen-orbital" width="500" height="500" frameborder="0" loading="lazy"></iframe>
ESC
↑↓ Navigate Select
110 Mathematical Artworks
Made by Fazley Rabbi

Support the Project

Keep mathematical creative coding alive & open source

Or via Direct Payoneer ($0 Fee)
Payoneer Customer ID: $0 Fee Direct
24076084

💡 Payoneer app: Go to Pay → Pay to recipient → Enter ID 24076084.

Thank you for supporting generative mathematical animations! ✨