Leap Pong

_.md

[ Launch: Simple Leap Example ] 7505030 by gelicia
[ 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":"Leap Pong","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},"pong.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/FflINhQ.gif"}

inlet.js

var svgWidth = 500;
var svgHeight = 250;
var svgRealHeight = svgHeight+50;

var radMin = 3;
var radMax = 50;

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

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

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

var player1 = svg.append('rect').attr({
  x: 25,
  y: svgHeight/2,
  width: 11,
  height: 63,
  fill: '#16921B'
});

var player2 = svg.append('rect').attr({
  x: svgWidth - 25,
  y: svgHeight/2,
  width: 11,
  height: 63,
  fill: '#163992'
});

var ball = svg.append('circle').attr({
  cx: svgWidth/2,
  cy: svgHeight/2,
  r: 10,
  fill: '#FF00B8'
});

var ballVelocityX = 200.0;
var ballVelocityY = 100.0;

var lastTime = 0; 
 
tributary.leap.events.off("frame");
tributary.leap.events.on("frame", function(d) {
  //skip the first instance since it's undefined
  if(d.timestamp=== undefined){ return;}
  
  var time = Number(d.timestamp)/1e6;
  if(lastTime === 0) {lastTime = time;}
  
  var dt = lastTime - time;
  lastTime = time;
  
  var x = Number(ball.attr("cx"));
  var y = Number(ball.attr("cy"));
  
  x = x + ballVelocityX*dt;
  y = y + ballVelocityY*dt;
  
  if(y < 0){
    ballVelocityY *= -1;
    y = 0;
  }
  
  if(y > svgRealHeight){
    ballVelocityY *= -1;
    y = svgRealHeight;
  }
  
  if(x < 0){
    ballVelocityX *= -1;
    x = 0;
  }
  
  if(x > svgWidth){
    ballVelocityX *= -1;
    x = svgWidth;
  }
  
  ball.attr("cx", x);
  ball.attr("cy", y);
  
  if (d.hands !== undefined && d.hands.length == 2){
    player1.attr({
      y: heightScale(d.hands[0].stabilizedPalmPosition[1])
    });
    
     player2.attr({
      y: heightScale(d.hands[1].stabilizedPalmPosition[1])
    });
    
    
    
  }
  
})

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();
})