Quantum Entropy-CP Dynamics Simulation #200
Description
import React, { useState, useEffect } from ‘react’;
import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from ‘recharts’;
import { Play, Pause, RotateCcw, Settings } from ‘lucide-react’;
const QuantumEntropySimulation = () => {
const [isRunning, setIsRunning] = useState(false);
const [currentTime, setCurrentTime] = useState(0);
const [simulationData, setSimulationData] = useState([]);
const [parameters, setParameters] = useState({
S: 1.5,
D: 3,
N: 7146,
K0: 0.1,
omega_r0: 2 * Math.PI * 1.0,
theta_0: Math.PI / 4,
lambda_base: 0.1,
eta_base: 0.05,
kappa_base: 10.0,
R0: 1.0,
mu: 0.05,
coupling_strength: 0.01
});
const [showSettings, setShowSettings] = useState(false);
// Physics functions
const Phi = (S, D) => (S + D) / 2.0;
const tau_s = (omega_r, S, D) => (1 / omega_r) * Phi(S, D);
const mass = (S, D, K, tau) => S * Math.pow(D, 1) * Math.pow(K, 1) * Math.pow(tau, 1);
const mod_lambda = (m, N, lambda_base) => (lambda_base / (1 + 0.0001 * N)) * (1 + 0.5 / m);
const mod_eta = (m, N, eta_base) => eta_base * (1 + 0.001 * N) * (1 + 0.3 * m);
const mod_kappa = (m, N, kappa_base) => (kappa_base * (1 + 0.0005 * N)) / (1 + 0.2 * m);
const R = (t, R0, mu) => R0 * Math.exp(-mu * t);
// Runge-Kutta 4th order integration
const rungeKutta4 = (f, t, y, h) => {
const k1 = f(t, y).map(val => h * val);
const k2 = f(t + h/2, y.map((yi, i) => yi + k1[i]/2)).map(val => h * val);
const k3 = f(t + h/2, y.map((yi, i) => yi + k2[i]/2)).map(val => h * val);
const k4 = f(t + h, y.map((yi, i) => yi + k3[i])).map(val => h * val);
return y.map((yi, i) => yi + (k1[i] + 2*k2[i] + 2*k3[i] + k4[i])/6);
};
// ODE system
const odes = (t, y) => {
const [E, omega_r] = y;
const tau = tau_s(omega_r, parameters.S, parameters.D);
const m = mass(parameters.S, parameters.D, parameters.K0, tau);
const lam = mod_lambda(m, parameters.N, parameters.lambda_base);
const eta = mod_eta(m, parameters.N, parameters.eta_base);
const reservoir = R(t, parameters.R0, parameters.mu);
const dE_dt = -lam * E + eta * reservoir;
const domega_dt = -parameters.coupling_strength * E * omega_r;
return [dE_dt, domega_dt];
};
// Run simulation step
const simulationStep = () => {
if (!isRunning) return;
const dt = 0.1;
const maxTime = 50;
if (currentTime >= maxTime) {
setIsRunning(false);
return;
}
// Current state
const currentState = simulationData.length > 0 ?
[simulationData[simulationData.length - 1].E, simulationData[simulationData.length - 1].omega] :
[1.0, parameters.omega_r0];
// Integrate one step
const newState = rungeKutta4(odes, currentTime, currentState, dt);
const [E, omega_r] = newState;
// Calculate derived quantities
const tau = tau_s(omega_r, parameters.S, parameters.D);
const m = mass(parameters.S, parameters.D, parameters.K0, tau);
const kappa = mod_kappa(m, parameters.N, parameters.kappa_base);
const theta_eff = parameters.theta_0 * Math.exp(-kappa * E);
const reservoir = R(currentTime, parameters.R0, parameters.mu);
const newDataPoint = {
time: currentTime,
E: E,
omega: omega_r,
frequency: omega_r / (2 * Math.PI),
tau: tau,
mass: m,
kappa: kappa,
theta_eff: theta_eff,
reservoir: reservoir,
cp_violation: Math.abs(Math.sin(theta_eff))
};
setSimulationData(prev => [...prev, newDataPoint]);
setCurrentTime(prev => prev + dt);
};
// Animation loop
useEffect(() => {
let interval;
if (isRunning) {
interval = setInterval(simulationStep, 50);
}
return () => clearInterval(interval);
}, [isRunning, currentTime, simulationData]);
const resetSimulation = () => {
setIsRunning(false);
setCurrentTime(0);
setSimulationData([]);
};
const toggleSimulation = () => {
setIsRunning(!isRunning);
};
const handleParameterChange = (param, value) => {
setParameters(prev => ({
…prev,
[param]: parseFloat(value)
}));
};
const latestData = simulationData[simulationData.length - 1];
return (
Quantum Entropy-CP Dynamics Simulation
Real-time visualization of quantum entropy evolution and CP violation dynamics
{/* Control Panel */}
<div className="mb-6 flex flex-wrap gap-4 justify-center items-center bg-gray-800 p-4 rounded-lg">
<button
onClick={toggleSimulation}
className={`px-6 py-2 rounded-lg font-semibold flex items-center gap-2 transition-all ${
isRunning
? 'bg-red-600 hover:bg-red-700'
: 'bg-green-600 hover:bg-green-700'
}`}
>
{isRunning ? <Pause size={20} /> : <Play size={20} />}
{isRunning ? 'Pause' : 'Run'}
</button>
<button
onClick={resetSimulation}
className="px-6 py-2 bg-gray-600 hover:bg-gray-700 rounded-lg font-semibold flex items-center gap-2 transition-all"
>
<RotateCcw size={20} />
Reset
</button>
<button
onClick={() => setShowSettings(!showSettings)}
className="px-6 py-2 bg-blue-600 hover:bg-blue-700 rounded-lg font-semibold flex items-center gap-2 transition-all"
>
<Settings size={20} />
Settings
</button>
<div className="text-sm bg-gray-700 px-3 py-1 rounded">
Time: {currentTime.toFixed(1)}s
</div>
<div className="text-sm bg-gray-700 px-3 py-1 rounded">
Points: {simulationData.length}
</div>
</div>
{/* Parameter Settings */}
{showSettings && (
<div className="mb-6 bg-gray-800 p-4 rounded-lg">
<h3 className="text-lg font-semibold mb-4">Physics Parameters</h3>
<div className="grid grid-cols-2 md:grid-cols-4 gap-4">
<div>
<label className="block text-sm font-medium mb-1">S (Symmetry)</label>
<input
type="number"
step="0.1"
value={parameters.S}
onChange={(e) => handleParameterChange('S', e.target.value)}
className="w-full px-3 py-1 bg-gray-700 rounded border border-gray-600 focus:border-blue-500"
/>
</div>
<div>
<label className="block text-sm font-medium mb-1">D (Dimension)</label>
<input
type="number"
step="1"
value={parameters.D}
onChange={(e) => handleParameterChange('D', e.target.value)}
className="w-full px-3 py-1 bg-gray-700 rounded border border-gray-600 focus:border-blue-500"
/>
</div>
<div>
<label className="block text-sm font-medium mb-1">Coupling</label>
<input
type="number"
step="0.001"
value={parameters.coupling_strength}
onChange={(e) => handleParameterChange('coupling_strength', e.target.value)}
className="w-full px-3 py-1 bg-gray-700 rounded border border-gray-600 focus:border-blue-500"
/>
</div>
<div>
<label className="block text-sm font-medium mb-1">λ Base</label>
<input
type="number"
step="0.01"
value={parameters.lambda_base}
onChange={(e) => handleParameterChange('lambda_base', e.target.value)}
className="w-full px-3 py-1 bg-gray-700 rounded border border-gray-600 focus:border-blue-500"
/>
</div>
<div>
<label className="block text-sm font-medium mb-1">η Base</label>
<input
type="number"
step="0.01"
value={parameters.eta_base}
onChange={(e) => handleParameterChange('eta_base', e.target.value)}
className="w-full px-3 py-1 bg-gray-700 rounded border border-gray-600 focus:border-blue-500"
/>
</div>
<div>
<label className="block text-sm font-medium mb-1">κ Base</label>
<input
type="number"
step="0.1"
value={parameters.kappa_base}
onChange={(e) => handleParameterChange('kappa_base', e.target.value)}
className="w-full px-3 py-1 bg-gray-700 rounded border border-gray-600 focus:border-blue-500"
/>
</div>
<div>
<label className="block text-sm font-medium mb-1">R₀</label>
<input
type="number"
step="0.1"
value={parameters.R0}
onChange={(e) => handleParameterChange('R0', e.target.value)}
className="w-full px-3 py-1 bg-gray-700 rounded border border-gray-600 focus:border-blue-500"
/>
</div>
<div>
<label className="block text-sm font-medium mb-1">μ</label>
<input
type="number"
step="0.01"
value={parameters.mu}
onChange={(e) => handleParameterChange('mu', e.target.value)}
className="w-full px-3 py-1 bg-gray-700 rounded border border-gray-600 focus:border-blue-500"
/>
</div>
</div>
</div>
)}
{/* Current Values Display */}
{latestData && (
<div className="mb-6 grid grid-cols-2 md:grid-cols-4 gap-4">
<div className="bg-blue-900 p-4 rounded-lg">
<h3 className="text-sm font-medium text-blue-300">Quantum Entropy</h3>
<p className="text-2xl font-bold text-blue-100">{latestData.E.toFixed(4)}</p>
</div>
<div className="bg-red-900 p-4 rounded-lg">
<h3 className="text-sm font-medium text-red-300">Frequency (Hz)</h3>
<p className="text-2xl font-bold text-red-100">{latestData.frequency.toFixed(4)}</p>
</div>
<div className="bg-green-900 p-4 rounded-lg">
<h3 className="text-sm font-medium text-green-300">Emergent Mass</h3>
<p className="text-2xl font-bold text-green-100">{latestData.mass.toFixed(4)}</p>
</div>
<div className="bg-purple-900 p-4 rounded-lg">
<h3 className="text-sm font-medium text-purple-300">CP Violation</h3>
<p className="text-2xl font-bold text-purple-100">{latestData.cp_violation.toFixed(4)}</p>
</div>
</div>
)}
{/* Charts */}
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
{/* Entropy Evolution */}
<div className="bg-gray-800 p-4 rounded-lg">
<h3 className="text-lg font-semibold mb-4">Quantum Entropy Evolution</h3>
<ResponsiveContainer width="100%" height={300}>
<LineChart data={simulationData}>
<CartesianGrid strokeDasharray="3 3" stroke="#374151" />
<XAxis dataKey="time" stroke="#9CA3AF" />
<YAxis stroke="#9CA3AF" />
<Tooltip
contentStyle={{ backgroundColor: '#1F2937', border: '1px solid #374151' }}
labelStyle={{ color: '#9CA3AF' }}
/>
<Legend />
<Line type="monotone" dataKey="E" stroke="#3B82F6" strokeWidth={2} dot={false} name="Entropy ε" />
</LineChart>
</ResponsiveContainer>
</div>
{/* Frequency Evolution */}
<div className="bg-gray-800 p-4 rounded-lg">
<h3 className="text-lg font-semibold mb-4">Rotational Frequency</h3>
<ResponsiveContainer width="100%" height={300}>
<LineChart data={simulationData}>
<CartesianGrid strokeDasharray="3 3" stroke="#374151" />
<XAxis dataKey="time" stroke="#9CA3AF" />
<YAxis stroke="#9CA3AF" />
<Tooltip
contentStyle={{ backgroundColor: '#1F2937', border: '1px solid #374151' }}
labelStyle={{ color: '#9CA3AF' }}
/>
<Legend />
<Line type="monotone" dataKey="frequency" stroke="#EF4444" strokeWidth={2} dot={false} name="Frequency (Hz)" />
</LineChart>
</ResponsiveContainer>
</div>
{/* Mass Evolution */}
<div className="bg-gray-800 p-4 rounded-lg">
<h3 className="text-lg font-semibold mb-4">Emergent Mass</h3>
<ResponsiveContainer width="100%" height={300}>
<LineChart data={simulationData}>
<CartesianGrid strokeDasharray="3 3" stroke="#374151" />
<XAxis dataKey="time" stroke="#9CA3AF" />
<YAxis stroke="#9CA3AF" />
<Tooltip
contentStyle={{ backgroundColor: '#1F2937', border: '1px solid #374151' }}
labelStyle={{ color: '#9CA3AF' }}
/>
<Legend />
<Line type="monotone" dataKey="mass" stroke="#10B981" strokeWidth={2} dot={false} name="Mass m(t)" />
</LineChart>
</ResponsiveContainer>
</div>
{/* CP Violation */}
<div className="bg-gray-800 p-4 rounded-lg">
<h3 className="text-lg font-semibold mb-4">CP Violation Strength</h3>
<ResponsiveContainer width="100%" height={300}>
<LineChart data={simulationData}>
<CartesianGrid strokeDasharray="3 3" stroke="#374151" />
<XAxis dataKey="time" stroke="#9CA3AF" />
<YAxis stroke="#9CA3AF" />
<Tooltip
contentStyle={{ backgroundColor: '#1F2937', border: '1px solid #374151' }}
labelStyle={{ color: '#9CA3AF' }}
/>
<Legend />
<Line type="monotone" dataKey="cp_violation" stroke="#8B5CF6" strokeWidth={2} dot={false} name="|sin(θ_eff)|" />
</LineChart>
</ResponsiveContainer>
</div>
</div>
{/* Phase Space Plot */}
<div className="mt-6 bg-gray-800 p-4 rounded-lg">
<h3 className="text-lg font-semibold mb-4">Phase Space Trajectory (Entropy vs Frequency)</h3>
<ResponsiveContainer width="100%" height={400}>
<LineChart data={simulationData}>
<CartesianGrid strokeDasharray="3 3" stroke="#374151" />
<XAxis dataKey="E" stroke="#9CA3AF" label={{ value: 'Entropy ε', position: 'insideBottom', offset: -5 }} />
<YAxis dataKey="frequency" stroke="#9CA3AF" label={{ value: 'Frequency (Hz)', angle: -90, position: 'insideLeft' }} />
<Tooltip
contentStyle={{ backgroundColor: '#1F2937', border: '1px solid #374151' }}
labelStyle={{ color: '#9CA3AF' }}
formatter={(value, name) => [value.toFixed(4), name]}
/>
<Line type="monotone" dataKey="frequency" stroke="#F59E0B" strokeWidth={2} dot={false} name="Trajectory" />
</LineChart>
</ResponsiveContainer>
</div>
</div>
);
};
export default QuantumEntropySimulation;