AAPT meeting, San Diego, CA, January 2018
Creating Physics Simulations for Smartphones, Tablet Devices, and Computers in HTML5
Wolfgang Bauer, Michigan State University
This tutorial is not meant to be complete. Instead we try to introduce some useful programming concepts, which will enable you to write
your own appealing simulations in HTML5. This is not meant to be a computer science class, but a real practitioner's guide to getting
html file for each example.
- Basic HTML documents
This is a very short html document, which does nothing. But it shows the most elementary syntax that such a document
- User input via sliders and text fields
You can give sliders and text areas to your users, which allow them to control the animations. This example shows a possible
implementation of both and how to link them, if desired. Note, though, that sliders and buttons can look different on different
devices, operating systems, and browsers. This example also shows how to use event handlers ("onchange" in this case).
Exercise: replace "onchange" event handler by "oninput" in slider. What happens? [Answer]
Here is a complete example of using a slider and radio buttons to interactively display
a bar chart. It also shows how you can use the innerHTML method to dynamically rewrite parts of an html document in the browser without
reloading it from the server.
- Drawing on a Canvas
The canvas tag is really what makes HTML5 the best choice for modern animations. This part simply shows how to put a canvas on
a web page, and how to draw something very simple on the canvas. (The other graphics relevant new tag in html5, svg, is also
able to generate animations and drawings for vector graphics, but will not be covered here.)
Here is the same exercise done by using the svg graphics tag.
Exercise: Change the size of the canvas and the placement, size, and color of the rectangle. [Answer]
[New for San Diego: Drawing lines on the Canvas]
- Straight line
Drawing a straight line from point A to point B.
- Thick straight line
Drawing a straight line from point A to point B with specified line width.
- Cap the line
Drawing a straight line from point A to point B with specified line width and cap.
Drawing lines from point A to point B to point C, specifying how the corners look.
- Defining a function to draw a line
elegant function, which helps us to save many lines of code in case that we have to draw many lines.
- Combine parts 2 and 3 to make a RGB color selector
Using sliders to let you change the canvas drawing dynamically as a function of user input.
- Elementary animations
A periodic redraw of the canvas enables animations. HTML5 handles this elegantly without the need for double-buffering.
Exercise: change the parameters of the clearRect command. What happens? [Answer]
While setting a redraw interval is the quickest solution, it is not necessarily the best. If you need smoother animations and/or if
you want complete control over the animation timing, then requestAnimationFrame is a better
way to proceed.
- User-triggered animations, buttons
To be truly interesting, an animation needs the ability for the user to interact with it. This example shows how to use buttons
to accomplish this.
Exercise: click the "start" button repeatedly. What happens? How do we avoid this? [Answer] (also
possible with requestAnimationFrame)
- Working with images on the canvas
To make your animations look professional you should work with pre-made images. The HTML5 file API makes this easy. This example
shows how preload images and how to move and rotate images on the canvas. It also shows how to write on the canvas.
Exercise: use the save() and restore() methods as an alternative to translating and rotating the canvas back.
Short Break -- Andrew Duffy's interactive exercise -- Short Break
- User input on the canvas, mouse and touch event listeners
You can let the user directly interact with your canvas. This example shows how to do this with a mouse on a computer and also with
touches on iPads, iPhones, and Android devices. It also shows how to find out if all images have loaded and how to make sure that
they have loaded.
- Canvas cropping / saving / re-displaying
You can simply save some rectangular area of the canvas into a temporary storage variable and reuse that content later. This lets you
perform interesting exercises with images on your canvas.
which you can reuse for all future apps you write.
- User input on the canvas, keyboard events
This example builds on the previous one, now also allowing keyboard input.
Exercise: find out the keycode for your favorite letter (by uncommenting the console.log function in the doKeyDown function)
and then handle the key event for that letter by popping up a window (via the alert("...") command). [Answer]
- Build your own sliders and buttons
This example of an art project shows you how to create sliders and buttons right on your canvas, which look and act the same
Exercise: can you move the "clear" button from the upper left to lower right corner of the canvas? [Answer]
- A completed project: twin paradox
Here is an example of a full physics simulation of the twin paradox, where we make use of most or all of the techniques introduced
in the previous examples.
- A completed project: 3d visualization
In the future there will be a 3d context for HTML5. Until then we can use the 2d context and perform the projections explicitly.
This example shows one way how to accomplish this.
- HTML5 video, an example
There was a time when it was very hard to show video on an html page, which could be seen on all devices/browsers/operating systems.
HTML5 solves this, and this example shows how.
- Working with stacked canvases
Exercise: what happens when you change the order of stacking of the canvases? Is there a way to get the red ball to move
in front of previous trajectory marks? [Answer]
In some instances you might like to keep some information on a canvas and discard the rest. Multiple canvases stacked on top of
each other are useful for this purpose.
W3 Schools canvas reference
HTML5 Examples/Tutorial by Daniel Schroeder
(check out in particular the US power plant map)
Bauer&Westfall textbook, which contains the originals of the above HTML5 files