JavaScript Library
In my high school class, we draw the chocolate molecule with SVG by placing each atom and atomic bond in its appropriate location, with gradients. We could make similar drawings using PHP on the web server, or even C++, which would output the SVG code as text. This project lets you draw many more molecules just by entering the data as a list of atoms with connections.
Objective: Provide functions for drawing molecules using mostly just data and relatively clean code.
The molecule is an array of atoms, each of which indicates its connections to the other atoms in the molecule. The library has predefined colors for the different atomic elements.
The atoms should fit on a square that is 800x800. The system will try to center the molecule within this grid.
Problems: We still have to figure out and specify the individual atom locations. We could provide a method that lets you specify a hexagon or a pentagon and it would calculate the coordinates.
Name. Each atom needs a name or ID for making connections. I use short IDs like the element name if a simple molecule, or Hn for hexagons.
Element. The atomic element symbol. The system uses standard colors for C, H, O, N, F, Cl, I, P, S, Li, Na, and K. All other elements use pink.
X and Y. The x and y coordinates of the center of the atom. Coordinates may be adjusted to center the molecule.
Connections. The names of other atoms that are connected to this atom. Separate the list by commas or spaces. If the connection is a double bond, append two slashes (//) to the atom name.