Friday, February 28, 2014

Welcome to the Future of Interactive Websites: Leap Motion

I stared excitedly as the lid of the suave, white box glided gently open to reveal a sleek, black device; a minuscule piece of hardware that made the bold promise of changing the way we interact with computers.


That little device was a Leap Motion, which arrived at my house unexpectedly in July, 2013. I had pre-ordered it in Nov 2012 and by the time July rolled around, had long forgotten that I’d done so, making it a pleasant surprise.

I plugged it in and started playing with it right away. The creators of the Leap did a fantastic job designing an Apple-esque end-to-end experience. The packaging felt great, the device itself had visual and aesthetic appeal, setup was simple, the APIs were well thought-out and documented, and the app store had some cool initial apps to play around with. Unfortunately, the apps were trivial or offered disappointing experiences, leading many friends to dial up eBay to unload unwanted devices. I have to admit that I was underwhelmed too, after having had my expectations set by the revolutionary vision promoted in videos released during the pre-order campaign.


But I’m a sucker for hardware, so I kept my Leap. After a few weeks, I found some free time and wanted to see what it would take to build an app. To my delight, I quickly discovered that they had cleverly architected the system such that it’s fairly easy to use with almost any programming language, and their APIs reflected this. I held my breath, hoping I’d find a JavaScript API and sure enough, there it was. “Wow!”, I thought. Suddenly I had the ability to take advantage of the most powerful software distribution channel in the world along with the ability to hack (via Chrome extensions) a unique interactive experience into the virtually unlimited software that was already available on the Web.

I began experimenting and found working with the Leap and its JavaScript APIs surprisingly easy and fast. One of the first things I built was a Chrome extension that allows me to control Reveal.js presentations with my hands. I then started playing around with WebGL. In no time, I was touting how much fun the Leap is to all my developer friends, which quickly led to a conversation with Will Little, co-founder and CEO of CodeFellows (an awesome program, if you haven’t already checked it out), and we started planning a workshop for the local community to learn how to program the Leap for the Web.

On February 20th, about 40 developers of all skill ranges shuffled into the basement of 511 Boren Ave North in Seattle, a venue otherwise lovingly known as “The Easy”. Leap Motion had generously sent us about 20 loaner devices in advance of the event, so as everyone settled in they went through the same magical experience I did when I first opened the box and lit up the device.


We went through a few basic examples, with participants making simple modifications to the sample code along the way (workshop presentation here). Then they were off to the races as we kicked off a brainstorming-and-open-project session. They came up with some cool ideas like a Theremin, an interface for exploring gene sequences, and a bunch of other ideas I don’t remember. While none of the more ambitious projects made sense for the short time we had, people built some fun stuff. The project I was most impressed with, which happened to be built by a pair of CodeFellows students, was a rock, paper, scissors app that accurately detected the count and final hand shape using the leap.


In summary, the Leap is a very cool tool that creates opportunities for unique interactive experiences on the web. People jumped way too quickly to concluding that it under-delivers on its promise. It’s easy to develop for and everyone who came to the CodeFellows workshop had a blast, regardless of skill level. I can’t wait to see more creative uses of this technology.