Creatures

Watch virtual organisms evolve through natural selection — genetic mutations shape body structure, speed, and survival strategies over generations
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.
See also
