Interactive 3D Visualization of Bohr's Atomic Model: Enhancing Educational Tools with WebGL and Force-Directed Algorithms

The study presents an interactive 3D web-based application designed to visualize atomic structures according to Bohr’s Model using Three.js and WebGL. The primary aim of the project is to enhance educational tools in atomic physics by providing an interactive, real-time representation of atomic structures. This tool allows users to explore atomic models dynamically, offering a detailed view of electron orbits, nuclear structure, and electron movement. The visualization system is built around Three.js, a JavaScript library for 3D rendering, and incorporates force-directed algorithms for the realistic positioning of protons and neutrons within the nucleus. These particles are placed using Eades’ 1984 force-directed graph algorithm, which simulates physical forces to arrange the particles in a minimal energy configuration. The electron orbits are generated procedurally using circular subdivision methods, ensuring that electrons appear to move around the nucleus in defined energy levels, as proposed by Bohr. The application also accounts for performance optimization and user interaction. It ensures frame rate independence by calculating delta time between render cycles, providing smooth motion even on devices with varying processing capabilities. The user can interact with the model, adjusting the camera view to zoom in or rotate the atomic structure, thus fostering a deeper understanding of atomic physics. The study also highlights the integration of TypeScript, which improves maintainability and type safety in the development process. The application’s usability has been tested with engineering students, confirming its effectiveness as an educational tool. Future work includes expanding the model to incorporate quantum mechanical adaptations and potentially integrating augmented reality for more immersive learning experiences. In conclusion, this research contributes to the field of computer-aided education by providing an interactive 3D atomic visualization tool. It offers an engaging and effective method for learning about atomic structures and their behavior, making complex scientific concepts more accessible.

Authors

Institutions

Publication Details

Journal
Mathematics and Computer Science
Published
2025-05-22
DOI
https://doi.org/10.11648/j.mcs.20251003.11
Primary Topic
Visual Attention and Saliency Detection
Type
article
Field-Weighted Citation Impact
0.00
Controls
|||
ALL TIME
JAN
FEB
MAR
APR
MAY
JUN
JUL
AUG
SEP
OCT
article

Interactive 3D Visualization of Bohr's Atomic Model: Enhancing Educational Tools with WebGL and Force-Directed Algorithms

Zaid Kraitem, Hamza Alhaj, Mohamad Taky
Mathematics and Computer Science
Visual Attention and Saliency Detection
article

Interactive 3D Visualization of Bohr's Atomic Model: Enhancing Educational Tools with WebGL and Force-Directed Algorithms

Zaid Kraitem, Hamza Alhaj, Mohamad Taky
article en

Abstract

The study presents an interactive 3D web-based application designed to visualize atomic structures according to Bohr’s Model using Three.js and WebGL. The primary aim of the project is to enhance educational tools in atomic physics by providing an interactive, real-time representation of atomic structures. This tool allows users to explore atomic models dynamically, offering a detailed view of electron orbits, nuclear structure, and electron movement. The visualization system is built around Three.js, a JavaScript library for 3D rendering, and incorporates force-directed algorithms for the realistic positioning of protons and neutrons within the nucleus. These particles are placed using Eades’ 1984 force-directed graph algorithm, which simulates physical forces to arrange the particles in a minimal energy configuration. The electron orbits are generated procedurally using circular subdivision methods, ensuring that electrons appear to move around the nucleus in defined energy levels, as proposed by Bohr. The application also accounts for performance optimization and user interaction. It ensures frame rate independence by calculating delta time between render cycles, providing smooth motion even on devices with varying processing capabilities. The user can interact with the model, adjusting the camera view to zoom in or rotate the atomic structure, thus fostering a deeper understanding of atomic physics. The study also highlights the integration of TypeScript, which improves maintainability and type safety in the development process. The application’s usability has been tested with engineering students, confirming its effectiveness as an educational tool. Future work includes expanding the model to incorporate quantum mechanical adaptations and potentially integrating augmented reality for more immersive learning experiences. In conclusion, this research contributes to the field of computer-aided education by providing an interactive 3D atomic visualization tool. It offers an engaging and effective method for learning about atomic structures and their behavior, making complex scientific concepts more accessible.

Mathematics and Computer ScienceVol. 10(3)
Al Wataniya Private University (SY)
Openalex Percentile: Top 89%
Visual Attention and Saliency Detection
AI Navigator

Ask Laika to Summarize, Analyze, and Connect papers live on the map.

Summarize Papers & Methodologies

Extract key findings, datasets, and comparative methods across publications.

Benchmark Rankings & Visual Analytics

Rank top research institutions, authors, funders, topics, and journals by Field-Weighted Citation Impact (FWCI) and paper volume with instant charts.

Connect Distant Disciplines

Bridge topological clusters on the map to find hidden collaborative intersections.