Exploring the standard map in the browser

TLDR: https://efstathiou.gr/unlinked/standard-map.

In the context of an introductory lecture on Hamiltonian systems it is interesting to demonstrate several phenomena related to perturbing an integrable Hamiltonian system: Poincaré-Birkhoff chains, stability islands, the persistence and destruction of invariant tori, the consequent transition to global stochasticity, homoclinic and heteroclinic tangles and the Smale horseshoe, and many more. The standard map is a great playground for exploring these phenomena.

Nevertheless, presenting only a static sequence of phase portraits would be a great injustice to the richness of the dynamical behavior that can be exhibited by Hamiltonian dynamical systems in general, and the standard map in particular. It is much better to let people explore such systems by themselves through an interactive program.

One of the first programs I wrote when I started studying dynamical systems was a simple Qt / C++ program to compute and show the orbits of the standard map. The code for that program is now irretrievably lost. Even if it were not, updating my old program so that it can compile and link with the current version of Qt would be a waste of time. The reason is that, if I wanted to give the program to someone so they can explore the standard map themselves, I should either give them a binary for their own operating system or provide them with the source code and wish them good luck trying to compile it. So, I quickly abandoned the idea of rewriting that old program.

Compare this situation to having a program that runs in the browser: there is no need to install anything and the program can run on any computer with a browser, independently of operating system.

It turns out that until recently it would have not been possible to write a graphical program targeting the browser, unless one used plugins such as Java or Flash, and this is probably not such a good idea. But now modern browsers support the HTML5 canvas element that offers bitmap drawing. Furthermore, modern Javascript “interpreters” produce heavily optimized code that can run decently fast. So, since all the technology is there, it seemed a good idea to create a simple webpage for simulating the standard map. After a couple of hours I had a working demo that I used the next day in class. Later, I put a couple more hours to improve the original version. The end result is available at https://efstathiou.gr/unlinked/standard-map.

I tested the program on recent versions Safari, Chrome, and Firefox, but not on Internet Explorer. IE9 supports the canvas element, so there is a very good chance that the simulation also works there. It is somewhat interesting that, on the same machine, the speed of the 3 browsers I tested differs by a factor of 5: computing 107 iterations of the map takes approximately 12 seconds on Safari, 45 on Firefox, and 60 on Chrome. These numbers depend of course on many things such as the hardware, the operating system, and the browser version.

For comparison, I wrote a C program that took about 0.6 seconds for the same computation, although one should keep in mind that this program did not do any drawing. The corresponding times for the browsers, with no drawing, are 3 seconds for Safari and Firefox, and 9 seconds for Chrome. Getting 20% of the native speed in the browser is actually quite impressive.

My biggest complaint from the final program is related to an inherent weakness of running Javascript in the browser: there appears to be no way to update the canvas while the orbit is being computed. So it is not possible to see the time evolution of chaotic orbits. The latter would be quite interesting: chaotic orbits may cover large areas almost homogeneously, but they also may stay confined for a long time in a much smaller area before crossing a barrier and jump to a previously unvisited area.

I am rather satisfied by the end result of this small experiment on writing a simulation that runs in the browser. But I am also intrigued. Browsers are clearly viable development platforms for things more complicated than simple webpages. And they are a medium that I would like to explore more for creating interactive programs for my teaching.

Konstantinos Efstathiou
Konstantinos Efstathiou
Mathematics Dynamical Systems