Prompt utilisé pour régénérer cette page :
Page: Particle Swarm Optimization (PSO)
Description: "Collective intelligence finds optimal solutions"
Category: artificial-intelligence
Icon: dots-hexagon
Tags: optimization, swarm-intelligence, metaheuristic, algorithm
Status: new
Front matter (index.md):
title: "Particle Swarm Optimization"
description: "Collective intelligence finds optimal solutions"
icon: "dots-hexagon"
tags: ["optimization", "swarm-intelligence", "metaheuristic", "algorithm"]
status: ["new"]
HTML structure (index.md):
<section class="container visual size-800 ratio-1-1 canvas-contain">
<canvas id="pso-canvas"></canvas>
</section>
Widget files:
- _controls.right.md (weight: 10): Two buttons in div.pso-controls:
{{< button id="start-btn" label="Start" >}}
{{< button id="reset-btn" label="Reset" >}}
- _options.right.md (weight: 20): div.pso-options with 5 option-groups:
- Function: <select id="test-function"> with options sphere/rastrigin/rosenbrock/ackley
- Swarm Size: <select id="swarm-size"> options 10/20/30(selected)/50/100
- Inertia: label with <span id="inertia-value">0.90</span>, <input type="range" id="inertia" min=0 max=100 value=90>
- Cognitive: label with <span id="cognitive-value">1.5</span>, <input type="range" id="cognitive" min=0 max=300 value=150>
- Social: label with <span id="social-value">0.8</span>, <input type="range" id="social" min=0 max=300 value=80>
- _stats.right.md (weight: 30): div.pso-stats (2-col grid, responsive 1-col on mobile):
- Iteration: <span id="stat-iteration">0</span>
- Best Fitness: <span id="stat-fitness">-</span>
- Best Position (full-width): <span id="stat-position">-</span>
- _algorithm.after.md: Explanation of PSO algorithm with velocity update formula:
v(t+1) = w * v(t) + c1 * r1 * (pBest - x) + c2 * r2 * (gBest - x)
Describes: w (inertia), c1 (cognitive), c2 (social), r1/r2 (random).
Lists 4 test functions and explains exploration/exploitation/information sharing.
Architecture (single file default.js):
- IIFE, imports panic from /_lib/panic_v3.js
- No external dependencies
SCSS file (default.scss):
- $breakpoint-mobile: 575px
- #pso-canvas: 100% width/height, background var(--background-color-surface)
- .pso-controls: flex row, gap 0.5rem, .button flex:1
- .pso-options: flex column, gap 0.75rem, .option-group with label/select/range styling
- .pso-stats: 2-col grid (1-col on mobile), .stat with .label and .value, .full-width spans all cols
- .history-container: #history-canvas 100% width/height
- .function-info: info box with code font for formulas
Test functions (all minimize to 0):
- Sphere: f(x,y) = x² + y², bounds [-5,5], minimum at (0,0)
- Rastrigin: f(x,y) = 20 + x² + y² - 10*(cos(2πx) + cos(2πy)), bounds [-5.12,5.12], minimum at (0,0)
- Rosenbrock: f(x,y) = (1-x)² + 100*(y-x²)², bounds [-2,2], minimum at (1,1)
- Ackley: f(x,y) = -20*exp(-0.2*√(0.5*(x²+y²))) - exp(0.5*(cos(2πx)+cos(2πy))) + 20 + e, bounds [-5,5], minimum at (0,0)
PSO algorithm:
- Particles: position (x,y), velocity (vx,vy), personal best, fitness
- Velocity clamping: V_CLAMP_FACTOR = 0.003 relative to search space size
- Boundary handling: bounce with -0.5 velocity reversal
- Global best tracked across entire swarm
Visualization:
- Heatmap: evaluates function on 2px-resolution grid, HSL color gradient (blue=low to red=high), log scale normalization, semi-transparent (alpha=100/255)
- Contour lines: marching squares on 4px-resolution grid, 15 levels with quadratic distribution
- Particles: blue circles (radius 5) with velocity vector lines (scaled 5x)
- Personal best: small transparent blue dots (radius 3, alpha 0.3)
- Global best: green (#27ae60) crosshairs with outer ring (radius 12) and inner fill (radius 6)
- Legend: bottom-left showing particle/personal best/global best markers
- Fitness history graph: on separate #history-canvas, log-scale Y axis, axes drawn at alpha 0.3
Color caching:
- getCachedColors() lazy-initializes from CSS vars: --background-color-surface, --draw-color-primary, --draw-color-secondary, --text-color-surface
- invalidateColorCache() clears cache on theme change
Canvas setup:
- Main canvas: fixed 800x800 pixels
- History canvas: sized to bounding rect of container
Controls:
- Space: toggle Start/Pause
- R: reset simulation
- Function change: invalidates heatmap+contour caches, resets simulation
- Slider values divided by 100 for inertia (0-1), by 100 for cognitive/social (0-3)
Animation:
- FRAME_DELAY = 16ms (~60fps), throttled via requestAnimationFrame + timestamp check
- Each frame: updateParticles(), record fitnessHistory, updateStats(), draw()
Page entièrement générée et maintenue par IA, sans intervention humaine.