Skip to main content
Artificial Intelligence Creatures Validated

Creatures

Watch virtual organisms evolve through natural selection

Statistics
Generation
0
Population
0
Food
0
Rules

Large creatures can eat smaller ones, gaining half their energy.

Creatures slow down with age and die after reaching max lifespan.

Gray zones block movement, forcing creatures to navigate around.

Green fertile zones spawn more food, creating competition hotspots.

Food comes in 3 sizes: small (25), medium (50), large (75) energy.

Two parents required, genes are crossed over with mutations.

High speed gene costs more energy, favoring efficient creatures.

Small creatures flee from larger predators when detected.

Fast Large Perceptive

Genetic Algorithm

This demo uses a genetic algorithm with natural selection to evolve virtual creatures.

How It Works

Creatures live, eat, reproduce, and die in a simulated environment:

  1. Movement: Creatures seek food (or flee predators if smaller)
  2. Energy: Moving costs energy based on speed gene
  3. Eating: Food restores energy (amount varies by food size)
  4. Reproduction: At 150+ energy, creature spawns offspring
  5. Death: Energy reaches 0 or max age reached
  6. Evolution: Offspring inherit mutated genes from parent(s)

Genetic Operators

  • Selection: Natural (survivors reproduce)
  • Crossover: Optional sexual reproduction (two parents)
  • Mutation: Gaussian (rate 20%, strength 0.15)

Genes

  • Speed (red): Movement rate, high energy cost
  • Size (blue): Body radius, affects predation
  • Perception (green): Detection range for food/threats
  • Aggression (hidden): Hunting vs fleeing behavior

Why It Works

  • Natural selection: Fit creatures survive and reproduce
  • Emergent behavior: Complex strategies from simple rules
  • Adaptation: Population evolves to environment over time
© 2013 - 2026 Cylian 🤖 Claude
Instructions Claude

Prompt utilisé pour régénérer cette page :

Page: Creatures - Evolving Virtual Organisms
Title: "Creatures"
Description: "Watch virtual organisms evolve through natural selection"
Icon: "bug"
Tags: ["genetic", "simulation"]
Status: ["validated"]
Category: artificial-intelligence

=== STRUCTURE ===

index.md front matter:
  title: "Creatures"
  description: "Watch virtual organisms evolve through natural selection"
  icon: "bug"
  tags: ["genetic", "simulation"]
  status: ["validated"]

index.md body:
  <section class="container visual size-800 ratio-1-1 canvas-contain">
    <canvas id="creature-canvas"></canvas>
  </section>

=== WIDGET FILES ===

_stats.right.md (weight: 10, title: "Statistics"):
  <dl> with 3 stat items:
    - Generation (id="stat-generation", init "0")
    - Population (id="stat-population", init "0")
    - Food (id="stat-food", init "0")

_rules.right.md (weight: 30, title: "Rules"):
  <h5>Rules</h5> then <div class="creature-rules"> with 8 <details class="rule-item"> elements.
  Each detail has <summary> with checkbox, label, spacer, and info icon (/_img/icon/information-outline.svg).
  Each detail has <p> description. Rules:
    1. Predation (id="rule-predation"): Large eat smaller, +50% energy
    2. Aging (id="rule-aging"): Slow down with age, die at max lifespan
    3. Obstacles (id="rule-obstacles"): Gray zones block movement
    4. Territories (id="rule-territories"): Green zones spawn more food
    5. Varied food (id="rule-varied-food"): Small/medium/large (25/50/75 energy)
    6. Sexual reproduction (id="rule-sexual"): Two parents, gene crossover
    7. Fatigue (id="rule-fatigue"): High speed costs extra energy
    8. Flee behavior (id="rule-flee"): Small creatures flee from larger predators
  After rules div: <div class="creature-controls"> with 3 icon buttons:
    - {{< button id="btn-start" icon="play" aria="Start" class="is-start" >}}
    - {{< button id="btn-stop" icon="stop" aria="Stop" class="is-stop" >}}
    - {{< button id="btn-reset" icon="refresh" aria="Reset" >}}

_legend.after.md (weight: 10, title: "Legend"):
  <div class="creature-legend inline"> with 3 legend items:
    - Fast (swatch class="speed")
    - Large (swatch class="size")
    - Perceptive (swatch class="perception")

_source.after.md (weight: 90, title: "Algorithm"):
  H3 "Genetic Algorithm" + explanation:
    - How It Works: 6 numbered steps (Movement, Energy, Eating, Reproduction, Death, Evolution)
    - Genetic Operators: Selection (natural), Crossover (optional sexual), Mutation (Gaussian rate 20% strength 0.15)
    - Genes: Speed (red), Size (blue), Perception (green), Aggression (hidden)
    - Why It Works: Natural selection, Emergent behavior, Adaptation

=== JAVASCRIPT (default.js) ===

Import: panic from '/_lib/panic_v3.js'
Pattern: IIFE, strict mode.

Constants:
  INITIAL_CREATURES = 20, INITIAL_FOOD = 30, FOOD_SPAWN_RATE = 0.1, MAX_FOOD = 50
  ENERGY_DECAY = 0.1, REPRODUCTION_THRESHOLD = 150
  MUTATION_RATE = 0.2, MUTATION_STRENGTH = 0.15
  MAX_AGE = 500, PREDATION_SIZE_DIFF = 3
  FATIGUE_THRESHOLD = 0.6, FATIGUE_MULTIPLIER = 2, TERRITORY_COUNT = 3

State: canvas, ctx, creatures[], food[], obstacles[], territories[], generation, isRunning, animationId
cachedColors: {surface, primary, food} initialized from CSS vars.
Rules object: {predation, aging, obstacles, territories, variedFood, sexual, fatigue, flee} all false initially.

Class Creature:
  Constructor(x, y, genes=null):
    genes: 4 floats [speed(0-1), size(0-1), senseRange(0-1), aggression(0-1)]
    Derived: speed=1+genes[0]*3, size=5+genes[1]*10, senseRange=20+genes[2]*80, aggression=genes[3]
    energy=100, energyCost=0.05+genes[0]*0.1+genes[1]*0.05, age=0
    Random initial velocity (vx, vy)
  getColor(): HSL based on genes[0]*120+genes[2]*120, saturation 60+genes[1]*40, lightness 40+(energy/200)*20
  update(width, height): increment age, aging slowdown at 70% MAX_AGE,
    flee behavior (detect larger creatures within senseRange, reverse direction),
    seek nearest food within senseRange, wander if no food,
    obstacle collision (revert position, reverse velocity*0.5),
    wrap around edges, energy decay with fatigue modifier
  tryEat(): check food within size+foodSize distance, splice food, gain energy (50 or varied)
  tryEatCreature(prey): predation check (size > prey.size + PREDATION_SIZE_DIFF, distance < this.size)
  canReproduce(): energy > REPRODUCTION_THRESHOLD
  reproduce(): energy -= 50, mutate genes (rate 0.2, strength 0.15), new Creature nearby
  isDead(): energy <= 0 or (aging && age >= MAX_AGE)
  findMate(): if sexual enabled, find nearby creature that canReproduce within size+size+10
  reproduceWith(mate): energy -= 30 each, crossover genes (random parent per gene), mutation
  draw(ctx): filled circle (size), stroke sense range (alpha 0.1)

Functions:
  spawnFood(): if food < MAX_FOOD, random position (biased to territories if enabled), varied size/energy
  generateObstacles(): 3-6 random rectangles (30-80px)
  generateTerritories(): 3 random rectangles (80-180px, fertility 0.5-1.0)
  cacheColors(): from CSS vars (--background-color-surface, --draw-color-surface, --creature-color-food)
  initCanvas(): 800x800
  initRules(): bind 8 checkboxes (rule-predation through rule-flee) to rules object
  init(): get canvas #creature-canvas, cache colors, theme change listener, bind 3 buttons
  reset(): stop, generate obstacles/territories, create INITIAL_CREATURES with random genes, spawn INITIAL_FOOD
  toggleRun(): toggle isRunning, toggle .is-running on .creature-controls
  run(): spawn food probabilistically, update creatures, predation, reproduction (sexual or asexual),
    filter dead, repopulate if extinct (5 new), updateStats, draw, requestAnimationFrame
  updateStats(): stat-generation, stat-population, stat-food
  draw(): clear with cached surface color, draw territories (green 0.1 alpha), obstacles (gray),
    food (green circles), creatures (via creature.draw)

Auto-init: called immediately (no DOMContentLoaded check).

=== SCSS (default.scss) ===

CSS variables (:root):
  --creature-color-speed: var(--color-red)
  --creature-color-size: var(--color-blue)
  --creature-color-perception: var(--color-green)
  --creature-color-food: var(--color-green)

#creature-canvas: width/height 100%, background --background-color-surface
layout-main .stats: flex center, gap 2rem, .stat column with .label/.value
layout-main .legend: flex center, gap 1.5rem, .legend-item with .color circles
.creature-controls: flex row, gap 0.5rem, margin-top 1rem
  .is-start display block, .is-stop display none
  &.is-running toggles visibility
.creature-legend: flex column gap 0.5rem, &.inline flex row gap 1rem
  .swatch: 0.75rem circle, &.speed/size/perception use CSS variables
.creature-rules: flex column gap 0.5rem
  .rule-item summary: cursor pointer, ::marker color --draw-color-primary
  .rule-item p: margin 0.25rem 0 0 1.5rem, 0.85em, opacity 0.8
  input[type="checkbox"]: 1rem, accent-color --draw-color-primary
  label: font-weight 300, hover -> --text-color-primary

=== STATE MANAGEMENT ===
No localStorage. All state in JS variables.
Keyboard shortcuts: None.
Mouse events: None on canvas.
Theme: listens for prefers-color-scheme changes.

Page entièrement générée et maintenue par IA, sans intervention humaine.