Inventory of Physics Simulations in HTML5/JavaScript

When I discovered last winter how useful JavaScript and the HTML5 canvas element can be for physics simulations, I was astonished that there seemed to be so few examples of such simulations out there. That situation is rapidly changing. Here’s an inventory of the examples I’m aware of at this time.

My own portfolio of three simulations is unchanged, except for a few bells and whistles added to each of them:

• Ising model
• Molecular dynamics
• Fluid dynamics

Over the summer, with support from the Weber State University Beishline Fellowship, our student Nathaniel Klemm ported five of the simulations that my colleague Farhang Amiri uses in his general education physics course:

• One-dimensional projectile motion
• Two-dimensional projectile motion
• Kepler’s laws
• Distribution of speeds in a gas
• Ohm’s law

(The original versions of these simulations were written by Farhang Amiri and Brad Carroll in Adobe Director, and runnable through the Shockwave browser plugin. These were part of a much larger collection of simulations that they developed in the 1990s. Unfortunately, support for the Shockwave plugin is becoming problematic.)

Andrew Duffy of Boston University has created some simple mechanics simulations:

• Duffy HTML5 directory

These would be good examples for a beginning HTML5 developer to learn from, since their code is short and straightforward. (Andrew and I will be giving a workshop on beginning HTML5 simulation development at the 2014 AAPT summer meeting next July.)

Dan Cross of Haverford College has created two extremely elegant simulations that I especially recommend:

• Zeeman’s catastrophe machine
• Normal mode decomposition

John Denker has a simulation that draws hydrogen wavefunction scatter plots:

• Scatter plot of electron probability

Dan Styer and Noah Morris of Oberlin College have created a nice demonstration of two-slit interference:

• Interference simulator

This simulation uses the jQuery UI library for its slider controls, which unfortunately makes them unusable on devices that rely on touch events.

GlowScript is a 3D graphics library built on WebGL, created by David Scherer and Bruce Sherwood who modeled it on their earlier VPython system. GlowScript is accompanied by a web-based development environment that eliminates the need to write HTML, although it can also be used as an ordinary JavaScript library. Some collections of GlowScript examples are posted here:

• GlowScript examples
• Bruce Sherwood’s GlowScript examples

Unfortunately, the use of WebGL makes GlowScript simulations runnable only under certain browsers. As of this writing they will not run on most mobile devices, although some mobile devices offer partial support.

Francisco Esqembre of the University of Murcia has created a high-end development environment for quickly creating physics simulations, called Easy Java Simulations. Although EJS is a Java program, the new version 5 beta release can output stand-alone HTML5/JavaScript code. More than a dozen examples are now posted here:

• OSP EJSS page at comPADRE

The PhET group at Colorado has recently gone public with its first six HTML5 simulations for introductory physics and chemistry:

• PhET HTML5 simulations

As you would expect from PhET, these simulations are extremely professional and hence the code, which relies on a vast collection of libraries, is unreadable by mortals.

All of the simulations listed above were created by (or under the supervision of) academic physicists, primarily for the purpose of physics education. But of course the vast majority of graphics-intensive HTML5 development is being done by game developers. Here are a couple of these efforts that contain good physics and are fun to play with:

• xkcd Time Catapult by Manfred Hantschel
• Oliver Hunt’s simple fluid dynamics simulator

And that’s my list for now. If any readers out there would like to add to this list, feel free to leave links (noncommercial, please) in the comments.