|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Quantum Entropy Minimizer</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<script src="https://unpkg.com/feather-icons"></script> |
|
|
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> |
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script> |
|
|
<style> |
|
|
body { |
|
|
background: linear-gradient(135deg, #0f172a, #1e293b); |
|
|
color: #f1f5f9; |
|
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; |
|
|
} |
|
|
.hilbert-space { |
|
|
background: rgba(15, 23, 42, 0.7); |
|
|
border: 1px solid #334155; |
|
|
box-shadow: 0 0 20px rgba(99, 102, 241, 0.2); |
|
|
} |
|
|
.prime-state { |
|
|
transition: all 0.5s ease; |
|
|
} |
|
|
.active-state { |
|
|
box-shadow: 0 0 15px #818cf8; |
|
|
transform: scale(1.1); |
|
|
} |
|
|
.resonance-path { |
|
|
stroke-dasharray: 1000; |
|
|
stroke-dashoffset: 1000; |
|
|
} |
|
|
.entropy-graph { |
|
|
background: rgba(30, 41, 59, 0.8); |
|
|
} |
|
|
.control-panel { |
|
|
background: rgba(15, 23, 42, 0.9); |
|
|
backdrop-filter: blur(10px); |
|
|
} |
|
|
.algorithm-step { |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
.current-step { |
|
|
background: rgba(99, 102, 241, 0.2); |
|
|
border-left: 3px solid #818cf8; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="min-h-screen"> |
|
|
|
|
|
<header class="py-6 px-4 sm:px-6 lg:px-8 border-b border-slate-700"> |
|
|
<div class="max-w-7xl mx-auto flex flex-col md:flex-row justify-between items-center"> |
|
|
<div> |
|
|
<h1 class="text-3xl font-bold text-indigo-300">Quantum Entropy Minimizer</h1> |
|
|
<p class="text-slate-400 mt-1">NP-Complete Problem Solver</p> |
|
|
</div> |
|
|
<div class="mt-4 md:mt-0 flex items-center space-x-4"> |
|
|
<div class="bg-indigo-900/30 px-4 py-2 rounded-lg"> |
|
|
<span class="text-indigo-300 font-mono">P = NP</span> |
|
|
</div> |
|
|
<div class="text-sm text-slate-400"> |
|
|
Sebastian Schepis, 2025 |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
|
|
|
<main class="max-w-7xl mx-auto py-8 px-4 sm:px-6 lg:px-8"> |
|
|
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8"> |
|
|
|
|
|
<div class="lg:col-span-2"> |
|
|
<div class="hilbert-space rounded-xl p-6"> |
|
|
<div class="flex justify-between items-center mb-6"> |
|
|
<h2 class="text-xl font-semibold text-indigo-200">Quantum State Space</h2> |
|
|
<div class="flex space-x-2"> |
|
|
<button id="resetBtn" class="px-3 py-1 bg-slate-700 hover:bg-slate-600 rounded-lg text-sm transition-colors"> |
|
|
Reset |
|
|
</button> |
|
|
<button id="startBtn" class="px-3 py-1 bg-indigo-600 hover:bg-indigo-500 rounded-lg text-sm transition-colors"> |
|
|
Start Simulation |
|
|
</button> |
|
|
<button id="stepBtn" class="px-3 py-1 bg-emerald-600 hover:bg-emerald-500 rounded-lg text-sm transition-colors"> |
|
|
Step Forward |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="relative h-96 rounded-lg border border-slate-600 bg-slate-900/50 overflow-hidden"> |
|
|
<div id="quantumCanvas" class="w-full h-full relative"> |
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="absolute inset-0 opacity-20 pointer-events-none"> |
|
|
<div class="quantum-field"></div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<svg class="absolute top-0 left-0 w-full h-full pointer-events-none"> |
|
|
<defs> |
|
|
<linearGradient id="quantumGradient" x1="0%" y1="0%" x2="100%" y2="100%"> |
|
|
<stop offset="0%" stop-color="#818cf8" /> |
|
|
<stop offset="100%" stop-color="#4ade80" /> |
|
|
</linearGradient> |
|
|
</defs> |
|
|
</svg> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="mt-6 grid grid-cols-1 md:grid-cols-4 gap-4"> |
|
|
<div class="bg-slate-800/50 p-4 rounded-lg"> |
|
|
<div class="text-sm text-slate-400">Quantum State</div> |
|
|
<div id="currentState" class="text-lg font-mono text-indigo-300">|Ψ₀⟩</div> |
|
|
</div> |
|
|
<div class="bg-slate-800/50 p-4 rounded-lg"> |
|
|
<div class="text-sm text-slate-400">Entropy</div> |
|
|
<div id="entropyValue" class="text-lg font-mono text-green-300">S₀</div> |
|
|
</div> |
|
|
<div class="bg-slate-800/50 p-4 rounded-lg"> |
|
|
<div class="text-sm text-slate-400">Energy Level</div> |
|
|
<div id="energyValue" class="text-lg font-mono text-yellow-300">E₀</div> |
|
|
</div> |
|
|
<div class="bg-slate-800/50 p-4 rounded-lg"> |
|
|
<div class="text-sm text-slate-400">Iteration</div> |
|
|
<div id="timeStep" class="text-lg font-mono text-cyan-300">t = 0</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="hilbert-space rounded-xl p-6 mt-8"> |
|
|
<h2 class="text-xl font-semibold text-indigo-200 mb-4">Convergence Metrics</h2> |
|
|
<div class="entropy-graph rounded-lg p-4 h-64"> |
|
|
<canvas id="metricsChart" width="800" height="200"></canvas> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="control-panel rounded-xl p-6 h-fit"> |
|
|
<h2 class="text-xl font-semibold text-indigo-200 mb-4">Algorithm Steps</h2> |
|
|
|
|
|
<div class="space-y-4"> |
|
|
<div class="algorithm-step p-4 rounded-lg current-step" data-step="0"> |
|
|
<div class="flex items-start"> |
|
|
<div class="flex-shrink-0 h-6 w-6 rounded-full bg-indigo-500 flex items-center justify-center text-xs font-bold">1</div> |
|
|
<div class="ml-3"> |
|
|
<h3 class="font-medium text-white">Quantum State Initialization</h3> |
|
|
<p class="mt-1 text-sm text-slate-400">Initialize quantum system with superposition of all possible solutions</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="algorithm-step p-4 rounded-lg" data-step="1"> |
|
|
<div class="flex items-start"> |
|
|
<div class="flex-shrink-0 h-6 w-6 rounded-full bg-slate-700 flex items-center justify-center text-xs font-bold">2</div> |
|
|
<div class="ml-3"> |
|
|
<h3 class="font-medium text-white">Problem Encoding</h3> |
|
|
<p class="mt-1 text-sm text-slate-400">Map NP-complete problem constraints to quantum operators</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="algorithm-step p-4 rounded-lg" data-step="2"> |
|
|
<div class="flex items-start"> |
|
|
<div class="flex-shrink-0 h-6 w-6 rounded-full bg-slate-700 flex items-center justify-center text-xs font-bold">3</div> |
|
|
<div class="ml-3"> |
|
|
<h3 class="font-medium text-white">Energy Landscape</h3> |
|
|
<p class="mt-1 text-sm text-slate-400">Define energy function that minimizes for valid solutions</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="algorithm-step p-4 rounded-lg" data-step="3"> |
|
|
<div class="flex items-start"> |
|
|
<div class="flex-shrink-0 h-6 w-6 rounded-full bg-slate-700 flex items-center justify-center text-xs font-bold">4</div> |
|
|
<div class="ml-3"> |
|
|
<h3 class="font-medium text-white">Quantum Evolution</h3> |
|
|
<p class="mt-1 text-sm text-slate-400">Apply quantum gates and entanglement operations</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="algorithm-step p-4 rounded-lg" data-step="4"> |
|
|
<div class="flex items-start"> |
|
|
<div class="flex-shrink-0 h-6 w-6 rounded-full bg-slate-700 flex items-center justify-center text-xs font-bold">5</div> |
|
|
<div class="ml-3"> |
|
|
<h3 class="font-medium text-white">Entropy Collapse</h3> |
|
|
<p class="mt-1 text-sm text-slate-400">System entropy decreases as solution emerges</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="algorithm-step p-4 rounded-lg" data-step="5"> |
|
|
<div class="flex items-start"> |
|
|
<div class="flex-shrink-0 h-6 w-6 rounded-full bg-slate-700 flex items-center justify-center text-xs font-bold">6</div> |
|
|
<div class="ml-3"> |
|
|
<h3 class="font-medium text-white">Solution Extraction</h3> |
|
|
<p class="mt-1 text-sm text-slate-400">Measure collapsed state to obtain optimal solution</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="mt-8"> |
|
|
<h3 class="font-medium text-white mb-3">Quantum Parameters</h3> |
|
|
<div class="space-y-4"> |
|
|
<div> |
|
|
<label class="block text-sm text-slate-400 mb-1">Qubits (n)</label> |
|
|
<input type="range" min="3" max="12" value="6" id="qubitCount" class="w-full"> |
|
|
<div class="text-right text-sm text-slate-400" id="qubitCountValue">6</div> |
|
|
</div> |
|
|
<div> |
|
|
<label class="block text-sm text-slate-400 mb-1">Problem Complexity</label> |
|
|
<input type="range" min="1" max="10" value="5" id="complexity" class="w-full"> |
|
|
<div class="text-right text-sm text-slate-400" id="complexityValue">5</div> |
|
|
</div> |
|
|
<div> |
|
|
<label class="block text-sm text-slate-400 mb-1">Entropy Decay (γ)</label> |
|
|
<input type="range" min="0.1" max="2" step="0.1" value="0.8" id="entropyDecay" class="w-full"> |
|
|
<div class="text-right text-sm text-slate-400" id="entropyDecayValue">0.8</div> |
|
|
</div> |
|
|
<div> |
|
|
<label class="block text-sm text-slate-400 mb-1">Quantum Coherence</label> |
|
|
<input type="range" min="0.1" max="1" step="0.1" value="0.7" id="coherence" class="w-full"> |
|
|
<div class="text-right text-sm text-slate-400" id="coherenceValue">0.7</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="mt-12 hilbert-space rounded-xl p-8"> |
|
|
<h2 class="text-2xl font-bold text-indigo-200 mb-6">Quantum Entropy Minimization</h2> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-8"> |
|
|
<div> |
|
|
<h3 class="text-lg font-semibold text-white mb-3">Quantum Computing Approach</h3> |
|
|
<p class="text-slate-300 mb-4"> |
|
|
Our quantum entropy minimization algorithm leverages superposition and entanglement to explore |
|
|
solution spaces exponentially faster than classical approaches. By encoding NP-complete problems |
|
|
as quantum states, we can efficiently navigate the solution landscape. |
|
|
</p> |
|
|
<p class="text-slate-300"> |
|
|
The system evolves through quantum gates that progressively reduce entropy while preserving |
|
|
valid solution amplitudes, ultimately collapsing to the optimal configuration. |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<h3 class="text-lg font-semibold text-white mb-3">Algorithm Advantages</h3> |
|
|
<ul class="space-y-2 text-slate-300"> |
|
|
<li class="flex items-start"> |
|
|
<i data-feather="zap" class="text-yellow-400 mt-1 mr-2 flex-shrink-0"></i> |
|
|
<span>Exponential speedup over classical computation</span> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<i data-feather="activity" class="text-green-400 mt-1 mr-2 flex-shrink-0"></i> |
|
|
<span>Natural avoidance of local minima through quantum tunneling</span> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<i data-feather="trending-down" class="text-blue-400 mt-1 mr-2 flex-shrink-0"></i> |
|
|
<span>Guaranteed entropy reduction in polynomial time</span> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<i data-feather="cpu" class="text-purple-400 mt-1 mr-2 flex-shrink-0"></i> |
|
|
<span>Scalable to large-scale optimization problems</span> |
|
|
</li> |
|
|
</ul> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</main> |
|
|
|
|
|
<script> |
|
|
|
|
|
feather.replace(); |
|
|
|
|
|
|
|
|
const quantumCanvas = document.getElementById('quantumCanvas'); |
|
|
const metricsChart = document.getElementById('metricsChart').getContext('2d'); |
|
|
const currentStateEl = document.getElementById('currentState'); |
|
|
const entropyValueEl = document.getElementById('entropyValue'); |
|
|
const energyValueEl = document.getElementById('energyValue'); |
|
|
const timeStepEl = document.getElementById('timeStep'); |
|
|
const startBtn = document.getElementById('startBtn'); |
|
|
const resetBtn = document.getElementById('resetBtn'); |
|
|
const stepBtn = document.getElementById('stepBtn'); |
|
|
const qubitCount = document.getElementById('qubitCount'); |
|
|
const complexity = document.getElementById('complexity'); |
|
|
const entropyDecay = document.getElementById('entropyDecay'); |
|
|
const coherence = document.getElementById('coherence'); |
|
|
const qubitCountValue = document.getElementById('qubitCountValue'); |
|
|
const complexityValue = document.getElementById('complexityValue'); |
|
|
const entropyDecayValue = document.getElementById('entropyDecayValue'); |
|
|
const coherenceValue = document.getElementById('coherenceValue'); |
|
|
const algorithmSteps = document.querySelectorAll('.algorithm-step'); |
|
|
|
|
|
|
|
|
let simulationRunning = false; |
|
|
let currentTime = 0; |
|
|
let entropyData = []; |
|
|
let energyData = []; |
|
|
let currentState = '|Ψ₀⟩'; |
|
|
let quantumStates = []; |
|
|
let animationTimeline = null; |
|
|
let stepMode = false; |
|
|
|
|
|
|
|
|
qubitCount.addEventListener('input', () => { |
|
|
qubitCountValue.textContent = qubitCount.value; |
|
|
initVisualization(); |
|
|
}); |
|
|
|
|
|
complexity.addEventListener('input', () => { |
|
|
complexityValue.textContent = complexity.value; |
|
|
}); |
|
|
|
|
|
entropyDecay.addEventListener('input', () => { |
|
|
entropyDecayValue.textContent = entropyDecay.value; |
|
|
}); |
|
|
|
|
|
coherence.addEventListener('input', () => { |
|
|
coherenceValue.textContent = coherence.value; |
|
|
}); |
|
|
|
|
|
|
|
|
function initVisualization() { |
|
|
quantumCanvas.innerHTML = ''; |
|
|
quantumStates = []; |
|
|
|
|
|
const n = parseInt(qubitCount.value); |
|
|
const positions = generateQuantumPositions(n); |
|
|
|
|
|
for (let i = 0; i < n; i++) { |
|
|
const state = document.createElement('div'); |
|
|
state.className = 'quantum-state absolute w-20 h-20 rounded-lg flex items-center justify-center text-white font-bold border-2 border-indigo-400 bg-gradient-to-br from-indigo-500 to-purple-600'; |
|
|
state.style.left = `${positions[i].x}%`; |
|
|
state.style.top = `${positions[i].y}%`; |
|
|
state.style.transform = 'rotate(45deg)'; |
|
|
state.innerHTML = `<div class="transform -rotate-45">|q<sub>${i}</sub>⟩</div>`; |
|
|
state.dataset.index = i; |
|
|
|
|
|
quantumCanvas.appendChild(state); |
|
|
quantumStates.push(state); |
|
|
} |
|
|
|
|
|
|
|
|
currentStateEl.textContent = '|Ψ₀⟩'; |
|
|
entropyValueEl.textContent = 'S₀'; |
|
|
energyValueEl.textContent = 'E₀'; |
|
|
timeStepEl.textContent = 't = 0'; |
|
|
entropyData = [{time: 0, entropy: 100}]; |
|
|
energyData = [{time: 0, energy: 85}]; |
|
|
drawMetricsChart(); |
|
|
} |
|
|
|
|
|
|
|
|
function generateQuantumPositions(n) { |
|
|
const positions = []; |
|
|
const centerX = 50; |
|
|
const centerY = 50; |
|
|
const radius = 35; |
|
|
|
|
|
for (let i = 0; i < n; i++) { |
|
|
const angle = (i / n) * 2 * Math.PI; |
|
|
positions.push({ |
|
|
x: centerX + radius * Math.cos(angle), |
|
|
y: centerY + radius * Math.sin(angle) |
|
|
}); |
|
|
} |
|
|
return positions; |
|
|
} |
|
|
|
|
|
|
|
|
function drawMetricsChart() { |
|
|
metricsChart.clearRect(0, 0, metricsChart.canvas.width, metricsChart.canvas.height); |
|
|
|
|
|
if (entropyData.length === 0) return; |
|
|
|
|
|
|
|
|
metricsChart.strokeStyle = '#334155'; |
|
|
metricsChart.lineWidth = 1; |
|
|
|
|
|
|
|
|
for (let i = 0; i <= 10; i++) { |
|
|
const x = (i / 10) * metricsChart.canvas.width; |
|
|
metricsChart.beginPath(); |
|
|
metricsChart.moveTo(x, 0); |
|
|
metricsChart.lineTo(x, metricsChart.canvas.height); |
|
|
metricsChart.stroke(); |
|
|
} |
|
|
|
|
|
|
|
|
for (let i = 0; i <= 5; i++) { |
|
|
const y = (i / 5) * metricsChart.canvas.height; |
|
|
metricsChart.beginPath(); |
|
|
metricsChart.moveTo(0, y); |
|
|
metricsChart.lineTo(metricsChart.canvas.width, y); |
|
|
metricsChart.stroke(); |
|
|
} |
|
|
|
|
|
|
|
|
metricsChart.strokeStyle = '#4ade80'; |
|
|
metricsChart.lineWidth = 3; |
|
|
metricsChart.beginPath(); |
|
|
|
|
|
for (let i = 0; i < entropyData.length; i++) { |
|
|
const x = (entropyData[i].time / 100) * metricsChart.canvas.width; |
|
|
const y = metricsChart.canvas.height - (entropyData[i].entropy / 100) * metricsChart.canvas.height; |
|
|
|
|
|
if (i === 0) { |
|
|
metricsChart.moveTo(x, y); |
|
|
} else { |
|
|
metricsChart.lineTo(x, y); |
|
|
} |
|
|
} |
|
|
metricsChart.stroke(); |
|
|
|
|
|
|
|
|
metricsChart.strokeStyle = '#f59e0b'; |
|
|
metricsChart.lineWidth = 3; |
|
|
metricsChart.beginPath(); |
|
|
|
|
|
for (let i = 0; i < energyData.length; i++) { |
|
|
const x = (energyData[i].time / 100) * metricsChart.canvas.width; |
|
|
const y = metricsChart.canvas.height - (energyData[i].energy / 100) * metricsChart.canvas.height; |
|
|
|
|
|
if (i === 0) { |
|
|
metricsChart.moveTo(x, y); |
|
|
} else { |
|
|
metricsChart.lineTo(x, y); |
|
|
} |
|
|
} |
|
|
metricsChart.stroke(); |
|
|
} |
|
|
|
|
|
|
|
|
function animateSimulation() { |
|
|
if (!simulationRunning && !stepMode) return; |
|
|
|
|
|
currentTime++; |
|
|
timeStepEl.textContent = `t = ${currentTime}`; |
|
|
|
|
|
|
|
|
const newEntropy = Math.max(0, 100 - currentTime * 4); |
|
|
const newEnergy = Math.max(5, 85 - currentTime * 3.2); |
|
|
entropyValueEl.textContent = `S = ${newEntropy.toFixed(1)}`; |
|
|
energyValueEl.textContent = `E = ${newEnergy.toFixed(1)}`; |
|
|
entropyData.push({time: currentTime, entropy: newEntropy}); |
|
|
energyData.push({time: currentTime, energy: newEnergy}); |
|
|
drawMetricsChart(); |
|
|
|
|
|
|
|
|
quantumStates.forEach((state, index) => { |
|
|
const phase = (currentTime + index) % 6; |
|
|
|
|
|
|
|
|
anime({ |
|
|
targets: state, |
|
|
scale: [1, 1.15, 1], |
|
|
rotate: [45, 50, 45], |
|
|
backgroundColor: [ |
|
|
state.style.backgroundColor, |
|
|
`rgba(139, 92, 246, 0.9)`, |
|
|
state.style.backgroundColor |
|
|
], |
|
|
duration: 1200, |
|
|
easing: 'easeInOutQuad' |
|
|
}); |
|
|
|
|
|
|
|
|
state.classList.add('active-state'); |
|
|
setTimeout(() => { |
|
|
state.classList.remove('active-state'); |
|
|
}, 800); |
|
|
}); |
|
|
|
|
|
|
|
|
updateEntanglementLines(); |
|
|
|
|
|
|
|
|
if (currentTime < 8) { |
|
|
currentStateEl.textContent = '|Ψ(t)⟩'; |
|
|
} else if (currentTime < 18) { |
|
|
currentStateEl.textContent = '|Ψ*⟩'; |
|
|
algorithmSteps.forEach(step => step.classList.remove('current-step')); |
|
|
algorithmSteps[5].classList.add('current-step'); |
|
|
} |
|
|
|
|
|
|
|
|
if (currentTime >= 3 && currentTime < 8) { |
|
|
algorithmSteps.forEach(step => step.classList.remove('current-step')); |
|
|
algorithmSteps[3].classList.add('current-step'); |
|
|
} else if (currentTime >= 8 && currentTime < 15) { |
|
|
algorithmSteps.forEach(step => step.classList.remove('current-step')); |
|
|
algorithmSteps[4].classList.add('current-step'); |
|
|
} |
|
|
|
|
|
|
|
|
if (currentTime < 25 && !stepMode) { |
|
|
setTimeout(animateSimulation, 700); |
|
|
} else { |
|
|
if (!stepMode) { |
|
|
simulationRunning = false; |
|
|
startBtn.textContent = 'Restart Simulation'; |
|
|
} else { |
|
|
stepMode = false; |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
function updateEntanglementLines() { |
|
|
|
|
|
const existingLines = quantumCanvas.querySelectorAll('.entanglement-line'); |
|
|
existingLines.forEach(line => line.remove()); |
|
|
|
|
|
|
|
|
for (let i = 0; i < quantumStates.length - 1; i++) { |
|
|
const line = document.createElement('div'); |
|
|
line.className = 'entanglement-line absolute h-0.5 bg-gradient-to-r from-indigo-400 to-purple-400 opacity-60'; |
|
|
|
|
|
const rect1 = quantumStates[i].getBoundingClientRect(); |
|
|
const rect2 = quantumStates[i + 1].getBoundingClientRect(); |
|
|
const containerRect = quantumCanvas.getBoundingClientRect(); |
|
|
|
|
|
const x1 = rect1.left + rect1.width/2 - containerRect.left; |
|
|
const y1 = rect1.top + rect1.height/2 - containerRect.top; |
|
|
const x2 = rect2.left + rect2.width/2 - containerRect.left; |
|
|
const y2 = rect2.top + rect2.height/2 - containerRect.top; |
|
|
|
|
|
const length = Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2)); |
|
|
const angle = Math.atan2(y2 - y1, x2 - x1) * 180 / Math.PI; |
|
|
|
|
|
line.style.width = `${length}px`; |
|
|
line.style.left = `${x1}px`; |
|
|
line.style.top = `${y1}px`; |
|
|
line.style.transform = `rotate(${angle}deg)`; |
|
|
line.style.transformOrigin = '0 0'; |
|
|
|
|
|
quantumCanvas.appendChild(line); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
startBtn.addEventListener('click', () => { |
|
|
if (!simulationRunning) { |
|
|
simulationRunning = true; |
|
|
stepMode = false; |
|
|
startBtn.textContent = 'Running...'; |
|
|
animateSimulation(); |
|
|
} |
|
|
}); |
|
|
|
|
|
stepBtn.addEventListener('click', () => { |
|
|
stepMode = true; |
|
|
animateSimulation(); |
|
|
}); |
|
|
|
|
|
resetBtn.addEventListener('click', () => { |
|
|
simulationRunning = false; |
|
|
stepMode = false; |
|
|
currentTime = 0; |
|
|
startBtn.textContent = 'Start Simulation'; |
|
|
initVisualization(); |
|
|
|
|
|
|
|
|
algorithmSteps.forEach(step => step.classList.remove('current-step')); |
|
|
algorithmSteps[0].classList.add('current-step'); |
|
|
}); |
|
|
|
|
|
|
|
|
window.addEventListener('load', () => { |
|
|
initVisualization(); |
|
|
|
|
|
|
|
|
anime({ |
|
|
targets: '.quantum-state', |
|
|
scale: [0, 1], |
|
|
opacity: [0, 1], |
|
|
rotate: [0, 45], |
|
|
delay: anime.stagger(150), |
|
|
duration: 1200, |
|
|
easing: 'easeOutElastic' |
|
|
}); |
|
|
}); |
|
|
</script> |
|
|
<style> |
|
|
.quantum-field { |
|
|
background: radial-gradient(circle at 50% 50%, rgba(129, 140, 248, 0.1) 0%, transparent 50%), |
|
|
radial-gradient(circle at 20% 80%, rgba(74, 222, 128, 0.05) 0%, transparent 50%), |
|
|
radial-gradient(circle at 80% 20%, rgba(245, 158, 11, 0.05) 0%, transparent 50%); |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
animation: fieldPulse 8s ease-in-out infinite; |
|
|
} |
|
|
|
|
|
@keyframes fieldPulse { |
|
|
0%, 100% { opacity: 0.3; } |
|
|
50% { opacity: 0.6; } |
|
|
} |
|
|
|
|
|
.entanglement-line { |
|
|
animation: entanglementPulse 2s ease-in-out infinite; |
|
|
} |
|
|
|
|
|
@keyframes entanglementPulse { |
|
|
0%, 100% { opacity: 0.3; } |
|
|
50% { opacity: 0.8; } |
|
|
} |
|
|
|
|
|
.quantum-state { |
|
|
transition: all 0.5s ease; |
|
|
box-shadow: 0 0 20px rgba(129, 140, 248, 0.3); |
|
|
} |
|
|
|
|
|
.quantum-state.active-state { |
|
|
box-shadow: 0 0 30px rgba(139, 92, 246, 0.8); |
|
|
animation: quantumGlow 1s ease-in-out; |
|
|
} |
|
|
|
|
|
@keyframes quantumGlow { |
|
|
0%, 100% { box-shadow: 0 0 20px rgba(129, 140, 248, 0.3); } |
|
|
50% { box-shadow: 0 0 40px rgba(139, 92, 246, 0.8); } |
|
|
} |
|
|
</style> |
|
|
</body> |
|
|
</html> |
|
|
|
