Spaces:

openfree
/

Evolution-Simulation

Running

File size: 62,445 Bytes

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI Driving Simulation</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" />
    <style>
        body {
            background-color: #111827;
            color: #f3f4f6;
            font-family: Arial, sans-serif;
            line-height: 1.5;
            margin: 0;
            padding: 20px;
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
        }
        
        h1 {
            color: #60a5fa;
            text-align: center;
            margin-bottom: 20px;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
            letter-spacing: 1px;
        }
        
        canvas {
            background-color: #2d3748;
            border-radius: 12px;
            display: block;
            margin: 0 auto 20px;
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -2px rgba(0, 0, 0, 0.1);
            border: 2px solid #4a5568;
        }
        
        .controls {
            display: flex;
            gap: 10px;
            margin-bottom: 20px;
            justify-content: center;
            flex-wrap: wrap;
        }
        
        button {
            background-color: #3b82f6;
            color: white;
            border: none;
            padding: 10px 18px;
            border-radius: 8px;
            cursor: pointer;
            font-weight: bold;
            transition: all 0.2s ease;
            display: flex;
            align-items: center;
            gap: 5px;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
        }
        
        button:hover {
            background-color: #2563eb;
            transform: translateY(-2px);
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
        }
        
        button:active {
            transform: translateY(1px);
        }
        
        .start-btn {
            background-color: #10b981;
        }
        
        .start-btn:hover {
            background-color: #059669;
        }
        
        .pause-btn {
            background-color: #f59e0b;
        }
        
        .pause-btn:hover {
            background-color: #d97706;
        }
        
        .reset-btn {
            background-color: #ef4444;
        }
        
        .reset-btn:hover {
            background-color: #dc2626;
        }
        
        .stats {
            display: flex;
            justify-content: space-between;
            background-color: #1f2937;
            padding: 18px;
            border-radius: 12px;
            margin-bottom: 20px;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
            flex-wrap: wrap;
            gap: 10px;
            border: 1px solid #374151;
        }
        
        .stat-item {
            text-align: center;
            background-color: #2d3748;
            padding: 10px 15px;
            border-radius: 8px;
            min-width: 90px;
            transition: all 0.3s ease;
        }
        
        .stat-item:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }
        
        .stat-value {
            font-size: 1.4em;
            font-weight: bold;
            color: #60a5fa;
            margin-top: 5px;
        }
        
        .settings {
            background-color: #1f2937;
            padding: 20px;
            border-radius: 12px;
            margin-bottom: 20px;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
            border: 1px solid #374151;
        }
        
        .slider-container {
            margin-bottom: 15px;
            background-color: #2d3748;
            padding: 12px;
            border-radius: 8px;
        }
        
        .slider-container label {
            display: block;
            margin-bottom: 8px;
            font-weight: 500;
            color: #d1d5db;
        }
        
        input[type="range"] {
            width: 100%;
            margin-bottom: 8px;
            height: 6px;
            -webkit-appearance: none;
            background: #4b5563;
            border-radius: 5px;
            outline: none;
        }
        
        input[type="range"]::-webkit-slider-thumb {
            -webkit-appearance: none;
            width: 18px;
            height: 18px;
            background: #3b82f6;
            border-radius: 50%;
            cursor: pointer;
            transition: background 0.2s;
        }
        
        input[type="range"]::-webkit-slider-thumb:hover {
            background: #2563eb;
        }
        
        .progress-container {
            background-color: #374151;
            height: 10px;
            border-radius: 5px;
            margin-top: 10px;
            overflow: hidden;
            box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
        }
        
        .progress-bar {
            height: 100%;
            background: linear-gradient(90deg, #10b981, #3b82f6);
            width: 0;
            transition: width 0.3s;
            box-shadow: 0 0 5px rgba(16, 185, 129, 0.5);
        }
        
        /* Car emoji styling */
        .car-emoji {
            font-size: 1.2em;
            margin-right: 5px;
        }
        
        /* Added visual elements */
        .section-title {
            display: flex;
            align-items: center;
            margin-bottom: 15px;
            border-bottom: 1px solid #374151;
            padding-bottom: 8px;
        }
        
        .section-title i {
            margin-right: 8px;
            color: #60a5fa;
        }
        
        /* Custom checkbox */
        .toggle-switch {
            position: relative;
            display: inline-block;
            width: 50px;
            height: 24px;
        }
        
        .toggle-switch input {
            opacity: 0;
            width: 0;
            height: 0;
        }
        
        .toggle-slider {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: #4b5563;
            transition: .4s;
            border-radius: 24px;
        }
        
        .toggle-slider:before {
            position: absolute;
            content: "";
            height: 16px;
            width: 16px;
            left: 4px;
            bottom: 4px;
            background-color: white;
            transition: .4s;
            border-radius: 50%;
        }
        
        input:checked + .toggle-slider {
            background-color: #3b82f6;
        }
        
        input:checked + .toggle-slider:before {
            transform: translateX(26px);
        }
    </style>
</head>
<body>
    <div class="container">
        <h1><i class="fas fa-car-side"></i> Evolution Simulation</h1>
        
        <canvas id="simulationCanvas" width="800" height="500"></canvas>
        
        <div class="controls">
            <button id="startBtn" class="start-btn"><i class="fas fa-play"></i> Start</button>
            <button id="pauseBtn" class="pause-btn"><i class="fas fa-pause"></i> Pause</button>
            <button id="resetBtn" class="reset-btn"><i class="fas fa-sync-alt"></i> New Track</button>
            <button id="saveBtn"><i class="fas fa-save"></i> Save Model</button>
            <button id="loadBtn"><i class="fas fa-upload"></i> Load Model</button>
        </div>
        
        <div class="stats">
            <div class="stat-item">
                <div><i class="fas fa-dna"></i> Generation</div>
                <div id="generationCount" class="stat-value">0</div>
            </div>
            <div class="stat-item">
                <div><i class="fas fa-car"></i> Alive</div>
                <div class="stat-value"><span id="aliveCount">0</span>/<span id="populationCount">0</span></div>
            </div>
            <div class="stat-item">
                <div><i class="fas fa-trophy"></i> Best Fitness</div>
                <div id="maxFitness" class="stat-value">0</div>
            </div>
            <div class="stat-item">
                <div><i class="fas fa-tachometer-alt"></i> FPS</div>
                <div id="fpsCounter" class="stat-value">0</div>
            </div>
        </div>
        
        <div class="settings">
            <div class="section-title">
                <i class="fas fa-sliders-h"></i> <h3>Simulation Settings</h3>
            </div>
            
            <div class="slider-container">
                <label for="populationSlider"><i class="fas fa-users"></i> Population Size:</label>
                <input type="range" id="populationSlider" min="10" max="300" value="100">
                <span id="populationValue">100</span>
            </div>
            
            <div class="slider-container">
                <label for="mutationSlider"><i class="fas fa-random"></i> Mutation Rate:</label>
                <input type="range" id="mutationSlider" min="1" max="100" value="10">
                <span id="mutationValue">10%</span>
            </div>
            
            <div class="slider-container">
                <label for="speedSlider"><i class="fas fa-fast-forward"></i> Simulation Speed:</label>
                <input type="range" id="speedSlider" min="1" max="30" value="5">
                <span id="speedValue">15x</span>
            </div>
            
            <div class="slider-container">
                <label><i class="fas fa-flag-checkered"></i> Track Progress:</label>
                <div class="progress-container">
                    <div id="bestProgressBar" class="progress-bar"></div>
                </div>
            </div>
        </div>
        
        <div class="settings">
            <div class="section-title">
                <i class="fas fa-info-circle"></i> <h3>About This Simulation</h3>
            </div>
            <p>This simulation demonstrates how AI can learn to drive using genetic algorithms and neural networks. Cars must navigate randomly generated tracks without any prior knowledge of the environment.</p>
            <p><strong>Key Improvements:</strong></p>
            <ul>
                <li><i class="fas fa-brain"></i> <strong>Enhanced Neural Network:</strong> Using Sigmoid activation function for smoother decision making</li>
                <li><i class="fas fa-random"></i> <strong>Crossover:</strong> Combining the best traits from parent models</li>
                <li><i class="fas fa-chart-line"></i> <strong>Adaptive Mutation:</strong> Automatically adjusts as generations progress</li>
                <li><i class="fas fa-bolt"></i> <strong>Performance Optimization:</strong> Delta-time based updates for consistent simulation</li>
                <li><i class="fas fa-exclamation-triangle"></i> <strong>Improved Collision Detection:</strong> More accurate polygon-based detection</li>
                <li><i class="fas fa-save"></i> <strong>Model Saving:</strong> Save and load your best models</li>
            </ul>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', () => {
            // Add roundRect polyfill for browsers that don't support it
            if (!CanvasRenderingContext2D.prototype.roundRect) {
                CanvasRenderingContext2D.prototype.roundRect = function(x, y, width, height, radius) {
                    if (typeof radius === 'undefined') {
                        radius = 5;
                    }
                    
                    this.beginPath();
                    this.moveTo(x + radius, y);
                    this.lineTo(x + width - radius, y);
                    this.arcTo(x + width, y, x + width, y + radius, radius);
                    this.lineTo(x + width, y + height - radius);
                    this.arcTo(x + width, y + height, x + width - radius, y + height, radius);
                    this.lineTo(x + radius, y + height);
                    this.arcTo(x, y + height, x, y + height - radius, radius);
                    this.lineTo(x, y + radius);
                    this.arcTo(x, y, x + radius, y, radius);
                    this.closePath();
                    return this;
                };
            }
            
            // Canvas 설정
            const canvas = document.getElementById('simulationCanvas');
            const ctx = canvas.getContext('2d');
            
            // UI 요소
            const startBtn = document.getElementById('startBtn');
            const pauseBtn = document.getElementById('pauseBtn');
            const resetBtn = document.getElementById('resetBtn');
            const saveBtn = document.getElementById('saveBtn');
            const loadBtn = document.getElementById('loadBtn');
            
            const populationSlider = document.getElementById('populationSlider');
            const mutationSlider = document.getElementById('mutationSlider');
            const speedSlider = document.getElementById('speedSlider');
            
            const populationValue = document.getElementById('populationValue');
            const mutationValue = document.getElementById('mutationValue');
            const speedValue = document.getElementById('speedValue');
            
            const generationCount = document.getElementById('generationCount');
            const aliveCount = document.getElementById('aliveCount');
            const populationCount = document.getElementById('populationCount');
            const maxFitness = document.getElementById('maxFitness');
            const fpsCounter = document.getElementById('fpsCounter');
            const bestProgressBar = document.getElementById('bestProgressBar');
            
            // 시뮬레이션 매개변수
            let populationSize = parseInt(populationSlider.value);
            let mutationRate = parseInt(mutationSlider.value) / 100;
            let simulationSpeed = parseInt(speedSlider.value) * 3; // 3배 빠른 속도
            let isRunning = false;
            let generation = 0;
            let fps = 0;
            let bestCarProgress = 0;
            let deltaTime = 0;
            let lastUpdateTime = 0;
            let frameCount = 0;
            let lastFpsUpdate = 0;
            
            // 활성화 함수
            const sigmoid = (x) => 1 / (1 + Math.exp(-x));
            const relu = (x) => Math.max(0, x);
            
            // 트랙 정의
            const track = {
                walls: [],
                checkpoints: [],
                startPosition: { x: 100, y: 250, angle: 0 },
                
                generateRandomTrack() {
                    this.walls = [];
                    this.checkpoints = [];
                    
                    // 외부 경계 벽 (항상 존재)
                    this.walls.push(
                        { 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 }  // 우측
                    );
                    
                    // 무작위 장애물 생성
                    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;
                        
                        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;
                        }
                        
                        // 시작 위치를 막지 않도록 확인
                        if (!(x < 150 && y < 300 && y + height > 200)) {
                            this.walls.push({ x, y, width, height });
                        }
                    }
                    
                    // 체크포인트 생성
                    const checkpointCount = 3 + Math.floor(Math.random() * 3);
                    const checkpointSize = 30;
                    
                    // 장애물 주변을 통과해야 하는 위치 생성
                    const possiblePositions = [
                        { x: 700, y: 100 }, // 우측 상단
                        { x: 600, y: 400 }, // 우측 하단 중앙
                        { x: 300, y: 400 }, // 하단 중앙
                        { x: 100, y: 300 }, // 좌측 중앙
                        { x: 400, y: 100 }, // 상단 중앙
                        { x: 200, y: 200 }, // 좌측 중앙
                        { x: 600, y: 200 }  // 우측 중앙
                    ];
                    
                    // 셔플하고 체크포인트 수만큼 선택
                    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
                        });
                    }
                    
                    // 시작 위치 설정 (항상 좌측, 수직 위치는 무작위)
                    this.startPosition = {
                        x: 100,
                        y: 100 + Math.random() * 300,
                        angle: 0
                    };
                },
                
                draw(ctx) {
                    // 벽 그리기
                    ctx.fillStyle = '#4a5568';
                    this.walls.forEach(wall => {
                        ctx.fillRect(wall.x, wall.y, wall.width, wall.height);
                    });
                    
                    // 체크포인트 그리기
                    ctx.fillStyle = 'rgba(74, 222, 128, 0.3)';
                    this.checkpoints.forEach((checkpoint, index) => {
                        ctx.fillRect(checkpoint.x, checkpoint.y, checkpoint.width, checkpoint.height);
                        
                        // Add checkpoint number
                        ctx.fillStyle = 'white';
                        ctx.font = '12px Arial';
                        ctx.textAlign = 'center';
                        ctx.textBaseline = 'middle';
                        ctx.fillText((index + 1).toString(), 
                                    checkpoint.x + checkpoint.width/2, 
                                    checkpoint.y + checkpoint.height/2);
                        
                        ctx.fillStyle = 'rgba(74, 222, 128, 0.3)';
                    });
                    
                    // 시작 위치 그리기
                    ctx.fillStyle = 'rgba(96, 165, 250, 0.5)';
                    ctx.fillRect(this.startPosition.x - 15, this.startPosition.y - 25, 30, 50);
                    
                    // Draw start flag
                    ctx.fillStyle = 'white';
                    ctx.font = '14px Arial';
                    ctx.textAlign = 'center';
                    ctx.fillText("START", this.startPosition.x, this.startPosition.y + 15);
                }
            };
            
            // 자동차 클래스
            class Car {
                constructor(brain) {
                    this.reset();
                    this.brain = brain ? brain : new NeuralNetwork([5, 8, 2]);
                    this.fitness = 0;
                    this.checkpointIndex = 0;
                    this.sensors = [0, 0, 0, 0, 0]; // 전방, 좌측, 우측, 좌전방, 우전방
                    this.sensorAngles = [0, -Math.PI/4, Math.PI/4, -Math.PI/8, Math.PI/8];
                    this.sensorLength = 100;
                    this.color = 'rgba(59, 130, 246, 0.8)';
                    this.isBest = false;
                    this.lastPosition = { x: 0, y: 0 };
                    this.stuckTime = 0; // 자동차가 움직이지 않는 시간 추적
                }
                
                reset() {
                    this.x = track.startPosition.x;
                    this.y = track.startPosition.y;
                    this.angle = track.startPosition.angle;
                    this.speed = 0;
                    this.maxSpeed = 10; // 최대 속도 증가
                    this.acceleration = 0.2; // 가속도 증가
                    this.rotationSpeed = 0.1; // 회전 속도 증가
                    this.damaged = false;
                    this.checkpointIndex = 0;
                    this.fitness = 0;
                    this.stuckTime = 0;
                    this.lastPosition = { x: this.x, y: this.y };
                }
                
                update(dt) {
                    if (this.damaged) return;
                    
                    // 이전 위치 저장
                    this.lastPosition = { x: this.x, y: this.y };
                    
                    // 센서 업데이트
                    this.updateSensors();
                    
                    // 신경망 출력 가져오기
                    const outputs = this.brain.predict(this.sensors);
                    
                    // 조향 적용 (outputs[0] = 왼쪽, outputs[1] = 오른쪽)
                    const steering = outputs[1] - outputs[0]; // -1에서 1 사이
                    this.angle += steering * this.rotationSpeed * dt;
                    
                    // 속도와 위치 업데이트
                    this.speed = this.maxSpeed;
                    this.x += Math.sin(this.angle) * this.speed * dt;
                    this.y -= Math.cos(this.angle) * this.speed * dt;
                    
                    // 충돌 검사
                    this.checkCollisions();
                    
                    // 체크포인트 검사
                    this.checkCheckpoints();
                    
                    // 정지 확인 (자동차가 움직이지 않는 경우)
                    const distance = Math.sqrt(
                        Math.pow(this.x - this.lastPosition.x, 2) + 
                        Math.pow(this.y - this.lastPosition.y, 2)
                    );
                    
                    if (distance < 0.5 * dt) {
                        this.stuckTime += dt;
                        if (this.stuckTime > 1.5) { // 정지 판단 시간 단축 (3초 → 1.5초)
                            this.damaged = true;
                        }
                    } else {
                        this.stuckTime = 0;
                        
                        // 적합도 업데이트
                        this.fitness += distance; // 이동 거리에 따른 적합도
                    }
                }
                
                updateSensors() {
                    this.sensors = this.sensorAngles.map(angle => {
                        const sensorAngle = this.angle + angle;
                        let sensorEndX = this.x + Math.sin(sensorAngle) * this.sensorLength;
                        let sensorEndY = this.y - Math.cos(sensorAngle) * this.sensorLength;
                        
                        let minDistance = this.sensorLength;
                        
                        // 모든 벽에 대해 검사
                        for (const wall of track.walls) {
                            const intersection = this.lineRectIntersection(
                                this.x, this.y, sensorEndX, sensorEndY,
                                wall.x, wall.y, wall.width, wall.height
                            );
                            
                            if (intersection) {
                                const distance = Math.sqrt(
                                    Math.pow(intersection.x - this.x, 2) + 
                                    Math.pow(intersection.y - this.y, 2)
                                );
                                
                                minDistance = Math.min(minDistance, distance);
                            }
                        }
                        
                        // 정규화된 거리 반환 (0-1 범위; 1 = 장애물 없음, 0 = 자동차 바로 앞에 장애물)
                        return 1 - (minDistance / this.sensorLength);
                    });
                }
                
                lineRectIntersection(x1, y1, x2, y2, rx, ry, rw, rh) {
                    // 직선이 직사각형의 변과 교차하는지 확인
                    const left = this.lineLineIntersection(x1, y1, x2, y2, rx, ry, rx, ry + rh);
                    const right = this.lineLineIntersection(x1, y1, x2, y2, rx + rw, ry, rx + rw, ry + rh);
                    const top = this.lineLineIntersection(x1, y1, x2, y2, rx, ry, rx + rw, ry);
                    const bottom = this.lineLineIntersection(x1, y1, x2, y2, rx, ry + rh, rx + rw, ry + rh);
                    
                    let closestIntersection = null;
                    let minDistance = Infinity;
                    
                    [left, right, top, bottom].forEach(intersection => {
                        if (intersection) {
                            const distance = Math.sqrt(Math.pow(intersection.x - x1, 2) + Math.pow(intersection.y - y1, 2));
                            if (distance < minDistance) {
                                minDistance = distance;
                                closestIntersection = intersection;
                            }
                        }
                    });
                    
                    return closestIntersection;
                }
                
                lineLineIntersection(x1, y1, x2, y2, x3, y3, x4, y4) {
                    // 두 직선 사이의 교차점 계산
                    const denominator = (y4 - y3) * (x2 - x1) - (x4 - x3) * (y2 - y1);
                    
                    if (denominator === 0) return null; // 직선이 평행
                    
                    const ua = ((x4 - x3) * (y1 - y3) - (y4 - y3) * (x1 - x3)) / denominator;
                    const ub = ((x2 - x1) * (y1 - y3) - (y2 - y1) * (x1 - x3)) / denominator;
                    
                    if (ua >= 0 && ua <= 1 && ub >= 0 && ub <= 1) {
                        return {
                            x: x1 + ua * (x2 - x1),
                            y: y1 + ua * (y2 - y1)
                        };
                    }
                    
                    return null;
                }
                
                checkCollisions() {
                    // 벽과의 충돌 감지 (개선된 계산)
                    // 자동차를 다각형으로 표현하여 더 정확한 충돌 감지
                    const carCorners = this.getCarCorners();
                    
                    // 모든 벽에 대해 검사
                    for (const wall of track.walls) {
                        // 간단한 사각형 충돌 확인 (최적화를 위한 첫 단계)
                        if (this.x > wall.x - 10 && this.x < wall.x + wall.width + 10 &&
                            this.y > wall.y - 10 && this.y < wall.y + wall.height + 10) {
                            
                            // 자동차 꼭지점이 벽 내부에 있는지 확인
                            for (const corner of carCorners) {
                                if (corner.x > wall.x && corner.x < wall.x + wall.width &&
                                    corner.y > wall.y && corner.y < wall.y + wall.height) {
                                    this.damaged = true;
                                    return;
                                }
                            }
                        }
                    }
                    
                    // 경계 확인
                    if (this.x < 0 || this.x > canvas.width || this.y < 0 || this.y > canvas.height) {
                        this.damaged = true;
                    }
                }
                
                getCarCorners() {
                    // 자동차의 네 꼭지점 계산
                    const width = 12;
                    const height = 20;
                    const cornerOffsets = [
                        { x: -width/2, y: -height/2 }, // 좌상단
                        { x: width/2, y: -height/2 },  // 우상단
                        { x: width/2, y: height/2 },   // 우하단
                        { x: -width/2, y: height/2 }   // 좌하단
                    ];
                    
                    return cornerOffsets.map(offset => {
                        const rotatedX = offset.x * Math.cos(this.angle) - offset.y * Math.sin(this.angle);
                        const rotatedY = offset.x * Math.sin(this.angle) + offset.y * Math.cos(this.angle);
                        return {
                            x: this.x + rotatedX,
                            y: this.y + rotatedY
                        };
                    });
                }
                
                checkCheckpoints() {
                    if (this.checkpointIndex >= track.checkpoints.length) return;
                    
                    const checkpoint = track.checkpoints[this.checkpointIndex];
                    if (this.x > checkpoint.x && this.x < checkpoint.x + checkpoint.width &&
                        this.y > checkpoint.y && this.y < checkpoint.y + checkpoint.height) {
                        this.checkpointIndex++;
                        this.fitness += 1000; // Bonus for reaching checkpoint
                        
                        // Update best progress visualization
                        const progress = this.checkpointIndex / track.checkpoints.length;
                        if (progress > bestCarProgress) {
                            bestCarProgress = progress;
                            bestProgressBar.style.width = `${progress * 100}%`;
                            
                            // Add confetti effect for completed checkpoints
                            if (this.checkpointIndex > 0) {
                                createConfetti(10, this.x, this.y);
                            }
                        }
                    }
                }
                
                draw(ctx) {
                    if (this.damaged) return;
                    
                    ctx.save();
                    ctx.translate(this.x, this.y);
                    ctx.rotate(this.angle);
                    
                    // Draw car body - Enhanced car shape with emoji style
                    if (this.isBest) {
                        // Draw fancy car for the best performer
                        ctx.fillStyle = 'rgba(220, 38, 38, 0.9)';
                        
                        // Main body - using rectangles instead of roundRect to avoid issues
                        ctx.fillRect(-6, -10, 12, 20);
                        
                        // Wheels
                        ctx.fillStyle = '#000';
                        ctx.fillRect(-7, -8, 2, 4); // left front
                        ctx.fillRect(5, -8, 2, 4);  // right front
                        ctx.fillRect(-7, 4, 2, 4);  // left rear
                        ctx.fillRect(5, 4, 2, 4);   // right rear
                        
                        // Windshield
                        ctx.fillStyle = '#60a5fa';
                        ctx.fillRect(-4, -8, 8, 6);
                        
                        // Draw a small crown on top
                        ctx.fillStyle = '#facc15';
                        ctx.beginPath();
                        ctx.moveTo(-3, -11);
                        ctx.lineTo(-1, -13);
                        ctx.lineTo(1, -11);
                        ctx.lineTo(3, -13);
                        ctx.lineTo(3, -10);
                        ctx.lineTo(-3, -10);
                        ctx.fill();
                    } else {
                        // Regular car
                        ctx.fillStyle = this.color;
                        
                        // Main body - using rectangles 
                        ctx.fillRect(-6, -10, 12, 20);
                        
                        // Wheels (simple)
                        ctx.fillStyle = '#000';
                        ctx.fillRect(-7, -7, 2, 3); // left front
                        ctx.fillRect(5, -7, 2, 3);  // right front
                        ctx.fillRect(-7, 4, 2, 3);  // left rear
                        ctx.fillRect(5, 4, 2, 3);   // right rear
                        
                        // Simple windshield
                        ctx.fillStyle = '#a3e0ff';
                        ctx.fillRect(-4, -7, 8, 5);
                    }
                    
                    // 최고 자동차의 센서 그리기
                    if (this.isBest) {
                        ctx.restore(); // 컨텍스트 복원
                        
                        // 센서 레이 그리기
                        ctx.strokeStyle = 'rgba(255, 255, 255, 0.5)';
                        ctx.lineWidth = 1;
                        
                        this.sensorAngles.forEach((angle, i) => {
                            const sensorAngle = this.angle + angle;
                            const sensorValue = this.sensors[i];
                            const sensorLength = this.sensorLength * (1 - sensorValue);
                            
                            const endX = this.x + Math.sin(sensorAngle) * sensorLength;
                            const endY = this.y - Math.cos(sensorAngle) * sensorLength;
                            
                            ctx.beginPath();
                            ctx.moveTo(this.x, this.y);
                            ctx.lineTo(endX, endY);
                            ctx.stroke();
                        });
                        
                        return; // 이미 ctx.restore()를 호출했으므로 여기서 종료
                    }
                    
                    ctx.restore();
                }
                
                clone() {
                    return new Car(this.brain.clone());
                }
            }
            
            // 신경망 클래스
            class NeuralNetwork {
                constructor(neuronCounts) {
                    this.levels = [];
                    for (let i = 0; i < neuronCounts.length - 1; i++) {
                        this.levels.push(new Level(
                            neuronCounts[i], neuronCounts[i + 1]
                        ));
                    }
                }
                
                predict(givenInputs) {
                    let outputs = Level.feedForward(
                        givenInputs, this.levels[0]
                    );
                    
                    for (let i = 1; i < this.levels.length; i++) {
                        outputs = Level.feedForward(
                            outputs, this.levels[i]
                        );
                    }
                    
                    return outputs;
                }
                
                clone() {
                    const clone = new NeuralNetwork([]);
                    clone.levels = this.levels.map(level => level.clone());
                    return clone;
                }
                
                mutate(rate) {
                    for (const level of this.levels) {
                        for (let i = 0; i < level.biases.length; i++) {
                            if (Math.random() < rate) {
                                level.biases[i] = lerp(
                                    level.biases[i],
                                    Math.random() * 2 - 1,
                                    0.5
                                );
                            }
                        }
                        for (let i = 0; i < level.weights.length; i++) {
                            for (let j = 0; j < level.weights[i].length; j++) {
                                if (Math.random() < rate) {
                                    level.weights[i][j] = lerp(
                                        level.weights[i][j],
                                        Math.random() * 2 - 1,
                                        0.5
                                    );
                                }
                            }
                        }
                    }
                }
                
                static crossover(parentA, parentB) {
                    // 두 부모 신경망에서 새 신경망 생성
                    if (parentA.levels.length !== parentB.levels.length) {
                        console.error("부모 신경망 구조가 다릅니다!");
                        return parentA.clone();
                    }
                    
                    const childNetwork = new NeuralNetwork([]);
                    childNetwork.levels = [];
                    
                    for (let l = 0; l < parentA.levels.length; l++) {
                        const levelA = parentA.levels[l];
                        const levelB = parentB.levels[l];
                        
                        if (levelA.inputs.length !== levelB.inputs.length || 
                            levelA.outputs.length !== levelB.outputs.length) {
                            console.error("부모 레벨 구조가 다릅니다!");
                            return parentA.clone();
                        }
                        
                        const childLevel = new Level(levelA.inputs.length, levelA.outputs.length);
                        
                        // 교차점 선택 (단일점 교차)
                        const biasesSwitch = Math.floor(Math.random() * levelA.biases.length);
                        
                        // 바이어스 교차
                        for (let i = 0; i < childLevel.biases.length; i++) {
                            childLevel.biases[i] = i < biasesSwitch 
                                ? levelA.biases[i] 
                                : levelB.biases[i];
                        }
                        
                        // 가중치 교차
                        for (let i = 0; i < childLevel.weights.length; i++) {
                            const weightSwitch = Math.floor(Math.random() * levelA.weights[i].length);
                            
                            for (let j = 0; j < childLevel.weights[i].length; j++) {
                                childLevel.weights[i][j] = j < weightSwitch 
                                    ? levelA.weights[i][j] 
                                    : levelB.weights[i][j];
                            }
                        }
                        
                        childNetwork.levels.push(childLevel);
                    }
                    
                    return childNetwork;
                }
                
                toJSON() {
                    return {
                        levels: this.levels.map(level => ({
                            inputs: level.inputs,
                            outputs: level.outputs,
                            biases: level.biases,
                            weights: level.weights
                        }))
                    };
                }
                
                static fromJSON(data) {
                    const network = new NeuralNetwork([]);
                    network.levels = data.levels.map(levelData => {
                        const level = new Level(levelData.inputs.length, levelData.outputs.length);
                        level.inputs = [...levelData.inputs];
                        level.outputs = [...levelData.outputs];
                        level.biases = [...levelData.biases];
                        level.weights = levelData.weights.map(w => [...w]);
                        return level;
                    });
                    return network;
                }
            }
            
            function lerp(a, b, t) {
                return a + (b - a) * t;
            }
            
            class Level {
                constructor(inputCount, outputCount) {
                    this.inputs = new Array(inputCount);
                    this.outputs = new Array(outputCount);
                    this.biases = new Array(outputCount);
                    this.weights = [];
                    
                    for (let i = 0; i < inputCount; i++) {
                        this.weights[i] = new Array(outputCount);
                    }
                    
                    Level.#randomize(this);
                }
                
                static #randomize(level) {
                    for (let i = 0; i < level.inputs.length; i++) {
                        for (let j = 0; j < level.outputs.length; j++) {
                            level.weights[i][j] = Math.random() * 2 - 1;
                        }
                    }
                    
                    for (let i = 0; i < level.biases.length; i++) {
                        level.biases[i] = Math.random() * 2 - 1;
                    }
                }
                
                static feedForward(givenInputs, level) {
                    // 입력 값 설정
                    for (let i = 0; i < level.inputs.length; i++) {
                        level.inputs[i] = givenInputs[i];
                    }
                    
                    // 각 출력 뉴런에 대해 가중 합계 계산
                    for (let i = 0; i < level.outputs.length; i++) {
                        let sum = 0;
                        for (let j = 0; j < level.inputs.length; j++) {
                            sum += level.inputs[j] * level.weights[j][i];
                        }
                        
                        // Sigmoid 활성화 함수 적용
                        level.outputs[i] = sigmoid(sum - level.biases[i]);
                    }
                    
                    return level.outputs;
                }
                
                clone() {
                    const clone = new Level(this.inputs.length, this.outputs.length);
                    clone.inputs = [...this.inputs];
                    clone.outputs = [...this.outputs];
                    clone.biases = [...this.biases];
                    clone.weights = this.weights.map(arr => [...arr]);
                    return clone;
                }
            }
            
            // 유전 알고리즘 함수
            function nextGeneration() {
                generation++;
                generationCount.textContent = generation;
                
                // 적합도 계산
                calculateFitness();
                
                // 새 인구 생성
                const newPopulation = [];
                
                // 적응형 돌연변이율 적용
                const progressRate = bestCarProgress;
                const adaptedRate = mutationRate * (1 - progressRate * 0.5);
                mutationRate = Math.max(0.01, adaptedRate); // 최소 1%
                mutationValue.textContent = `${Math.round(mutationRate * 100)}%`;
                mutationSlider.value = Math.round(mutationRate * 100);
                
                // 이전 세대에서 최고 자동차 추가 (엘리티즘)
                const eliteCount = Math.max(1, Math.floor(populationSize * 0.05)); // 5% 엘리트
                const eliteCars = getTopCars(eliteCount);
                
                for (const eliteCar of eliteCars) {
                    eliteCar.isBest = eliteCar === eliteCars[0];
                    newPopulation.push(eliteCar.clone());
                }
                
                // 교차와 돌연변이로 나머지 채우기
                while (newPopulation.length < populationSize) {
                    if (Math.random() < 0.7 && newPopulation.length + 1 < populationSize) {
                        // 교차
                        const parentA = selectParent();
                        const parentB = selectParent();
                        const child = new Car(NeuralNetwork.crossover(parentA.brain, parentB.brain));
                        
                        // 자식에게 약간의 돌연변이 적용
                        child.brain.mutate(mutationRate);
                        newPopulation.push(child);
                    } else {
                        // 돌연변이만
                        const parent = selectParent();
                        const child = parent.clone();
                        child.brain.mutate(mutationRate);
                        newPopulation.push(child);
                    }
                }
                
                // 이전 인구 교체
                cars = newPopulation;
                
                // 자동차 초기화
                cars.forEach(car => car.reset());
                
                // 진행률 초기화
                bestCarProgress = 0;
                bestProgressBar.style.width = '0%';
            }
            
            function calculateFitness() {
                let sum = 0;
                let max = 0;
                
                cars.forEach(car => {
                    // 체크포인트 달성 보너스
                    car.fitness += car.checkpointIndex * 500;
                    
                    sum += car.fitness;
                    if (car.fitness > max) max = car.fitness;
                });
                
                // 적합도 정규화
                cars.forEach(car => {
                    car.fitness = car.fitness / sum;
                });
                
                // UI 업데이트
                maxFitness.textContent = Math.round(max);
            }
            
            function getTopCars(count) {
                return [...cars]
                    .sort((a, b) => b.fitness - a.fitness)
                    .slice(0, count);
            }
            
            function getBestCar() {
                let bestCar = cars[0];
                let bestFitness = cars[0].fitness;
                
                for (let i = 1; i < cars.length; i++) {
                    if (cars[i].fitness > bestFitness) {
                        bestFitness = cars[i].fitness;
                        bestCar = cars[i];
                    }
                }
                
                return bestCar;
            }
            
            function selectParent() {
                // 룰렛 휠 선택
                let index = 0;
                let r = Math.random();
                
                while (r > 0 && index < cars.length) {
                    r -= cars[index].fitness;
                    index++;
                }
                
                index = Math.min(cars.length - 1, Math.max(0, index - 1));
                return cars[index];
            }
            
            // 모델 저장/불러오기 함수
            function saveBestModel() {
                const bestCar = getBestCar();
                if (bestCar) {
                    try {
                        const modelData = {
                            brain: bestCar.brain.toJSON(),
                            fitness: bestCar.fitness,
                            generation: generation,
                            timestamp: new Date().toISOString()
                        };
                        
                        localStorage.setItem('bestCarModel', JSON.stringify(modelData));
                        return true;
                    } catch (error) {
                        console.error('Error saving model:', error);
                        return false;
                    }
                }
                return false;
            }
            
            function loadModel() {
                try {
                    const savedModel = localStorage.getItem('bestCarModel');
                    if (savedModel) {
                        const modelData = JSON.parse(savedModel);
                        
                        // Use saved model for new population
                        const newPopulation = [];
                        
                        // Create best car with restored brain
                        const restoredBrain = NeuralNetwork.fromJSON(modelData.brain);
                        const bestCar = new Car(restoredBrain);
                        bestCar.isBest = true;
                        newPopulation.push(bestCar);
                        
                        // Create variants from this model to fill population
                        for (let i = 1; i < populationSize; i++) {
                            const car = bestCar.clone();
                            car.brain.mutate(mutationRate);
                            newPopulation.push(car);
                        }
                        
                        // Replace population
                        cars = newPopulation;
                        
                        // Reset cars
                        cars.forEach(car => car.reset());
                        
                        // Create a celebratory confetti effect
                        createConfetti(50, canvas.width/2, canvas.height/2);
                        
                        return true;
                    }
                } catch (error) {
                    console.error('Error loading model:', error);
                }
                return false;
            }
            
            // Reduce maximum number of confetti particles
            const MAX_CONFETTI = 300;
            const confetti = [];
            
            function createConfetti(count, x, y) {
                // Limit the number of particles to prevent performance issues
                if (confetti.length > MAX_CONFETTI) {
                    // Remove older particles if we exceed the limit
                    confetti.splice(0, count);
                }
                
                const actualCount = Math.min(count, 50); // Limit particles per burst
                
                for (let i = 0; i < actualCount; i++) {
                    confetti.push({
                        x: x,
                        y: y,
                        size: 3 + Math.random() * 5,
                        color: `hsl(${Math.random() * 360}, 100%, 70%)`,
                        vx: -2 + Math.random() * 4,
                        vy: -3 - Math.random() * 2,
                        gravity: 0.1,
                        life: 1, // 1 = full life, 0 = dead
                        maxLife: 1 + Math.random()
                    });
                }
            }
            
            function updateConfetti(dt) {
                for (let i = confetti.length - 1; i >= 0; i--) {
                    const particle = confetti[i];
                    
                    // Update position
                    particle.x += particle.vx * dt * 60;
                    particle.y += particle.vy * dt * 60;
                    particle.vy += particle.gravity * dt * 60;
                    
                    // Update life
                    particle.life -= 0.016 * dt * 60;
                    
                    // Remove dead particles
                    if (particle.life <= 0) {
                        confetti.splice(i, 1);
                    }
                }
            }
            
            function drawConfetti(ctx) {
                for (const particle of confetti) {
                    ctx.fillStyle = particle.color;
                    ctx.globalAlpha = particle.life;
                    ctx.fillRect(
                        particle.x - particle.size/2, 
                        particle.y - particle.size/2, 
                        particle.size, 
                        particle.size
                    );
                }
                ctx.globalAlpha = 1;
            }
            
            function checkCourseCompletion() {
                const bestCar = getBestCar();
                
                // Prevent function from firing multiple times for the same completion
                if (bestCar && bestCar.checkpointIndex === track.checkpoints.length && !window.courseCompleted) {
                    // Set a flag to prevent multiple triggers
                    window.courseCompleted = true;
                    
                    // Launch a moderate amount of celebratory confetti
                    createConfetti(50, canvas.width/2, canvas.height/2);
                    
                    // Use setTimeout for additional confetti bursts to spread them out
                    setTimeout(() => createConfetti(25, canvas.width/4, canvas.height/2), 300);
                    setTimeout(() => createConfetti(25, 3*canvas.width/4, canvas.height/2), 600);
                    
                    // Show victory message
                    const message = document.createElement('div');
                    message.style.position = 'absolute';
                    message.style.top = '50%';
                    message.style.left = '50%';
                    message.style.transform = 'translate(-50%, -50%)';
                    message.style.background = 'rgba(16, 185, 129, 0.9)';
                    message.style.color = 'white';
                    message.style.padding = '20px';
                    message.style.borderRadius = '10px';
                    message.style.fontSize = '24px';
                    message.style.fontWeight = 'bold';
                    message.style.boxShadow = '0 4px 6px rgba(0, 0, 0, 0.1)';
                    message.style.zIndex = '1000';
                    message.style.textAlign = 'center';
                    message.innerHTML = `
                        <div><i class="fas fa-trophy"></i> Course Completed! <i class="fas fa-trophy"></i></div>
                        <div style="font-size: 16px; margin-top: 10px;">
                            Generations: ${generation}<br>
                            Fitness: ${Math.round(bestCar.fitness * 1000)}
                        </div>
                        <button id="continueBtn" style="
                            background-color: white;
                            color: #10b981;
                            border: none;
                            padding: 8px 16px;
                            border-radius: 5px;
                            margin-top: 15px;
                            cursor: pointer;
                            font-weight: bold;">
                            Continue Training
                        </button>
                    `;
                    
                    document.body.appendChild(message);
                    
                    // Pause simulation
                    isRunning = false;
                    cancelAnimationFrame(animationId);
                    
                    // Event listener for the continue button
                    document.getElementById('continueBtn').addEventListener('click', () => {
                        document.body.removeChild(message);
                        isRunning = true;
                        window.courseCompleted = false; // Reset the completion flag
                        lastUpdateTime = performance.now();
                        animate();
                    });
                }
            }
            
            // 시뮬레이션 상태
            let cars = [];
            let animationId;
            
            // 시뮬레이션 초기화
            function init() {
                // 무작위 트랙 생성
                track.generateRandomTrack();
                
                // 초기 인구 생성
                cars = [];
                for (let i = 0; i < populationSize; i++) {
                    cars.push(new Car());
                }
                
                // 통계 초기화
                generation = 0;
                generationCount.textContent = generation;
                populationCount.textContent = populationSize;
                
                // 시뮬레이션 시작
                isRunning = true;
                lastUpdateTime = performance.now();
                animate(); // Fix: Changed from init() to animate()
            }
            
            // 결과 업데이트 속도 제한 (매 프레임마다 하지 않고 10프레임마다 한 번씩)
            let updateFrameCount = 0;
            
            // 주요 애니메이션 루프
            function animate(currentTime = 0) {
                if (!isRunning) return;
                
                animationId = requestAnimationFrame(animate);
                
                // 델타 타임 계산
                deltaTime = (currentTime - lastUpdateTime) / 1000; // 초 단위
                lastUpdateTime = currentTime;
                
                // 시뮬레이션 속도 적용
                deltaTime *= simulationSpeed;
                
                // 최대 델타 타임 제한 (시뮬레이션 안정성을 위해)
                deltaTime = Math.min(deltaTime, 0.2);
                
                // FPS 계산 (10프레임마다 업데이트)
                frameCount++;
                updateFrameCount++;
                if (currentTime - lastFpsUpdate >= 1000) {
                    fps = Math.round((frameCount * 1000) / (currentTime - lastFpsUpdate));
                    if (updateFrameCount >= 10) {
                        fpsCounter.textContent = fps;
                        updateFrameCount = 0;
                    }
                    frameCount = 0;
                    lastFpsUpdate = currentTime;
                }
                
                // 캔버스 지우기
                ctx.clearRect(0, 0, canvas.width, canvas.height);
                
                // 트랙 그리기
                track.draw(ctx);
                
                // 자동차 업데이트 및 그리기
                let alive = 0;
                cars.forEach(car => {
                    car.update(deltaTime);
                    car.draw(ctx);
                    if (!car.damaged) alive++;
                });
                
                // Draw confetti particles
                updateConfetti(deltaTime);
                drawConfetti(ctx);
                
                aliveCount.textContent = alive;
                
                // 모든 자동차가 손상되었는지 확인
                if (alive === 0) {
                    nextGeneration();
                }
                
                // 최고 자동차 강조 표시 및 코스 완료 확인
                const bestCar = getBestCar();
                if (bestCar) {
                    bestCar.isBest = true;
                    bestCar.color = 'rgba(220, 38, 38, 0.9)';
                    
                    // Check if the best car has completed the course
                    checkCourseCompletion();
                }
            }
            
            // 이벤트 리스너
            startBtn.addEventListener('click', () => {
                if (!isRunning) {
                    isRunning = true;
                    lastUpdateTime = performance.now();
                    animate();
                }
            });
            
            pauseBtn.addEventListener('click', () => {
                isRunning = false;
                cancelAnimationFrame(animationId);
            });
            
            resetBtn.addEventListener('click', () => {
                isRunning = false;
                cancelAnimationFrame(animationId);
                init();
            });
            
            saveBtn.addEventListener('click', () => {
                if (saveBestModel()) {
                    alert('Model saved successfully!');
                } else {
                    alert('Error saving model');
                }
            });
            
            loadBtn.addEventListener('click', () => {
                if (loadModel()) {
                    alert('Model loaded successfully!');
                } else {
                    alert('No saved model found or error loading model');
                }
            });
            
            // 슬라이더 이벤트 리스너
            populationSlider.addEventListener('input', () => {
                populationSize = parseInt(populationSlider.value);
                populationValue.textContent = populationSize;
                populationCount.textContent = populationSize;
            });
            
            mutationSlider.addEventListener('input', () => {
                mutationRate = parseInt(mutationSlider.value) / 100;
                mutationValue.textContent = `${parseInt(mutationSlider.value)}%`;
            });
            
            speedSlider.addEventListener('input', () => {
                simulationSpeed = parseInt(speedSlider.value) * 3;
                speedValue.textContent = `${simulationSpeed}x`;
            });
            
            // 시뮬레이션 초기화 및 시작
            init();
        });
    </script>
</body>
</html>