More HTML5 Examples

The index page for this tutorial links directly to quite a few example pages (and is itself another example) that you can study to learn HTML5/JavaScript graphics and 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 and advanced JavaScript techniques.

• Quantum Sinusoidal Wave displays some nice animated graphics using an array of colors, and has only 200 lines of code. Quantum Square Well and Quantum Harmonic 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.
• Electric 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 of code.
• Introductory physics simulations, by Nathanial Klemm, are a collection of five simulations ported from Director/Shockwave (original versions by Farhang Amiri and Brad Carroll): One-dimensional projectile motion; Two-dimensional projectile motion; Kepler’s laws; Distribution 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 12 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.
• Zeeman’s 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