After publishing my last article about OPSIN I was interested in using HTML5 techniques to display chemical compounds and found a nice library: ChemDoodle.

With ChemDoodle it’s very easy to display a molecule. Just download the libs and import them to your HTML code:

To display a compound you need its representation as MOL file, include it in less than 10 lines:

Here is a sample with caffeine:

If your browser is able to display WebGL you should see a stick-model. Use your mouse to interact. Very easy to use! Of course you can load the MOL data from a file, but that is beyond the scope of this article.

You can actively support me!

I am having troubles displaying the molecule. javascript works fine for me, but I cannot see the mol either in wordpress or in a reglar html file I have build adhoc. Maybe I need to change the permissions for the ChemDoodleWeb files, maybe…

Test page

document.write("" + Date() + "");  var app = new ChemDoodle.TransformCanvas3D("transformBallAndStick", 500, 500);  app.specs.set3DRepresentation("Stick");  app.specs.backgroundColor = "white";
var molFile = "\n  Marvin  02080816422D

14 15  0  0  0  0            999 V2000\n   -0.7145   -0.4125    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0\n   -0.7145    0.4125    0.0000 N   0  0  0  0  0  0  0  0  0  0  0  0\n    0.7145   -0.4125    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0\n    0.7145    0.4125    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0\n    0.0000   -0.8250    0.0000 N   0  0  0  0  0  0  0  0  0  0  0  0\n    0.0000    0.8250    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0\n    1.4992    0.6674    0.0000 N   0  0  0  0  0  0  0  0  0  0  0  0\n    1.4992   -0.6675    0.0000 N   0  0  0  0  0  0  0  0  0  0  0  0\n    1.9841    0.0000    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0\n   -1.4289   -0.8250    0.0000 O   0  0  0  0  0  0  0  0  0  0  0  0\n    0.0001    1.6500    0.0000 O   0  0  0  0  0  0  0  0  0  0  0  0\n    0.0001   -1.6500    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0\n    1.7541    1.4520    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0\n   -1.4289    0.8250    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0\n 10  1  2  0  0  0  0\n  1  2  1  0  0  0  0\n 14  2  1  0  0  0  0\n  8  3  1  0  0  0  0\n  4  3  2  0  0  0  0\n  7  4  1  0  0  0  0\n  1  5  1  0  0  0  0\n  5  3  1  0  0  0  0\n 12  5  1  0  0  0  0\n  6  2  1  0  0  0  0\n  6  4  1  0  0  0  0\n 11  6  2  0  0  0  0\n  9  7  1  0  0  0  0\n 13  7  1  0  0  0  0\n  9  8  2  0  0  0  0\nM  END\n";  var molecule = ChemDoodle.readMOL(molFile, 1);  app.loadMolecule(molecule);