Leap Proof of Concept Game


It’s here! I’ve finished my first proof-of-concept.

Check it Out

So, to explain…

As you may know, I recently received my Leap Motion controller – and I’m really excited. As a web developer, it’s particularly exciting to see that the Javascript API allows me to use the Leap on a web application.

The game is not much of a game, but that wasn’t its intent. In this case, I used a very simple variable coming out of the Leap. To understand this, I want to break down – just a little – how the Leap sends data.

if ((typeof(WebSocket) == 'undefined') &&
    (typeof(MozWebSocket) != 'undefined')) {
  WebSocket = MozWebSocket;

First, we need to decide who supports the web socket. Here’s a good thread on Stack about who supports the socket. Now that we have a web socket layer, we need to initialize it.

  ws = new WebSocket("ws://localhost:6437/");

This is the most important line in the script, because basically, we have to connect to the local Leap. Note here that that means your Leap is plugged in and the software is running. When you do, much like other custom IO devices, it opens up a local port at 6347 and sends out a bunch of data in a “Frame.” A frame is just a frozen moment in time during which the Leap sends out a bunch of data, or a message. The next code that’s important is the message loop:

  ws.onmessage = function(event) {
    var obj = JSON.parse(event.data);
    // obj["hands"][0]["palmPosition"][0];

In my example, I’ve taken the X coordinate of the “palmPosition” variable of hand one. Note that if you want to see a dump of the whole data set, view the str in:

  ws.onmessage = function(event) {
    var obj = JSON.parse(event.data);
    var str = JSON.stringify(obj, undefined, 2);
    // str;

This will give you a printout of all the data, though I found that putting a little stopper in there so that you could actually read the data was even more helpful.

In any case, take a look, play, and drop me any questions or comments. I’d love to hear that other Leapers have been able to reach across the web and start using this great device!

Leave a Reply