Molecule Drawing

JavaScript library

Sample usage of the library (molecule.js)

<script type='text/javascript'>
 
gradient_info = {
  "silver" : [ "ffffff", "e07000", "a05000" ],
  "gray"   : [ "ffffff", "a08060", "504030" ],
  "blue"   : [ "ffffff", "8080ff", "0000ff" ],
  "red"    : [ "ffffff", "ff8080", "ff0000" ],
  "green"  : [ "ffffff", "80e080", "00c000" ],
};

pyrimidine = {
  "H1" : [ 1, 537, 400, 20, "Gray", [ "H2", "H6" ], [ 1, 2 ], "N"],
  "H2" : [ 2, 450, 350, 20, "Blue", [ "H1", "H3", "N" ], [ 1, 2, 1, ], "C"],
  "H3" : [ 3, 363, 400, 20, "Gray", [ "H2", "H4", "NW" ], [ 2, 1, 1 ], "C" ],
  "H4" : [ 4, 363, 500, 20, "Gray", [ "H3", "H5", "SW" ], [ 1, 2, 1 ], "C" ],
  "H5" : [ 5, 450, 550, 20, "Gray", [ "H4", "H6" ], [ 2, 1 ], "N" ],
  "H6" : [ 6, 537, 500, 20, "Blue", [ "H1", "H5", "SE" ], [ 1, 1, 1 ], "C" ],
  "SE" : [ 0, 624, 550, 0, "", [ "H6" ], [ 1 ], "H" ],
  "N"  : [ 10, 450, 250, 20, "Gray", [ "H2" ], [ 1 ], "H" ],
  "SW" : [ 13, 270, 550, 20, "Gray", [ "P4" ], [ 1 ], "H" ],
  "NW" : [ 0, 270, 350, 0, "", [ "H3" ], [ 1, 1, 1, 1 ], "H" ],
};

draw_gradient_info (gradient_info);
draw_molecule (pyrimidine);

</script>

  

Objective: Provide functions for drawing molecules using mostly just data and relatively clean code.

Problems: We still have to figure out the atom locations. Perhaps there should be some canned gradients so we don't have to specify them except for special case.

Solutions: We could have a method that lets you specify a hexagon or a pentagon and it would calculate the coordinates. This is left as an exercise for the reader.