HTML5 for Scientific Computing

First, I need to thank John, one of the readers of this blog, for introducing me to HTML5. John took some of the Java examples previously posted on this site, converted them to Javascript, and integrated them with HTML5. You can see his work on the vxB integrator and the FD solver on his site. First time I visited his site, I was quite amazed. I had no idea something like this was actually even possible!

So what is HTML5? It is basically the new standard for writing webpages. It is an update to the existing HTML4 standard, which has been around since 1999. It is still in the draft stage, however most modern browsers, including Chrome, Firefox, and IE, already support many of its features. HTML5 introduces several new tags specifically designed to better capture the new online publishing environment. It also supports drag and drop and introduces support for embedding video and audio content into webpages.

But of even greater interest to the us in the scientific community is the introduction of a new <canvas> tag. This tag defines a rectangular area on the webpage into which you can draw using Javascript! You can see some examples of what is possible on the developer.mozilla.org page. Detailed description of the API is available at whatwg.org. There is also a plethora of amazing examples on hakim.se. With the canvas element, you can draw complicated shapes, stroke their outlines, and fill them with colors and gradients supporting transparency. You can even do animations. This in turn allows us to treat the Internet browser as the GUI for scientific computing codes, especially when coupled with the platform independence of the Java language. Similarly, we can use the canvas element to plot data fetched from a remote server. Often, simulation codes are executed on a remote cluster. The web-based HTML5 interface can be used to periodically download the updated results from the cluster and visualize convergence trends (or other properties of interest). This client side approach is much more dynamic and responsive than using server side technologies for plotting, since it gives the user the ability to interactively manipulate the data without having to fetch a new set of image files from the server. Finally, as John showed, HMTL5 is simply a great tool for demonstration programs.

So what can you do with HTML5? You can for instance make real-time XY plots. The plotting program shown below runs completely in your browser (if you don’t see the graph, try a more recent browser). The source is available here: canvas.html (right click and select Save As). You should see the plot redraw automatically as you select a different function or the number of control points. You can also toggle the markers on and off.

So how does this code work? Whenever any of the radio buttons or the check box is clicked, a Javascript function called recalc() is called. This function first parses the user input from the form. It then creates a list of [x,y] points. These points are sent to another function called draw, which does the actual drawing. This function is a modified version of John’s function to show the vxB integration results. The first step is to grab a pointer to the canvas, which is identified by the id tag “plot”. Canvas supports several types of context, here we grab the one for 2D plotting. The area is next cleared, and a black border is drawn to visualize the plot area.

The canvas is specified in the HTML file using the following markup:

We next draw the x and y axis. This is done using the following code. Note, the labels are plotted at the end to make them appear on top of the plotted figure. We start a new path, add the axis endpoints, and finally stroke the path using the selected style.

We next add the points. The canvas is flipped about the x axis, otherwise the plot would be upside down (by default, the y values increase from top to bottom). The origin is also shifted to correspond to the axis intersection position. We specify red color for the line and a 3px line width. We then start a new line and add the specified points. The scale variable correlates our function’s range of [-1,1],[-1,1] to the pixel span of the plot area. If the user selected to plot the markers, we loop through the points once more, this time adding a circle at each point location. The circle is filled with dark green color.

Finally, we add the axis labels.

That’s it! The rest of the code is just a basic Javascript manipulation of forms and filling of an array. Feel free to leave a comment if you have any questions. And do not hesitate to contact us if you are interested in our consulting services.

Read more

You may also be interested in the article on Bezier spline interpolation. That article showcases how to use an alternative technique, Scalable Vector Graphics (SVG) to make an interactive webpage. And you will find another HTML5 interactive demo in the article on the Direct Simulation Monte Carlo Method.