Tree of Life Game
Phylogenetic data from the scientists at AMNH made playfully interactive in an educational game! Evolutionary science data comes in the form of trees, but they’re not trees you can see. They’re encoded in text file formats like Newick. I built software tools to render these tree files graphically, allowing museum staff to edit and prune them. I then used these tools to curate and prune a data set for use in visualizations and games. Finally, I produced a prototype game powered by scientists’ data designed to teach museum-goers of all ages how life on earth is related. Notably, the game’s difficulty naturally rises as a player’s tree grows, beginning with obvious answers and gradually compelling players to use a deeper, knowledge-based strategy. Even expert players were surprised to learn new evolutionary relationships. Real science data powers the game, and the game-play motivates players to understand that data better. A direct connection from player to science!
👤 Role: Software Engineer, Research, Concept Design, UX Design
⚡ Technologies: Web stack, D3, Three.js, Phaser, Pixi, Node.js, BASH scripting
Highlights
Code Library & Tree Editor
The Tree of Life code library merges scientific data and associated metadata and multimedia into a more flexible, extensible, multi-purpose format. For example, a scientist’s Newick file can be associated with pictures of animals, their locations in the museum halls, and their threat status. The result is a richer, more flexible, multi-purpose dataset. It powers a point-and-click, graphical tree editor that can load Newick and JSON files, combine and prune trees, add metadata and multimedia, and save the data for use. Beyond just being an editor, the app stands on its own as a tree visualization and can be used in educational settings.
Prototyping
In developing the editor, with large data sets, I encountered performance ceilings related to D3’s use of SVG. In order to test an alternative rendering technique, I integrated ThreeJS and created a custom line renderer based on spite/THREE.MeshLine. I was able to achieve excellent performance, instant load times, and smooth animations of many thousands of nodes.
To decide on a fun core game mechanic, I created two quick and dirty prototypes that tested the physical feeling and behavior of game pieces, and how their behavior might signal right and wrong answers. To keep these prototypes focused on user experience, the designs were kept basic, and the goal was simple color matching.
In the first game mechanic, nodes obey the physics of marbles. Users can roll and fling them around on the table where they ricochet. When two nodes are brought together, a potential link between them fades up. When they are let go, the player’s guess is evaluated. If the answer is correct, if the colors match, the nodes connect. If the answer is incorrect the nodes repel one another. This mechanic was identified as a strong one and selected for further development and user-testing.
In an alternative mechanic, nodes obey the physics of magnetic pinballs. In addition to red and blue game pieces, the game board is covered in red and blue “divots”. When a player sends a piece rolling into a divot of the same color, it settles in as if magnetically attracted. If the colors don’t match, it is ejected as if magnetically repelled.
Tree Builder Game
The culmination of the Tree Of Life project, produced using the tools described above, this Tree Builder Game is powered by the scientific data of AMNH’s evolutionary biologists. In the game, four players are given a supply of game pieces, free-floating nodes with animal silhouettes on them that drift around like air-hockey pucks. When one is touched, its name is displayed.
Each player is given a colored quadrant with their own root node on which they build a tree. As game pieces are dragged near the tree, potential links fade in. As the pieces are moved around, different connection points are available. One of these is the correct location for this animal. If a piece is released near the right place, it’s pulled into the tree. If the wrong place, it is ejected.
