Simple Leap Example

_.md

[ Launch: FSS canvas + LEAP ] 7502758 by gelicia
[ Launch: FSS canvas + LEAP ] 5279204 by enjalot
[ Launch: FSS canvas example ] 5250737 by enjalot
[ Launch: basic FSS canvas ] 5250708 by enjalot

config.json

{"description":"Simple Leap Example","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"index.html":{"default":true,"vim":false,"emacs":false,"fontSize":12},"leap.js":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"play":true,"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,"thumbnail":"http://i.imgur.com/8g4T02W.gif"}

inlet.js

var svgWidth = 1000;
var svgHeight = 500;

var radMin = 3;
var radMax = 50;

var svg = d3.select("svg").attr({
  width: svgWidth,
  height: svgHeight
});

var widthScale = d3.scale.linear()
   .domain([-250, 250])
   .range([0, svgWidth]);

var heightScale = d3.scale.linear()
   .domain([350, 0])
   .range([0, svgHeight]);

var sizeScale = d3.scale.linear()
   .domain([-300, 250])
   .range([radMin, radMax]);

var colorScale = d3.scale.linear()
   .domain([-300, 250])
   .range(['#000000', '#FF0000']);

var circlePosition = svg.append('circle').attr({
  cx: 250,
  cy: 150,
  r: 25
});

tributary.leap.events.off("frame");
tributary.leap.events.on("frame", function(d) {
  //console.log(d);
  
  if (d.hands[0] !== undefined){
    
	//console.log(d.hands[0].stabilizedPalmPosition[2]);
    
    circlePosition.attr({
      cx : widthScale(d.hands[0].stabilizedPalmPosition[0]),
      cy : heightScale(d.hands[0].stabilizedPalmPosition[1]),
      r : sizeScale(d.hands[0].stabilizedPalmPosition[2]),
      fill: colorScale(d.hands[0].stabilizedPalmPosition[2])
    });
  }
  
})

leap.js

tributary.leap = {
  events: _.clone(Backbone.Events)
};

// 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/");
  var ws = tributary.ws;

  // On successful connection
  ws.onopen = function(event) {
    console.log("Open");
    tributary.leap.connected = true;
    tributary.leap.events.trigger("open");
  };

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

  // On socket close
  ws.onclose = function(event) {
    ws = null;
    tributary.leap.connected = false;
    tributary.leap.events.trigger("close");
  }

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

var socketState;
if(!tributary.ws || tributary.ws.readyState != 1) {
  tributary.leap.connected = false;
} else {
  tributary.leap.connected = true;
}

tributary.leap.toggle = function() {
  if(tributary.ws.readyState === 1) {
    tributary.ws.close();
  } else {
    tributary.leap.init();
  }
}

tributary.leap.init();

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