// Draw metronomes on the canvas
        function drawMetronomes() {
            console.log("Drawing metronomes");
            const canvas = document.getElementById('metronomeCanvas');
            if (!canvas) {
                console.error("Metronome canvas not found!");
                return;
            }
            
            const ctx = canvas.getContext('2d');
            const width = canvas.width;
            const height = canvas.height;
            
            ctx.clearRect(0, 0, width, height);
            
            // Background
            ctx.fillStyle = '#1e1e1e';
            ctx.fillRect(0, 0, width, height);
            
            // Draw title
            ctx.font = '14px Arial';
            ctx.fillStyle = '#e0e0e0';
            ctx.textAlign = 'center';
            ctx.fillText('Oscillators as Metronomes', width / 2, 20);
            
            const numOscillators = phases.length;
            const colors = ['#4bc0c0', '#36a2eb', '#ffce56', '#ff6384', '#9966ff'];
            const metronomesWidth = width - 40;
            const metronomeWidth = metronomesWidth / numOscillators;
            const metronomeHeight = height * 0.6;
            const baseY = height * 0.85;
            
            // Draw each metronome
            for (let i = 0; i < numOscillators; i++) {
                const centerX = 20 + (i * metronomeWidth) + (metronomeWidth / 2);
                
                // Draw metronome base
                ctx.fillStyle = '#333';
                ctx.fillRect(centerX - 15, baseY, 30, 10);
                ctx.fillStyle = '#222';
                ctx.fillRect(centerX - 20, baseY + 10, 40, 5);
                
                // Draw metronome body
                ctx.fillStyle = colors[i];
                ctx.fillRect(centerX - 10, baseY - metronomeHeight, 20, metronomeHeight);
                
                // Draw metronome pendulum
                const pendulumLength = metronomeHeight * 0.8;
                const pendulumAngle = Math.PI / 3 * Math.sin(phases[i]); // Map phase to pendulum swing
                
                const pendulumEndX = centerX + pendulumLength * Math.sin(pendulumAngle);
                const pendulumEndY = baseY - metronomeHeight + pendulumLength * Math.cos(pendulumAngle);
                
                ctx.beginPath();
                ctx.moveTo(centerX, baseY - metronomeHeight + 10);
                ctx.lineTo(pendulumEndX, pendulumEndY);
                ctx.strokeStyle = '#e0e0e0';
                ctx.lineWidth = 2;
                ctx.stroke();
                
                // Draw pendulum weight
                ctx.beginPath();
                ctx.arc(pendulumEndX, pendulumEndY, 6, 0, 2 * Math.PI);
                ctx.fillStyle = '#e0e0e0';
                ctx.fill();
                
                // Draw oscillator number
                ctx.font = '16px Arial';
                ctx.fillStyle = '#e0e0e0';
                ctx.textAlign = 'center';
                ctx.fillText((i + 1).toString(), centerX, baseY - metronomeHeight / 2);
                
                // Draw sync indicator (small dot if in sync with reference oscillator)
                let phaseDiff = phases[i] - phases[0];
                if (phaseDiff < -Math.PI) phaseDiff += 2 * Math.PI;
                if (phaseDiff > Math.PI) phaseDiff -= 2 * Math.PI;
                
                if (Math.abs(phaseDiff) < 0.3 || (i === 0)) {
                    ctx.beginPath();
                    ctx.arc(centerX, baseY - metronomeHeight - 10, 5, 0, 2 * Math.PI);
                    ctx.fillStyle = '#4CAF50';
                    ctx.fill();
                }
            }
            
            // Draw chimera state indicator
            const isChimera = detectChimeraState(phases);
            if (isChimera) {
                ctx.font = '14px Arial';
                ctx.fillStyle = '#ff6666';
                ctx.textAlign = 'center';
                ctx.fillText('Chimera State', width / 2, height - 15);
            }
        }<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Coupled Oscillators Simulation</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/mathjs/11.2.0/math.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.min.js"></script>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 1000px;
            margin: 0 auto;
            padding: 20px;
            background-color: #121212;
            color: #e0e0e0;
        }
        .container {
            display: flex;
            flex-wrap: wrap;
            gap: 15px;
        }
        .controls {
            flex: 1;
            min-width: 300px;
            padding: 15px;
            background-color: #1e1e1e;
            border-radius: 8px;
            border: 1px solid #333;
        }
        .simulation {
            flex: 2;
            min-width: 500px;
            max-height: 650px;
        }
        .slider-container {
            margin-bottom: 8px;
        }
        label {
            display: block;
            margin-bottom: 3px;
            font-weight: normal;
            font-size: 0.9rem;
        }
        .value-display {
            display: inline-block;
            width: 40px;
            text-align: right;
            margin-left: 10px;
            color: #aaa;
        }
        button {
            padding: 8px 12px;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            margin-right: 8px;
            margin-top: 10px;
        }
        button:hover {
            background-color: #3e8e41;
        }
        #status {
            margin-top: 15px;
            padding: 8px;
            border-radius: 4px;
            font-size: 0.9rem;
        }
        .visualization-container {
            display: flex;
            margin-bottom: 10px;
        }
        .canvas-half {
            flex: 1;
            min-width: 300px;
        }
        canvas {
            border: 1px solid #333;
            border-radius: 5px;
            background-color: #1e1e1e;
            width: 100%;
            height: auto;
        }
        .parameter-section {
            border-bottom: 1px solid #333;
            padding-bottom: 10px;
            margin-bottom: 10px;
        }
        h1 {
            margin-top: 0;
            color: #4CAF50;
            font-size: 1.5rem;
        }
        h2 {
            margin-top: 0;
            color: #4CAF50;
            font-size: 1.2rem;
        }
        h3 {
            margin-top: 0;
            color: #aaa;
            font-size: 1rem;
        }
        .info {
            background-color: #263238;
            padding: 10px;
            border-left: 5px solid #4CAF50;
            margin-bottom: 15px;
            border-radius: 4px;
            font-size: 0.9rem;
        }
        input[type="range"] {
            width: 70%;
            background: #333;
        }
        input[type="range"]::-webkit-slider-thumb {
            background: #4CAF50;
        }
        .compact-layout {
            display: flex;
            flex-direction: column;
            height: 100vh;
        }
        .main-content {
            flex-grow: 1;
            overflow: hidden;
        }
        .footer-info {
            padding: 10px;
            background-color: #263238;
            border-radius: 4px;
            margin-top: 15px;
            font-size: 0.85rem;
        }
    </style>
</head>
<body>
    <div class="compact-layout">
        <h1>Coupled Oscillators Simulation</h1>
        
        <div class="main-content">
            <div class="container">
                <div class="controls">
                    <h2>Simulation Controls</h2>
                    
                    <div class="parameter-section">
                        <h3>Oscillator Parameters</h3>
                        <div class="slider-container">
                            <label for="naturalFrequencies">Natural Frequencies Spread:</label>
                            <input type="range" id="naturalFrequencies" min="0" max="2" step="0.05" value="0.5">
                            <span class="value-display" id="naturalFrequenciesValue">0.5</span>
                        </div>
                        
                        <div class="slider-container">
                            <label for="couplingStrength">Coupling Strength (K):</label>
                            <input type="range" id="couplingStrength" min="0" max="5" step="0.1" value="1.0">
                            <span class="value-display" id="couplingStrengthValue">1.0</span>
                        </div>
                    </div>
                    
                    <div class="parameter-section">
                        <h3>Coupling Matrix</h3>
                        <div class="slider-container">
                            <label for="localCoupling">Local Coupling Strength:</label>
                            <input type="range" id="localCoupling" min="0" max="2" step="0.05" value="1.0">
                            <span class="value-display" id="localCouplingValue">1.0</span>
                        </div>
                        
                        <div class="slider-container">
                            <label for="nonLocalCoupling">Non-local Coupling Strength:</label>
                            <input type="range" id="nonLocalCoupling" min="0" max="1" step="0.05" value="0.2">
                            <span class="value-display" id="nonLocalCouplingValue">0.2</span>
                        </div>
                        
                        <div class="slider-container">
                            <label for="phaseShift">Phase Shift (α):</label>
                            <input type="range" id="phaseShift" min="0" max="3.14" step="0.05" value="0.1">
                            <span class="value-display" id="phaseShiftValue">0.1</span>
                        </div>
                    </div>
                    
                    <div class="parameter-section">
                        <h3>Simulation Settings</h3>
                        <div class="slider-container">
                            <label for="timeStep">Time Step (dt):</label>
                            <input type="range" id="timeStep" min="0.01" max="0.1" step="0.01" value="0.05">
                            <span class="value-display" id="timeStepValue">0.05</span>
                        </div>
                        
                        <div class="slider-container">
                            <label for="simulationSpeed">Simulation Speed:</label>
                            <input type="range" id="simulationSpeed" min="10" max="200" step="10" value="50">
                            <span class="value-display" id="simulationSpeedValue">50</span>
                        </div>
                    </div>
                    
                    <div class="buttons">
                        <button id="startButton">Start</button>
                        <button id="pauseButton">Pause</button>
                        <button id="resetButton">Reset</button>
                    </div>
                    
                    <div id="status">
                        Status: Ready to start
                    </div>
                </div>
                
                <div class="simulation">
                    <div class="visualization-container">
                        <div class="canvas-half">
                            <canvas id="metronomeCanvas" width="600" height="300"></canvas>
                        </div>
                        <div class="canvas-half">
                            <canvas id="oscillatorCanvas" width="600" height="300"></canvas>
                        </div>
                    </div>
                    <canvas id="phaseCanvas" width="600" height="300"></canvas>
                </div>
            </div>
        </div>
        
        <div class="footer-info">
            <p>This simulation models 5 coupled Kuramoto oscillators with adjustable parameters. The graph shows their relative phases over time, with a scatter plot highlighting potential chimera states (where some oscillators synchronize while others remain desynchronized).</p>
        </div>
    </div>
    
    <script>
        // Global variables
        let oscillators = [];
        let phases = [];
        let couplingMatrix = [];
        let naturalFrequencies = [];
        let simulationInterval;
        let time = 0;
        let running = false;
        let phaseHistoryData = [];
        let chimeraStatesData = [];
        
        // Initialize Charts
        const phaseCtx = document.getElementById('phaseCanvas').getContext('2d');
        let phaseChart;
        
        // Get DOM elements
        const startButton = document.getElementById('startButton');
        const pauseButton = document.getElementById('pauseButton');
        const resetButton = document.getElementById('resetButton');
        const statusElement = document.getElementById('status');
        
        // Sliders and their value displays
        const sliders = [
            { id: 'naturalFrequencies', valueId: 'naturalFrequenciesValue' },
            { id: 'couplingStrength', valueId: 'couplingStrengthValue' },
            { id: 'localCoupling', valueId: 'localCouplingValue' },
            { id: 'nonLocalCoupling', valueId: 'nonLocalCouplingValue' },
            { id: 'phaseShift', valueId: 'phaseShiftValue' },
            { id: 'timeStep', valueId: 'timeStepValue' },
            { id: 'simulationSpeed', valueId: 'simulationSpeedValue' }
        ];
        
        // Set up slider events
        sliders.forEach(slider => {
            const element = document.getElementById(slider.id);
            const valueDisplay = document.getElementById(slider.valueId);
            
            valueDisplay.textContent = element.value;
            
            element.addEventListener('input', function() {
                valueDisplay.textContent = this.value;
                if (running) {
                    updateParameters();
                }
            });
        });
        
        // Button event listeners
        startButton.addEventListener('click', startSimulation);
        pauseButton.addEventListener('click', pauseSimulation);
        resetButton.addEventListener('click', resetSimulation);
        
        // Initialize the simulation
        function initializeSimulation() {
            const numOscillators = 5;
            const freqSpread = parseFloat(document.getElementById('naturalFrequencies').value);
            
            oscillators = [];
            phases = [];
            couplingMatrix = [];
            naturalFrequencies = [];
            phaseHistoryData = [];
            chimeraStatesData = [];
            
            // Initialize natural frequencies with some randomness
            for (let i = 0; i < numOscillators; i++) {
                naturalFrequencies.push(1.0 + (Math.random() * 2 - 1) * freqSpread);
                phases.push(Math.random() * 2 * Math.PI); // Random initial phases
            }
            
            // Initialize coupling matrix with local and non-local interactions
            updateCouplingMatrix();
            
            // Set up phase history data structure for plotting
            time = 0;
            
            // Initialize Phase Chart
            setupPhaseChart();
            
            // Render initial state
            drawOscillators();
            drawMetronomes();
            
            statusElement.innerHTML = "Status: Initialized";
            statusElement.style.backgroundColor = "#263238";
            statusElement.style.color = "#4CAF50";
        }
        
        // Update coupling matrix based on slider values
        function updateCouplingMatrix() {
            const numOscillators = 5;
            const localCoupling = parseFloat(document.getElementById('localCoupling').value);
            const nonLocalCoupling = parseFloat(document.getElementById('nonLocalCoupling').value);
            
            couplingMatrix = [];
            
            // Create coupling matrix
            for (let i = 0; i < numOscillators; i++) {
                couplingMatrix[i] = [];
                for (let j = 0; j < numOscillators; j++) {
                    if (i === j) {
                        couplingMatrix[i][j] = 0; // No self-coupling
                    } else if (Math.abs(i - j) === 1 || Math.abs(i - j) === numOscillators - 1) {
                        // Nearest neighbors (including wrap-around)
                        couplingMatrix[i][j] = localCoupling;
                    } else {
                        // Non-local coupling
                        couplingMatrix[i][j] = nonLocalCoupling;
                    }
                }
            }
        }
        
        // Update simulation parameters based on slider values
        function updateParameters() {
            updateCouplingMatrix();
            
            // Update natural frequencies
            const freqSpread = parseFloat(document.getElementById('naturalFrequencies').value);
            for (let i = 0; i < naturalFrequencies.length; i++) {
                naturalFrequencies[i] = 1.0 + (Math.random() * 2 - 1) * freqSpread;
            }
        }
        
        // Start the simulation
        function startSimulation() {
            if (running) return;
            
            running = true;
            statusElement.innerHTML = "Status: Running";
            statusElement.style.backgroundColor = "#1b3b1f";
            statusElement.style.color = "#4CAF50";
            
            const speed = parseInt(document.getElementById('simulationSpeed').value);
            
            simulationInterval = setInterval(function() {
                updateSimulation();
            }, 1000 / speed);
        }
        
        // Pause the simulation
        function pauseSimulation() {
            if (!running) return;
            
            clearInterval(simulationInterval);
            running = false;
            statusElement.innerHTML = "Status: Paused";
            statusElement.style.backgroundColor = "#493e00";
            statusElement.style.color = "#ffce56";
        }
        
        // Reset the simulation
        function resetSimulation() {
            if (running) {
                clearInterval(simulationInterval);
                running = false;
            }
            
            time = 0;
            initializeSimulation();
        }
        
        // Update simulation state
        function updateSimulation() {
            const dt = parseFloat(document.getElementById('timeStep').value);
            const K = parseFloat(document.getElementById('couplingStrength').value);
            const alpha = parseFloat(document.getElementById('phaseShift').value);
            
            const numOscillators = phases.length;
            const newPhases = [...phases];
            
            // Update each oscillator's phase
            for (let i = 0; i < numOscillators; i++) {
                let phaseDiff = 0;
                
                // Calculate phase differences with all other oscillators
                for (let j = 0; j < numOscillators; j++) {
                    if (i !== j) {
                        const coupling = couplingMatrix[i][j];
                        phaseDiff += coupling * Math.sin(phases[j] - phases[i] - alpha);
                    }
                }
                
                // Update phase using the Kuramoto model
                newPhases[i] = phases[i] + dt * (naturalFrequencies[i] + K * phaseDiff / (numOscillators - 1));
                
                // Keep phase in [0, 2π]
                newPhases[i] = newPhases[i] % (2 * Math.PI);
                if (newPhases[i] < 0) newPhases[i] += 2 * Math.PI;
            }
            
            // Update phases
            phases = newPhases;
            
            // Check for chimera states
            const orderParameter = calculateOrderParameter(phases);
            const isChimera = detectChimeraState(phases);
            
            // Update time
            time += dt;
            
            // Store phase data for plotting
            updatePhaseHistory();
            
            // Draw current state
            drawOscillators();
            drawMetronomes();
        }
        
        // Calculate order parameter (a measure of synchronization)
        function calculateOrderParameter(phases) {
            const n = phases.length;
            let sum = math.complex(0, 0);
            
            for (let i = 0; i < n; i++) {
                sum = math.add(sum, math.complex(math.cos(phases[i]), math.sin(phases[i])));
            }
            
            return math.abs(math.divide(sum, n));
        }
        
        // Detect chimera states
        function detectChimeraState(phases) {
            const n = phases.length;
            const thresholdAngle = 0.5; // Threshold for phase difference
            
            // Calculate pairwise phase differences
            const phaseDiffs = [];
            for (let i = 0; i < n; i++) {
                for (let j = i + 1; j < n; j++) {
                    let diff = Math.abs(phases[i] - phases[j]);
                    if (diff > Math.PI) diff = 2 * Math.PI - diff;
                    phaseDiffs.push(diff);
                }
            }
            
            // Check if some oscillators are synchronized and others are not
            const syncOscillators = phaseDiffs.filter(diff => diff < thresholdAngle).length;
            const desyncOscillators = phaseDiffs.length - syncOscillators;
            
            // We have a chimera state if we have both synchronized and desynchronized oscillators
            return syncOscillators > 0 && desyncOscillators > 0;
        }
        
        // Update phase history for plotting
        function updatePhaseHistory() {
            // Normalize phases to reference oscillator (0)
            const normalizedPhases = phases.map(phase => {
                let diff = phase - phases[0];
                if (diff < -Math.PI) diff += 2 * Math.PI;
                if (diff > Math.PI) diff -= 2 * Math.PI;
                return diff;
            });
            
            // Add to history
            phaseHistoryData.push({
                time: time,
                phases: normalizedPhases
            });
            
            // Check for chimera state
            const isChimera = detectChimeraState(phases);
            
            if (isChimera) {
                chimeraStatesData.push({
                    time: time,
                    phases: normalizedPhases
                });
            }
            
            // Keep a limited history to avoid memory issues
            if (phaseHistoryData.length > 200) {
                phaseHistoryData.shift();
            }
            
            // Update the chart
            updatePhaseChart();
        }
        
        // Set up the phase chart
        function setupPhaseChart() {
            // Destroy previous chart if it exists
            if (phaseChart) {
                phaseChart.destroy();
            }
            
            const labels = Array.from({length: 200}, (_, i) => '');
            const datasets = [];
            
            // Datasets for the 5 oscillators' phases
            const colors = ['rgba(75, 192, 192, 1)', 'rgba(54, 162, 235, 1)', 'rgba(255, 206, 86, 1)', 
                          'rgba(255, 99, 132, 1)', 'rgba(153, 102, 255, 1)'];
            
            for (let i = 0; i < 5; i++) {
                datasets.push({
                    label: `Oscillator ${i+1}`,
                    data: [],
                    borderColor: colors[i],
                    borderWidth: 2,
                    pointRadius: 0,
                    fill: false,
                    tension: 0.4
                });
            }
            
            // Dataset for chimera states (scatter plot)
            datasets.push({
                label: 'Chimera States',
                data: [],
                backgroundColor: 'rgba(255, 0, 0, 0.7)',
                borderColor: 'rgba(255, 0, 0, 1)',
                borderWidth: 1,
                pointRadius: 3,
                pointStyle: 'circle',
                fill: false,
                showLine: false,
                type: 'scatter'
            });
            
            phaseChart = new Chart(phaseCtx, {
                type: 'line',
                data: {
                    labels: labels,
                    datasets: datasets
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: true,
                    aspectRatio: 2,
                    scales: {
                        x: {
                            title: {
                                display: true,
                                text: 'Time',
                                color: '#e0e0e0'
                            },
                            grid: {
                                color: 'rgba(255, 255, 255, 0.1)'
                            },
                            ticks: {
                                color: '#aaa'
                            }
                        },
                        y: {
                            title: {
                                display: true,
                                text: 'Relative Phase',
                                color: '#e0e0e0'
                            },
                            min: -Math.PI,
                            max: Math.PI,
                            grid: {
                                color: 'rgba(255, 255, 255, 0.1)'
                            },
                            ticks: {
                                color: '#aaa',
                                callback: function(value) {
                                    if (value === 0) return '0';
                                    if (value === Math.PI) return 'π';
                                    if (value === -Math.PI) return '-π';
                                    if (value === Math.PI/2) return 'π/2';
                                    if (value === -Math.PI/2) return '-π/2';
                                    return '';
                                }
                            }
                        }
                    },
                    plugins: {
                        title: {
                            display: true,
                            text: 'Phase Difference (Relative to Oscillator 1)',
                            color: '#e0e0e0',
                            font: {
                                size: 14
                            }
                        },
                        legend: {
                            position: 'top',
                            labels: {
                                color: '#e0e0e0',
                                font: {
                                    size: 11
                                }
                            }
                        },
                        tooltip: {
                            backgroundColor: 'rgba(0, 0, 0, 0.7)',
                            titleColor: '#fff',
                            bodyColor: '#fff',
                            callbacks: {
                                label: function(context) {
                                    const datasetLabel = context.dataset.label || '';
                                    const value = context.parsed.y;
                                    return `${datasetLabel}: ${(value / Math.PI).toFixed(2)}π`;
                                }
                            }
                        }
                    },
                    animation: {
                        duration: 0
                    }
                }
            });
        }
        
        // Update the phase chart with new data
        function updatePhaseChart() {
            if (!phaseChart || !phaseHistoryData || phaseHistoryData.length === 0) return;
            
            // Update the datasets for each oscillator
            for (let i = 0; i < 5; i++) {
                phaseChart.data.datasets[i].data = phaseHistoryData.map(d => d.phases[i]);
            }
            
            // Update labels (time)
            phaseChart.data.labels = phaseHistoryData.map(d => d.time.toFixed(1));
            
            // Update chimera data (scatter plot)
            if (chimeraStatesData && chimeraStatesData.length > 0) {
                const chimeraData = [];
                
                // Create scatter points for all oscillators when in chimera state
                chimeraStatesData.forEach(d => {
                    if (d && d.phases) {
                        d.phases.forEach(phase => {
                            chimeraData.push({
                                x: d.time.toFixed(1),
                                y: phase
                            });
                        });
                    }
                });
                
                phaseChart.data.datasets[5].data = chimeraData;
            } else {
                phaseChart.data.datasets[5].data = [];
            }
            
            // Keep a limited number of chimera states to avoid cluttering
            if (chimeraStatesData && chimeraStatesData.length > 20) {
                chimeraStatesData.shift();
            }
            
            phaseChart.update();
        }
        
        // Draw oscillators on the canvas
        function drawOscillators() {
            const canvas = document.getElementById('oscillatorCanvas');
            const ctx = canvas.getContext('2d');
            const width = canvas.width;
            const height = canvas.height;
            
            ctx.clearRect(0, 0, width, height);
            
            const centerX = width / 2;
            const centerY = height / 2;
            const radius = Math.min(width, height) * 0.4;
            
            // Draw circle
            ctx.beginPath();
            ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI);
            ctx.strokeStyle = '#444';
            ctx.lineWidth = 1;
            ctx.stroke();
            
            // Draw oscillators
            const numOscillators = phases.length;
            const colors = ['#4bc0c0', '#36a2eb', '#ffce56', '#ff6384', '#9966ff'];
            
            for (let i = 0; i < numOscillators; i++) {
                const x = centerX + radius * Math.cos(phases[i]);
                const y = centerY + radius * Math.sin(phases[i]);
                
                // Draw line from center to oscillator
                ctx.beginPath();
                ctx.moveTo(centerX, centerY);
                ctx.lineTo(x, y);
                ctx.strokeStyle = colors[i];
                ctx.lineWidth = 2;
                ctx.stroke();
                
                // Draw oscillator
                ctx.beginPath();
                ctx.arc(x, y, 8, 0, 2 * Math.PI);
                ctx.fillStyle = colors[i];
                ctx.fill();
                ctx.strokeStyle = '#1e1e1e';
                ctx.lineWidth = 2;
                ctx.stroke();
                
                // Label oscillator
                ctx.font = '12px Arial';
                ctx.fillStyle = '#e0e0e0';
                ctx.textAlign = 'center';
                ctx.textBaseline = 'middle';
                ctx.fillText((i + 1).toString(), x, y);
            }
            
            // Draw center point
            ctx.beginPath();
            ctx.arc(centerX, centerY, 3, 0, 2 * Math.PI);
            ctx.fillStyle = '#e0e0e0';
            ctx.fill();
            
            // Draw time
            ctx.font = '14px Arial';
            ctx.fillStyle = '#aaa';
            ctx.textAlign = 'left';
            ctx.textBaseline = 'top';
            ctx.fillText(`Time: ${time.toFixed(2)}`, 10, 10);
            
            // Draw chimera state indicator
            const isChimera = detectChimeraState(phases);
            ctx.font = '14px Arial';
            ctx.textAlign = 'right';
            ctx.textBaseline = 'top';
            
            if (isChimera) {
                ctx.fillStyle = '#ff6666';
                ctx.fillText('Chimera State Detected!', width - 10, 10);
            }
        }
        
        // Initialize on load
        window.onload = resetSimulation;
    </script>
</body>
</html>