the binary tree algorithm
In a two-dimensional grid:
- Start at top-left corner.
- Connect the current cell to its northerly or easterly neighbour.
- Move one cell east. If the current cell has no easterly neighbour, start the next row.
- Repeat steps 2 and 3.
slower | faster |
algorithms leave fingerprints on their results
The binary tree algorithm has two notable characteristics:
- Since connections follow two possibilities, mazes have a strong diagonal tendency.
- Since the top row can only connect east, it always forms a straight line.
about this project
concept
This data visualization re-interprets the maze-building section of Mike Bostock's Visualizing Algorithms. The intention is to tell a story: that one can program many solutions to a given problem, none objectively 'better' than the other.
This project was conceived with an eye for implementing ideas presented in two articles: Mike Bostock's How to Scroll, and Bret Victor's Up and Down the Ladder of Abstraction. The former article delineates a set of best practices for 'scrollytelling'—a web-specific means of presenting information that reveals content through scrolling. The latter article serves as a high-level guidebook for presenting information in explorable explanations.
process work
This assignment was approached with an eye for building an explorable. In the process of drawing up a concept, several ideas caught my eye:
- Mike Bostock's article linked to a wealth of interesting projects. Aldo Cortesi's binvis.io stood out in particular—this project builds a cloropleth for the binary contents of any file you upload to it. In this way, you can 'see' the structure of the file.
- I also explored tracking and abstracting the behaviours of cellular automata over time, like Conway's Game of Life.
design exploration
Mike Bostock's Visualizing Algorithms splits key information between prose and diagrams. I found this disjointing and wanted to improve on it. To do so, I enlisted some ideas put forward in Bret Victor's Explorable Explanations—in particular, using images and text as redundant, as opposed to interdependent channels. I also employed some best practices detailed in Bostock's How to Scroll; a style guide for effective 'scrollytelling.'
I was interested in some of Bret Victor's ideas in Up and Down the Ladder of Abstraction, an article extending from his work in explorables. I found the idea of representing high-level and concrete phenomena in parallel worth experimenting with.
development
Having landed on maze generation, I found several helpful resources. The one that gave the most mileage was Jamis Buck's blog series on maze generation algorithms.
I experimented with each algorithm specified, building a minimum viable product to get a feel for how they work. The first execution went in a bad direction, both visually and technically, but it set the foundations for work to follow. After rebuilding it, I selected the four most interesting algorithms to present in the final work.
Following Visualizing Algorithms, I made each maze generator a time-lapse. Building on the Ladder of Abstraction, I added basic features to stop, slow, and reset each maze. I also added a graph measuring the speed of three algorithms, which I then superimposed over their live performance.