THE CHEMICAL STRUCTURE OF BENZENE - Kekulé’s Dream - In Kekulé first dream, he saw atoms dance around and link to one another. He awakened and immediately began to sketch what he saw in his dream. Later, he 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.

.....................................................................................................................................

The Chemical Structure Of Benzene

Kekulé’s Dream

Michael Verderese
Professor Heinz D. Roth

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.

The ChemDoodle Web Components library is very powerful, and implementing the functionality you want can take a while. We would like to help you. We can provide integration support, custom development, and custom licenses to you. Don't wait any longer. View our support options today and make your website one of the most advanced and futuristic scientific sites on the web!https://web.chemdoodle.com/kekules-dream/

https://web.chemdoodle.com/kekules-dream/

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

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

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

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

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