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.
60 FPS • Canvas 2D
Click + Drag to interact with field
</>
Full Executable Algorithm Code
148 lines
5893 chars
// 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,θ,ϕ)=∣ψnlm∣2
Click to expand
∑
Quantum Hydrogen Orbital
Full Mathematical System • physics
100%
Complete System of Equations
[Governing Law][Discrete Progression][Domain & Space][Parameter State]ψnlm(r,θ,ϕ)=Rnl(r)Ylm(θ,ϕ),P(r,θ,ϕ)=∣ψnlm∣2P=pow(r⋅n,l)⋅exp(−r⋅2)⋅abs(Ylm(θ,phi))x∈R2,t∈R+,ω∈[0,2π]λprincipalN=3(Principal (n)),λangularL=2(Angular (l))
ψnlm(r,θ,ϕ)=Rnl(r)Ylm(θ,ϕ),P(r,θ,ϕ)=∣ψnlm∣2
Computational Implementation (JavaScript Engine Equivalent)
P = Math.pow(r*n, l) * Math.exp(-r*2) * Math.abs(Y_lm(theta, phi)) 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
Press ESC or F to exit