Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Advanced Atom Simulator</title> | |
| <style> | |
| body { | |
| margin: 0; | |
| overflow: hidden; | |
| font-family: 'Roboto', sans-serif; | |
| background: linear-gradient(to right, #0f2027, #203a43, #2c5364); | |
| color: #f0f0f0; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: center; | |
| height: 100vh; | |
| } | |
| #controls { | |
| position: absolute; | |
| top: 10px; | |
| width: 100%; | |
| display: flex; | |
| justify-content: center; | |
| gap: 20px; | |
| backdrop-filter: blur(10px); | |
| padding: 20px; | |
| background: rgba(255, 255, 255, 0.1); | |
| border-radius: 10px; | |
| z-index: 10; | |
| } | |
| .control { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| } | |
| .control label { | |
| margin-bottom: 5px; | |
| font-weight: bold; | |
| } | |
| .control input, .control select { | |
| width: 80px; | |
| padding: 10px; | |
| border: none; | |
| border-radius: 5px; | |
| background: #333; | |
| color: #fff; | |
| text-align: center; | |
| } | |
| #info { | |
| position: absolute; | |
| bottom: 20px; | |
| text-align: center; | |
| background: rgba(255, 255, 255, 0.1); | |
| padding: 20px; | |
| border-radius: 10px; | |
| backdrop-filter: blur(10px); | |
| z-index: 10; | |
| } | |
| #info div { | |
| margin: 5px 0; | |
| font-size: 1.2em; | |
| } | |
| canvas { | |
| background-color: transparent; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="controls"> | |
| <div class="control"> | |
| <label for="elements">Element</label> | |
| <select id="elements"></select> | |
| </div> | |
| <div class="control"> | |
| <label for="protons">Protons</label> | |
| <input type="number" id="protons" min="1" value="1"> | |
| </div> | |
| <div class="control"> | |
| <label for="neutrons">Neutrons</label> | |
| <input type="number" id="neutrons" min="0" value="1"> | |
| </div> | |
| <div class="control"> | |
| <label for="electrons">Electrons</label> | |
| <input type="number" id="electrons" min="1" value="1"> | |
| </div> | |
| </div> | |
| <div id="info"> | |
| <div id="elementName">Element: Hydrogen</div> | |
| <div id="azeNotation">AZE Notation: 2H1</div> | |
| <div id="elementMass">Mass: 2.016 u</div> | |
| </div> | |
| <canvas id="atomCanvas"></canvas> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script> | |
| <script> | |
| const canvas = document.getElementById('atomCanvas'); | |
| const renderer = new THREE.WebGLRenderer({ canvas, antialias: true }); | |
| const scene = new THREE.Scene(); | |
| const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); | |
| camera.position.z = 10; | |
| renderer.setSize(window.innerWidth, window.innerHeight); | |
| const light = new THREE.AmbientLight(0x404040, 2); | |
| scene.add(light); | |
| const protonGeometry = new THREE.SphereGeometry(0.3, 32, 32); | |
| const neutronGeometry = new THREE.SphereGeometry(0.3, 32, 32); | |
| const electronGeometry = new THREE.SphereGeometry(0.1, 32, 32); | |
| const protonMaterial = new THREE.MeshStandardMaterial({ color: 0xFF3333 }); | |
| const neutronMaterial = new THREE.MeshStandardMaterial({ color: 0x3333FF }); | |
| const electronMaterial = new THREE.MeshStandardMaterial({ color: 0x33FF33 }); | |
| const nucleus = new THREE.Group(); | |
| scene.add(nucleus); | |
| const electrons = []; | |
| const elements = { | |
| 1: { name: "Hydrogen", symbol: "H", mass: 1.008 }, | |
| 2: { name: "Helium", symbol: "He", mass: 4.0026 }, | |
| 3: { name: "Lithium", symbol: "Li", mass: 6.94 }, | |
| 4: { name: "Beryllium", symbol: "Be", mass: 9.0122 }, | |
| 5: { name: "Boron", symbol: "B", mass: 10.81 }, | |
| 6: { name: "Carbon", symbol: "C", mass: 12.011 }, | |
| 7: { name: "Nitrogen", symbol: "N", mass: 14.007 }, | |
| 8: { name: "Oxygen", symbol: "O", mass: 15.999 }, | |
| 9: { name: "Fluorine", symbol: "F", mass: 18.998 }, | |
| 10: { name: "Neon", symbol: "Ne", mass: 20.180 }, | |
| 11: { name: "Sodium", symbol: "Na", mass: 22.990 }, | |
| 12: { name: "Magnesium", symbol: "Mg", mass: 24.305 }, | |
| 13: { name: "Aluminium", symbol: "Al", mass: 26.982 }, | |
| 14: { name: "Silicon", symbol: "Si", mass: 28.085 }, | |
| 15: { name: "Phosphorus", symbol: "P", mass: 30.974 }, | |
| 16: { name: "Sulfur", symbol: "S", mass: 32.06 }, | |
| 17: { name: "Chlorine", symbol: "Cl", mass: 35.45 }, | |
| 18: { name: "Argon", symbol: "Ar", mass: 39.948 }, | |
| 19: { name: "Potassium", symbol: "K", mass: 39.098 }, | |
| 20: { name: "Calcium", symbol: "Ca", mass: 40.078 }, | |
| 21: { name: "Scandium", symbol: "Sc", mass: 44.956 }, | |
| 22: { name: "Titanium", symbol: "Ti", mass: 47.867 }, | |
| 23: { name: "Vanadium", symbol: "V", mass: 50.942 }, | |
| 24: { name: "Chromium", symbol: "Cr", mass: 51.996 }, | |
| 25: { name: "Manganese", symbol: "Mn", mass: 54.938 }, | |
| 26: { name: "Iron", symbol: "Fe", mass: 55.845 }, | |
| 27: { name: "Cobalt", symbol: "Co", mass: 58.933 }, | |
| 28: { name: "Nickel", symbol: "Ni", mass: 58.693 }, | |
| 29: { name: "Copper", symbol: "Cu", mass: 63.546 }, | |
| 30: { name: "Zinc", symbol: "Zn", mass: 65.38 }, | |
| 31: { name: "Gallium", symbol: "Ga", mass: 69.723 }, | |
| 32: { name: "Germanium", symbol: "Ge", mass: 72.630 }, | |
| 33: { name: "Arsenic", symbol: "As", mass: 74.922 }, | |
| 34: { name: "Selenium", symbol: "Se", mass: 78.971 }, | |
| 35: { name: "Bromine", symbol: "Br", mass: 79.904 }, | |
| 36: { name: "Krypton", symbol: "Kr", mass: 83.798 }, | |
| 37: { name: "Rubidium", symbol: "Rb", mass: 85.468 }, | |
| 38: { name: "Strontium", symbol: "Sr", mass: 87.62 }, | |
| 39: { name: "Yttrium", symbol: "Y", mass: 88.906 }, | |
| 40: { name: "Zirconium", symbol: "Zr", mass: 91.224 }, | |
| 41: { name: "Niobium", symbol: "Nb", mass: 92.906 }, | |
| 42: { name: "Molybdenum", symbol: "Mo", mass: 95.95 }, | |
| 43: { name: "Technetium", symbol: "Tc", mass: 98 }, | |
| 44: { name: "Ruthenium", symbol: "Ru", mass: 101.07 }, | |
| 45: { name: "Rhodium", symbol: "Rh", mass: 102.91 }, | |
| 46: { name: "Palladium", symbol: "Pd", mass: 106.42 }, | |
| 47: { name: "Silver", symbol: "Ag", mass: 107.87 }, | |
| 48: { name: "Cadmium", symbol: "Cd", mass: 112.41 }, | |
| 49: { name: "Indium", symbol: "In", mass: 114.82 }, | |
| 50: { name: "Tin", symbol: "Sn", mass: 118.71 }, | |
| 51: { name: "Antimony", symbol: "Sb", mass: 121.76 }, | |
| 52: { name: "Tellurium", symbol: "Te", mass: 127.60 }, | |
| 53: { name: "Iodine", symbol: "I", mass: 126.90 }, | |
| 54: { name: "Xenon", symbol: "Xe", mass: 131.29 }, | |
| 55: { name: "Cesium", symbol: "Cs", mass: 132.91 }, | |
| 56: { name: "Barium", symbol: "Ba", mass: 137.33 }, | |
| 57: { name: "Lanthanum", symbol: "La", mass: 138.91 }, | |
| 58: { name: "Cerium", symbol: "Ce", mass: 140.12 }, | |
| 59: { name: "Praseodymium", symbol: "Pr", mass: 140.91 }, | |
| 60: { name: "Neodymium", symbol: "Nd", mass: 144.24 }, | |
| 61: { name: "Promethium", symbol: "Pm", mass: 145 }, | |
| 62: { name: "Samarium", symbol: "Sm", mass: 150.36 }, | |
| 63: { name: "Europium", symbol: "Eu", mass: 151.96 }, | |
| 64: { name: "Gadolinium", symbol: "Gd", mass: 157.25 }, | |
| 65: { name: "Terbium", symbol: "Tb", mass: 158.93 }, | |
| 66: { name: "Dysprosium", symbol: "Dy", mass: 162.50 }, | |
| 67: { name: "Holmium", symbol: "Ho", mass: 164.93 }, | |
| 68: { name: "Erbium", symbol: "Er", mass: 167.26 }, | |
| 69: { name: "Thulium", symbol: "Tm", mass: 168.93 }, | |
| 70: { name: "Ytterbium", symbol: "Yb", mass: 173.05 }, | |
| 71: { name: "Lutetium", symbol: "Lu", mass: 174.97 }, | |
| 72: { name: "Hafnium", symbol: "Hf", mass: 178.49 }, | |
| 73: { name: "Tantalum", symbol: "Ta", mass: 180.95 }, | |
| 74: { name: "Tungsten", symbol: "W", mass: 183.84 }, | |
| 75: { name: "Rhenium", symbol: "Re", mass: 186.21 }, | |
| 76: { name: "Osmium", symbol: "Os", mass: 190.23 }, | |
| 77: { name: "Iridium", symbol: "Ir", mass: 192.22 }, | |
| 78: { name: "Platinum", symbol: "Pt", mass: 195.08 }, | |
| 79: { name: "Gold", symbol: "Au", mass: 196.97 }, | |
| 80: { name: "Mercury", symbol: "Hg", mass: 200.59 }, | |
| 81: { name: "Thallium", symbol: "Tl", mass: 204.38 }, | |
| 82: { name: "Lead", symbol: "Pb", mass: 207.2 }, | |
| 83: { name: "Bismuth", symbol: "Bi", mass: 208.98 }, | |
| 84: { name: "Polonium", symbol: "Po", mass: 209 }, | |
| 85: { name: "Astatine", symbol: "At", mass: 210 }, | |
| 86: { name: "Radon", symbol: "Rn", mass: 222 }, | |
| 87: { name: "Francium", symbol: "Fr", mass: 223 }, | |
| 88: { name: "Radium", symbol: "Ra", mass: 226 }, | |
| 89: { name: "Actinium", symbol: "Ac", mass: 227 }, | |
| 90: { name: "Thorium", symbol: "Th", mass: 232.04 }, | |
| 91: { name: "Protactinium", symbol: "Pa", mass: 231.04 }, | |
| 92: { name: "Uranium", symbol: "U", mass: 238.03 }, | |
| 93: { name: "Neptunium", symbol: "Np", mass: 237 }, | |
| 94: { name: "Plutonium", symbol: "Pu", mass: 244 }, | |
| 95: { name: "Americium", symbol: "Am", mass: 243 }, | |
| 96: { name: "Curium", symbol: "Cm", mass: 247 }, | |
| 97: { name: "Berkelium", symbol: "Bk", mass: 247 }, | |
| 98: { name: "Californium", symbol: "Cf", mass: 251 }, | |
| 99: { name: "Einsteinium", symbol: "Es", mass: 252 }, | |
| 100: { name: "Fermium", symbol: "Fm", mass: 257 }, | |
| 101: { name: "Mendelevium", symbol: "Md", mass: 258 }, | |
| 102: { name: "Nobelium", symbol: "No", mass: 259 }, | |
| 103: { name: "Lawrencium", symbol: "Lr", mass: 266 }, | |
| 104: { name: "Rutherfordium", symbol: "Rf", mass: 267 }, | |
| 105: { name: "Dubnium", symbol: "Db", mass: 270 }, | |
| 106: { name: "Seaborgium", symbol: "Sg", mass: 271 }, | |
| 107: { name: "Bohrium", symbol: "Bh", mass: 270 }, | |
| 108: { name: "Hassium", symbol: "Hs", mass: 277 }, | |
| 109: { name: "Meitnerium", symbol: "Mt", mass: 278 }, | |
| 110: { name: "Darmstadtium", symbol: "Ds", mass: 281 }, | |
| 111: { name: "Roentgenium", symbol: "Rg", mass: 282 }, | |
| 112: { name: "Copernicium", symbol: "Cn", mass: 285 }, | |
| 113: { name: "Nihonium", symbol: "Nh", mass: 286 }, | |
| 114: { name: "Flerovium", symbol: "Fl", mass: 289 }, | |
| 115: { name: "Moscovium", symbol: "Mc", mass: 290 }, | |
| 116: { name: "Livermorium", symbol: "Lv", mass: 293 }, | |
| 117: { name: "Tennessine", symbol: "Ts", mass: 294 }, | |
| 118: { name: "Oganesson", symbol: "Og", mass: 294 } | |
| }; | |
| const elementSelect = document.getElementById('elements'); | |
| Object.keys(elements).forEach(key => { | |
| const option = document.createElement('option'); | |
| option.value = key; | |
| option.textContent = elements[key].name; | |
| elementSelect.appendChild(option); | |
| }); | |
| function createParticles(numProtons, numNeutrons, numElectrons) { | |
| nucleus.clear(); | |
| electrons.forEach(e => scene.remove(e)); | |
| electrons.length = 0; | |
| for (let i = 0; i < numProtons; i++) { | |
| const proton = new THREE.Mesh(protonGeometry, protonMaterial); | |
| proton.position.set((Math.random() - 0.5), (Math.random() - 0.5), (Math.random() - 0.5)); | |
| nucleus.add(proton); | |
| } | |
| for (let i = 0; i < numNeutrons; i++) { | |
| const neutron = new THREE.Mesh(neutronGeometry, neutronMaterial); | |
| neutron.position.set((Math.random() - 0.5), (Math.random() - 0.5), (Math.random() - 0.5)); | |
| nucleus.add(neutron); | |
| } | |
| for (let i = 0; i < numElectrons; i++) { | |
| const electron = new THREE.Mesh(electronGeometry, electronMaterial); | |
| const angle = (i / numElectrons) * Math.PI * 2; | |
| const radius = 2.5; | |
| electron.position.set(Math.cos(angle) * radius, Math.sin(angle) * radius, 0); | |
| scene.add(electron); | |
| electrons.push(electron); | |
| } | |
| } | |
| function animate() { | |
| requestAnimationFrame(animate); | |
| nucleus.rotation.y += 0.01; | |
| electrons.forEach((e, i) => { | |
| e.position.x = Math.cos(Date.now() * 0.001 + i) * 2.5; | |
| e.position.y = Math.sin(Date.now() * 0.001 + i) * 2.5; | |
| }); | |
| renderer.render(scene, camera); | |
| } | |
| function updateInfo() { | |
| const numProtons = parseInt(document.getElementById('protons').value); | |
| const numNeutrons = parseInt(document.getElementById('neutrons').value); | |
| const numElectrons = parseInt(document.getElementById('electrons').value); | |
| const selectedElement = elements[numProtons] || { name: "Unknown", symbol: "?", mass: 0 }; | |
| const massNumber = numProtons + numNeutrons; | |
| const calculatedMass = numProtons * 1.007 + numNeutrons * 1.008 + numElectrons * 0.00055; | |
| document.getElementById('elementName').textContent = `Element: ${selectedElement.name}`; | |
| document.getElementById('azeNotation').textContent = `AZE Notation: ${massNumber}${selectedElement.symbol}${numProtons}`; | |
| document.getElementById('elementMass').textContent = `Mass: ${calculatedMass.toFixed(3)} u`; | |
| } | |
| document.querySelectorAll('input[type="number"]').forEach(input => { | |
| input.addEventListener('input', () => { | |
| const numProtons = parseInt(document.getElementById('protons').value); | |
| const numNeutrons = parseInt(document.getElementById('neutrons').value); | |
| const numElectrons = parseInt(document.getElementById('electrons').value); | |
| createParticles(numProtons, numNeutrons, numElectrons); | |
| updateInfo(); | |
| }); | |
| }); | |
| elementSelect.addEventListener('change', () => { | |
| const selectedElement = elements[elementSelect.value]; | |
| document.getElementById('protons').value = elementSelect.value; | |
| document.getElementById('neutrons').value = Math.round(selectedElement.mass) - elementSelect.value; | |
| document.getElementById('electrons').value = elementSelect.value; | |
| createParticles(elementSelect.value, Math.round(selectedElement.mass) - elementSelect.value, elementSelect.value); | |
| updateInfo(); | |
| }); | |
| createParticles(1, 1, 1); | |
| animate(); | |
| updateInfo(); | |
| window.addEventListener('resize', () => { | |
| camera.aspect = window.innerWidth / window.innerHeight; | |
| camera.updateProjectionMatrix(); | |
| renderer.setSize(window.innerWidth, window.innerHeight); | |
| }); | |
| </script> | |
| </body> | |
| </html> | |