Atomic Structure Simulator
Atomic Structure Simulator
Visualize atoms, electron orbits, and ion formation
Atom Properties:
Atomic Number (Z): 6
Mass Number (A): 12
Charge: 0
Electron Shells: 2
Carbon: 1s² 2s² 2p²
// Replace the initElectrons function with this:
function initElectrons() {
electronAngles = [];
electronOrbits = [];
// Actual electron shell capacities (octet rule for first 20 elements)
const shellCapacities = [2, 8, 8, 18, 18, 32, 32];
let remainingElectrons = electrons;
let shell = 1;
while (remainingElectrons > 0 && shell <= shellCapacities.length) {
const capacity = shellCapacities[shell-1];
const electronsInShell = Math.min(remainingElectrons, capacity);
remainingElectrons -= electronsInShell;
// Calculate equally spaced angles for electrons in this shell
const angleIncrement = (2 * Math.PI) / electronsInShell;
const startAngle = shell % 2 === 0 ? angleIncrement/2 : 0; // Stagger alternating shells
for (let i = 0; i < electronsInShell; i++) {
const angle = startAngle + (i * angleIncrement);
electronAngles.push(angle);
electronOrbits.push(shell);
}
shell++;
}
}
// Replace the shell count calculation in updateAtom() with:
function updateAtom() {
protons = parseInt(protonsSlider.value);
neutrons = parseInt(neutronsSlider.value);
electrons = parseInt(electronsSlider.value);
// Update displays
protonsValue.textContent = protons;
neutronsValue.textContent = neutrons;
electronsValue.textContent = electrons;
atomicNumberDisplay.textContent = protons;
massNumberDisplay.textContent = protons + neutrons;
const charge = protons - electrons;
atomChargeDisplay.textContent = charge === 0 ? "0" :
charge > 0 ? `+${charge}` : charge;
atomChargeDisplay.style.color = charge === 0 ? “inherit” :
charge > 0 ? “#e74c3c” : “#2ecc71”;
// Calculate electron shells properly
let shells = 0;
let remaining = electrons;
const shellCapacities = [2, 8, 8, 18, 18, 32, 32];
for (let capacity of shellCapacities) {
if (remaining <= 0) break;
remaining -= capacity;
shells++;
}
electronShellsDisplay.textContent = shells;
// Update element info
if (elements[protons]) {
const element = elements[protons];
elementInfoDisplay.textContent = `${element.name}: ${element.config}`;
} else {
elementInfoDisplay.textContent = "Custom Atom";
}
initElectrons();
}