Update index.html

index.html

@@ -107,19 +107,22 @@
     <div class="rules">
         <h2>Simulation Rules</h2>
         <ul>
-            <li>Cancer cells die when surrounded by 3+ cells within 40px</li>
+            <li>Cancer cells die when surrounded by 3+ cells within <span id="deathProxDisplay">20</span>px</li>
+            <li>Healthy cells die when near 2+ cancer cells within 30px</li>
             <li>Cancer cells convert isolated healthy cells (no nearby healthy)</li>
             <li>Cells reproduce based on type-specific rates</li>
-            <li>Cancer cells move faster than healthy cells</li>
+            <li>Cancer cells move 50% faster than healthy cells</li>
             <li>Neural networks control movement decisions</li>
-            <li>Adjust parameters below to influence outcomes</li>
         </ul>
     </div>
 
     <div class="controls">
         <h2>Simulation Parameters</h2>
         <div class="param-group">
-            <label>Hidden Dimension: <input type="number" id="hiddenDim" value="4" min="1"></label>
+            <label>Death Proximity (px): <input type="number" id="deathProximity" value="20" min="1"></label>
+            <label>Healthy Death Threshold: <input type="number" id="healthyDeathThreshold" value="2" min="1"></label>
+            <label>Healthy Death Radius: <input type="number" id="healthyDeathRadius" value="30" min="1"></label>
+            <label>Hidden Dimension: <input type="number" id="hiddenDim" value="6" min="1"></label>
             <label>Initial Healthy: <input type="number" id="initialHealthy" value="15" min="1"></label>
             <label>Initial Cancer: <input type="number" id="initialCancer" value="8" min="1"></label>
             <label>Mutation Rate: <input type="number" id="mutationRate" value="0.1" step="0.01" min="0"></label>
@@ -174,7 +177,9 @@
         const cellRadius = 5;
         let populationChart = null;
         let generationsData = [];
-        let currentHiddenDim = 4;
+        let currentHiddenDim = 6;
+        const targetFPS = 60;
+        let lastFrame = 0;
 
         function getNormal(mean = 0, std = 1) {
             let u, v, s;
@@ -277,6 +282,96 @@
             }
         }
 
+        function checkCollisions() {
+            const deathProximity = parseInt(document.getElementById('deathProximity').value);
+            const healthyDeathThreshold = parseInt(document.getElementById('healthyDeathThreshold').value);
+            const healthyDeathRadius = parseInt(document.getElementById('healthyDeathRadius').value);
+
+            const cellsCopy = [...cells];
+            const cellsToRemove = new Set();
+            const cellsToConvert = new Set();
+
+            cellsCopy.forEach((cell) => {
+                if(cell.type === 'healthy') {
+                    const nearbyCancer = cellsCopy.filter(c => 
+                        c.type === 'cancer' &&
+                        Math.hypot(c.x - cell.x, c.y - cell.y) < healthyDeathRadius
+                    );
+                    if(nearbyCancer.length >= healthyDeathThreshold) {
+                        cellsToRemove.add(cell);
+                    }
+                }
+                
+                if(cell.type === 'cancer') {
+                    const neighbors = cellsCopy.filter(c => 
+                        c !== cell && 
+                        Math.hypot(c.x - cell.x, c.y - cell.y) < deathProximity
+                    );
+                    if(neighbors.length >= 3) {
+                        cellsToRemove.add(cell);
+                    }
+
+                    cellsCopy.forEach((other) => {
+                        if(other.type === 'healthy' && 
+                           Math.hypot(cell.x - other.x, cell.y - other.y) < cellRadius * 2 &&
+                           !cellsToConvert.has(other)) {
+                            const healthyNeighbors = cellsCopy.filter(c => 
+                                c !== other && 
+                                c.type === 'healthy' &&
+                                Math.hypot(c.x - other.x, c.y - other.y) < 60
+                            );
+                            if(healthyNeighbors.length === 0) {
+                                cellsToConvert.add(other);
+                            }
+                        }
+                    });
+                }
+            });
+
+            cells = cells.filter(cell => !cellsToRemove.has(cell));
+            cellsToConvert.forEach(cell => cell.type = 'cancer');
+        }
+
+        function reproduceCells() {
+            const healthyReproRate = parseInt(document.getElementById('healthyRepro').value);
+            const healthyCells = cells.filter(c => c.type === 'healthy');
+            const healthyCandidates = [...healthyCells].sort(() => Math.random() - 0.5).slice(0, healthyReproRate);
+            healthyCandidates.forEach(cell => cells.push(new Cell('healthy', cell)));
+
+            const cancerReproRate = parseInt(document.getElementById('cancerRepro').value);
+            const cancerCells = cells.filter(c => c.type === 'cancer');
+            const cancerCandidates = [...cancerCells].sort(() => Math.random() - 0.5).slice(0, cancerReproRate);
+            cancerCandidates.forEach(cell => cells.push(new Cell('cancer', cell)));
+        }
+
+        function updateStatus() {
+            document.getElementById('genCount').textContent = generation;
+            document.getElementById('healthyCount').textContent = 
+                cells.filter(c => c.type === 'healthy').length;
+            document.getElementById('cancerCount').textContent = 
+                cells.filter(c => c.type === 'cancer').length;
+        }
+
+        function saveGenerationData() {
+            if(generation % 10 === 0) {
+                const healthy = cells.filter(c => c.type === 'healthy').length;
+                const cancer = cells.filter(c => c.type === 'cancer').length;
+                const speeds = cells.map(c => c.speed);
+                const avgSpeed = speeds.reduce((a,b) => a + b, 0) / speeds.length || 0;
+
+                generationsData.push({
+                    generation,
+                    healthy,
+                    cancer,
+                    avgSpeed
+                });
+
+                if(generationsData.length > 20) generationsData.shift();
+                updateChart();
+                updateTable();
+            }
+        }
+
         function updateChart() {
             const ctx = document.getElementById('populationChart').getContext('2d');
             
@@ -323,92 +418,40 @@
             `).join('');
         }
 
-        function saveGenerationData() {
-            if(generation % 10 === 0) {
-                const healthy = cells.filter(c => c.type === 'healthy').length;
-                const cancer = cells.filter(c => c.type === 'cancer').length;
-                const speeds = cells.map(c => c.speed);
-                const avgSpeed = speeds.reduce((a,b) => a + b, 0) / speeds.length || 0;
-
-                generationsData.push({
-                    generation,
-                    healthy,
-                    cancer,
-                    avgSpeed
-                });
-
-                if(generationsData.length > 20) generationsData.shift();
-                updateChart();
-                updateTable();
-            }
-        }
-
-        function checkCollisions() {
-            cells.forEach((cell, i) => {
-                if(cell.type === 'cancer') {
-                    const neighbors = cells.filter(c => c !== cell && 
-                        Math.hypot(c.x - cell.x, c.y - cell.y) < 40);
-                    if(neighbors.length >= 3) {
-                        cells.splice(i, 1);
-                        return;
+        function safeAnimate(timestamp) {
+            try {
+                const delta = timestamp - lastFrame;
+                
+                if (delta >= 1000/targetFPS) {
+                    ctx.clearRect(0, 0, canvas.width, canvas.height);
+                    
+                    frameCount++;
+                    if(frameCount % 60 === 0) {
+                        generation++;
+                        reproduceCells();
+                        updateStatus();
+                        saveGenerationData();
                     }
 
-                    cells.forEach((other) => {
-                        if(other.type === 'healthy' && 
-                            Math.hypot(cell.x - other.x, cell.y - other.y) < cellRadius * 2) {
-                            const healthyNeighbors = cells.filter(c => 
-                                c !== other && c.type === 'healthy' &&
-                                Math.hypot(c.x - other.x, c.y - other.y) < 60
-                            );
-                            if(healthyNeighbors.length === 0) {
-                                other.type = 'cancer';
-                            }
-                        }
-                    });
+                    cells.forEach(cell => cell.update());
+                    checkCollisions();
+                    cells.forEach(cell => cell.draw());
+                    
+                    lastFrame = timestamp;
                 }
-            });
-        }
-
-        function reproduceCells() {
-            const healthyReproRate = parseInt(document.getElementById('healthyRepro').value);
-            const healthyCells = cells.filter(c => c.type === 'healthy');
-            const healthyCandidates = [...healthyCells].sort(() => Math.random() - 0.5).slice(0, healthyReproRate);
-            healthyCandidates.forEach(cell => cells.push(new Cell('healthy', cell)));
-
-            const cancerReproRate = parseInt(document.getElementById('cancerRepro').value);
-            const cancerCells = cells.filter(c => c.type === 'cancer');
-            const cancerCandidates = [...cancerCells].sort(() => Math.random() - 0.5).slice(0, cancerReproRate);
-            cancerCandidates.forEach(cell => cells.push(new Cell('cancer', cell)));
-        }
-
-        function updateStatus() {
-            document.getElementById('genCount').textContent = generation;
-            document.getElementById('healthyCount').textContent = 
-                cells.filter(c => c.type === 'healthy').length;
-            document.getElementById('cancerCount').textContent = 
-                cells.filter(c => c.type === 'cancer').length;
-        }
-
-        function animate() {
-            ctx.clearRect(0, 0, canvas.width, canvas.height);
-            
-            frameCount++;
-            if(frameCount % 60 === 0) {
-                generation++;
-                reproduceCells();
-                updateStatus();
-                saveGenerationData();
+                animationId = requestAnimationFrame(safeAnimate);
+            } catch (error) {
+                console.error('Simulation error:', error);
+                document.getElementById('status').innerHTML += ' [PAUSED DUE TO ERROR]';
+                cancelAnimationFrame(animationId);
             }
-
-            cells.forEach(cell => cell.update());
-            checkCollisions();
-            cells.forEach(cell => cell.draw());
-            
-            animationId = requestAnimationFrame(animate);
         }
 
         document.getElementById('start').addEventListener('click', () => {
-            if(!animationId) animate();
+            if(!animationId) {
+                lastFrame = performance.now();
+                animationId = requestAnimationFrame(safeAnimate);
+            }
         });
 
         document.getElementById('reset').addEventListener('click', () => {
@@ -433,7 +476,10 @@
             cells.forEach(cell => cell.draw());
         });
 
-        // Initialize simulation
+        document.getElementById('deathProximity').addEventListener('input', function() {
+            document.getElementById('deathProxDisplay').textContent = this.value;
+        });
+
         document.getElementById('reset').click();
     </script>
 </body>