National Science Foundation Visualization Challenge Finalist
Download:
[ver.20][Recommend]Mac desktop version: Proteincraft
Old versions:
[ver.17]Mac desktop version: Proteincraft[ver. 1][old]Win32 desktop version: Proteincraft_win32bit
(see update details at the bottom of the page)
How to play:
Mouse: Drag’n Drop tRNA
Up key: Switch between Shape mode and Text mode
Right arrow key: skip to the next codon set on mRNA
ESC key: exit the game
In Spring 2012, SMALLab team at Quest 2 Learn New York worked with our Living Environment teacher, Dan Bloom, to create a game scenario about protein synthesis. After the kick-off meeting with Dan and a few rounds of quick prototyping on the subject, I decided to narrow down the multi-level gameplay idea and focus solely on the translation portion of the synthesis. According to Dan’s experience, students have more difficulties with translation than transcription because it is harder to visualize the relationship between codons and anti-codons in the classroom. Through the use of scale, sound, visual cue, collaboration, this new SMALLab scenario creates an immersive playground for students to practice their knowledge on translation.
Proteincraft puts students in the moment when DNA translation happens. In order to succeed in the scenario, students must help Messenger RNA(mRNA) find the right Transfer RNA(tRNA) by matching codons with their correspondent anti-codons. Every successful match consists of three steps. The first step is to read the next codon on mRNA and to find the matching tRNA. Secondly, brag the tRNA to ribosomes. Thirdly, crank the white circle on ribosomes to the left side to advance to the next codon. Repeat these steps until all the codons are matched. The teacher moderates the entire experience and interrupts at moments for learning opportunities. In the picture above, Dan is pointing out to players that in order to start the translation, the initial tRNA (met) has to be found first.
In addition, this game can be viewed in the text mode. All the color and shapes are replaced by the black-and-white letters that represent each of the four bases in the textbook. Teachers can switch between modes by pressing the UP arrow key. Here are notes from Dan that becomes the guidelines of the visual system of both modes in Proteincraft:
1) The bases in DNA should be shaped so that they can fit in to each other.
====T (thymine) – blue, be shaped with a pointy triangle on the end
====A (adenine) – red, be shaped with an inverted space for a triangle
====C (cytosine) – yellow, be shaped with a semicircle on the end
====G (guanine) – green, be shaped with an inverted space for a semicircle
2) The bases in mRNA and tRNA should be the same except instead of T, there is…
====U (uricil) – purple, should be shaped to fit into A
The scenario was a success with Dan’s class. Students had no problem warming up to the game because all the colors, shapes, and letters are inspired by diagrams Dan showed in the classroom. During the gameplay, teams of students have to find an efficient way to work together in SMALLab. Some teams assigned their teammates different roles – capturers, crankera, and translators while other teams spread out in the space like football players all waiting for the right tRNA to swim by. Spectators definitely play an important role in the overall play experience, they give verbal suggestions to the player team – “AUU not UUA”, “Green-Yellow-Red”, “tRNA has no T in it”, “tRNA let’s go!”.
Visual and sound design:
At the beginning of the research, I watched many scientific renderings on protein synthesis. Surprisingly, none of them look the same graphically even though they all look “realistic”. All of them are subjective and technology-dependent. It is more like a strategy to attract longer attention span with realistic-looking visuals than anything else which is understandable. I made an animated gif of my favorite rendering so far:
Dan showed me diagrams and illustrations that he used in the classroom. They are mostly represented in geometric shapes and are carefully color-coded. That set me free, I am going for color-coded geometric shapes! – to connect the scientific facts to design elements. Even though they are geometric shapes, they still follow the principles of translation dearly. Instead of coming up with a fictional realistic form, I draw a connection between Dan’s diagrams and the design elements of Proteincraft’s visual system, e.g., each of the four bases is represented visually by a unique shape and a unique color. The shape of an amino acid is dynamically determined by the shape combination of its three bases.
The tRNA and mRNA in this game synthesize sounds too. Usually, SMALLab game scenarios are designed and produced in less than five weeks, so we usually don’t have time to do serious sound design. However, during a check-in meeting, we decided to bring the connection to sound elements too. Claudio’s sound design took the relation between codons and amino acids to the next level! When the player successfully brings back a correct tRNA, the game will play three tones that match the codon combination. Claudio designed the tones and a matching ambient music that really gives the play experience an awesome upgrade.
SMALLab Version:
Desktop Version:
10/18/12 proteincraft playtest with 9th graders, suggested moving mRNA to the top of the screen to avoid shadow cast by the projector in SMALLab
11/20/12 project release postponed due to a scheduling conflict
01/18/13 SMALLab Proteincraft released
06/11/13 plan to convert proteincraft to desktop and android.
06/18/13 [android] curveVertex() slow app overtime. Image memory leak on android still a problem.
09/27/13 desktop demo completed.
09/28/13 Desktop ver.1 released (Mac and Windows)
09/29/13 Desktop ver.15 released (Mac): implemented amino acid names(desktop ver. only feature), text mode visual tweaked
09/31/13 Desktop ver.17 released (Mac): fixed a major data parsing error that caused amino acid name mismatched
11/14/13 Ran SMALLab version for 9th graders made the following changes:
===1. fly speed of tRNAs now starts slow and gradually speeds up
===2. the visual of crank mechanism now flashes when ready to use
===3. games now automatically change to text mode after the 8th tRNA is found
===4. minor visual tweakings
11/19/13 Desktop ver.20 released (Mac): minor visual feedback improvement, added replay function