traromal/Genetic_Algorithm

1<!DOCTYPE html>2<html lang="en">3<head>4  <meta charset="UTF-8">5  <meta name="viewport" content="width=device-width, initial-scale=1.0">6  <title>Interactive Genetic Algorithm</title>7  <style>8    body {9      font-family: 'Helvetica Neue', Arial, sans-serif;10      text-align: center;11      margin: 0;12      padding: 0;13      background: linear-gradient(135deg, #ffefba, #ffffff);14      color: #333;15    }16    h1 {17      color: #4a4e69;18    }19    p {20      color: #9a8c98;21    }22    canvas {23      border: 2px solid #c9ada7;24      background: #f2e9e4;25      margin: 20px auto;26      display: block;27      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);28    }29    .controls {30      margin: 20px auto;31      display: flex;32      justify-content: center;33      align-items: center;34      gap: 20px;35      flex-wrap: wrap;36    }37    .controls label {38      display: flex;39      align-items: center;40      gap: 10px;41      color: #6c5b7b;42    }43    .controls input, .controls button {44      padding: 10px 20px;45      font-size: 16px;46      border: none;47      border-radius: 5px;48      cursor: pointer;49      transition: background 0.3s, transform 0.3s;50    }51    .controls input {52      width: 100px;53      background: #f2e9e4;54      border: 1px solid #c9ada7;55      color: #6c5b7b;56    }57    .controls button {58      background: #a29bfe;59      color: white;60    }61    .controls button:hover {62      background: #6c5b7b;63      transform: scale(1.05);64    }65    .controls button:disabled {66      background: #c9ada7;67      cursor: not-allowed;68    }69  </style>70</head>71<body>72  <h1> Genetic Algorithm</h1>73  <p>Click on the canvas to set a target position. Adjust settings and evolve the population!</p>74  <div class="controls">75    <label>Population Size: <input id="populationSize" type="number" value="50" min="10" max="200"></label>76    <label>Mutation Rate: <input id="mutationRate" type="number" value="1" min="0" max="100">%</label>77    <button id="startButton">Start Evolution</button>78    <button id="stepButton">Step</button>79    <button id="resetButton">Reset</button>80  </div>81  <canvas id="gaCanvas" width="800" height="600"></canvas>82 83  <script>84 85    const canvas = document.getElementById('gaCanvas');86    const ctx = canvas.getContext('2d');87    const populationSizeInput = document.getElementById('populationSize');88    const mutationRateInput = document.getElementById('mutationRate');89    const startButton = document.getElementById('startButton');90    const stepButton = document.getElementById('stepButton');91    const resetButton = document.getElementById('resetButton');92 93    let running = false;94    let targetX = 400;95    let targetY = 300;96    let population = [];97    let generation = 0;98 99 100    class Creature {101      constructor(x, y) {102        this.x = x || Math.random() * canvas.width;103        this.y = y || Math.random() * canvas.height;104      }105 106 107      getFitness() {108        const dx = this.x - targetX;109        const dy = this.y - targetY;110        return 1 / (1 + Math.sqrt(dx * dx + dy * dy));111      }112 113     114      mutate(mutationRate) {115        if (Math.random() < mutationRate) {116          this.x += (Math.random() - 0.5) * 50;117          this.y += (Math.random() - 0.5) * 50;118        }119      }120 121 122      draw() {123        ctx.fillStyle = `rgba(94, 135, 243, ${this.getFitness()})`;124        ctx.beginPath();125        ctx.arc(this.x, this.y, 8, 0, Math.PI * 2);126        ctx.fill();127        ctx.strokeStyle = 'rgba(0, 0, 0, 0.2)';128        ctx.stroke();129      }130    }131 132    function generatePopulation(size) {133      const population = [];134      for (let i = 0; i < size; i++) {135        population.push(new Creature());136      }137      return population;138    }139 140 141    function selectParents(population) {142      const sorted = population.sort((a, b) => b.getFitness() - a.getFitness());143      return sorted.slice(0, Math.floor(population.length / 2));144    }145 146 147    function crossover(parent1, parent2) {148      const childX = (parent1.x + parent2.x) / 2;149      const childY = (parent1.y + parent2.y) / 2;150      return new Creature(childX, childY);151    }152 153 154    function evolvePopulation(population, mutationRate) {155      const parents = selectParents(population);156      const newPopulation = [];157 158  159      newPopulation.push(parents[0]);160 161 162      while (newPopulation.length < population.length) {163        const parent1 = parents[Math.floor(Math.random() * parents.length)];164        const parent2 = parents[Math.floor(Math.random() * parents.length)];165        const child = crossover(parent1, parent2);166        child.mutate(mutationRate);167        newPopulation.push(child);168      }169 170      return newPopulation;171    }172 173  174    function visualizePopulation(population, generation) {175      ctx.clearRect(0, 0, canvas.width, canvas.height);176 177 178      ctx.fillStyle = 'red';179      ctx.beginPath();180      ctx.arc(targetX, targetY, 10, 0, Math.PI * 2);181      ctx.fill();182 183 184      population.forEach(creature => creature.draw());185 186    187      ctx.fillStyle = 'black';188      ctx.font = '16px Arial';189      ctx.fillText(`Generation: ${generation}`, 10, 20);190    }191 192   193    canvas.addEventListener('click', (event) => {194      const rect = canvas.getBoundingClientRect();195      targetX = event.clientX - rect.left;196      targetY = event.clientY - rect.top;197    });198 199    startButton.addEventListener('click', () => {200      running = true;201      startButton.disabled = true;202      stepButton.disabled = true;203      resetButton.disabled = true;204 205      const evolutionInterval = setInterval(() => {206        if (!running) {207          clearInterval(evolutionInterval);208          startButton.disabled = false;209          stepButton.disabled = false;210          resetButton.disabled = false;211          return;212        }213 214        const populationSize = parseInt(populationSizeInput.value);215        const mutationRate = parseInt(mutationRateInput.value) / 100;216 217        if (population.length === 0) {218          population = generatePopulation(populationSize);219        }220 221        visualizePopulation(population, generation);222        population = evolvePopulation(population, mutationRate);223        generation++;224      }, 200);225    });226 227   228    stepButton.addEventListener('click', () => {229      if (population.length === 0) {230        const populationSize = parseInt(populationSizeInput.value);231        population = generatePopulation(populationSize);232      }233 234      const mutationRate = parseInt(mutationRateInput.value) / 100;235      visualizePopulation(population, generation);236      population = evolvePopulation(population, mutationRate);237      generation++;238    });239 240   241    resetButton.addEventListener('click', () => {242      population = [];243      generation = 0;244      visualizePopulation(population, generation);245    });246  </script>247</body>248</html>