Doug Toppin's Blog

My thoughts on technology and other stuff

LeapMotion and Javascript Example - Swipe Gesture Detection

I’m fascinated by the opportunity for improved and innovative user interfaces presented by the LeapMotion ( The holiday weekend gave me some time to play with it a little so I did some simple Javascript in an html page to learn a little more about it. In this case all that I wanted to do was detect a swipe motion (a movement from one side to the other).  Take a look at the following gist to see what I came up with. (I used a github gist to show this because it is way easier than embedding it in the post.) This works reasonably well. Try swiping using a single finger, all of your fingers held together and then all of them but held apart from each other. It is interesting to see how the Leap is able to detect multiple fingers even when they are held together. I put the entire example into the html to make it easier (it should work right out of the box for you). The page contains some Javascript which will activate on load and, assuming that you have a LeapMotion device attached, will immediately start looking for swipe gestures (set up by the ‘controller.on(‘gesture’)… and output some counters. Note that the swipe action detection will actually detect many swipes during a single swipe phase so the api supports checking the state for the end of the event (swipe.state==’stop’). The api also contains a direction indication so that you can tell which way the swipe went. This is a rich api in terms of the data that you can get back from the device which means that all sorts of neat things can be done. The drawback of course is that it also means that developers can implement very differently from each other so you are likely to find that Leap applications will differ in how they look and how you interact with them.