W35 - AAPT meeting, San Diego, CA, Jan 4, 2015

Creating Physics Simulations for Smartphones, Tablet Devices, and Computers in HTML5
Gerd Kortemeyer, Wolfgang Bauer

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.

• Part 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.
• Part 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.
  Exercise: replace "onchange" event handler by "oninput" in slider. What happens?
• Part 3: The canvas tag
  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.
• Part 4: Elementary animations
  A periodic redraw of the canvas enables animations. HTML5 handles this extremely elegantly without the need for double-buffering.
• Part 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.
• Part 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, how to find out when all images have loaded, and how to move and rotate images on the canvas.
• Part 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.
• Part 8: User input on the canvas, keyboard events
  This example builds on the previous one, now also allowing keyboard input.
• Part 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 identical looking sliders and buttons right on your canvas. As a side benefit you can also see how javascript uses arrays.
• Part 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.
• Part 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.
• Part 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.

Useful Links