An IDE for modeling and simulating Cellular Automata, built as a self-contained browser application.
Launch GenesisCA — runs entirely in your browser, no installation required.
GenesisCA is an IDE for modeling and simulating Cellular Automata (CA). It uses a Visual Programming Language (VPL) — a node-based graph editor — so users can design arbitrarily complex CA models without writing code. The goals are accessibility (no programming required) and performance (grids up to 5000x5000+).
Everything runs 100% client-side — no server, no sign-up, no paid hosting.
Originally created as an undergraduate final project at the Universidade Federal de Pernambuco (UFPE, Brazil) in 2017, the application has been completely rewritten as a modern web application.
Every GenesisCA model satisfies these theoretical properties:
- Cells have unlimited computing power
- Cells have N internal attributes (of multiple data types), whose snapshot of values at a given generation is called its "state"
- Cells are limited to only access (read) the states of cells in one of the neighborhoods defined in the CA model
- Writability — In synchronous (classic) mode, cells can only modify their own attributes. In asynchronous mode, cells can also directly modify the attributes of neighboring cells, enabling movement and mass-conservation rules.
- Space and Time are discrete (cells arranged in n-dimensional grid)
- Synchronicity — Model can be either synchronous (all cells update simultaneously — classic CA) or asynchronous (cells update sequentially, enabling number-conserving models)
Beyond the six fundamentals, two types of mappings enable visualization and interaction:
- Attribute-Color Mappings — N ways to map cell state → colors (for visualization)
- Color-Attribute Mappings — N ways to map colors → cell state (for user interaction and image-based initialization)
A complete GenesisCA model definition consists of:
-
Model Properties
- 1.1. Presentation (Name, Rule Author, GenesisCA Project Author, Description, Tags)
- 1.2. Structure (Topology, Boundary Treatment, Grid Size)
- 1.3. Execution (Update Mode, optional End Conditions: max generations + indicator rules)
-
Attributes — each has a name, type (bool, integer, float), description, and a default value
- 2.1. Cell Attributes (per-cell state)
- 2.2. Model Attributes (global parameters that all cells can read but not write; adjustable at runtime in the Simulator)
-
Neighborhoods — a list of neighborhoods, each being a list of relative offsets from the central cell (margin up to 20)
-
Color Mappings — each mapping has a Name, Description, per-channel descriptions (R, G, B)
- 4.1. Color-Attribute Mappings (input: for initialization, brush tool, and image import)
- 4.2. Attribute-Color Mappings (output: for visualization modes)
-
Indicators — quantitative monitoring variables, either standalone (read/write from graph) or linked to cell attributes (auto-computed aggregations: frequency, total)
-
Update Rules — a node graph defining what each cell computes per generation, compiled into optimized JavaScript at edit time
- Properties Panel — model metadata (Rule Author + GenesisCA Project Author), grid dimensions, boundary treatment (torus/constant), update mode (synchronous/asynchronous), tags, optional Thumbnail (PNG/JPEG/GIF/WebP up to 2 MB — shown on hover in the Models Library), optional End Conditions (max generations + indicator-based auto-pause rules)
- Attributes Panel — cell and model attributes with type-specific default value controls (bool, integer, float, tag, color); cell attributes gain an optional Boundary Value field when boundary is set to constant
- Neighborhoods Panel — interactive grid editor with per-neighborhood margin, optional per-cell tags for named access, and a Duplicate button for quick variations
- Mappings Panel — Attribute-to-Color and Color-to-Attribute mapping definitions
- Indicators — standalone (typed scalar, graph-writable) or linked (auto-aggregated from cell attributes: frequency, total), with per-generation or accumulated modes. Frequency indicators can be viewed as horizontal bars, multi-line time series, or stacked-area time series (viz button cycles the three; preference persists per indicator). End Conditions accept per-category comparisons on frequency indicators (e.g. pause when count of
alivecells ≥ 100). - Graph Editor — 37 node types across 8 categories (event, flow, data, logic, aggregation, output, color, indicators), with RMB pan, scroll zoom, and snap-to-grid. Includes Switch (flow routing by conditions or value), Proportion Map, Interpolation, Color Interpolation, Aggregate (multi-input math), neighborhood tag-based access nodes, and a Stop Event node that pauses the simulator with a user-defined message when its flow input fires.
- Connection validation — prevents incompatible connections (flow/value), cycles, and duplicate inputs; compatible ports highlight during drag
- Inline Port Widgets — input ports show small value editors (number/bool) when unconnected, eliminating the need for constant nodes in simple cases
- Node Collapse/Expand — double-click any node to collapse it; constants show their value; collapsed nodes temporarily expand when connecting edges
- Color Pickers — Color Constant and Set Color Viewer nodes include hex color pickers with per-channel R/G/B controls
- Palette — right-side panel with a drag-and-drop list of every node type (grouped by category), default macros shipped with the app (from
public/macros/*.gcamacro), and the current project's macros - Node Explorer — searchable right-side panel (Ctrl+F to open, Esc to close) listing all placed nodes with click-to-focus
- Add-Node tooltips — hover any entry in the Add Node context menu to see a short description of what it does
- Incomplete-config warnings — nodes with unset required parameters (e.g., an unselected attribute/neighborhood/mapping) show an amber warning badge in the header so you can spot them at a glance
- Canvas toggles — toggle port labels, grid lines, and snap-to-grid from buttons below zoom controls
- Macro System — encapsulate node groups into reusable subgraphs with MacroInput/MacroOutput boundary nodes
- Undo/Redo — Ctrl+Z / Ctrl+Shift+Z (Ctrl+Y) for node/edge operations, moves, paste, config changes
- Copy/Paste/Duplicate — Ctrl+C/V/X/D, context menu on single nodes and selections, paste at right-click location
- Groups & Comments — visual organization tools; comment background color is customizable and the resized size persists; Undo Group dissolves a group and selects all contained nodes
- Edge management — double-click any edge to delete it
- Update Mode — choose Synchronous (classic CA) or Asynchronous (sequential updates with single buffer) in Model Properties
- Update Schemes — Random Order, Random Independent, or Cyclic — balancing accuracy vs. performance
- Async-only nodes — Set Neighborhood Attribute, Set Neighbor Attr By Index for number-conserving movement patterns. Get Neighbor Attr By Index works in both modes.
- Transport bar — Play/Pause/Step/Reset with FPS and Gens/Frame sliders, keyboard shortcuts (Space=step, Enter=play/pause, Esc=reset)
- Save Project dialog — checkboxes to include simulator controls (speed, brush, mapping, model-attribute values) and/or the full board state; choices persist across sessions
- Save / Load State — save the full simulation snapshot (
.gcastate) for experiment repeatability; load to restore a previous state. State is also embedded in.gcaprojfor project-level persistence. - Model Presets — embed named snapshots of model-attribute values (and optionally the cell grid) in the project, listed in the left panel above Model Attributes. One-click switching between behavioral variants — ideal for generic models like MNCA where the same rules produce wildly different emergent patterns per parameter set. Include/exclude from
.gcaprojvia the Save Project dialog. - Canvas controls — LMB=brush, RMB=pan, scroll=zoom, Ctrl+LMB drag=resize brush, Ctrl+wheel=cycle input mappings, Shift+RMB=open in-page color picker at the cursor
- Brush tool — configurable color (with live R/G/B channel inputs beside the picker), width/height, input mapping; visual brush cursor; Ctrl+drag interactive resize
- Region clipboard — Ctrl+C/V/X on the simulator copy/paste/cut all cell attributes within the brush rectangle; paste anchors to the brush's top-left corner
- Viewer tabs — horizontal bar at the top to switch between Attribute-to-Color visualization modes
- Collapsible panels — left panel for settings (actions, grid dimensions, model attributes), right panel for brush
- Zoom controls — +/−/fit buttons on the canvas, matching the modeler
- Live model attribute controls — change global parameters without recompiling
- Grid dimension overrides — experiment with different sizes
- PNG screenshot export — captures the display view with current zoom/pan (nearest-neighbor upscale for crisp pixels)
- GIF recording — record simulation frames and export as animated GIF (auto-downscale for large grids)
- Open Image — load PNG/BMP/JPG as starting point via the brush panel
- Persistent settings — speed, brush, viewer settings saved across sessions
- Comprehensive Help tab — 8 sections covering all features with sidebar navigation
- Models Library — pre-made models loaded from the repository, no manual index required; cards with thumbnails show a floating preview on hover (animated GIFs play natively)
- Library-first — every tab open / reload lands on the Library tab so you can pick a starting model or fork one into your own
- Unsaved changes warning — the browser prompts before closing the tab if your model has unsaved changes (explicit save only — no auto-restore on reload)
- GitHub link — accessible from the navbar and Help page
Modeler — Visual programming graph editor with node-based update rules:
Simulator — Real-time grid visualization with zoom, pan, and brush tools:
Models Library — Pre-made models to explore and learn from:
Other Images
- Node.js 18+ (22 LTS recommended)
- npm 9+ (comes with Node.js)
git clone https://github.com/rff255/GenesisCA.git
cd GenesisCA
npm install
npm run devThe app opens at http://localhost:5173.
| Command | What it does |
|---|---|
npm run dev |
Start development server with hot reload |
npm run build |
Type-check and build for production |
npm run preview |
Preview the production build locally |
- TypeScript + React — UI framework
- Vite — build tool and dev server
- React Flow — node-based graph editor
- Canvas2D — grid rendering
- Web Workers — off-thread simulation engine
- CSS Modules — scoped component styling
This project is licensed under the GNU General Public License v3.0 — see the LICENSE file for details.