The Thinking Behind the OnScreen DNA Lite™ iPad App

My first iPad app, now ready for sale on the iTunes App Store even before the iPad has gotten into many hands, is called OnScreen DNA Lite. Check it out! I plan to relate something of the hectic development of this app in a later post. Here my aim is to describe the iPad app a little and to motivate its development. The app is based on OnScreen DNA, a science education program I created a few years ago, first for the Macintosh OS X, and somewhat later for the Windows side. My primary goal in developing OnScreen DNA was to provide students (and all persons interested in DNA) with a way to reach a deeper, more intuitive understanding of DNA structure than I felt they were likely to obtain from reading text and looking at two-dimensional static images of a DNA model. I wanted to create a virtual, three-dimensional model that had most of the virtues of a real, physical one plus the enhanced power to simulate DNA processes with animations.

OnScreen DNA Lite’s computer model, programmed with three-dimensional perspective, is of the simple ball-and-stick type, in which the balls represent molecules, and the sticks represent the chemical bonds between these constituent molecules. A guiding principle in development was to make the relative dimensions of the model agree with those of the actual DNA molecule to the degree that makes sense for a ball and stick model. This meant getting the ratio between helical radius and the distance along the helix required for the molecular chain to make a complete revolution right, as well as showing the proper offset between molecules paired oppositely with one another in the two DNA strands. The distance between molecules in a strand, and hence the number of molecules in a complete revolution of the helical strand also had to be right.

Another crucial structural detail of the virtual helices that needed to conform with that of natural DNA was the handedness. The concept of handedness, which refers to the sense in which each helical strand winds around its axis, is one that seems largely to have escaped notice by those who make artistic renditions of DNA. My observation is that roughly half (the fraction predicted by a random guess) of all depictions of DNA show left-handed DNA, when in fact natural DNA (or all but a tiny fraction of it) in living cells is right-handed. OnScreen DNA Lite makes it easy to see the difference between right and left handed DNA by allowing the user to switch back and forth between the two.

In addition to showing the relative positions of constituent molecules in the DNA strands, the OnScreen DNA model uses color coding to identify the various molecular parts and chemical bonds. This is meant to give visual reality to the idea that a molecule of one type (color) will make a cross-strand bond with only one other type (a different color). The molecules that form a connection between their respective strands are represented by one another’s complementary colors. The color also makes the visual point that the molecules (nucleotides) making up the DNA chains differ from one another only in the parts (nitrogenous bases) that make up the cross-strand pairs, while the connections that form the individual strands are between molecular components that are identical. This can all be said, of course, and should be said, but the colors in the model make the point in an immediately memorable way.

The molecules (sugar phosphates) that link together to form the chain of a strand do so in a particular way. Think of elephants forming a line by each elephant (except for the lead elephant) grasping with its trunk the tail of the one in front of it. The molecules have an asymmetry (think of trunk and tail) as well, and they form bonds between dissimilar parts (the “tail” being the part of the molecule where the phosphorus atom is). Thus we can think of a strand of DNA as “pointing” in a given direction just as the line of elephants heads in a certain direction. We say the DNA strand has a certain polarity (as a bar magnet has polarity: N at one end, S at the other). It turns out that in the real world, the two DNA strands in a double helix are aligned with opposite polarity. They point in opposite directions. The color coding of the OnScreen DNA model reflects this feature as well, visually indicating it in the colors of the relevant chemical bonds.

In order to perform its biological function in living cells, the DNA molecule must at times have portions of its two strands separate from each other. The separation and unwinding of the strands, and the nucleic acid chain constructions involved in these processes are orchestrated by complex proteins called enzymes that catalyze just the right reactions at the right time and place in the required sequence. In the full OnScreen DNA edition, animated simulations are used to show how this occurs. OnScreen DNA Lite does not include these biological processes, but it does show how the laboratory process called denaturation takes place. The temperature required to achieve this is too high for a living cell to survive, but in the lab, the jiggling of the the double helix at the high temperarture is strong enough to break the bonds holding the two strings together. OnScreen DNA Lite for iPad animates this process, finally arriving at the point where the two strands are completely separated from each other and no longer have any helical shape, just as happens to real DNA in the lab under heating. The reverse process, in which bonds reform between complementary pairs to recombine the two strands into a double helix can also occur, and OnScreen DNA simulates this phenomenon of renaturation also.

Even though the biological functioning of DNA is not demonstrated by OnScreen DNA Lite, its animations can serve to make the point that the hydrogen bonds connecting the two intertwined strands to each other are much weaker than the other chemical bonds of the DNA molecule, a fact that is crucial for the strand separation that has to take place in the biological processes. Furthermore, I believe that seeing the strands in the act of recombining makes the fact of their entwinement all the more memorable, which is important because it seems it can be lost to consciousness when only two-dimensional images or the typical ladder-like double strand renderings are seen.

The desktop version of OnScreen DNA allows the user, by means of the mouse, to rotate the model about its helical axis and about an axis perpendicular to that. Making these rotations serves to enhance comprehension of exactly how the double helix structure is put together and to fix its three-dimensional geometrical shape in the mind. Causing the on-screen rotation by dragging the mouse pointer across the screen is fun, but the pointer on the screen is at a distance from the hand directing it. I, along with almost all other developers of iPad apps, was without the benefit of an actual iPad on which to test the app I was making and thus had to use the iPad simulator that runs on the Macintosh to see what the app should look like on the real device. Thus I was deprived of the tactile part of the iPad experience, as mouse clicks and drags had to simulate their finger-on-screen counterparts. I did, however, have a chance to test on a real iPod Touch the prototype of OnScreen DNA Lite for iPhone, and I loved how I could make the double helix rotate by moving my finger on the screen. It was much closer to dealing directly with a physical object, and much more satisfying. I can’t wait to get my iPad and to start making further improvements to OnScreen DNA Lite for iPad.

Tags: , , , , , , , ,

Comments are closed.