Monday 18 July 2011

slinky canvas

The NAG Blog, to which I contribute from time to time, has a permanent link to Mike Croucher's blog, Walking Randomly. I happened to notice his current article on parametric plotting. The parametric plots are demonstrated with an applet providing Mathematica generated plots and slider controls. Mathematica is a nice piece of software but I couldn't help but think that a modern web browser ought to be able to do this without help from an external application.

HTML (5) provides a canvas drawing API that ought to be able to plot a curve or two, and also built in slider form controls.

I've not used canvas before, but it turns out to be pretty trivial to use, and my attempt is shown below. If you have a canvas enabled browser the plot should appear looking like the plot shown in Mike Croucher's article. Below that should appear some input forms that allow you to change the parameters. These appear as slider controls if a browser understands the HTML5 markup for this (Chrome does in its dev channel version at least). In other browsers they appear as text boxes, which allow you to change the values. (Firefox (4+) and IE (9+) work this way.) The plot should be redrawn if you move the mouse off the form controls.

Actually I prefer the text entry control to the slider, as it is easier to exactly control the value. I'd hoped that the arrow keys could be used to step the slider, but as implemented in chrome at least, that isn't the case. No doubt with a bit more scripting such keyboard shortcuts could be added, but this will do as a first attempt.

e: 0 80

f: 0 80

g: 0 80

h: 0 80

i: 0 80


David Carlisle said...

Just tried Opera 11, and it does render both the canvas and the sliders, and enables the left and right arrow keys to give more accurate stepping of the values. Nice!

David Carlisle said...

I posted a bug report on Chrome not allowing keyboard access. It turns out that it does but you can only use the keyboard and you have to use the tab key repeatedly until it focuses on each slider before you can use the arrow keys.

I think this is a bug but for now it is the expected behaviour

Mori said...

Thanks for the post! It's definitely a bug, but you can resolve the issue by using onchange attribute.