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 things done. We are not using libraries, and we are not using multiple files for javascript and css. All code is included in each individual html file for each example.

1. Basic HTML documents
   This is a very short html document, which does nothing. But it shows the most elementary syntax that such a document should follow.


2. 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.


3. 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.
   • Polygons
     Drawing lines from point A to point B to point C, specifying how the corners look.
   • Defining a function to draw a line
     In javascript you can define functions, which you can call repeatedly. For the purpose of drawing a line we can define an 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.


4. 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.


5. 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)


6. 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. [Answer]



Short Break -- Andrew Duffy's interactive exercise -- Short Break



7. 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.
   
   
   • Using external javascript files
     This example modifies the previous one and puts all of the event handling javascript into a separate file (named 'theUsual.js'), which you can reuse for all future apps you write.
   
   
8. 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]


9. Build your own sliders and buttons
   Javascript sliders and buttons can look different on different devices with different operating systems and using different browsers. This example of an art project shows you how to create sliders and buttons right on your canvas, which look and act the same in all environments. As a side benefit you can also see how javascript uses arrays.
   Exercise: can you move the "clear" button from the upper left to lower right corner of the canvas? [Answer]


10. 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.


11. 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.


12. 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.


13. Working with stacked canvases
    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.
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]

Useful Links