Wilson’s Algorithm II

100%

Wilson’s Algorithm II

✓ Published0🌍 Public

Last edited Feb 9, 2016

Created on May 8, 2014

A maze generated by Wilson’s algorithm is flooded with color, where hue encodes the Manhattan distance from the starting cell. The black-and-white maze structure is too noisy for comparison, so the color helps reveal overall maze shape and differences between algorithms. The visualization uses D3 v3 and a Canvas context, animating the flood via `d3.timer`, `fillRect`, and `d3.hsl` to tint each cell as the frontier expands. The maze is built procedurally with loop-erased random walks.

AI-generated description

This maze is generated using Wilson’s algorithm and then flooded with color. Hue encodes Manhattan distance from the starting cell. (This is not an optimal visual encoding, but it suffices and is pretty.)

Color is useful to visually compare the structure of mazes; without color, the black and white alternating cells are too noisy to offer any pre-attentive comparisons. Compare a maze generated by Wilson’s algorithm to Prim’s algorithm, random traversal and randomized depth-first traversal.

See this color flood applied directly to the pixel grid.

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Wilson’s Algorithm

Wilson’s Algorithm visualizes the construction of a uniform spanning tree via loop-erased random walks on a black canvas. A magenta path grows until it connects to the existing white maze, with loops erased and reconnecting cells turned white. The animation uses a Canvas context with `fillRect` for cells and corridors, managed by `d3.timer`, `d3.range`, and the `globalCompositeOperation` property for path erasure. Starting from one cell, the process accelerates as the maze expands, revealing the tree’s structure.

Mmbostock

89% match

Loading thumbnail…

Wilson’s Algorithm III

This piece uses Wilson’s algorithm to generate a spanning tree of a canvas, then floods it with color so that hue encodes Manhattan distance from the root. The animation is rendered as a Canvas image using `d3.timer` and `context.putImageData`, with the maze generation offloaded to a worker thread. The code relies on D3’s `d3.select` and `d3.hsl` for styling and color, while the generated tree is visualized in a web page with a “wait” message.

Mmbostock

89% match

Loading thumbnail…

Wilson’s Algorithm IV

Wilson’s Algorithm IV applies D3’s tree layout to a maze generated by Wilson’s loop-erased random walk. The maze is represented as a hierarchical tree of connected cells, with SVG paths drawn as straight links between parent and child nodes. The code uses `d3.layout.tree`, `tree.nodes`, and `tree.links` to compute positions, while custom functions `generateMaze` and `generateTree` construct the maze’s spanning tree. The visualization shows the resulting tree structure with black connecting lines against a white background, using D3 v3 and SVG rendering.

Mmbostock

86% 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

83% match

Loading thumbnail…

Best-First Search II

Best-first search solves a maze generated with Wilson’s algorithm, animating the exploration on a black canvas. The solver expands cells in order of Euclidean distance to the goal, highlighting the current best path in magenta while marking visited cells. The maze is drawn cell-by-cell using Canvas 2D `fillRect` calls, with the frontier managed by a custom binary heap. The animation steps through ten frontier expansions per frame via `d3.timer`, and the path is traced by backtracking through parent pointers.

Mmbostock

80% match

Loading thumbnail…

Randomized Depth-First II

A maze is generated using randomized depth-first traversal, then flooded with color to reveal its structure. Hue encodes the Manhattan distance from the starting cell, making the maze’s branching patterns visually comparable. The animation is rendered on a Canvas 2D context, drawing cells and passages incrementally as the flood expands. The code uses D3’s `d3.timer` to drive the animation loop and `d3.hsl` to cycle hue over time, while a custom `generateMaze` function builds the maze and `fillRect` calls paint each cell and connecting corridor.

Mmbostock

80% match

Loading thumbnail…

Random Traversal II

A maze is generated by random traversal and then flooded with colored light. Hue encodes the Manhattan distance from the starting cell, creating a vibrant gradient that reveals the maze’s branching structure. The animation uses a canvas, with `d3.timer` driving the flood fill, while `context.fillRect` paints each cell and corridor. The maze itself is built from an edge-bit array, and the color progression cycles through the HSL spectrum via `d3.hsl`.

Mmbostock

80% match

Loading thumbnail…

Maze Tree

A maze, generated as a uniform spanning tree via Wilson’s algorithm, is drawn on a black canvas. The tree layout repositions each maze cell from its grid coordinates into a Reingold–Tilford tree, animating the transition over 2.5 seconds with d3 transitions and tweens. The code uses d3.layout.tree, d3.timer, and the Canvas 2D API to redraw links each frame, with nodes sorted by depth.

Mmbostock

77% match