LeapMotion

1,067 views
965 views

Published on

Experimenting with LeapMotion

Published in: Technology, Business
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,067
On SlideShare
0
From Embeds
0
Number of Embeds
11
Actions
Shares
0
Downloads
35
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

LeapMotion

  1. 1. by John Tubert LeapMotion Communicating with other browsers and adding graphics (and maybe moving some 3d shape)
  2. 2. Communicating with other browsers Technologies used: ● Node.js (with socket.io and express) ● Hosted on Heroku
  3. 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. 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. 5. Graphics Using http://paperjs.org/, a canvas framework.
  6. 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. 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. 8. Demo http://jtubert-leap.herokuapp.com/
  9. 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. 10. Demo - cube http://jtubert-leap.herokuapp.com/cube.html
  11. 11. Thanks https://github.com/jtubert/leap

×