All personal projects
Artificial Life & SimulationLive

Quark

From simple rules emerges intelligence.

Next.js 16React 19TypeScriptPixiJSZustandReact FlowRechartsTurborepoCloud Run

Artificial Life Simulation

Quark

Interactive preview — try the live demo for the full experience

14 → 8 → 4 MLPNetwork
Ecosystem + GenerationalModes
7 presetsScenarios
PixiJS canvasRendering

Quark is an interactive artificial life simulation where creatures survive with small neural networks and genetic algorithms — no scripted behaviors, no pathfinding, no hand-tuned AI. Each agent starts with a randomly initialized feed-forward network and zero knowledge of its environment. Over generations, successful agents reproduce and pass mutated brains and physical traits to offspring. You can watch evolution in real time, tweak parameters, inspect any creature's brain live, and compare stats across generations.

Emergent AI without ML libraries — neural network, genetic algorithm, and evolution loop built from scratch in TypeScript

Dual simulation paradigms — continuous ecosystem mode and controlled generational experiments

Rich interactive UX — real-time brain inspection, 3D adaptive trait space, and generational charts

Production engineering — Turborepo monorepo, Docker standalone build, GCP Cloud Run CI/CD

  • Neuroevolution with custom MLP (14 → 8 → 4) and sigmoid activations
  • Genetic algorithm — tournament selection, crossover, mutation, and elitism
  • Evolving DNA traits — vision, speed, metabolism, predation drive, toxin resistance
  • Ecosystem and generational simulation modes with predation dynamics
  • Seven preset scenarios plus randomize — from garden ecosystems to harsh selection
  • Climate system — humidity, temperature, rainfall, drought, and growth modifiers
  • Brain inspector — React Flow visualization with live inputs, outputs, and activations
  • Adaptive Space — Three.js scatter of perception × biomechanics × metabolism
  • Live stats — population, fitness, diversity, species families over time
  • 20+ interactive sliders for evolution, environment, and creature parameters

The simulation engine lives in a pure TypeScript monorepo (`apps/web/engine/`): world tick loop, collision, sensing, predation, climate, and vegetation in a ~2000-line world module. PixiJS handles 60fps canvas rendering decoupled from React; Zustand syncs world snapshots via a requestAnimationFrame game loop with configurable simulation speed (0.25×–4×). The app ships as a Next.js standalone Docker image deployed to GCP Cloud Run.

  • 01Fitness design shapes emergent behavior more than network size — small networks produce surprisingly complex strategies
  • 02Lab sliders as evolutionary ceilings keep the UX understandable while still allowing open-ended evolution
  • 03Decoupling PixiJS rendering from React state was essential for smooth simulation at higher population counts