ThermoBounce: Visualizing Chemical Kinetics via a Gravitational Potential Analogy

Abstract

ThermoBounce is an interactive online visualization designed to help students understand how enthalpy, entropy, and temperature contribute to the reaction rate and equilibrium of a unimolecular chemical change between reactant and product states, for example, molecular isomerizations or phase transitions. At the start of the animation, reactant molecules are represented by spheres bouncing around in a reactant room, with an average kinetic energy proportional to the temperature. This room is connected to an adjacent product room by a window. When the user triggers the animation, spheres may convert to the product state by passing through the window into the product room, changing color as they do so. The difference between the floor heights of the reactant and product rooms represents the enthalpy change of the reaction, and the floor areas of the two rooms represent the entropies of the reactant and product states. The height of the bottom of the window above the floor of the reactant room represents the enthalpy of activation, and the width of the window represents the entropy of activation. Users can change the geometry of the rooms and window to adjust all these quantities and can modify the temperature before or during the reaction. They can then observe the resulting changes in the reaction rate and in the accumulation of product molecules, as shown on a reaction progress graph. The visualization and instructions for interacting with it are freely available on the Internet.

1. Introduction

Some students may struggle to understand the effects of enthalpy, entropy, and temperature on chemical reaction rates and equilibria. To provide a heuristic model of these concepts, this paper presents ThermoBounce: a visualization of the chemical kinetics of a unimolecular isomerization reaction or phase transition (e.g., freezing–melting or evaporation–condensation). ThermoBounce represents reactant molecules as freely moving spheres that can pass through a window from a reactant room at the left to an adjacent product room at the right and become product molecules, changing color from brown to green as they do so (see Figure 1). The visualization uses an analogy between enthalpy and the gravitational potential energy of the spheres. The spheres move on parabolic paths under the influence of gravity and undergo elastic “hard sphere” collisions so that their velocities equilibrate to the Maxwell–Boltzmann distribution, as proved by Maxwell in [1]. This velocity equilibrium is shown at the right of Figure 1, where the blue bars show a histogram of current sphere velocities and the pink curve is the Maxwell–Boltzmann distribution at the corresponding temperature. The black vertical line is the velocity threshold for reactant spheres bouncing on the floor to reach the height of the bottom of the window and potentially cross through it; spheres with velocities in the tail of the pink velocity distribution to the right of this black line have enough energy to do so. As described in Section 3 below, users can adjust the temperature as well as the dimensions of the rooms and the window, which affect both enthalpies and entropies, and then observe the effect on the rate of the reaction and the final fraction of molecules that become products, as shown on the reaction progress graph in the lower half of Figure 1. In this graph, the horizontal axis represents time and the vertical axis represents the product fraction at that time, so the derivative (i.e., the slope) of the curve represents the reaction rate.

This visualization was conceived by one of us (E.M.) in an attempt to understand a college statistical mechanics class, and it originally involved a mechanical construction with beads bouncing on vibrating platforms. Later, an independent conception was described in Ellis and Ellis [2]. It had two rooms with floors vibrated by an electric drill and a window between them whose height could be adjusted. ThermoBounce provides a computer simulation with similar educational features but the advantage that no mechanical construction is required, and multiple students can individually and simultaneously examine how varying conditions affect the reaction rates and final equilibria using a freely available online virtual experience. There is no need to count or weigh the beads in each room as in [2] since the computer keeps track of them and displays a reaction progress graph showing the fraction of spheres that are in the product room as a function of time. In addition, unlike in [2], the width of the window is also adjustable, allowing the user to visualize the effect of the entropy of activation on the reaction rate, and the areas of the rooms are adjustable, allowing the user to understand the effect of entropy change on the equilibrium.

There are many chemical kinetics simulations and animations freely available on the Internet. For example, [3] has a 2D animation showing how temperature affects the rate of a bimolecular reaction, and Molecular Workbench [4] also has several 2D bouncing-sphere simulations of chemical reactions with graphs of species fractions as a function of time. The PhET simulation [5] and the Wikipedia page [6] (which inspired us to include the Maxwell–Boltzmann distribution graph) both show hard sphere gas simulations and their associated Maxwell–Boltzmann distribution graphs and/or histograms, but neither employ the gravitational analogy discussed here and in [2].

Section 2 below gives some relevant theory on unimolecular reaction rates and equilibria. Section 3 describes the ThermoBounce user interface. Section 4 gives some results from ThermoBounce, and Section 5 discusses its uses and limitations.

2. Theoretical Background

In the unimolecular reaction context, the rate of the forward reaction is $v_f=k_f$[R], where [R] is the concentration of the reactant molecules and $k_f$ is the forward reaction rate constant. By the Eyring–Polanyi equation (see [7]), we have:

$$k_f=\frac{\kappa k_{B}T}{h}{e}^{-\frac{\mathsf{\Delta }{G}_f}{RT}}$$

(1)

where κ is a transmission coefficient between 0 and 1, assumed here to be the same for the forward and backward reactions, $k_B$ is the Boltzmann constant, h is the Planck constant, R is the universal gas constant, T is the temperature, and $\mathsf{\Delta }{G}_f$ is the Gibbs free energy of activation, given by

$$\mathsf{\Delta }{G}_f=\mathsf{\Delta }{H}_f–T\mathsf{\Delta }{S}_f$$

(2)

where $\mathsf{\Delta }{H}_f=H_t–H_r$ is the enthalpy of activation, $H_t$ is the enthalpy of the transition state, and $H_r$ is the enthalpy of the reactants. Similarly $\mathsf{\Delta }{S}_f=S_t–S_r$ is the entropy of activation, $S_t$ is the entropy of the transition state, and $S_r$ is the entropy of the reactants. In the same way, the rate of the backward reaction is $v_b=k_b$[P], where [P] is the concentration of the product molecules and $k_b$ is the backward rate constant:

$$k_b=\frac{\kappa k_{B}T}{h}{e}^{-\frac{\mathsf{\Delta }{G}_b}{RT}}$$

(3)

where

$$\mathsf{\Delta }{G}_b=\mathsf{\Delta }{H}_b–T\mathsf{\Delta }{S}_b$$

(4)

with $\mathsf{\Delta }{H}_b=H_t–H_p$ where $H_p$ is the enthalpy of the products. Similarly $\mathsf{\Delta }{S}_b=S_t–S_p$, where $S_p$ is the entropy of the products.

In the gravitational analogy, the enthalpy is represented by gravitational potential energy. Therefore, the enthalpies of the reactant and product molecules are represented, respectively, by the heights of the reactant and product room floors. Thus, the enthalpy change of the reaction (endothermic or exothermic) is represented by the difference between these two floor heights. The enthalpy of the reaction’s transition state is represented by the height of the bottom of the window. The enthalpy of activation for the forward reaction is thus represented by the difference between this window’s bottom height and the floor height of the reactant room. Similarly, the enthalpy of activation for the backward reaction is represented by the difference between the window height and the floor height of the product room.

The entropy of the reactants is represented by the natural logarithm of the area of the floor of the reactant room (or of its volume, if there is an optionally set finite-height ceiling); it is similar for the products. The entropy of activation is represented by the natural logarithm of the width of the window between the two rooms. This analogy is imperfect, but it still gives a qualitative understanding that enlarging the “space” of the transition states will increase the reaction rate, as shown by the slope of the reaction progress graph.

This simulation is without physical units for time, length, mass, or temperature and therefore does not consider numerical values for the Planck, Boltzmann, or universal gas constants and instead assumes that they are 1. Thus, it is only a qualitative analogy.

The concentrations [R] and [P] represent the fractions of the spheres that are in the reaction and product rooms, respectively. At equilibrium, the backward and forward reaction rates are equal, so $k_b$[P] = $k_f$[R], and

$$\begin{array}{cc}\hfill \left[P\right]/\left[R\right]& =k_f/k_b\hfill \\ & =e^{-\frac{\mathsf{\Delta }{G}_f-\mathsf{\Delta }{G}_b}{RT}}\\ & =e^{-\frac{H_p-H_r}{RT}}{e}^{\frac{S_p-S_r}{R}}\end{array}$$

(5)

The horizontal black tick on the right edge of the reaction progress graph is the equilibrium product fraction at the infinite temperature limit. In this limit the first exponential factor on the last line of Equation (5) approaches 1, so only entropies are involved, not enthalpies, and the products to reactants ratio is the ratio of the area of the product room floor to the area of the reactant room floor. This ratio may make more sense to students when using the optional finite ceiling in both rooms so that it is a ratio of volumes instead of areas. Then, at equilibrium, the density (the number of spheres per unit volume) is the same in both rooms, as would be true for a gas able to pass freely through the window.

Before starting each simulation “experiment”, the user can alter the enthalpy and entropy changes of the reaction by manipulating the floor and window heights and areas and can then observe the effects of these changes on the chemical equilibrium by observing changes in the final product fraction, shown at the right-hand end of the reaction progress graph in Figure 1, and in the bottom row of the parameter table below it. The bottom edge of the box around that graph indicates [P] = 0, the initial state with only reactant molecules, and the top edge indicates [P] = 1, with only product molecules. The user can also vary the width of the window to vary the entropy of activation and thereby the speed of the reaction.

3. Materials and Methods

3.1. Controlling the Simulation

The user interface is designed to make it easy for a user conduct experiments to see how changing the temperature or room dimensions changes the reaction product fraction as a function of time. For each “experimental run”, the program records the temperature, the entropy and enthalpy variables derived from the room and window geometry, and the current reaction product fraction, which eventually becomes the final one; all of these values are printed in a table below the graph, as shown in Figure 1. By altering the starting variables and examining the resulting changes in the conversion from reactant to product, the user can achieve a qualitative understanding of the effects of each change in the variables. Instructions for the user are provided in separate online documents [8,9].

The visualization involves three “states” identified by the color of the square “state button” next to lower-right corner of the reaction progress graph. The first two states allow the user to choose several parameter values, and the third state (identified by the green state button in Figure 1) shows the resulting animation.

Figure 2 shows the initial state. The small squares with black outlines and pink interiors are “handles” which can be clicked and dragged to adjust the room and window geometry, the sphere radius, and the height of the semi-transparent white “lid” representing the top of the height range of the spheres at the start of the reaction. The labels on the handles in Figure 2 identify which simulation parameters they affect, and the ThermoBounce user document [8] provides a detailed description of how to use them.

The red state button on the lower right can be clicked to turn it yellow to select an intermediate state, shown in Figure 3, in which the particles are displayed at their random initial positions and their number can be revised by raising or lowering a handle at the top of a vertical stack of spheres, each representing 20 spheres in the simulation.

Then the yellow state button can be clicked to turn it green and begin the simulation. The desired temperature can be changed at any time using the handle at the top of the red bar on the thermometer. The green bar on the thermometer represents the actual current temperature, which may take a while to equilibrate to the desired temperature since the spheres only gain or lose energy when they bounce on the walls or floors of the rooms, as would a gas equilibrating to the temperature of a container.

The current simulation can be stopped at any time by clicking the green state button, turning it red to set up the next simulation run, which draws a reaction progress graph curve of a different color. The six most recent graphs are displayed in six different colors, as shown in Figure 1.

In each run, if the reaction ends before it has reached equilibrium, users can extend the simulation time two-fold by clicking on the handle on the left-pointing arrow just above the upper right of the reaction progress graph. This click compresses the existing graph into half its original width, allowing space for a longer simulation time, as indicated by the larger number of ticks on the bottom edge of the graph in Figure 4. This handle can be clicked a total of three times so that the simulation time can be expanded by a factor of up to eight. After the simulation time has been doubled at least once, a handle appears on the right-pointing arrow above the reaction product graph, as in Figure 4, which can be clicked to expand the graph again.

Sometimes the graph becomes cluttered with too many overlapping curves, as in Figure 1 and Figure 4. The column of colored buttons to the left of the reaction progress graph shows which curves are present. Clicking these buttons toggles the corresponding colored curve and its column of numbers in the table of parameters on and off. Turning off other columns in the table makes it easier to compare two columns of interest. The column whose data are currently being edited or run is indicated by a wider colored bar above the table column, as shown in Figure 4, where the green simulation has just been run.

In planning a new “experimental run” it is useful to copy the all parameters from a selected past simulation to the current one and then change only one parameter to investigate its effect. You can copy a set of parameters by clicking on the appropriate colored button in the button column at the left of the progress graph while holding down the control key on the keyboard. Then hold down the control key and click the white button above the button column to show all the curves again and change one or more of the copied parameters.

The temperature can be changed during the simulation, and this change is indicated by the black arrows corresponding to the black curve in Figure 5, where the vertical temperature coordinate has been scaled to fit the allowable temperature range exactly into the vertical range of the graph box.

3.2. Keyboard Interface

You can make several adjustments with the keyboard. If you type the character “t”, you can toggle back and forth between the normal side view, with the walls closest to the viewer made transparent, and a top view of the rooms with their ceilings made transparent.

Alternatively, you can type the letter “e” to toggle the visibility of the eye icons, which are shown in Figure 5, and then click the handle on one of them to select the top or front view and you can also drag that handle to change the distance of the viewpoint to the rooms, indicated by the small tan rectangle that the eyes are looking at.

You can type “i” to toggle the ceiling height between finite and infinite. When the ceiling height is finite, the entropy of a room is represented by its volume rather than its floor area.

You can type “s” to suppress sphere-to-sphere collisions to save computation time if the number of spheres is large, since after a sphere’s trajectory changes in a collision, the program must check its possible collisions with all the other spheres to see which one would happen first. The spheres are drawn in back-to-front order so that motion-blur-caused transparency effects are possible. When collisions are suppressed and spheres can pass through each other, the drawing order may suddenly change, causing one sphere to pop in front of another.

You can type “o” to toggle back and forth between an orthogonal view and a perspective view.

If you type “b” the current simulation will go back to the state in which the state button is red, which is useful when the state button is yellow and you want to change the room and window geometry by moving handles.

You can type “j” to change the display of the colored temperature jump arrows. In the initial setting, they are not displayed, but if you type “j” once, the arrows for the current experiment will be shown, as in Figure 5. If you type “j” again, they will be shown for all the curves with temperature jumps, but this setting may produce visual clutter. If you type “j” a third time, no arrows will be drawn. Further such typing of “j” will cycle through these three settings. When you copy the parameters from a previous experiment, any temperature jumps are also copied. To prevent copying temperature jumps and only copy the other parameters, type “d” before holding control and clicking. To turn it back on, type “d” again.

These and other keyboard letter commands are listed in tabular form in [9]. Some of them are also listed in the right-hand “Keyboard interaction” column in the tables at the bottom if Figure 1 and Figure 5, followed by the current states of the settings they change.

3.3. Simulation Algorithm

The spheres are initially placed with random positions and random velocities within the reactant room between the floor and the lid. When the simulation is triggered by clicking the yellow state button, the program determines the predicted first collision for each sphere. It computes the time to collision, if any, with each room wall and floor and with every other sphere, using those spheres’ initial velocities and accounting for the acceleration of gravity; it saves the earliest collision. The list of these collisions is sorted in time so that they can be processed in the correct order. Every time a sphere bounces in a collision so that its trajectory changes, its predicted next collision is recomputed as above and inserted in the correct place in the sorted list. For each animation frame, the program moves the spheres according to their velocities, the acceleration of gravity, and their predicted collisions and draws them in back-to-front order as semi-transparent motion-blurred streaks. Details about efficient motion-blur rendering using texture mapping are given in [10], which also has more details about collision determination, sorting, and processing.

4. Results

We (N.M.) wrote this interactive virtual demonstration in JavaScript ES6 and WebGL 1.0 so that it can be automatically run on any modern computer just by opening the website [11] while consulting the user documents in [8,9]. Any user can change the parameters and evaluate their own results. Figure 4 shows the results of one set of experiments. The handle on the left-pointing arrow was clicked after the experiment for the purple curve, so the blue, black, orange, and purple curves on the reaction progress graph have been compressed to half the time scale, and the red and green curves show a doubled simulation time. There are now three intermediate ticks on the time scale at the bottom of the of the reaction progress graph instead of one to indicate this scale compression, and the right-pointing arrow above the center of the graph now has a handle that can be clicked to expand the time scale again. The colored bars to the left of the thermometer show the initial temperature settings for the six most recent simulations and can be clicked to copy the temperature to a new experiment.

Figure 5 shows a sequence of experiments in which the temperature was changed twice during the final black experiment in an attempt to increase the reaction product at the end of the limited experiment time. The colored temperature bars attached to the left side of the thermometer show the initial temperature settings for the respectively colored experiments, as does the starting temperature row at in the table at the bottom. The current temperature row gives their final temperature settings once all experiments have run out of time and shows a changed temperature for the black one. The red curve is at the default initial starting temperature, 1.0, and the green curve has the maximum allowed temperature. The green curve ends near the high-temperature-limit product fraction indicated by the black tick mark at the right edge of the graph, near the thermometer bulb. With a higher temperature, the green curve’s reaction rate is higher, so it is initially above the red one but ends up lower and closer to the black tick mark.

The blue curve used a much lower temperature, so its reaction rate, the slope of its curve, is much lower. But it continues to rise, and with more time, it would eventually reach a product fraction above the black tick for the high temperature limit because the enthalpy difference in the first exponential factor on the last line of Equation (5) is negative (the reaction is exothermic), so this factor is greater than 1.0. The black curve is an attempt to start with the rapid rise of the green curve, using its high initial temperature, and after it grows closer to the high temperature equilibrium value, lower its temperature to follow a slow but steady approach to the higher equilibrium value expected from the fact that the reaction is exothermic. The colored graphs and the product fraction in the last row of the table below it show that the black experiment did obtain more product than the others, but only slightly more than the red one. The black temperature jump arrows on the graph indicate when the temperature was lowered.

The view can be changed using the two optional eye icons shown near the upper right in Figure 5, Figure 6 and Figure 7. The eye looking horizontally from the side at the small rectangular box representing the rooms is opened in Figure 5 and Figure 6, and in Figure 6, it has been moved farther to the left of that box by clicking and dragging its pink handle so that the field of view of the rooms includes more of their infinite vertical extent. This view reveals the approximately exponential decrease in sphere density with an increased height above the floor. The eye icon for the top view is closed. But if its handle clicked (it can also be moved up or down), the view changes to the top view shown in Figure 7. The infinitely high walls are made transparent above a finite height in this view to avoid covering up the graphs. Since the nearby spheres were not made transparent they appear to be outside the walls, and their motion blur rendering is evident. This blur makes the animation more realistic since a sequence of sharp images at different positions would give a “strobing” appearance.

5. Discussion

5.1. Uses

This interactive virtual demonstration can be used in an introductory chemistry course in high school or college to demonstrate how reaction rates and chemical equilibrium states are affected by enthalpy and temperature. It can also be used in a more advanced college course on physical chemistry, statistical mechanics, or chemical kinetics to show the effects of entropy. The room-geometry-related enthalpies and entropies appear in the Eyring equation for the reaction rate constant, and in the equation for the equilibrium constant in terms of the change in Gibbs free energy, as explained in Section 2 above. Ellis and Ellis [2] have provided examples of multiple chemical concepts that can be visualized by such a real or simulated model of bouncing spheres. The Tutorial Appendix section in [8] also gives such examples.

ThermoBounce has been demonstrated in a physical chemistry lecture by Whitney Duim, an Assistant Professor of Teaching Chemistry at the University of California, Davis, and its website [11] was recommended for further student investigation at home. The classroom demonstration elicited two questions about the entropy of activation, which allowed Dr. Duim to explain this concept in more detail.

5.2. Limitations and Future Work

In rare cases at very low temperatures, the simulation freezes in an infinite loop of collisions and times out with an “Alert” box saying so. When the user clicks “OK” in this box, the simulation restarts with the current graph color and parameters but with different random initial positions and velocities so that is likely to proceed without freezing.

Screens with only a moderate vertical resolution may be unable to show the full vertical extent of the display plus the printed information at the bottom of Figure 1, so the user may need to scroll down vertically in order to view the printed information. To adjust the geometry using the handles in Figure 2, the user must scroll all the way back up.

Assuming a GPU is available to create the animation on the screen, the CPU spends most of its time in predicting future collisions after a sphere bounces since that sphere must be tested for collisions with every other sphere. If there are many spheres of a large radius, there may be many collisions processed per frame, slowing down the animation. Predicting collisions between spheres can be suppressed by typing “s”, and they will then bounce only on the walls and floor of the room. However, suppressing collisions will prevent the sphere velocities from approaching the Maxwell–Boltzmann distribution. Future work could create a spatial data structure like a 3D grid, with each grid cell containing a list of spheres whose centers pass through it in their current trajectory. This grid could be used to limit the number of spheres that need to be tested for a collision with a given sphere. But it would need to be revised every time a sphere undergoes a collision and changes its trajectory.

With 400 bouncing spheres, the simulation runs at 60 frames per second using the Chrome web browser on Linux on a dual-boot 1.70 GHz Dell Precision 3550 laptop with Intel^® Core™ i5-10310U CPU and Mesa Intel^® UHD Graphics (CML GT2). It runs at the same speed on an Apple iMac using either Chrome or Safari. But for reasons that we still need to investigate, it only runs at approximately 14 frames per second on the Windows partition of the same Dell laptop, using either the Chrome or Edge browsers.

ThermoBounce has been used informally in only one chemistry class so far, and it requires future work to formally test its effectiveness in helping students learn the concepts that it can visualize. As a result of such testing, ThermoBounce may be revised, so readers should consider references [8,9] as its definitive description rather than this paper.

6. Conclusions

ThermoBounce is a visualization of chemical kinetics using gravitational potential as an analog of enthalpy, with spheres bouncing within two rooms and with the transition state represented by a window connecting them, as in the mechanical visualization in [2]. The novel utility of ThermoBounce is that it is an entirely virtual version (no construction required) that can be used by many students simultaneously, with every student performing their own “experimental runs” to test the effects of varying thermodynamic parameters in various combinations. This approach could promote the “active learning” that is thought to enhance STEM education [12].