Internet Explorer and the built-in Android browser are known not to work. On both operating systems, Firefox 6 is available and does work.

The feature we need is called “server sent events”, an HTML 5 extension that makes “comet” style web applications work without a whole tool shed of browser-specific kludges. So, if you are curious about another browser, see if it implements server-sent events. Or just try it.

Edit: As of Sunday, you can now do “simulations” as well. The URL for simulations is http://dac4.designacourse.com:8000/sim. These are a little more involved. You need to define three symbols sharing a common data type of your choosing:

initial :: StdGen -> a

step :: ViewPort -> Float -> a -> a

draw :: a -> Picture

Here, initial returns the starting value of your chosen data type. (Its parameter is a pseudo-random number generator, in case you want random numbers.) The step function is responsible for “advancing” the simulation by some amount of time. Finally, the draw function is reponsible for converting the current simulation to a picture to draw on the screen. The difference between simulations and animations is that animations calculate the picture from scratch each time: you give it a time since the start, and get back a picture. Simulations, on the other hand, play out incrementally: each new state depends only on the most recent state and the amount of time that’s passed since then. You can always turn an animation into a simulation by defining initial = 0 and step = const (+) where the type “a” is Float. But not all simulations can be efficiently written as animations.

Under the Hood

The previous version of the application (which still works just fine) displayed only static pictures, and did so by loading some JSON directly into the document and then having JavaScript draw it on a canvas. This new animation mode is a little different. The steps are:

You submit your function.

The server compiles your code (using SafeHaskell, of course), and stores your function along with the start time in a lookup table.

The animation page loads, and has a key to that lookup table.

The animation page connects back to the server using the JavaScript EventSource object (that’s the server-sent events feature).

The server then streams newly updated pictures as JSON along that connection.

Incidentally, if you’re thinking of implementing a “comet”-style web application with Snap, you might be interested in the code at https://github.com/cdsmith/gloss-web/blob/master/src/EventStream.hs which implements the server side of the event stream format. It’s a generic module that you can transplant into your own code. In the future, I’ll look at the best way to get it packaged either as part of a snap package or as a stand-alone library. As short as it is, though, I hope to avoid adding that dependency weight.

Anyway, that’s animations for you. Have fun!

Examples

The following program draws the solar system, representing the distances of all the planets from the sun, their orbital periods, their relative sizes. The one thing that’s not accurate is the relationship between the sizes of the planets and their distance from the sun… something had to give, since a completely to-scale representation of the solar system would just look empty! Also, I didn’t bother representing the eccentricities of orbits.