Gesture recognition for Javascript and Flash

gesturerecog_20081106.jpg

The “$1 Recognizer” is a simple gesture recognition algorithm created by Andy Wilson from Microsoft Research and Jacob Wobbrock and Yang Li from the University of Washington.

By simple, I mean that it’s under 100 lines of code that you can quickly add to your application to give it gesture recognition capabilities.

To enable novice programmers to incorporate gestures into their UI prototypes, we present a “$1 recognizer” that is easy, cheap, and usable almost anywhere in about 100 lines of code. In a study comparing our $1 recognizer, Dynamic Time Warping, and the Rubine classifier on user-supplied gestures, we found that $1 obtains over 97% accuracy with only 1 loaded template and 99% accuracy with 3+ loaded templates. These results were nearly identical to DTW and superior to Rubine.

It works by using a simple 4-step process, which basically amounts to:

  1. Resampling the recorded path into a fixed number of points that are evenly spaced along the path
  2. Rotating the path so that the first point is directly to the right of the path’s center of mass
  3. Scaling the path (non-uniformly) to a fixed height and width
  4. For each reference path, calculating the average distance for the corresponding points in the input path. The path with the lowest average point distance is the match.

What’s great is that the output of steps 1-3 is a reference path that can be added to the array of known gestures. This makes it extremely easy to give your application gesture support and create your own set of custom gestures, as you see fit.

Give the demo a try. I was pretty surprised at how accurate the results were, even with single-temple custom gestures that I quickly scribbled out.

$1 Gesture Recognizer – Examples and Source (Javascript, Actionscript, and C#)

Gestures without Libraries, Toolkits or Training:
A $1 Recognizer for User Interface Prototypes (PDF)

What will the next generation of Make: look like? We’re inviting you to shape the future by investing in Make:. By becoming an investor, you help decide what’s next. The future of Make: is in your hands. Learn More.

Discuss this article with the rest of the community on our Discord server!

ADVERTISEMENT

Escape to an island of imagination + innovation as Maker Faire Bay Area returns for its 16th iteration!

Prices Increase in....

Days
Hours
Minutes
Seconds
FEEDBACK