LeapMotion.js – Using Leap Motion with the Web – How does it work?



LeapMotion.js – Using Leap Motion with the Web – How does it work?

0 8


LeapMotionJsPresentation


On Github hverespej / LeapMotionJsPresentation

LeapMotion.js

Using Leap Motion with the Web

Hakon Verespej | @hverespej

What is Leap Motion?

  • Motion-sensing hardware device
  • SDKs
  • App store
[Speaker notes]

How does it work?

Hardware

  • IR camera and LEDs
  • High-res, close-range
  • USB

Software

  • Daemon/Service
  • Websocket server
  • SDK

Ecosystem

  • Developer program and community
  • App store

How do we use it?

Let's install our devices

Config

  • Open the Leap Motion control panel
  • Make sure "Allow Web Apps" is enabled
  • Must not have firewall blocking TCP over 127.0.0.1:6437, 6438, and 6439

What it does

  • Views an "inverted pyramid" above the device
  • Identifies hands, fingers, and pointing tools
  • Reports location, motion, and gestures

Additional details

  • Orientation is a right-handed Cartesian coordinate system
  • Units are millimeters, mm/s, and radians

Data reporting

  • Clients receive data at intervals
  • Data is contained in a "frame"
  • A frame contains info about detected objects
  • Object info contains measurements

Let's start using it!

JS Client

Samples

For today, we'll start with some simple, prebaked samples. See https://github.com/hverespej/LeapMotionSamples.

Sample 1: Simple hand tracking

Sample 2: Hand tracking, gestures, and WebGL

Open Projects

Let's brainstorm Find someone to work with

Questions?

Hakon Verespej, Madrona Venture Group

hakon@madrona.com | @hverespej

verespej.com