index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Ant Colony Optimization with Controls</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: 100vh;
      margin: 0;
      background: #f4f4f4;
    }
    canvas {
      border: 1px solid #000;
      background: #fff;
      margin-top: 20px;
    }
    #controls {
      margin-top: 20px;
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    .control-group {
      margin: 10px 0;
      display: flex;
      align-items: center;
    }
    .control-group label {
      margin-right: 10px;
    }
    button {
      padding: 10px 20px;
      font-size: 16px;
      margin: 5px;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <h1>Ant Colony Optimization Simulation</h1>
  <canvas id="canvas" width="600" height="400"></canvas>
  <div id="controls">
    <div class="control-group">
      <label for="numAnts">Number of Ants:</label>
      <input type="number" id="numAnts" value="200" min="1" max="500">
    </div>
    <div class="control-group">
      <label for="evaporationRate">Evaporation Rate:</label>
      <input type="range" id="evaporationRate" min="0.8" max="0.99" step="0.01" value="0.95">
      <span id="evaporationRateValue">0.95</span>
    </div>
    <div class="control-group">
      <label for="pheromoneDeposit">Pheromone Deposit:</label>
      <input type="number" id="pheromoneDeposit" value="5" min="1" max="20">
    </div>
    <div class="control-group">
      <label for="gridSize">Grid Size:</label>
      <input type="number" id="gridSize" value="10" min="5" max="20">
    </div>
    <button id="start">Start Simulation</button>
    <button id="reset">Reset</button>
  </div>

  <script>
    // Canvas setup
    const canvas = document.getElementById('canvas');
    const ctx = canvas.getContext('2d');

    // Control elements
    const numAntsInput = document.getElementById('numAnts');
    const evaporationRateInput = document.getElementById('evaporationRate');
    const pheromoneDepositInput = document.getElementById('pheromoneDeposit');
    const gridSizeInput = document.getElementById('gridSize');
    const evaporationRateValue = document.getElementById('evaporationRateValue');

    // Simulation parameters
    let gridSize = parseInt(gridSizeInput.value);
    let gridWidth = canvas.width / gridSize;
    let gridHeight = canvas.height / gridSize;
    const nest = { x: 1, y: Math.floor(gridHeight / 2) };
    const food = { x: gridWidth - 2, y: Math.floor(gridHeight / 2) };
    let pheromoneGrid = Array.from({ length: gridWidth }, () => Array(gridHeight).fill(0));
    let ants = [];
    let numAnts = parseInt(numAntsInput.value);
    let evaporationRate = parseFloat(evaporationRateInput.value);
    let pheromoneDeposit = parseInt(pheromoneDepositInput.value);

    // Initialize ants
    function initializeAnts() {
      ants = [];
      for (let i = 0; i < numAnts; i++) {
        ants.push({
          x: nest.x,
          y: nest.y,
          hasFood: false,
        });
      }
    }

    // Random movement for ants
    function randomMove(ant) {
      const directions = [
        { dx: -1, dy: 0 }, // Left
        { dx: 1, dy: 0 },  // Right
        { dx: 0, dy: -1 }, // Up
        { dx: 0, dy: 1 },  // Down
      ];
      const randomDirection = directions[Math.floor(Math.random() * directions.length)];
      ant.x = Math.max(0, Math.min(gridWidth - 1, ant.x + randomDirection.dx));
      ant.y = Math.max(0, Math.min(gridHeight - 1, ant.y + randomDirection.dy));
    }

    // Draw grid and elements
    function draw() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);

      // Draw pheromone trails
      for (let x = 0; x < gridWidth; x++) {
        for (let y = 0; y < gridHeight; y++) {
          if (pheromoneGrid[x][y] > 0) {
            const intensity = pheromoneGrid[x][y] / 10;
            ctx.fillStyle = `rgba(0, 0, 255, ${intensity})`;
            ctx.fillRect(x * gridSize, y * gridSize, gridSize, gridSize);
          }
        }
      }

      // Draw nest and food
      ctx.fillStyle = 'green';
      ctx.fillRect(nest.x * gridSize, nest.y * gridSize, gridSize, gridSize);
      ctx.fillStyle = 'red';
      ctx.fillRect(food.x * gridSize, food.y * gridSize, gridSize, gridSize);

      // Draw ants
      ctx.fillStyle = 'black';
      ants.forEach(ant => {
        ctx.beginPath();
        ctx.arc((ant.x + 0.5) * gridSize, (ant.y + 0.5) * gridSize, gridSize / 4, 0, Math.PI * 2);
        ctx.fill();
      });
    }

    // Move ants
    function moveAnts() {
      ants.forEach(ant => {
        randomMove(ant); // Move randomly

        // Check if ant reaches food or nest
        if (ant.x === food.x && ant.y === food.y) {
          ant.hasFood = true;
        }
        if (ant.x === nest.x && ant.y === nest.y) {
          ant.hasFood = false;
        }

        // Deposit pheromone if carrying food
        if (ant.hasFood) {
          pheromoneGrid[ant.x][ant.y] += pheromoneDeposit;
        }
      });
    }

    // Evaporate pheromones
    function evaporatePheromones() {
      for (let x = 0; x < gridWidth; x++) {
        for (let y = 0; y < gridHeight; y++) {
          pheromoneGrid[x][y] *= evaporationRate;
        }
      }
    }

    // Update grid size
    function updateGridSize() {
      gridSize = parseInt(gridSizeInput.value);
      gridWidth = canvas.width / gridSize;
      gridHeight = canvas.height / gridSize;
      pheromoneGrid = Array.from({ length: gridWidth }, () => Array(gridHeight).fill(0));
      initializeAnts();
    }

    // Simulation loop
    function simulate() {
      moveAnts();
      evaporatePheromones();
      draw();
      requestAnimationFrame(simulate);
    }

    // Event listeners
    document.getElementById('start').addEventListener('click', () => {
      updateGridSize();
      simulate();
    });

    document.getElementById('reset').addEventListener('click', () => {
      updateGridSize();
      pheromoneGrid.forEach((row, x) => row.fill(0));
      draw();
    });

    numAntsInput.addEventListener('input', () => {
      numAnts = parseInt(numAntsInput.value);
      initializeAnts();
    });

    evaporationRateInput.addEventListener('input', () => {
      evaporationRate = parseFloat(evaporationRateInput.value);
      evaporationRateValue.textContent = evaporationRate.toFixed(2);
    });

    pheromoneDepositInput.addEventListener('input', () => {
      pheromoneDeposit = parseInt(pheromoneDepositInput.value);
    });

    gridSizeInput.addEventListener('input', () => {
      updateGridSize();
    });
  </script>
</body>
</html>