Spaces:

traromal
/

Ant_Colony_optimization

Running

App Files Files Community

Ant_Colony_optimization / index.html

traromal

Update index.html

9aab891 verified 29 days ago

raw

history blame contribute delete

6.83 kB

	<!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>