[POST/WEBGL] 4: Leaptraveler

Michael Becker

Project #4, Leaptraveler, was in a way long overdue: a basic exploration of the Leap Motion’s abilities. I’ve had the IR motion-capturing unit for longer than I care to admit and have played around with existing games and demos plenty, but have never gotten around to exploring it properly.

I still have ways to go, but after this week, I can at least say I have familiarity with the API and functionality of the thing, which I’ve utilized to create a basic navigation interface in a space scene (gotta love those 90′s looking skyboxes! And I don’t think I have it in me to create a sphere and not give it a unique bump map. There are 10 different ones in this scene, randomly applies to all 50 spheres, and I love each and every one of them.)


Once you set up the initial Leap loop (great tutorial by Leap here) there isn’t a whole lot to grabbing the perceived 3d position of each hand (as well as individual fingers – with 3 knuckle locators per finger! – but that ended up being overkill for me). I ended up reinventing a similar mechanism to the one used by Google Earth’s Leap implementation, if not as smooth and sophisticated. But hey, it works. Move your hand up to go up. Forward for forward. Left for left. Etc.


I was particularly impressed with the plug-and-play element of it – I was a little skeptical that a few lines of javascript would be enough to get the whole thing going, or that it would work over an internet connection (and my internet connection sure can be flaky sometimes), but so far tests have been extremely positive. This is one impressive piece of hardware, and is relatively easy to implement in whatever you may be working on. In fact, once I’m more proficient with making libraries, I might make one to recycle the same code easily when I want to view three.js quickly. This reminds me – existing Leap Motion + Three.js integrations abound (example, another), but the whole challenge was writing one from scratch and I’m glad I did. Along the way I learned of the difference between world coordinates and object coordinates in order to avoid some embarrassing disagreements between me and the camera with regards to the question of where “forward” exactly is. This SO post really helped.


The final note is that I didn’t have as much time as I’d have liked to finish this because this week I also dove headfirst into Udacity’s Front End Web Dev Nanodegree. So far the whole experience is fantastic but demanding. Still going to be trying for one thing a week. This project is incredibly important for reasons that have been mentioned before. So next week I’ll be here with a new piece of code – till then, enjoy floating through space!

Leaptraveler (github)


Leave a Reply

Back to top walmart pillows