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
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
- 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
This example of an art project shows you how to create identical looking sliders and buttons right on your canvas. As a side benefit
- 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.
HTML5 Examples/Tutorial by Daniel Schroeder
Bauer&Westfall textbook, which contains the originals of the above HTML5 files