Patrik Rydberg

About

SMARTCyp is a method for prediction of which sites in a molecule that are most liable to metabolism by Cytochrome P450. It has been shown to be applicable to metabolism by the isoforms 1A2, 2A6, 2B6, 2C8, 2C19, 2E1, and 3A4 (CYP3A4), and a specific model for the isoform 2D6 (CYP2D6) is included from version 2.0. CYP3A4 and CYP2D6 are two of the most important enzymes in drug metabolism since they are involved in the metabolism of half, and 25% of the drugs used today, respectively.

The web server now uses the ChemDoodle 2D sketcher, making it compatible with mobile devices and touch screen interfaces. The SMARTCyp HTML output is now generated using HTML5 and canvas drawings using the ChemDoodle Web Components to display molecules. This makes the generation of HTML output ten times faster (and atom number display is now compatible with touch screen interfaces).

Website

SMARTCyp Online Interface

Eric Jang

About

Social Docking is a novel application of new web technologies to solve problems in computational biology. By using volunteer web browsers to run molecular mechanics simulations, Social Docking achieves massively parallel virtual screening of pharmaceutical compounds and is run completely within the browser. The ChemDoodle Web Components library is used to display the current molecule being analyzed on the front page, and serves as the core molecular model for calculations within HTML5 web workers. iChemLabs cloud services parse compact SMILES strings into molecules.

Website

Social Docking at Appspot

WebGL on Mobile Devices

iChemLabs

About

The ChemDoodle Web Components library now includes support for CIF files and for rendering various features typical for crystallographic and periodic data, such as unit cells. An entire tutorial page is now dedicated to working with CIF files. A new demo has been added, IZA Zeolite Explorer, to view zeolite structures from the IZA database in several representations.

Website

IZA Zeolite Explorer
Working with CIF Files

iChemLabs

About

The ChemDoodle Web Components library now contains new features to render nucleic acids in 3D components. The phosphate backbone is represented by a tube and bases are represented by platforms attached to the tube. Of course, many visual specifications allow for customization. Now the most advanced scenes can be built from PDB files. Take a look at the PDB structure, 2OEY, in our PDB Ribbons demo.

Website

Protein Data Bank Demo
Working with PDB Files

iChemLabs

About

ChemDoodle Mobile is the mobile companion to the popular chemical publishing desktop application, ChemDoodle. ChemDoodle Mobile is available for both iOS (iPod Touch/iPhone) and Android phones.

ChemDoodle Mobile is created with ChemDoodle Web Components. By using HTML5 components, cross-platform mobile apps can be created.

Website

Official ChemDoodle Mobile site
ChemDoodle Mobile on iTunes
ChemDoodle Mobile on the Android Market

Robert Hanson, St. Olaf College

About

We are working to further collaboration between the ChemDoodle Web Components and Jmol projects. The first step is the creation of bridges that allow the two projects to communicate. It is very trivial to link the two. A demo is now hosted to show the ChemDoodle/Jmol bridge and to foster further collaborative development.

The next step will be to provide access to Jmol functionality through AJAX for easy deployment of existing Jmol projects onto mobile devices. Stay tuned!

Website

Description by Robert Hanson
ChemDoodle/Jmol Bridge Demo

Joe Polak, iChemLabs

About

This game was created as a plugin to the ChemDoodle Web Components library. The main piece of code is a new <canvas> called PongCanvas, which is a child of the _AnimatorCanvas class in the ChemDoodle Web Components library. The background image is set using the _Canvas.setBackgroundImage() function. A compatible MOL file of the benzene ring was generated using ChemDoodle Desktop and loaded into the Canvas using the _Canvas.loadMolecule() fuction. The ring’s color and line thickness were changed by altering the appropriate visual specifications. The rotation effect was achieved using a method similar to the RotatorCanvas. Everything else you see in the game –the paddles, the score and the game over messages– was drawn by overriding the _Canvas.drawChildExtras() function. Input handling was done by defining the _Canvas.click() and _Canvas.mousemove() functions, and mobile support was written in by mapping _Canvas.touchmove() to _Canvas.mousemove(). If you’re using this demo on a desktop browser, you’ll notice some neat sound effects. These were made possible using the HTML5 <audio> tag.

This demo was written as a plugin, meaning that it isn’t an integral part of the ChemDoodle Web Components library and it resides in its own source file. When URI linked, the plugin adds the appropriate classes and functions to the ChemDoodle Web Components library to be used. If you look at the source for this page, you will notice that the game was initialized by calling new ChemDoodle.PongCanvas(). This is because the plugin correctly extended the ChemDoodle Web Components library to add it there. You can also see the source for this game using the browser’s Javascript features. The plugin is governed by the same license that the ChemDoodle Web Components is governed by.

Website

Benzene Pong Game

Authors

Michael Verderese
Professor Heinz D. Roth

Animation

The animation and source can be found here: http://www.ichemlabs.com/resources/etc/BenzeneAnimationFinal.html

About

In 1890, at the 25th anniversary of the benzene structure discovery, Friedrich August Kekulé, a German chemist, reminisced about his major accomplishments and told of two dreams that he had at key moments of his work. In his first dream, in 1865, he saw atoms dance around and link to one another. He awakened and immediately began to sketch what he saw in his dream.

Later, Kekulé had another dream, in which he saw atoms dance around, then form themselves into strings, moving about in a snake-like fashion. This vision continued until the snake of atoms formed itself into an image of a snake eating its own tail. This dream gave Kekulé the idea of the cyclic structure of benzene¹.

Using the programming languages javascript and html5, I created an animation to simulate Kekule’s dream. The program utilizes iChemLabs’ ChemDoodle Web Components’ Application Programming Interface (API)³, a particular set of rules and specifications governing the open source, web-based Cheminformatics program.

When I was first given this project, Professor H.D. Roth explained to me his vision of what the animation should look like. He said that the animation should begin with carbon atoms bouncing around the screen. Then, one by one the atoms should link together to form a chain of atoms as in Kekulé’s first dream. Finally, the chain should come together to form a ring, and the snake Kekulé saw eating its own tail should appear.

Kevin Theisen, of iChemLabs, provided a sixty-line code for an animation of a single carbon, represented by a gray circle, bouncing up and down inside a rectangular canvas. The code utilizes ChemDoodle’s API, which is based on html5 and javascript. Using this API is advantageous because it can be run on any modern browser without requiring any additional plug-ins. The bouncing motion was achieved by moving the atom a fixed number of pixels every frame (along the y coordinate), then reversing its direction once it reached the edge of the canvas.

Starting with this code, the previously fixed x coordinate was varied to allow the atom to move in two dimensions. To allow for random speed and direction, the carbon’s x-axis and y-axis movements per frame were multiplied by a random decimal number between 0 and 1. Once this was accomplished, more carbons were introduced to the canvas by adding carbon objects to the atom array of the molecule object supplied by the ChemDoodle API (Figure 1). Collisions between the atoms are handled by exchanging the x and y vectors of one carbon with the other. In order to give the animation the euphoric feeling of a dream, a random fading/flashing effect was added to the animation by randomly changing the opacity of the entire canvas. This effect carries through the entire animation.

In order to depict the vision of the atoms joining each other and moving around in a snake-like fashion, an algorithm was created to allow for one (lead) atom to move freely and for the others to join and follow it. Upon each click of the mouse, the free carbon closest to the tail atom of the carbon string is linked to, and then pulled towards the tail atom. This was achieved by creating a “bond” (part of ChemDoodle’s API) between the tail atom and the atom closest to it upon the mouse click. The newly attached carbon then moves towards the end of the chain, exponentially increasing speed until its distance from the tail atom is 50 pixels. Every frame, the program checks if any two atoms in the chain will be farther apart than 50 pixels, and prevents this by moving such atoms towards the one ahead of it in the chain.

After six carbons are linked together, the next mouse-click causes the chain to move to the center of the canvas and form a horizontal, six-carbon, zig-zag chain with 120-degree angles (Figure 2). This was achieved by releasing the chain from the random snake-movement algorithm, and instead, each atom moves to its predetermined point in 150 frames. Following the next mouse-click, the chain begins to rotate cylindrically. In order to give the illusion of the chain moving in three-dimensional space, the atoms move up and down according to a coordinated sinusoidal function. This part of the animation is meant to represent the chain structure Kekulé envisioned in his first dream. The next click of the mouse releases the chain to move around as a string again.

The vision of the carbons coming together to form a snake eating its own tail is the pinnacle of Kekule’s benzene dream, and therefore required dramatic creation. Upon the next mouse-click, the carbon chain again moves to the center of the screen, forming a hexagonal “ring” (Figure 3). The movement of the ring was achieved by moving each atom to its next predetermined point in 150 frames, similar to the movement of the chain to its fixed horizontal position (Figure 2). The next click causes the ring to expand and fade into the snake that Kekulé saw in his dream (Figure 4)². The snake is drawn over the molecule using the html5 drawImage function, which draws an image at a specified x,y coordinate. The snake image is made to fade into view by increasing the opacity (alpha value) of the picture each frame, until it is completely opaque.

When Kekulé saw this snake, he made the connection to the chemical structure of benzene. This is portrayed following the next mouse-click. As the snake begins to spin, the hexagon shrinks to fit inside the center of the snake, and one hydrogen atom is attached to each of the carbons (Figure 5). In order for the snake to rotate, the orientation of the picture is rotated by 2 degrees each frame before being drawn. When the snake begins to spin, the flashing effect observed throughout the animation ends, representing Kekule’s clarity at the end of the dream.

Altogether, this representation of Kekulé’s was achieved by approximately 550 lines of code. The residence time in each phase of the animation is determined entirely by the user.

Figures

Figure 1: A random array of fourteen carbons, represented by gray circles

Figure 2: Six carbons have linked to form a chain.

Figure 3: The chain has closed to form a hexagonal “ring.”

Figure 4: The ring is surrounded by a snake eating its own tail.

Figure 5: As the snake disappears, the carbon hexagon is surrounded by hydrogen atoms

References

1. Rothermich, M. E. Friedrich August Kekulé: A Scientist And Dreamer. Princeton, NJ: Woodrow Wilson Leadership Program in Chemistry.
2. Snake Image: http://zenav.multiply.com/journal/item/63/Ouroboros
3. iChemLabs. ChemDoodle Web Components API. Piscataway, NJ. http://web.chemdoodle.com/

Chris Swain

About

Chris Swain demonstrates how to create interactive HTML5 cheminformatics plots in this tutorial. Chris uses ChemDoodle to help generate ChemDoodle Web Components that display structures. The structures are obtained from the ChemSpider database which is accessed through ChemDoodle’s MolGrabber widget. Flot is used to create the graph and structures can be seen as pop-ups when a data point is hovered.

Website

Chris Swain’s Tutorial
Flot