Maze Tree

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.

80% match

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.

79% match

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.

78% match

Random Traversal IV

This example shows a tree layout applied to a recursively generated maze, producing a branching structure of connected cells. The maze is created using a randomized depth-first traversal that records edge connections, and the resulting tree is rendered as a set of black link paths. The code uses `d3.layout.tree` to compute node positions from the maze’s traversal tree, then draws each link as an SVG path with `M` and `L` commands. The visualization is built with D3 v3 and SVG, with the maze generation logic implemented in plain JavaScript.

78% match

Randomized Depth-First IV

A maze is generated on a 40x40 grid using a randomized depth-first traversal, then converted into a tree structure. The tree layout from D3 is applied to position the nodes, and SVG paths draw the links between parent and child nodes. The code uses `d3.layout.tree`, `d3.select`, and SVG path elements to render the final hierarchical visualization. The tree’s branching pattern visually reflects the maze’s corridors and dead ends, with each node representing a cell and each link a passage.

Maze Hover

A maze rendered on a Canvas element fills the viewport, with a red path tracing the route from the top-left cell to the current mouse position. As the pointer moves over the grid of cells, the highlighted path updates dynamically, always showing the unique parent-child connection from the hovered cell back to the starting corner. The code uses D3 v3’s `d3.select` and `d3.mouse` to handle pointer events, while `generateMaze` builds the maze with a loop-erased random walk and `computeParents` derives each cell’s predecessor for path reconstruction. The black background and white maze structure are drawn with `fillRect`, with the red overlay repainted on every `mousemove`.

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.

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.