This is my small contribution to the HTML5 community. It's an experiment that uses the HTML5 canvas element and the associated drawing methods to generate a DNA structure on the fly.
You can select from 7 fixed color schemes or let the application generate a random sequence following the basic pairing rules for a DNA sequence (A - T & C - G). Additionally, change the number of pairs and the vertical spacing between each pair at any time.
Internally, JS objects work together to calculate, cache the position of the nucleotides and finally draw them to the canvas.
The nucleotides were first created using the createRadialGradient method, however the it would take around 1 -3 seconds to generate the animation, so images were used instead to represent them.
Also, to avoid a flickering animation the elements are drawn offscreen and then copied into your onscreen. At the core of the application only plain javascript is used, the jQuery library was used only to provide the sliders functionality and basic selectors.
It would be very interesting to allow anyone to create their own color schemes and save them.. might be nice features for a version 2.
Hope somebody finds this useful. Enjoy! :)
Technologies: HTML5/canvas + javascript + jQuery
Nice work, where can we download this?
ReplyDelete