TwistyMol is dead - Long live TwirlyMol

My first attempt at a Javascript molecular viewer culminated in TwistyMol. For TwistyMol, I took as my starting point processing.js and consequently ran into some difficulties on IE, which doesn't support Canvas.

TwirlyMol is my attempt to start over with a browser-independent Javascript vector graphics library. I googled a bit and came across some pointers on Stack Overflow (a Q&A website that does things in a new way). I choose to go ahead with dojox.gfx, which is an experimental component of the Dojo javascript library. On IE, it uses VML, while on Firefox, it uses SVG (Canvas is also supported). I reckoned that this might improve performance on IE. Also, Dojo is likely to be better supported going forward, unlike processing.js which is essentially a one-man job (sure, the one man is the author of jQuery, but still) and its goal is quite different.

So, here's the demo.

It's ready to use for whatever you want. If you think about it, the code behind TwirlyMol can easily be adapted to displaying other types of 3D data, for example principal components graphs. What else would be useful? That's up to your imagination (comments below welcome).

And I think this draws to a close my involvement in Javascript molecular viewers. Hope y'all had fun. I've put the code up on Github just to see what happens. Maybe someone wants to add perspective.

Notes:
(1) Colours of atoms taken from the Blue Obelisk Data Repository. Even if you don't understand what the Blue Obelisk is about, I'm sure you can appreciate the benefit of shared chemical resources like these data.
(2) IE performance is still much slower than Firefox, but is better than with Twistymol.
(3) With Firefox, adding a large number of SVG molecules to a page is much slower than with Canvas. If doing this in practice, you'll need to add them in chunks of 50 or so, with a setTimeout() to add the next 50.
(4) Coding Javascript for IE really is frustrating.
(5) If you use mouse gestures, rotating or zooming with the right mouse button can trigger a gesture event. One way around this would be to implement support for modifier keys so that shift+left button causes right button behaviour, while alt+left would cause middle button behaviour. This would be quite easy as the dojox.gjx library has a function for testing whether shift is held down (I can't remember about the alt).

Turn, turn, turn - TwistyMol ready for action

A new version of TwistyMol is available. It's now ready for use by others (that means YOU). Here's a simple example and here's another with a few more molecules.

What's changed since last time? Well I've added in an SDF file parser, made it possible to have multiple TwistyMols on the same page, sorted out the rotation (at least for the moment) and gone a bit overboard on the shadows. Performance on IE is still a big problem, and displaying more than a handful of molecules at the same time is out of the question (too slow). I still don't know if this is an intrinsic problem with VML or just the whole Canvas to Excanvas to VML conversion.

If you want to use it yourself, download the Javascript files referenced in the HEAD section of the demo page, and look at the code on the demo page itself. The only tricky part is getting the SDF file into Javascript - you'll either have to place it on a webserver and use an Ajax call or do as I did and convert it to a Javascript string variable (hint: read() it in with Python and convert \n to \\n).

Feel free to modify and distribute the code. You could add a comment below with a link if you use it anywhere.

Molecular viewer now works on Internet Explorer

I've managed to get my mimimal molecular viewer (see previous post) working on Internet Explorer. Smooth, it is not, but at least it works (I recommend Firefox instead). I've also renamed it to TwistyMol. Minimol sounded a bit boring, like Microsoft. You can try it out here.

So what was the problem with Internet Explorer? Well, for graphics, TwistyMol uses processing.js which draws the molecule using the Canvas tag. Unfortunately, Internet Explorer is the only browser that doesn't support Canvas; instead, it has invented its own system called VML (Vector Markup Language). So, for IE users, I need to import the ExplorerCanvas Javascript library developed by Google; this converts all calls to Canvas to their equivalent in VML. (I also needed to make a few changes to processing.js to enable IE support.)

Next steps - sort out the rotation (Simon suggested a possible solution), turn the Javascript into proper Javascript (encapsulate it a bit), stick in a file format parser (I'm hoping Rich will come through on this one), and deploy to the masses.

Minimol - A minimal molecular viewer for web pages

Following on from my previous post, I've improved the display and added the ability to rotate, zoom and translate the molecule.

The result is Minimol (should work with everything except Internet Explorer*).

Notes: The original Processing has support for 3D (spheres, OpenGL, and suchlike) but here I need to do all the leg work myself. The rotation doesn't work quite as it should (e.g. if you rotate 90 deg around the y axis, see what happens if you try to rotate around the x), so if you have some experience with this please get in touch. processing.js cannot draw ellipses, only circles - here is a patched version with support for ellipses.

* Internet Explorer doesn't support the Canvas tag (nor will the forthcoming IE8). I tried ExplorerCanvas, but it didn't help.

Processing molecules in javascript

Recently, there's been some interest in using Javascript for cheminformatics. Duan Lian has made some progress by using the Google Web Toolkit (GWT) to convert Rich's MX toolkit from Java to Javascript. He has also started working on depiction by writing Java classes that handle drawing. These are then converted to Javascript using GWT. The initial results show proof of concept.

I've taken a different approach to structure depiction by using an existing Javascript graphics library, processing.js. This should result in more efficient code, although ironically processing.js is itself a port of the Java graphics library, Processing.

For my proof of concept, I've implemented a 3D structure depiction. Here are the results.

As usual with these things, some browser caveats apply but it works for me on Firefox 3. Also note that though the code is actually in the Processing language and translated to Javascript, it could easily have been written directly in Javascript. processing.js supports interaction with the mouse, so a full 3D structure twirler could be implemented with a bit of effort and a sprinkling of MVC. I will leave this as an exercise for the reader. :-)