Particle Swarm Optimization

Particle swarm optimization demo where a collective of agents cooperates to find optimal solutions across complex fitness landscapes

Particle Swarm Optimization (PSO)

PSO is a population-based optimization algorithm inspired by the social behavior of bird flocking or fish schooling. Particles explore a search space, sharing information about promising regions.

Core Concepts:

Particle: A candidate solution with position and velocity in the search space
Personal Best (pBest): Best position found by each individual particle
Global Best (gBest): Best position found by the entire swarm
Velocity Update: Particles adjust their movement based on pBest and gBest

Velocity Update Formula:

v(t+1) = w * v(t) + c1 * r1 * (pBest - x) + c2 * r2 * (gBest - x)

Where:

w: Inertia weight (momentum from previous velocity)
c1: Cognitive weight (attraction to personal best)
c2: Social weight (attraction to global best)
r1, r2: Random factors for exploration

Test Functions:

Sphere: Simple convex function, global minimum at origin
Rastrigin: Highly multimodal, many local minima (tests exploration)
Rosenbrock: Narrow curved valley (tests precision)
Ackley: Nearly flat outer region with central hole (tests convergence)

Why It Works:

Exploration: Random factors and inertia help escape local minima
Exploitation: Attraction to best positions refines solutions
Information Sharing: Swarm collectively discovers good regions

Instructions Claude

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.

See also