Skip to content

Instantly share code, notes, and snippets.

@K90j1

K90j1/helloworld-leapmotion.md

Last active August 29, 2015 14:01
Show Gist options
  • Save K90j1/31f90d6da01d5c884e24 to your computer and use it in GitHub Desktop.
Save K90j1/31f90d6da01d5c884e24 to your computer and use it in GitHub Desktop.
Download ZIP
Hello World チュートリアル - Leap Motion
Raw
helloworld-leapmotion.md

Hello World チュートリアル - Leap Motion

概要 リープモーションがキャプチャする１フレームのJSONフォーマットのデータからいくつかのプロパティを表示する。

  • フレーム
  • 手
  • 指やツール
  • ジェスチャ

手順.1 Sample.htmlの作成

<html>
<head>
    <title>Leap JavaScript Sample</title>
    <script src="http://js.leapmotion.com/leap-0.5.0.js"></script>
    <script>// JavaScript code goes here</script>
</head>
<body>
<h1>Leap JavaScript Sample</h1>
<div id="main">
    <h3>Frame data:</h3>
    <div id="frameData"></div>
    <div style="clear:both;"></div>
    <h3>Hand data:</h3>
    <div id="handData"></div>
    <div style="clear:both;"></div>
    <h3>Finger and tool data:</h3>
    <div id="pointableData"></div>
    <div style="clear:both;"></div>
    <h3>Gesture data:</h3>
    <div id="gestureData"></div>
</div>
</body>
</html>

手順.2 イベントループの設定

5行目の<script></script>の間の// JavaScript code goes hereを消してコードを追加

var controllerOptions = {enableGestures: true};
Leap.loop(controllerOptions, function(frame) {
  // Body of callback function
})

手順.3 フレームデータの表示

7行目の// Body of callback function を消してコードを追加

var frameString = "Frame ID: " + frame.id  + "<br />"
        + "Timestamp: " + frame.timestamp + " &micro;s<br />"
        + "Hands: " + frame.hands.length + "<br />"
        + "Fingers: " + frame.fingers.length + "<br />"
        + "Tools: " + frame.tools.length + "<br />"
        + "Gestures: " + frame.gestures.length + "<br />";
// <div id="frameData">を書き換え
document.getElementById('frameData').innerHTML = frameString;

手順.4 ブラウザで確認

手順.5 モーションデータの表示

5行目で改行してコードを追加

var previousFrame;

14行目で改行してコードを追加（document.getElementById.. の手前）

// Frame motion factors
if (previousFrame) {
  var translation = frame.translation(previousFrame);
  frameString += "Translation: " + vectorToString(translation) + " mm <br />";

  var rotationAxis = frame.rotationAxis(previousFrame);
  var rotationAngle = frame.rotationAngle(previousFrame);
  frameString += "Rotation axis: " + vectorToString(rotationAxis, 2) + "<br />";
  frameString += "Rotation angle: " + rotationAngle.toFixed(2) + " radians<br />";

  var scaleFactor = frame.scaleFactor(previousFrame);
  frameString += "Scale factor: " + scaleFactor.toFixed(2) + "<br />";
}
previousFrame = frame;

30行目で改行してコードを追加

function vectorToString(data){
    var array =  Array.prototype.slice.call(data);
    return array.toString();
}

手順.6 手のデータの表示

イベントループの内側（Leap.loop(controllerOptions, function(frame)）にコードを追加

// Display Hand object data
var handString = "";
if (frame.hands.length > 0) {
  for (var i = 0; i < frame.hands.length; i++) {
    var hand = frame.hands[i];

    handString += "Hand ID: " + hand.id + "<br />";
    handString += "Direction: " + vectorToString(hand.direction, 2) + "<br />";
    handString += "Palm normal: " + vectorToString(hand.palmNormal, 2) + "<br />";
    handString += "Palm position: " + vectorToString(hand.palmPosition) + " mm<br />";
    handString += "Palm velocity: " + vectorToString(hand.palmVelocity) + " mm/s<br />";
    handString += "Sphere center: " + vectorToString(hand.sphereCenter) + " mm<br />";
    handString += "Sphere radius: " + hand.sphereRadius.toFixed(1) + " mm<br />";

    // And so on...
  }
}
document.getElementById('handData').innerHTML = handString;

手順.7 指やツールのデータの表示

イベントループの内側にコードを追加

// Display Pointable (finger and tool) object data
var pointableString = "";
if (frame.pointables.length > 0) {
  for (var i = 0; i < frame.pointables.length; i++) {
    var pointable = frame.pointables[i];

    pointableString += "Pointable ID: " + pointable.id + "<br />";
    pointableString += "Belongs to hand with ID: " + pointable.handId + "<br />";

    if (pointable.tool) {
      pointableString += "Classified as a tool <br />";
      pointableString += "Length: " + pointable.length.toFixed(1) + " mm<br />";
      pointableString += "Width: "  + pointable.width.toFixed(1) + " mm<br />";
    }
    else {
      pointableString += "Classified as a finger<br />";
      pointableString += "Length: " + pointable.length.toFixed(1) + " mm<br />";
    }

    pointableString += "Direction: " + vectorToString(pointable.direction, 2) + "<br />";
    pointableString += "Tip position: " + vectorToString(pointable.tipPosition) + " mm<br />";
    pointableString += "Tip velocity: " + vectorToString(pointable.tipVelocity) + " mm/s<br />";
  }
}
document.getElementById('pointableData').innerHTML = pointableString;

手順.8 ジェスチャのデータの表示

イベントループの内側にコードを追加

// Display Gesture object data
var gestureString = "";
if (frame.gestures.length > 0) {
  for (var i = 0; i < frame.gestures.length; i++) {
    var gesture = frame.gestures[i];
    gestureString += "Gesture ID: " + gesture.id + ", "
                  + "type: " + gesture.type + ", "
                  + "state: " + gesture.state + ", "
                  + "hand IDs: " + gesture.handIds.join(", ") + ", "
                  + "pointable IDs: " + gesture.pointableIds.join(", ") + ", "
                  + "duration: " + gesture.duration + " &micro;s, ";

    switch (gesture.type) {
      case "circle":
        gestureString += "center: " + vectorToString(gesture.center) + " mm, "
                      + "normal: " + vectorToString(gesture.normal, 2) + ", "
                      + "radius: " + gesture.radius.toFixed(1) + " mm, "
                      + "progress: " + gesture.progress.toFixed(2) + " rotations";
        break;
      case "swipe":
        gestureString += "start position: " + vectorToString(gesture.startPosition) + " mm, "
                      + "current position: " + vectorToString(gesture.position) + " mm, "
                      + "direction: " + vectorToString(gesture.direction, 2) + ", "
                      + "speed: " + gesture.speed.toFixed(1) + " mm/s";
        break;
      case "screenTap":
      case "keyTap":
        gestureString += "position: " + vectorToString(gesture.position) + " mm, "
                      + "direction: " + vectorToString(gesture.direction, 2);
        break;
      default:
        gestureString += "unkown gesture type";
    }
    gestureString += "<br />";
  }
}
document.getElementById('gestureData').innerHTML = gestureString;

プロパティ

frameData

  • Frame ID
  • Timestamp
  • Hands
  • Fingers
  • Tools
  • Gestures
  • Translation フレーム間のミリメートル単位での動きの大きさと方向
  • Rotation axis フレーム間の手の動きに由来する回転軸の変化
  • Rotation angle　フレーム間の手の動きに由来する回転角度の変化
  • Scale factor フレーム間の手の動きに由来する倍率の変化

handData

  • Hand ID
  • Direction
  • Palm normal 法線方向のベクトル
  • Palm position The center position of the palm in millimeters from the Leap origin.
  • Palm velocity The rate of change of the palm position in millimeters/second.
  • Sphere center The center of a sphere fit to the curvature of this hand.
  • Sphere radius The radius of a sphere fit to the curvature of this hand, in millimeters.

pointableData

  • Pointable ID
  • Belongs to hand with ID
  • Length
  • Width
  • Direction
  • Tip position
  • Tip velocity

gestureData

  • Gesture ID
  • type
  • state
  • hand IDs
  • pointable IDs
  • duration
  • circle
    • center
    • normal
    • radius
    • progress
  • swipe
    • start position
    • current position
    • direction
    • speed
  • screenTap
  • keyTap
    • position
    • direction

リファレンス

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment