Hugging Face's logo

Spaces:
67oi678y
/
quantum-super-positioning
Running

App Files Community
quantum-super-positioning / index.html
67oi678y's picture
67oi678y
make the visualization of the superposition much easier to understand - Initial Deployment
abfeceb verified
raw
history blame contribute delete
30 kB
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Quantum Superposition Calculator</title>
 <script src="https://cdn.tailwindcss.com"></script>
 <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
 <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
 <script src="https://unpkg.com/feather-icons"></script>
 <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
 <style>
 .wave-animation {
 background: linear-gradient(-45deg, #3b82f6, #6366f1, #8b5cf6, #ec4899);
 background-size: 400% 400%;
 animation: gradient 15s ease infinite;
 }
 @keyframes gradient {
 0% { background-position: 0% 50%; }
 50% { background-position: 100% 50%; }
 100% { background-position: 0% 50%; }
 }
 .particle {
 position: absolute;
 border-radius: 50%;
 opacity: 0.6;
 animation: float 15s infinite linear;
 }
 @keyframes float {
 0% { transform: translate(0, 0) rotate(0deg); }
 25% { transform: translate(50px, 50px) rotate(90deg); }
 50% { transform: translate(100px, 0) rotate(180deg); }
 75% { transform: translate(50px, -50px) rotate(270deg); }
 100% { transform: translate(0, 0) rotate(360deg); }
 }
 </style>
</head>
<body class="bg-gray-50 min-h-screen">
 <div class="wave-animation py-12 px-4 sm:px-6 lg:px-8 text-white">
 <div class="max-w-4xl mx-auto text-center">
 <h1 class="text-4xl font-bold mb-4" data-aos="fade-down">Quantum Superposition Calculator</h1>
 <p class="text-xl mb-8" data-aos="fade-down" data-aos-delay="100">
 Calculate superposition probabilities for electrons and ions
 </p>
 </div>
 </div>
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
 <div class="bg-white rounded-xl shadow-lg overflow-hidden mb-8" data-aos="fade-up">
 <div class="p-6 sm:p-8">
 <h2 class="text-2xl font-bold text-gray-800 mb-6">Unit Converters</h2>
 <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
 <div class="bg-gray-50 p-4 rounded-lg">
 <h3 class="font-medium text-gray-700 mb-3">Energy Converter</h3>
 <div class="mb-3">
 <label class="block text-sm text-gray-600 mb-1">Joules to eV</label>
 <input type="number" id="joulesInput" class="w-full px-3 py-2 border border-gray-300 rounded-lg" placeholder="Joules">
 <button onclick="convertJoulesToEv()" class="mt-2 w-full bg-blue-100 text-blue-600 py-1 px-3 rounded-lg text-sm font-medium hover:bg-blue-200">Convert</button>
 <div class="mt-2 text-sm">eV: <span id="evOutput" class="font-medium">-</span></div>
 </div>
 </div>
 <div class="bg-gray-50 p-4 rounded-lg">
 <h3 class="font-medium text-gray-700 mb-3">Wavelength Converter</h3>
 <div class="mb-3">
 <label class="block text-sm text-gray-600 mb-1">nm to eV</label>
 <input type="number" id="nmInput" class="w-full px-3 py-2 border border-gray-300 rounded-lg" placeholder="Nanometers">
 <button onclick="convertNmToEv()" class="mt-2 w-full bg-purple-100 text-purple-600 py-1 px-3 rounded-lg text-sm font-medium hover:bg-purple-200">Convert</button>
 <div class="mt-2 text-sm">eV: <span id="evFromNmOutput" class="font-medium">-</span></div>
 </div>
 </div>
 <div class="bg-gray-50 p-4 rounded-lg">
 <h3 class="font-medium text-gray-700 mb-3">Length Converter</h3>
 <div class="mb-3">
 <label class="block text-sm text-gray-600 mb-1">Meters to nm</label>
 <input type="number" id="metersInput" class="w-full px-3 py-2 border border-gray-300 rounded-lg" placeholder="Meters">
 <button onclick="convertMetersToNm()" class="mt-2 w-full bg-green-100 text-green-600 py-1 px-3 rounded-lg text-sm font-medium hover:bg-green-200">Convert</button>
 <div class="mt-2 text-sm">nm: <span id="nmOutput" class="font-medium">-</span></div>
 </div>
 </div>
 </div>
 </div>
 </div>
<div class="bg-white rounded-xl shadow-lg overflow-hidden" data-aos="fade-up">
 <div class="p-6 sm:p-8">
 <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
 <div>
 <h2 class="text-2xl font-bold text-gray-800 mb-6">Input Parameters</h2>
<div class="mb-6">
 <label class="block text-gray-700 font-medium mb-2">Particle Type</label>
 <div class="flex space-x-4">
 <button id="electronBtn" class="px-4 py-2 bg-blue-600 text-white rounded-lg font-medium transition-all hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 active:bg-blue-800">
 Electron
 </button>
 <button id="ionBtn" class="px-4 py-2 bg-purple-600 text-white rounded-lg font-medium transition-all hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-opacity-50 active:bg-purple-800">
 Ion
 </button>
 </div>
 </div>
<div class="mb-6">
 <label for="energy" class="block text-gray-700 font-medium mb-2">Energy (eV)</label>
 <input type="number" id="energy" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="Enter energy in electron volts" min="0" step="0.01">
 </div>
<div class="mb-6">
 <label for="potential" class="block text-gray-700 font-medium mb-2">Potential Barrier (eV)</label>
 <input type="number" id="potential" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="Enter potential barrier" min="0" step="0.01">
 </div>
<div class="mb-6">
 <label for="barrierWidth" class="block text-gray-700 font-medium mb-2">Barrier Width (nm)</label>
 <input type="number" id="barrierWidth" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="Enter barrier width" min="0" step="0.1">
 </div>
<button id="calculateBtn" class="w-full bg-gradient-to-r from-blue-600 to-purple-600 text-white py-3 px-6 rounded-lg font-bold hover:from-blue-700 hover:to-purple-700 transition-all focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 mb-4">
 Calculate Superposition
 </button>
 <button id="viewSuperpositionBtn" class="w-full bg-gradient-to-r from-green-600 to-teal-600 text-white py-3 px-6 rounded-lg font-bold hover:from-green-700 hover:to-teal-700 transition-all focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-opacity-50">
 View Superposition
 </button>
 </div>
<div>
 <h2 class="text-2xl font-bold text-gray-800 mb-6">Results</h2>
 <div class="bg-gray-50 p-6 rounded-lg mb-6">
 <div class="flex justify-between items-center mb-4">
 <span class="font-medium text-gray-700">Transmission Probability:</span>
 <span id="transmissionProb" class="text-2xl font-bold text-blue-600">-</span>
 </div>
 <div class="flex justify-between items-center mb-4">
 <span class="font-medium text-gray-700">Reflection Probability:</span>
 <span id="reflectionProb" class="text-2xl font-bold text-purple-600">-</span>
 </div>
 <div class="flex justify-between items-center">
 <span class="font-medium text-gray-700">Superposition State:</span>
 <span id="superpositionState" class="text-lg font-medium text-gray-800">Not calculated</span>
 </div>
 </div>
<div class="h-64">
 <canvas id="probabilityChart"></canvas>
 </div>
 </div>
 </div>
 </div>
 </div>
<div class="mt-12 bg-white rounded-xl shadow-lg overflow-hidden" data-aos="fade-up" data-aos-delay="100">
 <div class="p-6 sm:p-8">
 <h2 class="text-2xl font-bold text-gray-800 mb-6">Quantum Superposition Visualization</h2>
 <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
 <div>
 <div class="relative h-64 bg-gray-900 rounded-lg overflow-hidden" id="quantumCanvas">
 <!-- Wave visualization will be generated here -->
 </div>
 <div class="mt-4 text-gray-600">
 <p class="font-medium">Wave Function Visualization:</p>
 <ul class="list-disc pl-5 mt-2 text-sm">
 <li>Blue wave shows incident particle probability</li>
 <li>Purple wave shows reflected probability</li>
 <li>Barrier shows potential energy wall</li>
 </ul>
 </div>
 </div>
 <div>
 <div class="relative h-64 bg-gray-900 rounded-lg overflow-hidden" id="probabilityCloud">
 <!-- Probability cloud will be generated here -->
 </div>
 <div class="mt-4 text-gray-600">
 <p class="font-medium">Probability Cloud:</p>
 <ul class="list-disc pl-5 mt-2 text-sm">
 <li>Density shows likelihood of particle position</li>
 <li>Bright areas = high probability</li>
 <li>Dark areas = low probability</li>
 </ul>
 </div>
 </div>
 </div>
 </div>
 </div>
<div class="mt-12 bg-white rounded-xl shadow-lg overflow-hidden" data-aos="fade-up" data-aos-delay="200">
 <div class="p-6 sm:p-8">
 <h2 class="text-2xl font-bold text-gray-800 mb-6">About Quantum Superposition</h2>
 <div class="prose max-w-none text-gray-700">
 <p>Quantum superposition is a fundamental principle of quantum mechanics that states a physical system—such as an electron in an atom—can exist in multiple states simultaneously until it is measured.</p>
 <p class="mt-4">For electrons and ions, superposition plays a crucial role in phenomena like:</p>
 <ul class="list-disc pl-6 mt-2">
 <li>Quantum tunneling through potential barriers</li>
 <li>Interference patterns in double-slit experiments</li>
 <li>Quantum computing operations</li>
 <li>Chemical bonding and molecular orbitals</li>
 </ul>
 <p class="mt-4">This calculator demonstrates how quantum particles can exist in superposition states when encountering potential barriers, with probabilities calculated using quantum mechanical principles.</p>
 </div>
 </div>
 </div>
 </div>
<footer class="bg-gray-800 text-white py-8">
 <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
 <p>Quantum Superposition Calculator &copy; 2023</p>
 <p class="mt-2 text-gray-400">A demonstration of quantum mechanical principles</p>
 </div>
 </footer>
<script>
 // Initialize AOS animations
 AOS.init({
 duration: 800,
 easing: 'ease-in-out',
 once: true
 });
 // Initialize feather icons
 feather.replace();
 // Chart initialization
 const ctx = document.getElementById('probabilityChart').getContext('2d');
 let probabilityChart = new Chart(ctx, {
 type: 'doughnut',
 data: {
 labels: ['Transmission', 'Reflection'],
 datasets: [{
 data: [0, 100],
 backgroundColor: [
 'rgba(59, 130, 246, 0.8)',
 'rgba(139, 92, 246, 0.8)'
 ],
 borderColor: [
 'rgba(59, 130, 246, 1)',
 'rgba(139, 92, 246, 1)'
 ],
 borderWidth: 1
 }]
 },
 options: {
 responsive: true,
 maintainAspectRatio: false,
 plugins: {
 legend: {
 position: 'bottom',
 },
 tooltip: {
 callbacks: {
 label: function(context) {
 return `${context.label}: ${context.raw}%`;
 }
 }
 }
 }
 }
 });
 // Particle type selection
 let particleType = 'electron';
 document.getElementById('electronBtn').addEventListener('click', function() {
 particleType = 'electron';
 this.classList.add('bg-blue-600', 'text-white');
 document.getElementById('ionBtn').classList.remove('bg-purple-600', 'text-white');
 document.getElementById('ionBtn').classList.add('bg-gray-200', 'text-gray-800');
 this.classList.remove('bg-gray-200', 'text-gray-800');
 });
 document.getElementById('ionBtn').addEventListener('click', function() {
 particleType = 'ion';
 this.classList.add('bg-purple-600', 'text-white');
 document.getElementById('electronBtn').classList.remove('bg-blue-600', 'text-white');
 document.getElementById('electronBtn').classList.add('bg-gray-200', 'text-gray-800');
 this.classList.remove('bg-gray-200', 'text-gray-800');
 });
 // Initialize with electron selected
 document.getElementById('electronBtn').click();
 // Calculate superposition probabilities
 document.getElementById('calculateBtn').addEventListener('click', function() {
 const energy = parseFloat(document.getElementById('energy').value);
 const potential = parseFloat(document.getElementById('potential').value);
 const barrierWidth = parseFloat(document.getElementById('barrierWidth').value);
 if (isNaN(energy) || isNaN(potential) || isNaN(barrierWidth)) {
 alert('Please enter valid numbers for all fields');
 return;
 }
 if (energy <= 0 || potential < 0 || barrierWidth <= 0) {
 alert('Values must be positive numbers');
 return;
 }
 // Calculate transmission probability (simplified quantum tunneling formula)
 let transmissionProb, reflectionProb;
if (energy > potential) {
 // For E > V0 (classically allowed)
 const k1 = Math.sqrt(2 * 9.10938356e-31 * energy * 1.60218e-19) / (1.0545718e-34);
 const k2 = Math.sqrt(2 * 9.10938356e-31 * (energy - potential) * 1.60218e-19) / (1.0545718e-34);
 const T = (4 * k1 * k2) / Math.pow(k1 + k2, 2);
 transmissionProb = T * 100;
 reflectionProb = (1 - T) * 100;
 } else {
 // For E < V0 (quantum tunneling)
 const k = Math.sqrt(2 * 9.10938356e-31 * (potential - energy) * 1.60218e-19) / (1.0545718e-34);
 const T = Math.exp(-2 * k * barrierWidth * 1e-9); // Convert nm to meters
 transmissionProb = T * 100;
 reflectionProb = (1 - T) * 100;
 }
 // Adjust for ion (heavier mass)
 if (particleType === 'ion') {
 transmissionProb *= 0.5; // Simplified adjustment for heavier mass
 reflectionProb = 100 - transmissionProb;
 }
 // Update results
 document.getElementById('transmissionProb').textContent = transmissionProb.toFixed(2) + '%';
 document.getElementById('reflectionProb').textContent = reflectionProb.toFixed(2) + '%';
if (transmissionProb > 50) {
 document.getElementById('superpositionState').textContent = 'Mostly transmitted';
 document.getElementById('superpositionState').className = 'text-lg font-medium text-blue-600';
 } else {
 document.getElementById('superpositionState').textContent = 'Mostly reflected';
 document.getElementById('superpositionState').className = 'text-lg font-medium text-purple-600';
 }
 // Update chart
 probabilityChart.data.datasets[0].data = [transmissionProb, reflectionProb];
 probabilityChart.update();
 // Create visualization
 createQuantumVisualization(transmissionProb, reflectionProb);
 });
 // Create quantum visualization
 function createQuantumVisualization(transmissionProb, reflectionProb) {
 const waveContainer = document.getElementById('quantumCanvas');
 const cloudContainer = document.getElementById('probabilityCloud');
 waveContainer.innerHTML = '';
 cloudContainer.innerHTML = '';
const width = waveContainer.clientWidth;
 const height = waveContainer.clientHeight;
 // Wave visualization
 const waveCanvas = document.createElement('canvas');
 waveCanvas.width = width;
 waveCanvas.height = height;
 waveContainer.appendChild(waveCanvas);
 const waveCtx = waveCanvas.getContext('2d');
 // Draw barrier
 waveCtx.fillStyle = 'rgba(255, 165, 0, 0.3)';
 waveCtx.fillRect(width * 0.45, 0, width * 0.1, height);
 waveCtx.strokeStyle = 'rgba(255, 165, 0, 0.8)';
 waveCtx.setLineDash([5, 5]);
 waveCtx.strokeRect(width * 0.45, 0, width * 0.1, height);
 waveCtx.setLineDash([]);
 // Draw incident wave (left of barrier)
 waveCtx.beginPath();
 waveCtx.moveTo(0, height/2);
 for (let x = 0; x < width * 0.45; x += width/100) {
 const y = height * 0.4 * Math.sin(x * 0.05) + height/2;
 waveCtx.lineTo(x, y);
 }
 waveCtx.strokeStyle = 'rgba(59, 130, 246, 0.8)';
 waveCtx.lineWidth = 2;
 waveCtx.stroke();
 // Draw reflected wave (left of barrier)
 waveCtx.beginPath();
 waveCtx.moveTo(0, height/2);
 for (let x = 0; x < width * 0.45; x += width/100) {
 const y = height * 0.3 * Math.sin(-x * 0.05) * (reflectionProb/100) + height/2;
 waveCtx.lineTo(x, y);
 }
 waveCtx.strokeStyle = 'rgba(139, 92, 246, 0.8)';
 waveCtx.lineWidth = 2;
 waveCtx.stroke();
 // Draw transmitted wave (right of barrier)
 waveCtx.beginPath();
 waveCtx.moveTo(width * 0.55, height/2);
 for (let x = width * 0.55; x < width; x += width/100) {
 const y = height * 0.3 * Math.sin(x * 0.05) * (transmissionProb/100) + height/2;
 waveCtx.lineTo(x, y);
 }
 waveCtx.strokeStyle = 'rgba(59, 130, 246, 0.8)';
 waveCtx.lineWidth = 2;
 waveCtx.stroke();
 // Add labels
 waveCtx.fillStyle = 'white';
 waveCtx.font = '12px Arial';
 waveCtx.fillText('Incident Wave', width * 0.1, height * 0.2);
 waveCtx.fillText(`Reflected (${reflectionProb.toFixed(1)}%)`, width * 0.1, height * 0.8);
 waveCtx.fillText(`Transmitted (${transmissionProb.toFixed(1)}%)`, width * 0.7, height * 0.2);
 // Probability cloud visualization
 const cloudCanvas = document.createElement('canvas');
 cloudCanvas.width = width;
 cloudCanvas.height = height;
 cloudContainer.appendChild(cloudCanvas);
 const cloudCtx = cloudCanvas.getContext('2d');
 // Draw barrier
 cloudCtx.fillStyle = 'rgba(255, 165, 0, 0.3)';
 cloudCtx.fillRect(width * 0.45, 0, width * 0.1, height);
 cloudCtx.strokeStyle = 'rgba(255, 165, 0, 0.8)';
 cloudCtx.setLineDash([5, 5]);
 cloudCtx.strokeRect(width * 0.45, 0, width * 0.1, height);
 cloudCtx.setLineDash([]);
 // Create probability density
 for (let x = 0; x < width; x++) {
 let probability;
 if (x < width * 0.45) {
 // Before barrier - incident + reflected
 probability = Math.pow(Math.sin(x * 0.05) + (reflectionProb/100) * Math.sin(-x * 0.05), 2);
 } else if (x < width * 0.55) {
 // Inside barrier - exponential decay
 probability = 0.1 * Math.exp(-Math.abs(x - width * 0.5) * 0.1);
 } else {
 // After barrier - transmitted
 probability = Math.pow((transmissionProb/100) * Math.sin(x * 0.05), 2);
 }
 const alpha = Math.min(0.8, probability * 2);
 cloudCtx.fillStyle = `rgba(59, 130, 246, ${alpha})`;
 for (let y = 0; y < height; y++) {
 if (Math.random() < probability) {
 cloudCtx.fillRect(x, y, 1, 1);
 }
 }
 }
 // Add labels
 cloudCtx.fillStyle = 'white';
 cloudCtx.font = '12px Arial';
 cloudCtx.fillText('High Probability', width * 0.1, height * 0.2);
 cloudCtx.fillText('Low Probability', width * 0.7, height * 0.8);
 }
function createParticle(x, y, color, container) {
 const particle = document.createElement('div');
 particle.className = 'particle';
const size = 3 + Math.random() * 4;
 particle.style.width = `${size}px`;
 particle.style.height = `${size}px`;
 particle.style.left = `${x}px`;
 particle.style.top = `${y}px`;
 particle.style.backgroundColor = color === 'blue' ? 'rgba(59, 130, 246, 0.8)' : 'rgba(139, 92, 246, 0.8)';
// Random animation variations
 const duration = 10 + Math.random() * 20;
 const delay = Math.random() * 10;
 particle.style.animation = `float ${duration}s ${delay}s infinite linear`;
container.appendChild(particle);
 }
 // View superposition button handler
 document.getElementById('viewSuperpositionBtn').addEventListener('click', function() {
 const energy = parseFloat(document.getElementById('energy').value);
 const potential = parseFloat(document.getElementById('potential').value);
 const barrierWidth = parseFloat(document.getElementById('barrierWidth').value);
 if (isNaN(energy) || isNaN(potential) || isNaN(barrierWidth)) {
 alert('Please calculate superposition first');
 return;
 }
 // Create probability density visualization
 const container = document.getElementById('quantumCanvas');
 container.innerHTML = '';
const width = container.clientWidth;
 const height = container.clientHeight;
 // Add barrier visualization
 const barrier = document.createElement('div');
 barrier.style.position = 'absolute';
 barrier.style.left = '45%';
 barrier.style.top = '0';
 barrier.style.width = '10%';
 barrier.style.height = '100%';
 barrier.style.backgroundColor = 'rgba(255, 165, 0, 0.3)';
 barrier.style.borderLeft = '2px dashed rgba(255, 165, 0, 0.8)';
 barrier.style.borderRight = '2px dashed rgba(255, 165, 0, 0.8)';
 container.appendChild(barrier);
 // Create probability density visualization
 const canvas = document.createElement('canvas');
 canvas.width = width;
 canvas.height = height;
 canvas.style.position = 'absolute';
 canvas.style.left = '0';
 canvas.style.top = '0';
 container.appendChild(canvas);
 const ctx = canvas.getContext('2d');
 // Draw probability density function
 const steps = 100;
 const amplitude = height * 0.4;
// Incident wave (left of barrier)
 ctx.beginPath();
 ctx.moveTo(0, height/2);
 for (let x = 0; x < width * 0.45; x += width/steps) {
 const y = amplitude * Math.sin(x * 0.05) + height/2;
 ctx.lineTo(x, y);
 }
 ctx.strokeStyle = 'rgba(59, 130, 246, 0.8)';
 ctx.lineWidth = 2;
 ctx.stroke();
 // Reflected wave (left of barrier)
 ctx.beginPath();
 ctx.moveTo(0, height/2);
 for (let x = 0; x < width * 0.45; x += width/steps) {
 const y = amplitude * 0.7 * Math.sin(-x * 0.05) * (reflectionProb/100) + height/2;
 ctx.lineTo(x, y);
 }
 ctx.strokeStyle = 'rgba(139, 92, 246, 0.8)';
 ctx.lineWidth = 2;
 ctx.stroke();
 // Transmitted wave (right of barrier)
 ctx.beginPath();
 ctx.moveTo(width * 0.55, height/2);
 for (let x = width * 0.55; x < width; x += width/steps) {
 const y = amplitude * 0.8 * Math.sin(x * 0.05) * (transmissionProb/100) + height/2;
 ctx.lineTo(x, y);
 }
 ctx.strokeStyle = 'rgba(59, 130, 246, 0.8)';
 ctx.lineWidth = 2;
 ctx.stroke();
 // Add labels
 const labels = [
 { text: 'Incident Wave', x: width * 0.2, y: height * 0.2, color: 'rgba(59, 130, 246, 0.8)' },
 { text: 'Reflected (' + reflectionProb.toFixed(1) + '%)', x: width * 0.2, y: height * 0.8, color: 'rgba(139, 92, 246, 0.8)' },
 { text: 'Transmitted (' + transmissionProb.toFixed(1) + '%)', x: width * 0.7, y: height * 0.2, color: 'rgba(59, 130, 246, 0.8)' }
 ];
 labels.forEach(label => {
 ctx.fillStyle = 'white';
 ctx.font = '14px Arial';
 ctx.fillText(label.text, label.x, label.y);
 });
 });
 // Initialize with empty visualizations
 document.getElementById('quantumCanvas').innerHTML = '';
 document.getElementById('probabilityCloud').innerHTML = '';
 // Unit conversion functions
 function convertJoulesToEv() {
 const joules = parseFloat(document.getElementById('joulesInput').value);
 if (isNaN(joules)) {
 alert('Please enter a valid number');
 return;
 }
 const ev = joules / 1.60218e-19;
 document.getElementById('evOutput').textContent = ev.toExponential(4);
 }
 function convertNmToEv() {
 const nm = parseFloat(document.getElementById('nmInput').value);
 if (isNaN(nm) || nm <= 0) {
 alert('Please enter a valid positive number');
 return;
 }
 const ev = (6.62607015e-34 * 299792458) / (nm * 1e-9 * 1.60218e-19);
 document.getElementById('evFromNmOutput').textContent = ev.toExponential(4);
 }
 function convertMetersToNm() {
 const meters = parseFloat(document.getElementById('metersInput').value);
 if (isNaN(meters)) {
 alert('Please enter a valid number');
 return;
 }
 const nm = meters * 1e9;
 document.getElementById('nmOutput').textContent = nm.toExponential(4);
 }
 </script>
</body>
</html>