Skip to main content
SimilarExport ZIP
100%

Cellular automata

✓ Published0🌍 Public
Mmbostock
Last edited Oct 5, 2018
Created on Sep 17, 2010

A one-dimensional cellular automaton stands at the center of this visualization, which arranges all 256 possible nearest-neighbor rules in a grid. The display uses a tile-based procedural map via Polymaps, with a worker script (`cell-worker.js`) computing each rule’s evolution from a random initial state. Color intensity indicates cell state, and zooming reveals the structure of individual rules. The rendering leverages Polymaps’ `po.map`, `po.procedural`, and `po.hash` APIs, while the worker handles the pixel-level computation and postMessage communication, following the example from MathWorld.

AI-generated description

From MathWorld: “A cellular automaton is a collection of ‘colored’ cells on a grid of specified shape that evolves through a number of discrete time steps according to a set of rules based on the states of neighboring cells.”

This example explores binary, nearest-neighbor, one-dimensional automata, of which there are 256 (2<sup>8</sup>) possible rules. All 256 rules are arranged in a grid, by column and then by row. The top-left corner is rule 0; the bottom-right corner is rule 255. Zoom in to see more of any particular rule.

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

p5 wolfram CA

A p5.js sketch renders a one-dimensional cellular automaton, displaying each generation as a horizontal row of small squares that stack downward over time. The simulation starts with a single active cell in the center of the top row and applies a fixed Wolfram rule set to compute each subsequent generation from the three neighboring cells above. The code uses the p5.js `createCanvas`, `rect`, and `fill` functions to draw the grid, and the result produces a deterministic, rule-based visual pattern that evolves over the canvas height.

PPhilippe Rivière
71% match
Loading thumbnail…

Colorcomb II

A Voronoi diagram of hundreds of colored cells animates on a black canvas, with each cell’s color shifting over time toward a shared palette. The visualization is rendered using the `d3-voronoi` library, which computes the tessellation, while a Canvas drawing loop continuously updates the cell fills. The animation derives from per-cell color interpolation, creating a slowly morphing mosaic of polygons. The code is a single self-contained HTML file using JavaScript and the Canvas API, with no external data source beyond the procedurally generated initial cell positions and colors.

Mmbostock
66% match
Loading thumbnail…

Random Traversal

A black canvas displays a maze being generated cell by cell via a random traversal algorithm. White cells mark the growing maze structure, while magenta highlights the current frontier of possible extensions. The animation progresses in steps, using the Canvas API to draw rectangles for cells and connections. The code implements the algorithm with a frontier array and popRandom selection, using d3.v3's timer for animation control.

Mmbostock
63% match
Loading thumbnail…

Game of Life (Possibly)

A grid of 10 by 5 cells displays Conway's Game of Life, with each cell toggling between alive (yellow) and dead based on neighbor counts. The simulation updates every two seconds, using a random Bernoulli distribution (d3.randomBernoulli) to generate the initial state. React hooks manage the cell matrix state, while SVG rectangles render the grid within a VizContainer. The code implements the game rules through countNeighbors and go functions, using setInterval for animation.

WWaseem Medhat
62% match
Loading thumbnail…

Polymaps / Procedural Perlin

This example displays a procedurally generated Perlin noise pattern rendered as a map using Polymaps. A web worker computes the noise values for each tile, writing RGB pixel data into an array, which is then posted back and displayed as a colorful texture. The code implements Ken Perlin’s classic noise algorithm from scratch, including fade, lerp, and gradient functions, and uses the `postMessage` API to communicate tile data asynchronously. The visualization demonstrates how noise can be generated on demand for arbitrary zoom levels and map coordinates.

Mmbostock
62% match
Loading thumbnail…

Random Search II

A maze generated with Wilson’s algorithm is solved through random search. The gray frontier cells expand in random order, while the magenta path highlights the current best-scoring route toward the goal. The visualization uses D3 v3 and Canvas 2D drawing, with a timer running ten random frontier explorations per frame. Cell scores are computed as squared Euclidean distance to the goal, and the animation stops when the goal cell is reached.

Mmbostock
60% match
Loading thumbnail…

Gist 00170d49e926de0c3a9a

A grid of small circles and hexagon-like arrangements of rounded orange rectangles animates in a staggered transition. The visualization generates a field of triangular tile motifs, where each tile contains three small circles and three rounded rectangles positioned at their edges. Initially, the rectangles and circles sit at the tile centers; after a delay, they rotate outward to the triangle’s midpoints. Using D3.js with SVG transitions, the code applies `translate` and `rotate` transforms to reposition elements, driven by trigonometric calculations for hexagon geometry. The rendering uses D3 selections and transitions, with data-bound groups and nested arrays to handle multiple coordinates.

11wheel
60% match
Loading thumbnail…

Cell Matrix

A grid of 16 by 8 rounded rectangles displays a random pattern of purple and yellow cells, where each cell’s color is determined by a Boolean value from `Math.random()`. The React components `CellMatrix` and `Cell` position each rect using computed `x` and `y` offsets based on the inner dimensions, while the `VizContainer` renders the SVG output with configurable margins and a neutral gray background. This example uses plain React state-free rendering, with no D3 API calls beyond the library’s inclusion in the HTML page.

WWaseem Medhat
60% match