Wilson’s Algorithm III

100%

Wilson’s Algorithm III

✓ Published0🌍 Public

Last edited Feb 9, 2016

Created on Apr 28, 2014

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.

AI-generated description

A spanning tree of the canvas is generated using Wilson’s algorithm and then flooded with color. Hue encodes Manhattan distance from the root of the tree. (This is not an optimal visual encoding, but it suffices and is pretty.)

Spanning trees can also be used to generate mazes. See a maze generated with Wilson’s algorithm flooded with color, and compare color floods of spanning trees generated with Wilson’s algorithm to random traversal, randomized depth-first traversal and Prim’s algorithm.

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Wilson’s Algorithm II

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.

Mmbostock

89% match

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

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

84% match

Loading thumbnail…

Random Traversal III

A canvas spanning tree floods with color as an animation, where hue represents Manhattan distance from the root. A Web Worker generates the maze using random traversal, and the main thread colors it via a d3.timer loop, writing pixel data with Canvas `putImageData`. The code uses d3.v3 for color and timing, with bitwise direction flags to track tree edges.

Mmbostock

81% match

Loading thumbnail…

Randomized Depth-First III

A spanning tree of the canvas is generated using randomized depth-first traversal and then flooded with color, where hue encodes Manhattan distance from the root. The animation runs in a web worker, with each frame painting new frontier cells via Canvas `putImageData` and `createImageData`. The visualization uses D3’s `d3.timer` and `d3.hsl` for color cycling, while the maze structure is built incrementally by shuffling frontier edges in the worker’s `generateMaze` function.

Mmbostock

81% match

Loading thumbnail…

Prim’s Algorithm III

The visualization shows a spanning tree of the canvas generated with Prim’s algorithm, then flooded with color from the root; hue encodes Manhattan distance, creating a distinctive gradient pattern. A Web Worker computes the maze structure using a custom binary min-heap priority queue, while the main thread animates the flood fill via `d3.timer` and writes pixel data directly into a Canvas `ImageData` object. The animation cycles through hues by incrementing a distance counter and calling `context.putImageData` each frame.

Mmbostock

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

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

75% match