More HTML5 Examples
The index page for this tutorial links directly to quite a few
simulation techniques. Those examples are fairly simple, each with less than 200 lines of code.
Here is a list of further examples, some of my own creation and some from elsewhere
around the web. Most of these were not created mainly to teach web programming techniques, so
they tend to be longer, they may not do things the most elementary way, and their source code may not
be as easy to read. Still, I’ve selected examples that you should be able to mostly figure out
by studying their source code; I’ve avoided examples that rely on extensive libraries
- Quantum Sinusoidal Wave
displays some nice animated graphics using an array of colors, and has only 200 lines of code.
Quantum Square Well and
Oscillator use similar graphics while adding some mouse/touch interaction, each in about
400 lines of code. Quantum Barrier Scattering
uses similar graphics but is slightly longer and more intricate, animating the solution to
a partial differential equation.
- Ising Model is a Monte Carlo
simulation of the two-dimensional Ising model of a ferromagnet, on a square lattice. This very short
version contains only about 100 lines of code.
This more sophisticated
version lets the user change the lattice resolution and uses direct pixel manipulation for
improved graphics performance.
- Interactive Molecular Dynamics
simulates up to 2500 interacting particles in two dimensions. It has nearly 2000 lines of code,
with an elaborate user interface
that includes saved configurations and data acquisition.
- Fluid Dynamics simulates
a two-dimensional fluid, flowing around barriers of arbitrary shape,
using a lattice-Boltzmann algorithm. This computationally intensive
simulation uses manual indexing into 2D arrays and direct-pixel graphics. It has about
1000 lines of code.
Potentials and Fields, by Nathaniel Klemm, solves Laplace’s equation in two
dimensions using the relaxation algorithm. It has an elaborate user interface and about 1800 lines
- Introductory physics simulations, by Nathanial Klemm, are a collection of five
simulations ported from Director/Shockwave (original versions by Farhang Amiri and Brad Carroll):
projectile motion; Two-dimensional
projectile motion; Kepler’s laws;
of speeds in a gas; Ohm’s law.
- Andrew Duffy’s Physics Simulations site has a large
collection of HTML5 simulations for introductory mechanics and waves.
- Wolfgang Bauer has posted a series of
marvelous example pages from an AAPT workshop given in January 2015. These pages include simple
yet highly useful illustrations of image scaling and rotation, handling mouse/touch events, building your
own buttons and sliders, and 3D visualization. See also the three finished sample apps on the page
advertising the University Physics ebook by
Bauer and Westfall.
Catastrophe Machine, by Dan Cross, is
an elegant simulation of an interesting mechanical device. The simulation includes mouse interaction
and a potential energy plot.
- Normal Mode Decomposition,
by Dan Cross, is an animated plot of the motion of a pair of coupled harmonic oscillators.
- Interference Simulator,
by Dan Styer and Noah Morris, plots two-slit interference patterns under a wide range of user-adjustable
conditions. It uses the jQuery and jQuery UI libaries.
Back to index