<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Illusionistic Atomic Structure</title>
<style>
body {
margin: 0;
overflow: hidden;
background-color: #000;
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
#atom-container {
position: relative;
width: 500px;
height: 500px;
}
.nucleus {
position: absolute;
top: 50%;
left: 50%;
width: 80px;
height: 80px;
border-radius: 50%;
transform: translate(-50%, -50%);
background: radial-gradient(circle at 30% 30%, #f5a9b8 0%, #cc0066 70%);
box-shadow: 0 0 30px 10px rgba(255, 100, 150, 0.7);
z-index: 10;
}
.nucleus-particles {
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
overflow: hidden;
}
.proton, .neutron {
position: absolute;
width: 20px;
height: 20px;
border-radius: 50%;
}
.proton {
background: radial-gradient(circle at 30% 30%, #ff9999 0%, #ff0000 100%);
box-shadow: 0 0 5px 2px rgba(255, 0, 0, 0.5);
}
.neutron {
background: radial-gradient(circle at 30% 30%, #dddddd 0%, #666666 100%);
box-shadow: 0 0 5px 2px rgba(150, 150, 150, 0.5);
}
.orbital {
position: absolute;
top: 50%;
left: 50%;
border-radius: 50%;
border: 1px solid rgba(100, 200, 255, 0.3);
transform: translate(-50%, -50%) rotateX(70deg);
box-shadow: 0 0 10px 1px rgba(100, 200, 255, 0.2);
}
.orbital-container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transform-style: preserve-3d;
animation: rotate 20s linear infinite;
}
.electron {
position: absolute;
width: 12px;
height: 12px;
border-radius: 50%;
background: radial-gradient(circle at 30% 30%, #99ffff 0%, #00ccff 100%);
box-shadow: 0 0 15px 5px rgba(0, 200, 255, 0.8);
z-index: 5;
}
.electron-trail {
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
border: 1px solid transparent;
}
@keyframes rotate {
0% { transform: rotateY(0deg) rotateX(0deg); }
100% { transform: rotateY(360deg) rotateX(360deg); }
}
.controls {
position: absolute;
bottom: 20px;
display: flex;
gap: 10px;
z-index: 100;
}
button {
background-color: #4CAF50;
border: none;
color: white;
padding: 8px 16px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 14px;
cursor: pointer;
border-radius: 4px;
}
.quantum-effect {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: radial-gradient(circle, transparent 30%, rgba(0, 0, 0, 0.8) 100%);
opacity: 0.8;
pointer-events: none;
}
.energy-wave {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 10px;
height: 10px;
border-radius: 50%;
background-color: rgba(255, 255, 255, 0.8);
filter: blur(1px);
animation: wave 2s linear infinite;
}
@keyframes wave {
0% {
width: 10px;
height: 10px;
opacity: 0.8;
}
100% {
width: 500px;
height: 500px;
opacity: 0;
}
}
</style>
</head>
<body>
<div id="atom-container">
<div class="quantum-effect"></div>
<div class="orbital-container" id="orbital-container">
<!-- Orbitals and electrons will be added here by JS -->
</div>
<div class="nucleus">
<div class="nucleus-particles" id="nucleus-particles">
<!-- Protons and neutrons will be added here by JS -->
</div>
</div>
<div id="energy-waves"></div>
</div>
<div class="controls">
<button id="toggle-perspective">Toggle 3D Perspective</button>
<button id="change-element">Change Element</button>
<button id="quantum-jump">Quantum Jump</button>
</div>
<script>
// Configuration for different elements
const elements = [
{ name: 'Hydrogen', protons: 1, neutrons: 0, electrons: [1], color: '#00CCFF', size: 60 },
{ name: 'Helium', protons: 2, neutrons: 2, electrons: [2], color: '#FF9900', size: 65 },
{ name: 'Lithium', protons: 3, neutrons: 4, electrons: [2, 1], color: '#CC0000', size: 70 },
{ name: 'Carbon', protons: 6, neutrons: 6, electrons: [2, 4], color: '#808080', size: 75 },
{ name: 'Oxygen', protons: 8, neutrons: 8, electrons: [2, 6], color: '#FF0000', size: 80 },
{ name: 'Neon', protons: 10, neutrons: 10, electrons: [2, 8], color: '#FF00FF', size: 85 }
];
// State
let currentElement = 0;
let perspective3D = true;
let orbitalContainers = [];
// DOM elements
const orbitalContainer = document.getElementById('orbital-container');
const nucleusParticles = document.getElementById('nucleus-particles');
const energyWaves = document.getElementById('energy-waves');
// Initialize
function init() {
document.getElementById('toggle-perspective').addEventListener('click', togglePerspective);
document.getElementById('change-element').addEventListener('click', changeElement);
document.getElementById('quantum-jump').addEventListener('click', createQuantumJump);
renderAtom(elements[currentElement]);
// Add random energy waves
setInterval(createEnergyWave, 2000);
}
function renderAtom(element) {
// Clear previous atom
orbitalContainer.innerHTML = '';
nucleusParticles.innerHTML = '';
document.title = `${element.name} Atom Illusion`;
// Update nucleus size
const nucleus = document.querySelector('.nucleus');
nucleus.style.width = `${element.size}px`;
nucleus.style.height = `${element.size}px`;
// Create protons and neutrons
for (let i = 0; i < element.protons; i++) {
const proton = document.createElement('div');
proton.className = 'proton';
proton.style.left = `${Math.random() * (element.size - 20)}px`;
proton.style.top = `${Math.random() * (element.size - 20)}px`;
nucleusParticles.appendChild(proton);
}
for (let i = 0; i < element.neutrons; i++) {
const neutron = document.createElement('div');
neutron.className = 'neutron';
neutron.style.left = `${Math.random() * (element.size - 20)}px`;
neutron.style.top = `${Math.random() * (element.size - 20)}px`;
nucleusParticles.appendChild(neutron);
}
// Create electron shells
orbitalContainers = [];
for (let i = 0; i < element.electrons.length; i++) {
const shellContainer = document.createElement('div');
shellContainer.className = 'orbital-container';
shellContainer.style.animation = `rotate ${15 + i * 5}s linear infinite`;
const shellSize = 150 + (i * 80);
// Create orbital
const orbital = document.createElement('div');
orbital.className = 'orbital';
orbital.style.width = `${shellSize}px`;
orbital.style.height = `${shellSize}px`;
shellContainer.appendChild(orbital);
// Create electrons in this shell
for (let j = 0; j < element.electrons[i]; j++) {
const angle = (j / element.electrons[i]) * 2 * Math.PI;
const electron = document.createElement('div');
electron.className = 'electron';
// Calculate position on orbit
const radius = shellSize / 2;
const x = Math.cos(angle) * radius;
const y = Math.sin(angle) * radius;
electron.style.left = `${x + 250}px`;
electron.style.top = `${y + 250}px`;
// Create electron trail
const trail = document.createElement('div');
trail.className = 'electron-trail';
trail.style.width = `${shellSize}px`;
trail.style.height = `${shellSize}px`;
trail.style.left = `${250 - shellSize/2}px`;
trail.style.top = `${250 - shellSize/2}px`;
trail.style.borderColor = `rgba(0, 200, 255, ${0.2 - i * 0.05})`;
shellContainer.appendChild(trail);
shellContainer.appendChild(electron);
// Add animation
electron.style.animation = `orbit${i} ${8 - i}s linear infinite`;
const style = document.createElement('style');
style.textContent = `
@keyframes orbit${i} {
0% { transform: rotate(${angle}rad) translateX(${radius}px) rotate(-${angle}rad); }
100% { transform: rotate(${angle + 2 * Math.PI}rad) translateX(${radius}px) rotate(-${angle + 2 * Math.PI}rad); }
}
`;
document.head.appendChild(style);
}
orbitalContainer.appendChild(shellContainer);
orbitalContainers.push(shellContainer);
}
}
function togglePerspective() {
perspective3D = !perspective3D;
orbitalContainers.forEach((container, i) => {
if (perspective3D) {
container.style.transform = '';
} else {
container.style.transform = 'rotateX(0deg)';
}
const orbitals = container.querySelectorAll('.orbital');
orbitals.forEach(orbital => {
if (perspective3D) {
orbital.style.transform = 'translate(-50%, -50%) rotateX(70deg)';
} else {
orbital.style.transform = 'translate(-50%, -50%) rotateX(0deg)';
}
});
});
}
function changeElement() {
currentElement = (currentElement + 1) % elements.length;
renderAtom(elements[currentElement]);
// Create quantum effect
createQuantumJump();
}
function createQuantumJump() {
// Create a flash effect
const flash = document.createElement('div');
flash.style.position = 'absolute';
flash.style.top = '0';
flash.style.left = '0';
flash.style.width = '100%';
flash.style.height = '100%';
flash.style.backgroundColor = 'white';
flash.style.opacity = '0.8';
flash.style.zIndex = '100';
flash.style.transition = 'opacity 0.5s';
document.getElementById('atom-container').appendChild(flash);
// Create multiple energy waves
for (let i = 0; i < 5; i++) {
setTimeout(createEnergyWave, i * 100);
}
// Make electrons jump
const electrons = document.querySelectorAll('.electron');
electrons.forEach(electron => {
const originalLeft = electron.style.left;
const originalTop = electron.style.top;
// Jump to random position
electron.style.transition = 'all 0.3s ease-out';
electron.style.left = `${Math.random() * 400 + 50}px`;
electron.style.top = `${Math.random() * 400 + 50}px`;
// Return to original position
setTimeout(() => {
electron.style.left = originalLeft;
electron.style.top = originalTop;
}, 300);
});
// Fade out flash
setTimeout(() => {
flash.style.opacity = '0';
setTimeout(() => {
flash.remove();
}, 500);
}, 200);
}
function createEnergyWave() {
const wave = document.createElement('div');
wave.className = 'energy-wave';
energyWaves.appendChild(wave);
// Remove wave after animation completes
setTimeout(() => {
wave.remove();
}, 2000);
}
// Start
init();
</script>
</body>
</html>
0 seconds of 0 secondsVolume 90%
Press shift question mark to access a list of keyboard shortcuts
Keyboard Shortcuts
Shortcuts Open/Close/ or ?
Play/PauseSPACE
Increase Volume↑
Decrease Volume↓
Seek Forward→
Seek Backward←
Captions On/Offc
Fullscreen/Exit Fullscreenf
Mute/Unmutem
Decrease Caption Size-
Increase Caption Size+ or =
Seek %0-9
For further actions, you may consider blocking this person and/or reporting abuse
Top comments (0)