A $1 Gesture Recognizer in JavaScript This page has been verified
for Internet Explorer only.
Jacob O. Wobbrock,¹ Andrew D. Wilson,² and Yang Li^1
1University of Washington and  ²Microsoft Research

This page implements a "$1 Gesture Recognizer" that is easy, cheap, and usable almost anywhere. It requires under 100 lines of easy code and achieves 97% recognition rates with only one template defined for each gesture below. With 3+ templates defined, accuracy exceeds 99%. Upon loading this page, only one template is defined for each gesture below, but you can add more with the "Add" buttons beneath the canvas. Gestures should be regarded as fully rotation, scale, and position invariant. For in-depth results, see our UIST 2007 paper (PDF).

Make gestures in this empty <DIV> section. Drawing happens when you finish. Drawing will be offset if you've scrolled the window down. Add last stroke as example of existing type: triangle x rectangle circle check caret question arrow left square bracket right square bracket v delete left curly brace right curly brace star pigtail Add last stroke as example of custom type: Delete all user-defined examples:

Links and Downloads

• Our UIST 2007 paper (PDF).
• A YouTube video of $1 (not by us!).
• The JavaScript drawing library used on this page.
• The $1 Recognizer used on this page (JavaScript).
• The $1 Recognizer (C#).
• Dynamic Time Warping Recognizer (C#).
• Rubine Classifier (C#).
• XML gesture logs with (x, y, t) data.