Experimenting with LeapMotion

1. by John Tubert
LeapMotion
Communicating with other browsers
and adding graphics (and maybe
moving some 3d shape)

2. Communicating with other browsers
Technologies used:
● Node.js (with socket.io and express)
● Hosted on Heroku

3. Server code
var express = require('express');
io.sockets.on('connection', function (socket) {
var app = express.createServer();
socket.on('frame',function(data){
socket.broadcast.emit('frame', data);
var io = require('socket.io').listen(app), fs = require('fs');
});
});
io.configure(function () {
io.set("transports", ["xhr-polling"]);
io.set("polling duration", 10);
});
app.use(express.static(__dirname + '/static'));
var port = process.env.PORT || 5000;
app.listen(port, function() {
console.log("Listening on " + port);
});

4. Front end code
var socket = io.connect(window.location.host.toString());
if(socket){
...
socket.on('frame', function (data) {
Leap.loop(function(frame) {
console.log("data: ",data);
Controller.getFrame(frame);
Controller.getFrame(data);
if(socket){
var obj = {};
obj.pointables = {};
obj.pointables.length = frame.pointables.length;
obj.hands = [];
obj.hands[0] = {};
obj.hands[0].palmPosition = [];
obj.hands[0].palmPosition[0] = {};
obj.hands[0].palmPosition[1] = {};
obj.hands[0].palmPosition[1] = frame.hands[0].palmPosition[1];
socket.emit("frame",obj);
}
});
...
});
}

5. Graphics
Using http://paperjs.org/, a canvas
framework.

6. Graphics - create/update
//CREATE -------
//UPDATE ON FRAME --------
var a = x*Math.floor(360/6);
paper.view.onFrame = function(event) {
var angle = (a*dtr);
graphicsArr[id]["angle"]+=1;
var x = (gRadius*Math.cos(angle));
var angle = (graphicsArr[id]["angle"]*dtr);
var y = (gRadius*Math.sin(angle));
var x = (gRadius*Math.cos(angle));
graphicsArr[id] = new paper.Path.Rectangle([x+xOffset, y+yOffset], [40, 40]);
var y = (gRadius*Math.sin(angle));
graphicsArr[id]["angle"] = a;
graphicsArr[id].position = [x+xOffset,y+yOffset];
graphicsArr[id]["text"] = new paper.PointText({
graphicsArr[id]["text"].position = [x+xOffset,y+yOffset+40];
point: [x+xOffset,y+yOffset],
justification: 'left',
fontSize: 13,
fillColor: 'white'
});
graphicsArr[id]["text"].content = id;
graphicsArr[id].strokeColor = '#ffffff';
graphicsArr[id].fillColor = 'black';
paper.view.draw();
}

7. Graphics - in main.js
Loop.prototype = {
…
Graphics.createShape(audio.id,counter);
}
play : function(id) {
if (id !== this.id) { this.audio.play(); } else { this.changeState(false); }
Graphics.updateColor(id,"red");
},
pause : function(id) {
Graphics.updateColor(id,"black");
this.changeState(true);
},
...
setGlobalVolume : function(frame, pointables){
...
Graphics.updateVolume(Math.round(volOutput*100));
}

8. Demo
http://jtubert-leap.herokuapp.com/

9. Controlling a 3d shape
● 3d cube using CSS3
● Controlling it using Leap’s palm position
var hand = frame.hands[0];
yVal = hand.palmPosition;
var volChangeY = parseFloat(yVal[0].toFixed(1));
volOutputY = volChangeY/yThreshold;
...
var x = volOutputX*360;
var y = volOutputY*360;
var z = volOutputZ*360;
$('#cube').css('-webkit-transform', 'rotate3d('+x+', '+y+', '+z+', '+z+'deg)');

10. Demo - cube
http://jtubert-leap.herokuapp.com/cube.html

11. Thanks
https://github.com/jtubert/leap