.png){kind=link}
Atoms is an independent web application built around a tested TypeScript scientific core. It provides hydrogen wavefunctions, probability densities, real-orbital combinations, deterministic sampling, Web Worker execution and Three.js rendering. See the scientific contract, the institutional references and the validation report for scope, formulas, conventions, sources and reproducible qualification.
3dxy · base réelle · n = 3, l = 2 · combinaison normalisée issue des composantes m = ±2 · phase de ψ · rendu hybride · 16 000 échantillons
Visualisation interactive des orbitales quantiques de l’atome d’hydrogène directement dans le navigateur.
- Présentation
- Fonctionnalités
- Modèle quantique
- Types d’orbitales
- Pile technologique
- Installation
- Utilisation
- Captures d'écran
- Contribution
- Licence
- Objectifs
Hydrogen Quantum Orbital Visualizer est un outil web interactif conçu pour explorer les orbitales quantiques de l’atome d’hydrogène. Il permet de visualiser en 3D les densités de probabilité électronique basées sur les solutions analytiques de l’équation de Schrödinger indépendante du temps.
Ce projet vise à rendre la mécanique quantique plus accessible et pédagogique, en offrant une expérience interactive directement dans un navigateur web moderne, sans besoin d’installation lourde. Il est idéal pour les étudiants, enseignants et passionnés de physique quantique.
Note : Atoms est une application web scientifique autonome conçue pour une exploration interactive et reproductible des orbitales quantiques de l’atome d’hydrogène.
Dépôt public : github.com/Giscolab/Atoms.
Démonstration en ligne : giscolab.github.io/Atoms
- Visualisation 3D interactive : explorez les orbitales avec rotation volontaire de la caméra,
zoom et réinitialisation du cadrage dans un repère en
a₀. - États complexes et orbitales réelles distincts : choisissez
n,l,mdans la base complexe ou les combinaisons réellesp/ddisponibles, sans assimiler unmisolé àpₓoupᵧ. - Nuage probabiliste : les positions sont échantillonnées selon
|ψ|² dVdans un Web Worker. Les points représentent une distribution, jamais des électrons individuels ou une trajectoire. - Modes scientifiques : densité, phase et mode hybride, avec isosurface de densité et surface
nodale
ψ = 0uniquement lorsque cette dernière est interprétable. - Isodensité raffinée côté rendu : extraction Marching Cubes sur subdivision trilinéaire du champ scientifique inchangé, normales issues du gradient, matériau dédié et éclairage contrôlé. Voir Rendu des isodensités.
- Analyses latérales : courbe radiale
r²|Rₙₗ|², coupe géométrique de|Yₗᵐ|², énergie du modèle à masse réduite, rayon attendu et nombres de nœuds. - Reproductibilité et thèmes : seed
uint32affichée, génération relançable, thèmes sombre et clair équivalents, responsive et respect deprefers-reduced-motion. - Snapshots scientifiques : import/export JSON v1 strict avec unités, provenance numérique, état orbital, rendu, seed et caméra, plus capture PNG de la vue 3D courante. Voir le contrat des snapshots.
La visualisation repose sur la fonction d’onde de l’atome d’hydrogène, définie par trois nombres quantiques principaux :
| Symbole | Nom | Signification | Valeurs possibles |
|---|---|---|---|
n |
Nombre quantique principal | Détermine le niveau d’énergie et la taille de l’orbitale | Entier ≥ 1 |
l |
Nombre quantique azimutal | Détermine la forme de l’orbitale | Entier de 0 à n-1 |
m |
Nombre quantique magnétique | Détermine l’orientation spatiale | Entier de -l à +l |
La densité de probabilité affichée est calculée comme suit :
|Ψₙₗₘ(r, θ, φ)|² = |Rₙₗ(r)|² · |Yₗₘ(θ, φ)|²
Où :
- Rₙₗ(r) est la partie radiale.
- Yₗₘ(θ, φ) est la partie angulaire (harmoniques sphériques).
Cette quantité est une densité de probabilité volumique ; une probabilité finie s'obtient après
intégration sur un volume.
La mesure volumique utilisée pour le sampling est |Ψ|² r² sin(θ) dr dθ dφ, tandis que la valeur
de densité stockée reste |Ψ|² sans jacobien. Les conventions et les limites du modèle sont
détaillées dans le contrat scientifique.
Explorez diverses orbitales classées par leur forme et énergie :
| Type | Description | Exemples |
|---|---|---|
s (l=0) |
Symétrie sphérique, sans nœuds angulaires | 1s, 2s, 3s |
p (l=1) |
Formes lobées avec un nœud plan | 2p_x, 2p_y, 2p_z |
d (l=2) |
Géométries complexes avec plusieurs lobes | 3d_xy, 3d_xz, etc. |
f (l=3) |
Structures encore plus élaborées | 4f et supérieurs |
| États excités | Orbitales de haute énergie avec nœuds radiaux multiples | n ≥ 4 |
| Technologie | Version | Rôle |
|---|---|---|
| HTML5 | - | Structure de base de l’application |
| CSS3 | - | Styles et mise en forme responsive |
| TypeScript | 7.0.2 | Logique interactive et calculs quantiques |
| WebGL | 2.0 | Rendu 3D accéléré par GPU |
| Three.js | r185 | Bibliothèque pour la manipulation 3D et les scènes |
| npm | - | Gestion des dépendances et des commandes de développement |
Three.js et les outils de développement sont installés de façon reproductible depuis package-lock.json avec npm.
- Un navigateur web moderne (Chrome/Edge, Firefox ou Safari) avec support WebGL2.
- Node.js 24.19.0 LTS et npm.
-
Cloner le dépôt :
git clone https://github.com/Giscolab/Atoms.git cd Atoms -
Installer les dépendances :
npm install
-
Lancer un serveur local :
npm run dev
-
Ouvrir l’application : Accédez à
http://localhost:5173(ou au port indiqué par Vite).
- Ouvrez l’application dans votre navigateur.
- Choisissez la base complexe ou une orbitale réelle, puis les nombres quantiques valides.
- Choisissez l’observable (densité ou phase) et le mode d’affichage ; ajustez le seuil, l’opacité et le nombre de points si nécessaire.
- Interagissez avec la vue 3D : glisser pour orienter la caméra, molette ou pinch pour zoomer,
touche
0ou bouton dédié pour réinitialiser la vue. - Pour reproduire une génération isolée, conservez la seed affichée et relancez « Générer l’état ».
- Pour archiver ou partager l'état complet, utilisez Exporter JSON ; Importer JSON valide strictement le snapshot avant régénération et restauration de la caméra.
- Utilisez Capture PNG pour exporter la frame 3D courante. Le PNG est une illustration ; le snapshot JSON reste la référence reproductible.
Ces captures documentent plusieurs usages du même pipeline orbital 3D. Elles servent à présenter l’interface et ses conventions visuelles. Les régressions scientifiques déterministes versionnées et leur protocole sont décrits dans VALIDATION.md.
Vue de référence. Orbitale réelle 3dxy · n = 3, l = 2 · combinaison normalisée issue des composantes m = ±2 · phase de ψ · mode hybride · 16 000 échantillons. Cette vue réunit le nuage probabiliste, l’isosurface de densité et les analyses radiale et angulaire.
État excité étendu. Orbitale réelle 8dx²−y² · n = 8, l = 2 · combinaison normalisée issue des composantes m = ±2 · phase de ψ · nuage de points · 16 000 échantillons. Cette vue met en évidence l’extension spatiale et la structure radiale d’un état de grand n.
Les contributions sont les bienvenues ! Suivez ces étapes :
- Forkez le dépôt.
- Créez une branche :
git checkout -b feature/nouvelle-fonction. - Committez vos changements :
git commit -m 'Ajout de nouvelle fonction'. - Poussez :
git push origin feature/nouvelle-fonction. - Ouvrez une Pull Request.
Consultez les Issues pour le suivi des bugs.
Idées de contributions : Ajout de support pour d’autres atomes, optimisation mobile, ou internationalisation.
Atoms est publié sous licence MIT. Les dépendances tierces conservent leurs licences respectives.
- Rendre la mécanique quantique visuellement intuitive pour l’éducation.
- Fournir un outil interactif pour la visualisation scientifique.
- Démontrer les capacités des technologies web (WebGL, Three.js) pour des simulations complexes.
- Encourager des expérimentations pédagogiques et des extensions communautaires.
Développé avec Three.js
Si vous appréciez ce projet, donnez une ⭐ sur GitHub ! Pour toute question, ouvrez une issue.