joyrexus/README.md

## README.md

      
    Raw
  

              README.md
            
          
    Grab strength demo with the leap motion skeletal model.
This example shows how "grab strength" can be detected with decent accuracy by the new skeletal model.  Note how the fingers redden as the hand becomes a fist.
Grab strength is supposed to be a measure of "the strength of a grab hand pose." The strength is zero for an open hand, and blends to 1.0 when a grabbing hand pose is recognized.
Tracking can break down, however, when a user rotates their hand.

Credit where due: the demo source was taken from the [leap-motion-examples
repo](https://github.com/leapmotion-examples/javascript/tree/master/v2/grab-
strength).
~

  
## index.html
<html>
<script src="//cdnjs.cloudflare.com/ajax/libs/three.js/r67/three.js"></script>
<script src="//s3-us-west-2.amazonaws.com/s.cdpn.io/109794/leap-0.6.0-beta2-loop-hand.js"></script>
<script src="//js.leapmotion.com/leap-plugins-0.1.4.1.min.js"></script>
<script src="//s3-us-west-2.amazonaws.com/s.cdpn.io/109794/leap.playback-0.2.0.js"></script>
<script src="//js.leapmotion.com/leap.rigged-hand-0.1.1.js"></script>
<style>
  body{
    font-family: 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif;
  }
  #output{
    font-size: 66px;
    color: #B60F0F;
    text-align: left;
    position: fixed;
    bottom: 18px;
  }

  #progress {
    background: #B60F0F;
    position: fixed;
    bottom: 0;
    left: 0;
    height: 16px;
    width: 0%;
  }
  img#connect-leap{
    /* this can be removed with leapjs-plugins 0.1.4.1 */
    max-width: 100%;
  }
</style>
<body>
  <div id=output></div>
  <div id=progress></div>

<script type="text/javascript">
	var output = document.getElementById('output'),
		progress = document.getElementById('progress');

	// Set up the controller
	Leap.loop({background: true}, {hand: function(hand){

		output.innerHTML = hand.grabStrength.toPrecision(2);
		progress.style.width = hand.grabStrength * 100 + '%';

	}})

	// Adds the rigged hand and playback plugins
	visualizeHand = function(controller){
	  // The leap-plugin file included above gives us a number of plugins out of the box
	  // To use a plugins, we call `.use` on the controller with options for the plugin.
	  // See js.leapmotion.com/plugins for more info

	  controller.use('playback', {
		// This is a compressed JSON file of preprecorded frame data
		recording: '//s3-us-west-2.amazonaws.com/s.cdpn.io/109794/GrabStrength-110fps.json.lz',
		// How long, in ms, between repeating the recording.
		timeBetweenLoops: 1000,
		pauseOnHand: true
	  }).on('riggedHand.meshAdded', function(handMesh, leapHand){
		handMesh.material.opacity = 1;
	  });

	  var overlay = controller.plugins.playback.player.overlay;
	  overlay.style.right = 0;
	  overlay.style.left = 'auto';
	  overlay.style.top = 'auto';
	  overlay.style.padding = 0;
	  overlay.style.bottom = '13px';
	  overlay.style.width = '180px';
	  overlay.style.visibility = 'hidden';

	  controller.use('riggedHand', {
		scale: 1.3,
		boneColors: function (boneMesh, leapHand){
		  if ((boneMesh.name.indexOf('Finger_') == 0) ) {
			return {
			  hue: 1,
			  saturation: leapHand.grabStrength,
			  lightness: 0.5
			}
		  }
		}
	  })

	  var camera = controller.plugins.riggedHand.camera;
	  camera.position.set(0,3,-15);
	  camera.lookAt(new THREE.Vector3(0,0,0));
	}
	visualizeHand(Leap.loopController);
</script>
	<html>
	<script src="//cdnjs.cloudflare.com/ajax/libs/three.js/r67/three.js"></script>
	<script src="//s3-us-west-2.amazonaws.com/s.cdpn.io/109794/leap-0.6.0-beta2-loop-hand.js"></script>
	<script src="//js.leapmotion.com/leap-plugins-0.1.4.1.min.js"></script>
	<script src="//s3-us-west-2.amazonaws.com/s.cdpn.io/109794/leap.playback-0.2.0.js"></script>
	<script src="//js.leapmotion.com/leap.rigged-hand-0.1.1.js"></script>
	<style>
	body{
	font-family: 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif;
	}
	#output{
	font-size: 66px;
	color: #B60F0F;
	text-align: left;
	position: fixed;
	bottom: 18px;
	}

	#progress {
	background: #B60F0F;
	position: fixed;
	bottom: 0;
	left: 0;
	height: 16px;
	width: 0%;
	}
	img#connect-leap{
	/* this can be removed with leapjs-plugins 0.1.4.1 */
	max-width: 100%;
	}
	</style>
	<body>
	<div id=output></div>
	<div id=progress></div>

	<script type="text/javascript">
	var output = document.getElementById('output'),
	progress = document.getElementById('progress');

	// Set up the controller
	Leap.loop({background: true}, {hand: function(hand){

	output.innerHTML = hand.grabStrength.toPrecision(2);
	progress.style.width = hand.grabStrength * 100 + '%';

	}})

	// Adds the rigged hand and playback plugins
	visualizeHand = function(controller){
	// The leap-plugin file included above gives us a number of plugins out of the box
	// To use a plugins, we call `.use` on the controller with options for the plugin.
	// See js.leapmotion.com/plugins for more info

	controller.use('playback', {
	// This is a compressed JSON file of preprecorded frame data
	recording: '//s3-us-west-2.amazonaws.com/s.cdpn.io/109794/GrabStrength-110fps.json.lz',
	// How long, in ms, between repeating the recording.
	timeBetweenLoops: 1000,
	pauseOnHand: true
	}).on('riggedHand.meshAdded', function(handMesh, leapHand){
	handMesh.material.opacity = 1;
	});

	var overlay = controller.plugins.playback.player.overlay;
	overlay.style.right = 0;
	overlay.style.left = 'auto';
	overlay.style.top = 'auto';
	overlay.style.padding = 0;
	overlay.style.bottom = '13px';
	overlay.style.width = '180px';
	overlay.style.visibility = 'hidden';

	controller.use('riggedHand', {
	scale: 1.3,
	boneColors: function (boneMesh, leapHand){
	if ((boneMesh.name.indexOf('Finger_') == 0) ) {
	return {
	hue: 1,
	saturation: leapHand.grabStrength,
	lightness: 0.5
	}
	}
	}
	})

	var camera = controller.plugins.riggedHand.camera;
	camera.position.set(0,3,-15);
	camera.lookAt(new THREE.Vector3(0,0,0));
	}
	visualizeHand(Leap.loopController);
	</script>