Prompt utilise pour regenerer cette page :
Page: Ant Colony Optimization - Swarm Intelligence Simulation
Description: "Follow the pheromone trails to discover emergent intelligence"
Icon: "map-marker-path"
Tags: ["swarm", "optimization", "pathfinding", "simulation"]
Status: ["on-going"]
=== STRUCTURE ===
index.md front matter:
title: "Ant Colony Optimization"
description: "Follow the pheromone trails to discover emergent intelligence"
icon: "map-marker-path"
tags: ["swarm", "optimization", "pathfinding", "simulation"]
status: ["on-going"]
index.md body:
<section class="container visual size-800 ratio-1-1 canvas-contain">
<canvas id="aco-canvas"></canvas>
</section>
=== WIDGET FILES ===
_stats.right.md (weight: 10):
Title: "Statistics"
Content: <dl> with 4 stat items:
- Generation (id="stat-generation", init "0")
- Ants (id="stat-ants", init "0")
- Colony (id="stat-colony", init "20000")
- Food (id="stat-food", init "0")
_controls.right.md (weight: 20):
Title: "Controls"
Content: div.aco-controls with 2 buttons:
- {{< button id="start-btn" label="Start" >}}
- {{< button id="reset-btn" label="Reset" >}}
_options.right.md (weight: 30):
Title: "Options"
Content: div.aco-options with 4 range sliders:
- Ants: id="ant-count", min=10 max=200 value=50 step=10, display span id="ant-count-value"
- Evaporation: id="evaporation-rate", min=1 max=10 value=2 step=1, display span id="evaporation-value" showing "2%"
- Pheromone: id="pheromone-strength", min=1 max=10 value=5 step=1, display span id="pheromone-value"
- Speed: id="speed", min=1 max=5 value=1 step=1, display span id="speed-value" showing "1x"
_algorithm.after.md (weight: 85):
Title: "Algorithm"
Content: Markdown explaining ACO:
- H3 "Ant Colony Optimization"
- Intro paragraph about real ant foraging
- "How It Works" numbered list (5 steps: Exploration, Pheromone Deposit, Trail Following, Evaporation, Reinforcement)
- "Key Parameters" bullet list (Pheromone Strength, Evaporation Rate, Exploration vs Exploitation, Ant Count)
- "Emergent Behavior" paragraph about self-organization
=== JAVASCRIPT (default.js) ===
Import: panic from '/_lib/panic_v3.js'
Pattern: IIFE with 'use strict'
Constants:
GRID_CELL_SIZE = 8, INITIAL_COLONY_CAPACITY = 20000
FOOD_SOURCES = 3, FOOD_AMOUNT = 100, MAX_PHEROMONE = 255, EXPLORATION_BIAS = 0.08
BASE_LIFESPAN = 150, LIFESPAN_DELTA = 10
FOOD_LIFESPAN = 500, FOOD_RESPAWN_DELAY = 100
MEMORY_SIZE = 5
DIRECTIONS array: 8 directions (N, NE, E, SE, S, SW, W, NW)
Mutable config:
antCount = 50, evaporationRate = 0.01, pheromoneStrength = 15, speed = 1
State variables:
canvas, ctx, gridWidth, gridHeight, grid, pheromoneToFood, pheromoneToHome
ants[], colony{x,y,radius}, foodSources[], generation, foodCollected, colonyReserve
isRunning, animationId, cachedColors
Class Ant:
Constructor(x, y): hasFood=false, pathLength=0, maxSteps=randomLifespan(), direction=random 0-7, memory=[], isAlive=true
isAtColony(): check distance to colony <= colony.radius
update(): if !hasFood check food, else check colony; move; increment pathLength; check lifespan
findFoodAt(x, y): iterate foodSources, check distance <= food.radius
pickUpFood(foodIdx): set hasFood, decrement food.amount, reset pathLength, clear memory, reverse direction
depositFood(): unset hasFood, increment foodCollected, increment colonyReserve, reset pathLength, clear memory, reverse direction
move(): deposit pheromone (hasFood -> pheromoneToFood, else -> pheromoneToHome), remember position (max MEMORY_SIZE), choose direction via chooseDirection()
isInMemory(x, y): check if position in recent memory
chooseDirection(pheromoneMap): weight-based direction selection:
- Penalize memory positions (weight 0.01)
- Exponential pheromone weight: Math.pow(pheromone + 1, 2)
- Forward bias (*3 for +/-2 angles), backward penalty (*0.3 for >=3)
- Random exploration with EXPLORATION_BIAS probability
- Roulette wheel selection
Functions:
getCachedColors(): lazy-init CSS colors (--background-color-surface, --draw-color-primary, --text-color-surface, --text-color-primary), hardcoded colony=#4a9eff, food=#44ff44, antWithFood=#ffdd00
invalidateColorCache(): reset cachedColors to null
initGrid(): calculate grid dimensions from canvas/GRID_CELL_SIZE, create 2D arrays
placeColonyAndFood(): colony at center (radius 2), 3 food sources at random positions (minDistance = grid/4)
markForRespawn(food): set amount=0, respawnTimer=FOOD_RESPAWN_DELAY
respawnFood(food): new random position, reset amount/age/timer
createAnts(): create antCount ants at colony position
evaporatePheromones(): multiply by (1 - evaporationRate), clear values < 0.1
initCanvas(): set canvas.width = canvas.height = 800
init(): get canvas #aco-canvas, setup ctx, cache colors, listen theme changes, bind buttons (start-btn -> toggleRun, reset-btn -> reset), bind sliders (ant-count, evaporation-rate, pheromone-strength, speed), bind keydown, call reset()
handleKeyDown(e): Space -> toggleRun, R -> reset (skip if input/select focused)
reset(): stop if running, initGrid, placeColonyAndFood, createAnts, reset stats, updateStats, draw
toggleRun(): toggle isRunning, update start-btn text (Pause/Start), call run() or cancelAnimationFrame
run(): for speed iterations: update ants (respawn dead from colonyReserve), evaporate pheromones, increment generation, age food (reset age if consumed, mark for respawn if depleted/expired); updateStats, draw, requestAnimationFrame
updateStats(): update stat-generation, stat-ants, stat-colony, stat-food
draw(): clear with bg color, drawPheromones(), draw food (green circles scaled by amount), draw colony (blue diamond), draw ants (white circles, yellow if hasFood)
drawPheromones(): iterate grid, blend green (to-food) + blue (to-home), alpha based on max intensity / MAX_PHEROMONE * 0.6
Auto-init: DOMContentLoaded or immediate if already loaded
=== SCSS (default.scss) ===
CSS variables (:root):
--aco-color-colony: #ffaa00
--aco-color-food: #44ff44
--aco-color-pheromone-food: #00ff88
--aco-color-pheromone-home: #4488ff
Selectors:
#aco-canvas: width/height 100%, background var(--background-color-surface)
.aco-controls: flex, gap 0.5rem, .button flex:1
.aco-options: flex column, gap 0.75rem
label: flex space-between, 0.875rem, font-weight 300, color --text-color-surface
span: font-weight 600, tabular-nums, color --text-color-primary
input[type="range"]: width 100%, height 4px, appearance none, background --draw-color-surface
webkit-slider-thumb: 14px circle, --draw-color-primary, hover -> --text-color-primary
moz-range-thumb: same without hover
Responsive @media max-width 767px:
layout-main main: padding 1rem, gap 1rem
.aco-options label: font-size 0.8rem
Page entierement generee et maintenue par IA, sans intervention humaine.