How to move a DIV with your fingers… and the Leap Motion

For those who don’t know Leap Motion is a 3D gesture controller that captures your hands and fingers movements.

Leap Motion

playing Jenga with the Leap Motion

One cool thing the Leap Motion guys did was to create a JavaScript Client Library which allows us to capture the device data in a html page.

Since I don’t have a glass monitor like in Minority Report or 3d holograms like Tony Stark has, I though I’d be cool to use a browser and the Leap Motion to manipulate DOM objects.

So let’s say we have a DIV like this one:

1
<div id="box" style="width: 200px; border: 1px solid #666666; padding: 10px 10px 70px 10px; display: inline-block;"></div>

And now we don’t want to move it with our thoughts because that’s impossible but instead with our hands:

First thing to do -obviously- is include the Leap Motion JS lib.

Secondly, we need to capture the frames data the device is sending us through the Leap.loop event function:

1
2
3
4
Leap.loop(function(frame)
{
    console.log("Frame:" + frame); 
});

Third step is to capture the current frames vectors [x,y,z] and use this information to manipulate DOM objects. The way to do this is to track the position derived from the motion between a first frame and the current frame:

1
2
3
4
5
6
7
8
9
var firstValidFrame = null
 
Leap.loop(function(frame)
{
    // use first frame as comparison
    if (!firstValidFrame) firstValidFrame = frame;
    var translation = frame.translation(firstValidFrame);
    console.log("X:" + translation.x);
});

Now the fun part! As you can see we could grab the x coordinate with translation.x (in millimiters) – on the same way we could do with the coordinates y and z.

By using the x coordinates we can manipulate the DIV marginLeft CSS property and simulate as if the user were moving the DIV with her hand.

If you have the Leap Motion try this full example:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=utf8">
  <title></title>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
  <script src="leap.js"></script>
  </head>
  <body>
<script>
var firstValidFrame = null
 
Leap.loop(function(frame)
{
  // use the first frame to serve as comparison
  if (!firstValidFrame) firstValidFrame = frame;
  var translation = frame.translation(firstValidFrame);
  $('#box').css({marginLeft: translation.x});
});
</script>
 
  <div id="box" style="width: 200px; border: 1px solid #666666; padding: 10px 10px 70px 10px; display: inline-block"></div>
  </body>
</html>

Don’t have a Leap Motion? Pre order it!

Comments

  1. Jason Voigt says:

    Appreciate the minimalist demo! FWIW, variant w/ scaling sans jquery: https://gist.github.com/joyrexus/5699761

  2. David says:

    Does this tutorial still work? I’ve tried it using my leap motion and translation.x keeps coming up undefined in the console log.

Trackbacks

  1. […] with gesture control. Leo Celis has taken us another step forward by posting a tutorial on how to move a DIV with your fingers, using the Leap Motion Controller and a simple JavaScript. With potential uses including a […]

Speak Your Mind

Connect with Facebook