Figure 3.5 Foldit’s main game screen. The puzzle Collagen is shown. The protein is in the center; some clashes are visible. The panel in the top right shows the player’s rank and score, leaderboards for groups and individuals in the current puzzle, and chat. Menus and information are in the other corners of the screen.
Hydrogen bonds. These will appear as blue and white ladders where hydrogen bonds have been formed. These bonds improve the score and help hold the protein together.
Hydrophobic sidechains. Hydrophobic and hydrophilic sidechains are shown in different colors. Burying hydrophobic sidechains in the core of the protein can improve the score.
Voids. These yellow spheres will appear where there is empty space in the protein. Filling in the space can improve the score.
The visualizations in a scientific discovery game must achieve several purposes in order to allow players to apply their problem-solving skills. They must reflect and illuminate the natural rules of the system, in a way that makes state of the system evident to the player and directs them to where their contribution will be most useful. At the same time, the visualizations need to manage and hide the complexity of the system, so that players are not immediately overwhelmed by information. They must be approachable by players who have no knowledge of the scientific problem at hand. Thus, they should look inviting and fun, and not bring back memories of high school textbooks. Ideally, they should be customizable, because as with other aspects of the game, it is not clear from the outset what the best visualization will be, and different players may have different preferences.
In order to make the visualization of Foldit reflect and illuminate the fundamental properties of proteins, we worked with scientists to distill simple rules upon which to base them. The first rule is to avoid clashes. Clashes occur when atoms are unrealistically close to each other, causing a large repulsive force. These can be prevented by keeping the atoms from overlapping, and are represented by spiky, rotating spheres that float between the overlapping atoms. The second rule is to fill voids, or empty spaces in the protein. Packing the protein tightly will remove voids. Voids are represented as bubble-like objects that pop when they come in contact with the protein. Clashes and voids appear red, as natural proteins should not generally have any. The third rule is to bury exposed hydrophobics. Hydrophobics are sidechains whose chemical properties are such that it is favorable for them to be on the interior of the protein. Exposed hydrophobics are represented as small, pulsing spheres that move along their sidechain. These are drawn in yellow, rather than red, because natural proteins may have some exposed hydrophobics. The fourth rule is to maintain and create hydrogen bonds, which form between particular pairs of atoms and hold the protein together. Hydrogen bonds appear as undulating bars between the bonded atoms, and are drawn in blue, because they are good.
Due to the spatial nature of the problem, the visualization of the protein closely matches the actual geometry of the protein. To make the overall structure stand out, sheets, helices, and loops are stylized, similar to many scientific visualization tools.1 Sheets appear with a zig-zag pattern that will form hydrogen bonds when properly fit together. Color also plays a large role in the visualization of the protein. The backbone color reflects the score of the protein in a particular region—going from red in poor scoring regions to green in good scoring regions—so players can see where they can gain the most points. The sidechains are colored by hydrophobicity, so players can quickly see if they are extending them in the preferred direction. By coloring backbone and sidechain independently we can display more information while not introducing too much visual clutter.
Foldit takes a number of approaches to manage and hide the complexity of huge networks of interconnected atoms that make up a protein. Many unimportant details are hidden. Hydrogen atoms, which are plentiful on the protein but do not add a lot of structural information, are hidden. However, hidden information will reappear if it becomes important to the player: sidechains can disappear entirely to make the overall structure of the protein’s backbone clearer, but will reappear if they are causing a problem, such as if they are involved in a clash. Many actual clashes themselves are also hidden: only the worst clash is shown on a per-amino acid basis. This prevents the player from being overwhelmed by the number of clashes if the protein is compressed too tightly.
To make the game approachable, we gave the protein itself a bright, cartoonish look. Many pieces of the visualizations move playfully around the protein. There are a wide variety of visualization options available in the game as well, such as alternative colorings and geometries for the protein. These can be accessed through a special menu option that is turned off by default. This approach allows more advanced players the ability to customize their view in the view options menu, but keeps things simple for newcomers.
Visualizations such as voids and exposed hydrophobics can be computationally expensive to compute. To keep the game interactive, we compute such visualizations in a separate thread, which will update the visualization after a delay.
3.4.2 Interactions
Foldit also provides several different methods of acting on the protein. Figure 3.6 is a screenshot of user interaction. Players need actions that allow them to manipulate the proteins in a way which will bring them closer to their goal. They should be intuitive and useful; we have tried to structure our input around the idea of touchability, or direct manipulation. Whenever possible, we have tried to make operations act directly on the protein itself. Some of the possible actions the user can perform are:
Pulling. This is intended to be the primary method of interaction. When the user clicks and drags on part of the protein, a purple arrow extends from the protein to the location of the user’s mouse cursor. The protein will then try to move to stay under the mouse, while still satisfying some energetic preferences.
Bands. Purple bands can be placed by the user to attach one residue to another, or a residue to a point in space. When the user performs another operation on the protein, bands will pull on the attached residues. This can allow the user to keep parts of the protein in place, pull to specific points in space, or pull in multiple places at once.
Figure 3.6 Foldit’s main game screen during interaction. The puzzle Collagen is shown. The player is acting on the protein. The icy blue sheet is locked and the purple cylinder with the round end is a band. The purple cylinder with the pointed end shows where the user is pulling on the backbone. The dark blue part of the backbone is affected by the pull.
Locks. Locks prevent the protein from being affected by operations. The user can lock individual residues or whole secondary structures, giving them an ice-like appearance. Locks allow a kind of implicit selection; by locking two residues, the user can then easily operate on the residues between them.
Wiggle and shake. Wiggle and shake are two automatic actions the user can launch. Wiggle performs an optimization over the backbone, and shake performs an optimization over the sidechains. They can be performed globally as well as locally by using locks.
Rebuild. Rebuild allows the user to specify a section of the protein to be modified primarily by Rosetta fragment insertion, a process of copying backbone angles from similar native structures. This operation has a large element of randomness and can result in drastic changes to the structure.
The interactions in a scientific discovery game must also meet several
