LeapMotion Three.js Visualizer

_.md

[ Launch: LeapMotion Three.js Visualizer ] 4944263 by JT5D
[ Launch: Tributary inlet ] 4646124 by enjalot

config.json

{"description":"LeapMotion Three.js Visualizer","endpoint":"","display":"webgl","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"leap.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"period","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01}

inlet.js

var colorScale = d3.scale.category20();
var cube;
var cubes = [];
var ncubes = 40;
for(var i = ncubes; i--;) {
  cube = makeCube(colorScale(i));
  tributary.scene.add(cube);
  cubes.push(cube);
}

tributary.events.off("leap");
tributary.events.on("leap", function(d) {
  //console.log(d);

  /*
  var hand, pointable;
  for(var j = d.hands.length; j--;) {
   hand = d.hands[j];
  }
  */
  //reset cube positions;
  for(var j = ncubes; j--; ){
    cubes[j].position.set(0,0,0);
  }
  
  for(var i = d.pointables.length; i--;) { 
    var pointer = d.pointables[i];
    if(pointer.id < ncubes) {
      var cube = cubes[pointer.id];
      var pos = pointer.tipPosition;
      //console.log(pos);
      cube.position.set(pos[0], pos[1], pos[2]);
    } else {
      console.log("ID", pointer.id)
    }
  }
  
})






plane = new THREE.Mesh( new THREE.PlaneGeometry( 100, 100 ), new THREE.MeshBasicMaterial( { color: 0xa3a3a3 } ) );
plane.geometry.applyMatrix( new THREE.Matrix4().makeRotationX( - Math.PI / 2 ) );
tributary.scene.add( plane );

function toInt(color) { return parseInt(color.slice(1,7), 16) };

function makeCube(color) {
  var materials = [];
  
  for(var i = 6; i--; ) {
    materials.push(new THREE.MeshBasicMaterial( { color:  toInt(color)} ));    
  }
  cube = new THREE.Mesh( new THREE.CubeGeometry( 19, 20, 20, 1, 1, 1, materials ), new THREE.MeshFaceMaterial() );
  return cube
}
//tributary.useThreejsControls = false

leap.js

if(!tributary.leap) tributary.leap = {};


// Support both the WebSocket and MozWebSocket objects
if ((typeof(WebSocket) == 'undefined') &&
    (typeof(MozWebSocket) != 'undefined')) {
  WebSocket = MozWebSocket;
}

// Create the socket with event handlers
tributary.leap.init = function() {

  if(tributary.ws) {
    tributary.ws.close();
  }
  console.log("Starting");
  //Create and open the socket
  tributary.ws = new WebSocket("ws://localhost:6437/");
  ws = tributary.ws;

  // On successful connection
  ws.onopen = function(event) {
    //document.getElementById("connection").innerHTML = "WebSocket connection open!";
    //$("#textoutput").html("Open...")
    console.log("Open");
  };

  // On message received
  ws.onmessage = function(event) {
    tributary.events.trigger("leap", JSON.parse(event.data));
  };

  // On socket close
  ws.onclose = function(event) {
    ws = null;
  }

  //On socket error
  ws.onerror = function(event) {
    console.error("Received error");
  };
}

tributary.leap.init();

tributary.events.on("restart", function() {
  tributary.leap.init();
})