While my previous code example showed how to recreate the past, this next example points out the possibilities of the future — Multitouch gesture interfaces, on the web!

The UI designer in me is chafing at the bit to start giving people web-apps with multitouch-based interfaces. The possibilities are enormous, and the advantages of multitouch UI – rich input, direct manipulation, natural mappings, fewer widgets, instant feedback, and a certain fun factor – are many.

But unfortunately, since this is still an emerging technology, it’s not exactly a standard yet. It’s not available on all hardware. On hardware where it is available, it’s not always made available through the browser. Different browsers expose multitouch events to web content in different ways, if they expose them at all. For this reason, the demo I’m about to show you won’t work on all browsers, sadly. So far, I’ve only been able to make it work using the Firefox 4 beta and only on multitouch-enabled computers running Windows 7 – which drastically limits the audience that will be able to try out this demo, I’m afraid.

So, I’m sorry to give you a demo that’s not fully cross-browser-compatible or standards-compliant. But! I think multitouch will become standardized, and soon. It won’t be too many more years before multitouch input becomes an everyday part of the Web experience on all platforms. So why not start experimenting with it now? We can start trying out new interface possibilities now, and work towards full cross-browser compatibility as the standards emerge.

And what better forum for experimenting with interface possibilities than the Game On 2010 contest?

Anyway, here’s the demo:

Multitouch Gesture Interpretation Demo

It’s a square. So what?

Well, if you have Firefox 4 on a Windows 7 computer with multitouch input, then you should be able to put two fingers on the surface and:

  • Move the square around by swiping your fingers around the surface
  • Rotate the square by rotating your hand
  • Change the size of the square by pinching your fingers closer together or further apart

The logic lives in the GestureInterpreter class, source code here. Like my last code example, I’m releasing it under a tri-license (MPL, GPL, LGPL) so that you can take the code, use it for your own purposes, and improve on it.

To use the GestureInterpreter class, you just instantiate it and pass in a set of callback functions for responding to pinch events, rotate events, and drag events. Then set up listeners for the MozTouchDown, MozTouchMove, and MozTouchUp events. The GestureInterpreter instance will do the finger-tracking and math needed to turn the individual events into piches, rotations, and drags, and call back your functions with the right numbers. See the source code of gesture-interpreter.html for an example of how to use the class.

I’m indebted to Felipe Gomes and Paul Roget for this demo. Felipe has been working on implementing the multitouch API, and Paul has been working on documenting it and making way cool demos. For further information about multitouch in Firefox 4 I recommend reading Felipe’s blog post about it as well as Paul’s article on hacks.mozilla.org.

(Parting thought: You know what would be a cool idea? A multitouch-driven fighting game. Where different finger gestures activate different secret kung-fu moves! Will somebody write that?)