Skip to main content
Artificial Intelligence Neuroevolution (NEAT) Validated

Neuroevolution (NEAT)

Neural networks that learn through natural selection

Fitness History

Neural Network

Statistics
Generation
0
Best Score
0
Alive
0
Settings
Batch Training

Neuroevolution

This demo uses neuroevolution: neural networks trained by genetic algorithms, without backpropagation.

Neural Network

Each bird has a small neural network (brain) that decides when to jump:

  1. Inputs (4 neurons): bird position, velocity, pipe distance, gap position
  2. Hidden layer(s): configurable neurons with activation function
  3. Output (1 neuron): jump if value > 0.5

Genetic Algorithm

Instead of gradient descent, evolution optimizes the weights:

  1. Evaluation: Each bird plays until it dies. Score = frames survived.
  2. Selection: Best birds (highest scores) are selected as parents.
  3. Crossover: Two parents combine their weights to create offspring.
  4. Mutation: Random small changes to weights (exploration).
  5. Repeat: New generation plays, best survive, evolution continues.

Key Parameters

  • Population: More = better exploration, slower
  • Mutation rate: High = exploration, Low = exploitation
  • Elite count: Best N birds copied unchanged

Why It Works

  • No labels needed: The score (survival time) is the only feedback
  • Parallel search: Many solutions tested simultaneously
  • Emergent behavior: Complex strategies from simple rules
© 2013 - 2026 Cylian 🤖 Claude
Instructions Claude

Prompt utilise pour regenerer cette page :

Page: Neuroevolution (NEAT)
Description: "Neural networks that learn through natural selection"
Category: artificial-intelligence
Icon: graph
Tags: neural, genetic
Status: validated

Front matter (index.md):
  title: "Neuroevolution (NEAT)"
  description: "Neural networks that learn through natural selection"
  icon: "graph"
  tags: ["neural", "genetic"]
  status: ["validated"]

HTML structure (index.md):
  <section class="container visual size-600 ratio-1-1 canvas-contain">
    <canvas id="neuro-canvas"></canvas>
  </section>

Widget files:
- _stats.right.md (weight: 10): ##### Statistics
  <dl> with:
    - Generation: dd#stat-generation (initial "0")
    - Best Score: dd#stat-best (initial "0")
    - Alive: dd#stat-alive (initial "0")

- _history.left.md (weight: 15): ##### Fitness History
  <canvas id="history-canvas" width="200" height="80"></canvas>

- _network.left.md (weight: 16): ##### Neural Network
  <canvas id="network-canvas" width="200" height="120"></canvas>

- _controls.right.md (weight: 20): Two sections:
  ##### Settings — <dl> with:
    - Population: input#population-size type=number min=10 max=200 value=50
    - Mutation: input#mutation-rate type=range min=0 max=100 value=20
    - Network: select#network-arch with options:
        "6" (37w), "8" selected (49w), "8-4" (81w), "4-8" (69w), "6-6" (79w), "8-6-4" (127w)
    - Activation: select#activation with options: "relu" selected, "tanh", "sigmoid"
    - Speed: select#speed with options: 0.5x, 1x, "2" selected, 4x
    - Show Best: checkbox#show-best checked
  div.neuro-controls with:
    {{< button id="btn-start" icon="play" aria="Start" class="is-start" >}}
    {{< button id="btn-pause" icon="pause" aria="Pause" class="is-pause" >}}
    {{< button id="btn-reset" icon="refresh" aria="Reset" >}}
  ##### Batch Training — div.neuro-controls with:
    input#batch-count type=number min=1 max=1000 value=100 style="width: 4rem;"
    {{< button id="btn-batch" label="Train" >}}
    {{< button id="btn-stop" label="Stop" disabled=true >}}

- _algorithm.after.md (weight: 85): Explains neuroevolution (neural networks trained by genetic algorithms, no backpropagation). Neural network architecture (4 inputs: bird y, velocity, pipe distance, gap position; configurable hidden layers; 1 output: jump if > 0.5). Genetic algorithm steps (evaluation, selection, crossover, mutation). Key parameters and why it works.

Architecture (single file default.js):
- IIFE, imports: GA from '/_lib/ga_v1.js', panic from '/_lib/panic_v3.js'
- NeuralNetwork class:
    - constructor(weights): configurable inputSize(4), hiddenSizes (array from UI), outputSize(1). Random init if no weights or weight count mismatch. Stores config at creation time.
    - forward(inputs): iterates hidden layers with bias+weights per neuron, applies activation (relu/tanh/sigmoid based on global `activation` var). Output layer always uses sigmoid.
    - activate(x): switch on global `activation` var (relu default, tanh, sigmoid).
    - static getWeightCount(): calculates total weights based on INPUT_SIZE, hiddenSizes, OUTPUT_SIZE (includes bias per neuron).
- Bird class:
    - constructor(brain): position x=100, y=canvas.height/2, velocity vy=0, alive=true, score=0, fitness=0.
    - update(nearestPipe): 4 normalized inputs (y/height, vy/10, pipe distance/width, gapY/height). Jump if output > 0.5. Physics: gravity(0.5), bounds check (y<0 or y>height-BIRD_SIZE). Score increments per frame.
    - jump(): vy = JUMP_FORCE (-8).
    - collidesWith(pipe): AABB check with pipe gap.
    - draw(ctx, highlight): circle, blue rgba(52,152,219,0.5) default, red #e74c3c if highlighted.

Game constants:
  GRAVITY=0.5, JUMP_FORCE=-8, BASE_PIPE_SPEED=3, BASE_PIPE_GAP=120, PIPE_WIDTH=50, PIPE_INTERVAL=150, BIRD_SIZE=15, MAX_SCORE=65535

GA integration:
  - createIndividual(): random genes of length NeuralNetwork.getWeightCount(), range [-1,1]
  - mutate(genes): uses GA.gaussianMutate with mutationRate and MUTATION_STRENGTH(0.3)
  - init(): uses GA.createPopulation(populationSize, createIndividual) to build population
  - nextGeneration(): sets fitness from scores, records fitnessHistory, uses GA.evolve with GA.uniformCrossover, eliteCount=5, crossoverRate=0.7

State variables:
  populationSize=50, ELITE_COUNT=5, mutationRate=0.2, MUTATION_STRENGTH=0.3
  hiddenSizes=[8], activation='relu', speed=2, speedAccumulator=0
  canvas 600x600 resolution

Cached CSS colors:
  cachedColors object with surface and primary, updated from --background-color-surface and --draw-color-primary. updateCachedColors() called on init, theme-changed, prefers-color-scheme change.

Game loop:
  - run(): uses speedAccumulator pattern for fractional speeds. step() + updateStats() + draw() per frame via requestAnimationFrame.
  - step(): spawn pipes every PIPE_INTERVAL frames, move pipes at getCurrentSpeed(), remove off-screen pipes, update birds (neural network decision), check collisions, track bestScore. All dead or maxScore reached -> nextGeneration().
  - draw(): clear with cachedColors.surface, pipes green #2ecc71, birds as circles, highlight best bird if show-best checkbox checked. Training banner with progress bar using cachedColors.primary during batch training.

Batch training:
  - batchTrain(): runs STEPS_PER_FRAME(100) steps per setTimeout(0) frame to keep UI responsive. Progress tracked as (generation-startGen)/count. Disables btn-batch during training. Updates stats/draw periodically. Stops at targetGen or MAX_SCORE.
  - stopTraining(): sets isTraining=false.

Visualization:
  - drawHistory(): line graph on historyCanvas (200x80), x = generation, y = best fitness scaled to max. Uses cachedColors.surface for background and cachedColors.primary for line. Padding 5px.
  - drawNetwork(): on networkCanvas (200x120), draws best alive bird's neural network. Layers as columns of circles (radius 5), connections colored by weight sign (green positive, red negative, alpha = absWeight clamped to 1). lineWidth = max(0.5, absWeight*2). Nodes drawn with cachedColors.primary.

UI event bindings:
  - btnStart: click starts if not running
  - btnPause: click pauses if running
  - btnReset: click calls reset()
  - btnBatch: click calls batchTrain()
  - Space: toggle play/pause (only if e.target === document.body)
  - Escape: stop batch training
  - population-size: change updates populationSize
  - mutation-rate: input updates mutationRate (value/100)
  - speed: change updates speed multiplier
  - network-arch: change parses "8-4" format, calls reset()
  - activation: change updates activation, calls reset()

SCSS file (default.scss):
  - #neuro-canvas: 100% width/height, background var(--background-color-surface)
  - #history-canvas, #network-canvas: 100% width, auto height, 1px solid border, 4px border-radius, same background
  - .neuro-controls: flex row nowrap, centered, gap .5rem, margin-top 1rem
    - .is-start visible, .is-pause hidden by default
    - &.is-running toggles visibility

Page entierement generee et maintenue par IA, sans intervention humaine.