Add 1 files

index.html

@@ -69,7 +69,7 @@
                                 Pause
                             </button>
                             <button id="resetBtn" class="bg-red-600 hover:bg-red-700 px-3 py-1 rounded text-sm">
-                                Reset
+                                New Track
                             </button>
                         </div>
                     </div>
@@ -109,12 +109,13 @@
                 <div class="bg-gray-800 p-4 rounded-lg sticky top-4">
                     <h3 class="font-semibold text-blue-300 mb-3">How It Works</h3>
                     <div class="text-sm space-y-3 text-gray-300">
-                        <p>This simulation demonstrates how AI can learn to drive through a course using a genetic algorithm.</p>
+                        <p>This simulation demonstrates how AI can learn to drive through randomly generated courses using a genetic algorithm.</p>
                         
-                        <p>Each car has a neural network that controls steering based on sensor inputs. Cars that perform better (reach further checkpoints) have a higher chance to pass their "DNA" to the next generation.</p>
+                        <p>Each time you click "New Track", the course layout and checkpoint locations are randomized. This forces the AI to develop general driving skills rather than memorizing a specific track.</p>
                         
                         <p>Key components:</p>
                         <ul class="list-disc pl-5 space-y-1">
+                            <li><span class="font-medium">Random Tracks:</span> Procedurally generated with varying complexity</li>
                             <li><span class="font-medium">Sensors:</span> 5 distance sensors (front, left, right, front-left, front-right)</li>
                             <li><span class="font-medium">Neural Network:</span> 5 inputs, 1 hidden layer (6 neurons), 2 outputs (left/right)</li>
                             <li><span class="font-medium">Fitness:</span> Based on distance traveled and checkpoints reached</li>
@@ -122,7 +123,7 @@
                         </ul>
                         
                         <div class="pt-2 border-t border-gray-700 mt-4">
-                            <p class="text-xs text-gray-400">Watch as the AI improves over generations!</p>
+                            <p class="text-xs text-gray-400">Watch as the AI learns to navigate completely new tracks!</p>
                         </div>
                     </div>
                 </div>
@@ -166,30 +167,78 @@
                 walls: [],
                 checkpoints: [],
                 startPosition: { x: 100, y: 250, angle: 0 },
-                createTrack() {
-                    // Outer walls
-                    this.walls = [
-                        // Outer boundary
-                        { x: 50, y: 50, width: 700, height: 20 },
-                        { x: 50, y: 50, width: 20, height: 400 },
-                        { x: 50, y: 430, width: 700, height: 20 },
-                        { x: 730, y: 50, width: 20, height: 400 },
+                
+                generateRandomTrack() {
+                    this.walls = [];
+                    this.checkpoints = [];
+                    
+                    // Outer boundary walls (always present)
+                    this.walls.push(
+                        { x: 50, y: 50, width: 700, height: 20 }, // top
+                        { x: 50, y: 50, width: 20, height: 400 }, // left
+                        { x: 50, y: 430, width: 700, height: 20 }, // bottom
+                        { x: 730, y: 50, width: 20, height: 400 }  // right
+                    );
+                    
+                    // Generate random obstacles (between 3-8 obstacles)
+                    const obstacleCount = 3 + Math.floor(Math.random() * 6);
+                    for (let i = 0; i < obstacleCount; i++) {
+                        const isVertical = Math.random() > 0.5;
+                        let x, y, width, height;
                         
-                        // Inner obstacles
-                        { x: 200, y: 100, width: 20, height: 200 },
-                        { x: 400, y: 200, width: 20, height: 200 },
-                        { x: 600, y: 100, width: 20, height: 200 },
-                        { x: 300, y: 300, width: 200, height: 20 }
-                    ];
+                        if (isVertical) {
+                            width = 20;
+                            height = 50 + Math.random() * 200;
+                            x = 100 + Math.random() * 600;
+                            y = 100 + Math.random() * (400 - height);
+                        } else {
+                            width = 50 + Math.random() * 200;
+                            height = 20;
+                            x = 100 + Math.random() * (700 - width);
+                            y = 100 + Math.random() * 300;
+                        }
+                        
+                        // Make sure obstacle doesn't block the start position
+                        if (!(x < 150 && y < 300 && y + height > 200)) {
+                            this.walls.push({ x, y, width, height });
+                        }
+                    }
+                    
+                    // Generate checkpoints (3-5 checkpoints)
+                    const checkpointCount = 3 + Math.floor(Math.random() * 3);
+                    const checkpointSize = 30;
                     
-                    // Checkpoints
-                    this.checkpoints = [
-                        { x: 700, y: 100, width: 30, height: 50 },
-                        { x: 600, y: 400, width: 30, height: 50 },
-                        { x: 300, y: 400, width: 30, height: 50 },
-                        { x: 100, y: 300, width: 30, height: 50 }
+                    // Generate positions that require navigating around obstacles
+                    const possiblePositions = [
+                        { x: 700, y: 100 }, // right side top
+                        { x: 600, y: 400 }, // middle right bottom
+                        { x: 300, y: 400 }, // middle bottom
+                        { x: 100, y: 300 }, // left side middle
+                        { x: 400, y: 100 }, // middle top
+                        { x: 200, y: 200 }, // middle left
+                        { x: 600, y: 200 }  // middle right
                     ];
+                    
+                    // Shuffle and take first checkpointCount positions
+                    const shuffled = [...possiblePositions].sort(() => 0.5 - Math.random());
+                    for (let i = 0; i < checkpointCount; i++) {
+                        const pos = shuffled[i];
+                        this.checkpoints.push({
+                            x: pos.x,
+                            y: pos.y,
+                            width: checkpointSize,
+                            height: checkpointSize
+                        });
+                    }
+                    
+                    // Set start position (always left side, but random vertical position)
+                    this.startPosition = {
+                        x: 100,
+                        y: 100 + Math.random() * 300,
+                        angle: 0
+                    };
                 },
+                
                 draw(ctx) {
                     // Draw walls
                     ctx.fillStyle = '#4a5568';
@@ -529,6 +578,9 @@
                 const startTime = performance.now();
                 generation++;
                 generationCount.textContent = generation;
+				
+				// lunarflu
+				track.generateRandomTrack();
                 
                 // Calculate fitness
                 calculateFitness();
@@ -617,7 +669,8 @@
             
             // Initialize simulation
             function init() {
-                track.createTrack();
+                // Generate random track
+                track.generateRandomTrack();
                 
                 // Create initial population
                 cars = [];