Update example with sliders and new compatible rigged hand version

leapmotion · Aug 24, 2014 · 0836280 · 0836280
1 parent 6f8bf15
commit 0836280
Show file tree

Hide file tree

Showing 7 changed files with 822 additions and 88 deletions.
diff --git a/main/leap-plugins-0.1.6.1.js b/main/leap-plugins-0.1.6.1.js
@@ -2127,7 +2127,11 @@ More info on vec3 can be found, here: http://glmatrix.net/docs/2.2.0/symbols/vec
       _results = [];
       for (_i = 0, _len = vec3s.length; _i < _len; _i++) {
         vec3 = vec3s[_i];
-        _results.push(Leap.vec3.transformMat4(vec3, vec3, matrix));
+        if (vec3) {
+          _results.push(Leap.vec3.transformMat4(vec3, vec3, matrix));
+        } else {
+          _results.push(void 0);
+        }
       }
       return _results;
     };
@@ -2147,7 +2151,11 @@ More info on vec3 can be found, here: http://glmatrix.net/docs/2.2.0/symbols/vec
       _results = [];
       for (_i = 0, _len = vec3s.length; _i < _len; _i++) {
         vec3 = vec3s[_i];
-        _results.push(transformMat4Implicit0(vec3, vec3, matrix));
+        if (vec3) {
+          _results.push(transformMat4Implicit0(vec3, vec3, matrix));
+        } else {
+          _results.push(void 0);
+        }
       }
       return _results;
     };
@@ -2161,7 +2169,7 @@ More info on vec3 can be found, here: http://glmatrix.net/docs/2.2.0/symbols/vec
         _results = [];
         for (_i = 0, _len = _ref.length; _i < _len; _i++) {
           finger = _ref[_i];
-          transformPositions(matrix, finger.mcpPosition, finger.pipPosition, finger.dipPosition, finger.tipPosition);
+          transformPositions(matrix, finger.carpPosition, finger.mcpPosition, finger.pipPosition, finger.dipPosition, finger.tipPosition);
           _results.push(transformDirections(matrix, finger.direction));
         }
         return _results;

diff --git a/main/leap-plugins-0.1.6.1.min.js b/main/leap-plugins-0.1.6.1.min.js
diff --git a/main/transform/index.html b/main/transform/index.html
@@ -7,12 +7,27 @@
   <style>
     body{
       margin: 0;
+      font-family: Helvetica;
     }
     canvas{
       pointer-events: none;
     }
+    input{
+      cursor: pointer;
+    }
+    #connect-leap{
+      bottom: 0;
+      top: auto !important;
+    }
   </style>
 
+
+  <script src="//cdnjs.cloudflare.com/ajax/libs/three.js/r67/three.min.js"></script>
+  <script src="//js.leapmotion.com/leap-0.6.2.js"></script>
+  <script src="../leap-plugins-0.1.6.1.js"></script>
+  <script src="console.js"></script>
+  <script src="leap.rigged-hand-0.1.5pre.js"></script>
+
 </head>
 <body>
 
@@ -27,73 +42,35 @@ <h1>Transform Plugin</h1>
 <p>
   Parameters can be either static objects or methods which transform on every frame.
 </p>
-
-
-<button onclick="toggleRotate();">Toggle Rotate</button>
-<button onclick="togglePosition();">Toggle Position</button>
-<button onclick="toggleScale();">Toggle Scale</button>
-<p>
-  Rotates Y by Math.PI / 2
-</p>
 <p>
-  Moves position by Z -= 400;
+  In this way, you can then transform individual hands based upon their id.
 </p>
 
+<br/>
 
-<script src="//cdnjs.cloudflare.com/ajax/libs/three.js/r67/three.min.js"></script>
-<script src="//js.leapmotion.com/leap-0.6.0-beta2.js"></script>
-<script src="../leap-plugins-0.1.6.1.js"></script>
-<script src="//js.leapmotion.com/leap.rigged-hand-0.1.1.js"></script>
-
-</body>
-
-
-
-<script>
+<div style="float: left;">
+  <label>Rotation: <span id="rotationOutput">0</span>π</label><br/>
+  <input id="rotationInput" type="range" min="-1" max="1" value="0" step="0.001">
+</div>
 
-  Leap.loop({
-    hand: function (hand) {
+<div style="float: left;">
+  <label>Z Position: <span id="positionOutput">0</span></label><br/>
+  <input id="positionInput" type="range" min="-1000" max="300" value="0" step="1">
+</div>
 
-      cube.position.fromArray(hand.palmPosition);
+<div style="float: left;">
+  <label>Scale: <span id="scaleOutput">1</span></label><br/>
+  <input id="scaleInput" type="range" min="0.1" max="1" value="1" step="0.01">
+  <!-- note - there seems to be a strange issue with THREEjs sections of the hand disappearing for scales larger than 1.
+       Scale set as an option for the riggedHand will cause the issue.  -->
+</div>
 
-      renderer.render(scene, camera);
-
-    }
-  })
-  // note that transform must be _before_ rigged hand
-  .use('transform')
-  .use('riggedHand', {
-    scale: 1
-  })
-  .connect();
-
-  window.transformPlugin = Leap.loopController.plugins.transform;
-
-  window.toggleRotate = function(){
-    if (transformPlugin.quaternion){
-      transformPlugin.quaternion = null;
-    }else{
-      transformPlugin.quaternion = (new THREE.Quaternion).setFromEuler(new THREE.Euler(0, Math.PI / 2, 0));
-    }
-  };
 
-  window.togglePosition = function(){
-    if (transformPlugin.position){
-      transformPlugin.position = null;
-    }else{
-      transformPlugin.position = (new THREE.Vector3(0,0,-400));
-    }
-  };
+</body>
 
-  window.toggleScale = function(){
-    if (transformPlugin.scale){
-      transformPlugin.scale = null;
-    }else{
-      transformPlugin.scale = (new THREE.Vector3(0.5,0.5,0.5));
-    }
-  };
 
 
+<script>
   // all units in mm
   var initScene = function () {
     window.scene = new THREE.Scene();
@@ -119,8 +96,8 @@ <h1>Transform Plugin</h1>
     pointLight.lookAt(new THREE.Vector3(0, 0, 0));
     window.scene.add(pointLight);
 
-    window.camera = new THREE.PerspectiveCamera(90, window.innerWidth / window.innerHeight, 1, 1000);
-    window.camera.position.fromArray([0, 0, 300]);
+    window.camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 10000);
+    window.camera.position.fromArray([0, 160, 400]);
     window.camera.lookAt(new THREE.Vector3(0, 0, 0));
 
     window.addEventListener('resize', function () {
@@ -135,30 +112,57 @@ <h1>Transform Plugin</h1>
     scene.add(camera);
 
 
-    var geometry = new THREE.CubeGeometry(60, 90, 20);
-    var material = new THREE.MeshPhongMaterial({color: 0x0000FF});
-    window.cube = new THREE.Mesh(geometry, material);
-    cube.position.set(0,0,0);
-    cube.castShadow = true;
-    cube.receiveShadow = true;
-//    scene.add(cube);
-
-
-
     renderer.render(scene, camera);
   };
 
   initScene();
 
-  var rotateCube = function(){
-    cube.rotation.x += 0.01;
-    cube.rotation.y += 0.02;
-    renderer.render(scene, camera);
 
-    window.requestAnimationFrame(rotateCube);
+
+
+  Leap.loop()
+  // note that transform must be _before_ rigged hand
+  .use('transform', {
+    quaternion: new THREE.Quaternion,
+    position: new THREE.Vector3,
+    scale: new THREE.Vector3(1,1,1)
+  })
+  .use('playback', {recording: 'leap-playback-recording-110fps.json.lz'})
+  .use('riggedHand', {
+    dotsMode: true,
+    parent: scene,
+    renderFn: function(){
+      renderer.render(scene, camera);
+    }
+
+  })
+  .connect();
+
+  window.transformPlugin = Leap.loopController.plugins.transform;
+
+  document.getElementById('rotationInput').oninput = function(e){
+    var value = e.target.value;
+    transformPlugin.quaternion.setFromEuler(
+        new THREE.Euler(0, Math.PI * parseFloat(value,10) , 0)
+    );
+    document.getElementById('rotationOutput').innerHTML = value;
   };
 
-  rotateCube();
+  document.getElementById('positionInput').oninput = function(e){
+    var value = e.target.value;
+    transformPlugin.position.set(
+        0,0,parseInt(value, 10)
+    );
+    document.getElementById('positionOutput').innerHTML = value;
+  };
+
+  document.getElementById('scaleInput').oninput = function(e){
+    var value = parseFloat(e.target.value,10);
+    transformPlugin.scale.set(
+        value, value, value
+    );
+    document.getElementById('scaleOutput').innerHTML = value;
+  };
 
 </script>
 

diff --git a/main/transform/leap-playback-recording-110fps.json.lz b/main/transform/leap-playback-recording-110fps.json.lz
diff --git a/main/transform/leap.rigged-hand-0.1.5pre.js b/main/transform/leap.rigged-hand-0.1.5pre.js
diff --git a/main/transform/leap.transform.coffee b/main/transform/leap.transform.coffee
@@ -6,10 +6,12 @@
 # transform: a THREE.Matrix4 directly.  This can be either an array of 16-length, or a THREE.matrix4
 # quaternion:  a THREE.Quaternion,
 
+
 Leap.plugin 'transform', (scope = {})->
   noop = [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1]
   _matrix = new THREE.Matrix4
 
+
   scope.getMatrix = (hand)->
     if scope.transform
       matrix = if typeof scope.transform == 'function' then scope.transform(hand) else scope.transform
@@ -47,14 +49,14 @@ Leap.plugin 'transform', (scope = {})->
   # implicitly appends 1 to the vec3s, applying both translation and rotation
   transformPositions = (matrix, vec3s...)->
     for vec3 in vec3s
-      Leap.vec3.transformMat4(vec3, vec3, matrix)
-
-      
-  transformMat4Implicit0 =  (out, a, m) ->
+      if vec3 # some recordings may not have all fields
+        Leap.vec3.transformMat4(vec3, vec3, matrix)
+
+  transformMat4Implicit0 = (out, a, m) ->
     x = a[0]
-    y = a[1] 
+    y = a[1]
     z = a[2]
-  
+
     out[0] = m[0] * x + m[4] * y + m[8]  * z
     out[1] = m[1] * x + m[5] * y + m[9]  * z
     out[2] = m[2] * x + m[6] * y + m[10] * z
@@ -63,7 +65,8 @@ Leap.plugin 'transform', (scope = {})->
   # appends 0 to the vec3s, applying only rotation
   transformDirections = (matrix, vec3s...)->
     for vec3 in vec3s
-      transformMat4Implicit0(vec3, vec3, matrix)
+      if vec3 # some recordings may not have all fields
+        transformMat4Implicit0(vec3, vec3, matrix)
 
 
   {
@@ -88,6 +91,7 @@ Leap.plugin 'transform', (scope = {})->
       for finger in hand.fingers
         transformPositions(
           matrix,
+          finger.carpPosition,
           finger.mcpPosition,
           finger.pipPosition,
           finger.dipPosition,

diff --git a/main/transform/leap.transform.js b/main/transform/leap.transform.js
@@ -40,7 +40,11 @@
       _results = [];
       for (_i = 0, _len = vec3s.length; _i < _len; _i++) {
         vec3 = vec3s[_i];
-        _results.push(Leap.vec3.transformMat4(vec3, vec3, matrix));
+        if (vec3) {
+          _results.push(Leap.vec3.transformMat4(vec3, vec3, matrix));
+        } else {
+          _results.push(void 0);
+        }
       }
       return _results;
     };
@@ -60,7 +64,11 @@
       _results = [];
       for (_i = 0, _len = vec3s.length; _i < _len; _i++) {
         vec3 = vec3s[_i];
-        _results.push(transformMat4Implicit0(vec3, vec3, matrix));
+        if (vec3) {
+          _results.push(transformMat4Implicit0(vec3, vec3, matrix));
+        } else {
+          _results.push(void 0);
+        }
       }
       return _results;
     };
@@ -74,7 +82,7 @@
         _results = [];
         for (_i = 0, _len = _ref.length; _i < _len; _i++) {
           finger = _ref[_i];
-          transformPositions(matrix, finger.mcpPosition, finger.pipPosition, finger.dipPosition, finger.tipPosition);
+          transformPositions(matrix, finger.carpPosition, finger.mcpPosition, finger.pipPosition, finger.dipPosition, finger.tipPosition);
           _results.push(transformDirections(matrix, finger.direction));
         }
         return _results;