TOMAS REIMERS: Cool. So hi, everyone. My name's Tomas. I'm a TF and this is ARMAGHAN BEHLUM: Armi. Nice to see you guys. TOMAS REIMERS: Cool. So we're going to be talking about Leap Motion today. So Leap Motion is a really cool product that lets you interact with a computer in a different way. So the whole idea behind leap motion is that you can use your hands to interact with the computer. So right here I have something set up. I'll talk about it in a bit. But the basic version is you can see that I have my hands in front of my computer and when I move them, you get the analog on the computer and you can analyze this. You can make gestures. You can use your hands to interact with the computer in new and interesting way. 

Well, I actually first want to pass off to Armi to show you some cool demos of what some people have done with this. And then we'll talk about how you actually code with this. ARMAGHAN BEHLUM: Yeah. Hello. So as we saw, little data here, but let's see what some people have done with this. So let me just open up this example. And then, so, for example, you can see my hand analog there, but now this time some people using Unity have decided to put a little more skin and stuff around the hand. So I can, let's go with this one, sure, have my hands interacting. And you can probably imagine a couple of other cool useful things that you can do with this. So this is at least one example. And then let's jump out of this. 

And then another cool one is, let's go with this one. Plasmo ball. Again, we wouldn't necessarily expect this level of complexity from a final project for CS50. This is just to show you some of the, give you guys a little inspiration for what you guys can do with Leap Motion. So for example here's a cool physics example, which there we go. Has both of my hands so now you have this little plasma ball. And the ball is reacting to the physics of me moving my hand around the ball. Now this is all though using Unity, using kind of tools and frameworks that we haven't taught you guys in class, but as you can see some pretty cool run throughs with that. 

But one thing that you guys can do starting off right now with Leap Motion is work in JavaScript. Leap Motion has a JavaScript API that you guys can use and we highly, highly recommend that you guys build your projects using that. So with that, let me pass it back off to Tomas to talk about Leap Motion and JavaScript. TOMAS REIMERS: Cool. Or do you want to show them the Visualizer first? 

ARMAGHAN BEHLUM: Oh yes. Yes. Let's talk more about that Visualizer. 

TOMAS REIMERS: So on a most basic level, when you first get to Leap Motion you're going to have this box. Here, want me to take control? 

ARMAGHAN BEHLUM: Yeah, go for it. 

TOMAS REIMERS: So When you first get to Leap Motion you're going to have this box. It has a device which looks something like this. You plug it into your computer, install the necessary drivers, and then it will basically be set up. So the easiest way to sort of deal with Leap Motion is open up this program it installs called the Leap Motion Visualizer. And the Visualizer is literally what I'm showing here. It allows you to see the skeletal outline of your hands. And what the Leap Motion is interpreting them as. So the Leap Motion uses the camera to sort of look at your hands and then it tries to guess what the basic skeletal composition that you see on the screen is. And that's what it shows you. ARMAGHAN BEHLUM: Every single little point and thing that you see there is data that's available to you guys as well to use. So you see that it's capturing that Tomas has five fingers, each of those different fingers are also available for you as data points to use in whatever application that you might want. If you want to see if somebody's doing a thumbs up you can see if their fingers are curled and whether they're thumb finger is pointing upwards, or where their wrist or palm is and that type of stuff. TOMAS REIMERS: Cool. So you can see some gestures it understands better than others. Remember, that it is looking at your hand from at a camera from the bottom, so when you have your hands like this it understands them fully, but once you start to try and do a thumbs up, sometimes it reads it, sometimes it can guess, but honestly the camera just can't see the thumb. So it's not really sure what's happening. Just some limitations to keep in mind when you're developing with this. 

Anyway, so going back to this. The Visualizer actually has a lot of useful tools. So the Leap Motion is programmed in such a way that they don't expect you to interact with that image data. They don't really expect you to understand what's happening behind the scenes. What they do is expose a bunch of APIs for you such that you can interact with this data directly without understanding what's going on under the hood. 

So if we hit H here in the Visualizer you'll see a lot of options. The important one here though is if you hit O and then hit H, you'll see that it lets you draw gestures. So a gesture, you'll see it draws an arrow across. A gesture is one of the ways which Leap Motion sort of lets you get at the data without having to process it. So rather than me needing to figure out, oh, the hand was moving, even if I have point access, the API will sort of just tell me, hey, they made this gesture. So you can make basic arrow gestures. You can make circle gestures. You can make tapping gestures. And you can make key press gestures. Yeah. And that kind of stuff. So now that we've sort of seen what Leap Motion can do, you can see it can read a whole bunch of gestures. I think I'm going to pass it back to Armi and he's going to talk about how you get at these with JavaScript, how you even begin a project with this. And then we'll talk about some cool places you can go with that. ARMAGHAN BEHLUM: Yeah. Sounds good. So yeah, the very first thing we will want you to do of course, is after you get the Leap Motion is to go to leapmotion.com, set up, install the drivers and stuff. After doing that you can go make sure that it's connected. If you see in your little tray the Leap Motion icon and it's green, then you know you're all set. And of course check out exactly what Tomas just showed you with the gestures and doing the screen taps, and key taps, and that type of stuff. 

After that though we, once again, like I said, we have access to all of these things in JavaScript as well. The ideal set up that we would recommend you guys is to go into your vhost directory, local host, public in your CS50 appliance. And when you go there what you'll see is a index dot HTML file. Now that index dot HTML file or index dot PHP file, whichever is fine, what you can then do is go to your main operating system. And if you go to the IP address that's listed in the bottom right corner of your appliance right here, as you can see, then what happens is you go to the page that's referenced by that index dot HTML file. So all the code that you might put in there gets sent and is usable here. 

TOMAS REIMERS: So it's also important just for reference that if you guys actually know how to set up a server yourself, or you want to put this on the worldwide web, you're welcome to do whatever. Remember that these are just JavaScript files and all the Leap processing is done on the client. So it doesn't really matter where your server lives so long as the computer you're viewing the website on has Leap Motion installed. ARMAGHAN BEHLUM: Absolutely. Like Tomas said, yeah, whatever works for you guys. This is just one of our recommendations. Now to start using Leap Motion what you would do is you would import the JavaScript file from Leap Motion. And then from there what you can do is, right now I just have this paragraph tag set up with an ID of text. Things that we would recommend are setting controller options for Leap Motion with the enable gestures to be true. So by default those gestures that we showed you guys, the circle, and the key tap, and the swipes, those aren't shown to you guys by default. But we highly recommend using those so you're not reinventing the wheel. Enable those to true, passing those controller options to leap dot loop and you're all set to go. Because then you just have defined a anonymous function that will take in a frame from Leap Motion and that frame has all the information that you're going to need. 

TOMAS REIMERS: So just to recap, you have one object. You have this function called leap dot loop. And you call it with two arguments. You call it with one, the controller options. And there are a lot of options you can put in there. The one we're going to emphasize is enable gestures. And if you set it equal to true then you can get access at this gestures that we showed you in the Visualizer. 

And then the second argument is a function, it's kind of like a call back which will be called every time every frame of Leap, so every time leap registers that your hand move, it has a new frame. And it calls this function with one argument, which is the frame object. And that frame object describes the frame as Leap sees it. ARMAGHAN BEHLUM: Exactly. So this contains all the useful bits and pieces of information that we were talking about earlier. Checking frame dot gestures is a array of gestures that the leap motion caught your hands doing in the last frame. So for example, what we're doing here is we're checking, hey, Leap, in that last frame did you catch any gestures that I did? And if so what we decide to do is iterate through those gestures and try and get some useful information from them. Each gesture has a unique ID associated with it. They have types. You can look at which fingers were involved in the gestures by checking out this pointable stuff. So if when you go through the Leap Motion JavaScript API stuff, when they mention pointables, they're talking about these fingers. And then hands are, of course, the entire hand object. 

What else? You can check how long the motion went on for and, yeah, all those useful things. So what I'm doing right now here is I logged the frame, and then I update my HTML to display all of these bits of information from the frame. So let's check that out. 

So here it is. Here's the index dot HTML file. And as you just saw when I just moved my hand Leap caught a circle motion. So you can see me doing a circle over here, updates with circle information. Doing swipes, catches swipes. Let's try a screen tab. There we go. Screen tap and a key tap. So key taps also, by the way, are when you hit down. So you can imagine maybe playing a piano. 

And then screen taps are when you hit the screen. So you can imagine maybe you actually have a touch screen in front of you and you're hitting the touch screen in front of you. And then we can grab one of these objects in here. So remember I said that I was passing the frame into console log. And so we can check out all the bits and pieces of information that are available in that frame as well to use. 

Like I said earlier, pointables are the fingers. At that moment we didn't have our hands in front of the Leap Motion so it registered zero, but this is how you would start to find out maybe how many fingers are the screen. And that type of information. TOMAS REIMERS: And remembering this is just an object. So everything can be accessed sort of like a struct in C. You have the object name dot the property name. And then within that you have arrays and you have other objects, but remember it's just an object. There's nothing special because we're using Leap. ARMAGHAN BEHLUM: Yeah. Cool. Should we check out a couple of JavaScript examples? 

TOMAS REIMERS: So quickly remember that we said that Leap can actually run on any website. LeapJS is just served to a client. And so along as the client has Leap Motion attached it will work. So Leap Motion has a website where people can share their examples of things they've made. So we're just going to go through a couple of them to see what's possible before diving into more specifics about how it's possible. So ARMAGHAN BEHLUM: Let's see. TOMAS REIMERS: Now it should be working. ARMAGHAN BEHLUM: So now before we saw an example using Unity that rendered our hands with pretty impressive graphic skins, but now you can see you can do the same thing inside a web browser. This is all inside Chrome just using JavaScript. And then the other nice thing is if you want to know how they did this, the examples on JavaScript also include code options that you can check out and then see how this person was grabbing hands and codes and such. 

So that's all you can find at developer.leapmotion.com. You can go and check out JavaScript examples that they have there. So yeah. Here are these, oops sorry. Let's try that again. Oh. I have two right hands. So yeah. 

TOMAS REIMERS: So and again, remember sometimes Leap messes up. Just give it a second. It's not perfect, but it's pretty good. ARMAGHAN BEHLUM: One other recommendation also is to not do it in direct sunlight. So the way Leap Motion works is, actually if I show the camera this as well, infrared light. So it sends those out and then reads them when they come back. So if you're trying to do it direct sunlight, for example, it's probably not going to work, or it's going to require some calibration to do so. 

Also another recommendation is to clear the space behind the Leap and in front of Leap. Think of it as working inside of a dome that's surrounding this Leap Motion object. If there's stuff right behind it as well, that's also going to interfere with how the Leap Motion's trying to recognize your hand and that type of stuff. 

So, for example, I think in this case it's my laptop actually that's kind of making the Leap Motion. Yeah, there we go. So if I clear out my laptop from behind it the hand show up pretty well. So yeah. There's that. So what else did we show them. TOMAS REIMERS: I think now would be the time to sort of dive into and let's just make a demo totally from scratch. It's going to be really simple. Basically what we're going to try to do is make it so that when you swipe your hand, the background's going to start out as red, and when you swipe your hand, the background's going to turn green. OK? Really simple. And it's basically just going to go through a lot of the concepts behind Leap so that we can get into this ideology of how Leap works and how we can build stuff with that. And then from there we'll probably just show you the API Docs and where you can read more about this. And then we'll call it day. So do you want to code or do you want me to code? ARMAGHAN BEHLUM: Yeah. Well, I guess we can work together on this and try 

TOMAS REIMERS: So we'll do some pair coding. ARMAGHAN BEHLUM: There we go. That's exactly what I wanted to check out. Cool. So for example in here, let's see. While we are iterating through the gestures already, TOMAS REIMERS: Want to make just a completely new file? ARMAGHAN BEHLUM: Completely new file? Yeah, sure. 

TOMAS REIMERS: Yeah. 

ARMAGHAN BEHLUM: So let's do that. 

TOMAS REIMERS: So we're going to make a completely file. We'll call it hand dot HTML. That's cool with me. So remember you do an HTML tag, then within that you have a head. That head has a title within it. So tab the other way. There you go. Title, we'll call it Leap Example. Yep. 

ARMAGHAN BEHLUM: Oops. Title. 

TOMAS REIMERS: Yep. 

ARMAGHAN BEHLUM: There we are. 

TOMAS REIMERS: And then let's make a body. 

ARMAGHAN BEHLUM: Wait, let's also make sure to import. TOMAS REIMERS: Oh, of course. My bad. So always make sure you have the Leap script so that's a script given to you by Leap Motion which basically allows the web browser to connect to the device on the user's computer. And then in this we also need a body and let's just make the body say hi so that we can show students how to connect to this new web page that they made. ARMAGHAN BEHLUM: Sure. So let's just put another-- 

TOMAS REIMERS: Hi, hello world. So a very basic example. Really just a demo. 

ARMAGHAN BEHLUM: And then in here we can go to, we called it hand dot HTML, right? And oh! So I wonder what's wrong with this right now. Let's add read permissions to hand dot HTML. TOMAS REIMERS: Do you want to do it in the big terminal so that we can just show it on the-- 

ARMAGHAN BEHLUM: Yeah, that makes sense. All right. So I just added the permissions, but if we were to check out the permissions before we would have seen that actually hand dot HTML didn't have read permissions and therefore we couldn't render it. But now if we do so, we see our little hello world right there. 

TOMAS REIMERS: So let's actually, as he was writing, hello world, I thought about a way we could change this. Let's make it say hello world, and then when you wave, it says goodbye. Right? So hello, goodbye. 

ARMAGHAN BEHLUM: Sure. 

TOMAS REIMERS: That sounds pretty good. 

ARMAGHAN BEHLUM: That sounds good to me, too. 

TOMAS REIMERS: So if we're going to do that let's just think through the web page a little bit. We're going to need some script which basically registers that you waved and to a Leap, a wave and a swipe, same thing. So we're going to need a script that basically registers for that swipe. And another thing we're going to need is we're going to need some actual content to change. 

So as you remember, jQuery allows you to change content. So one thing we might want to include in this is the jQuery library. And then to be able to select what we're actually going to change content, that's going to need an ID or a class, or something that we can use to select it. So we'll just give it a quick ID of change text. And then do you want to grab jQuery? ARMAGHAN BEHLUM: So what's the first thing on our to do list then now? TOMAS REIMERS: Let's grab jQuery? ARMAGHAN BEHLUM: Let's grab jQuery, OK, cool. In that case, I'm going to have to actually-- where would be the best place to do that? 

TOMAS REIMERS: jQuery, so if you Google jQuery, hit jQuery, the first ARMAGHAN BEHLUM: Very first one. TOMAS REIMERS: Or download. It's fine. Hit download v1 and v2 on the left. So we're describing jQuery from online like you've probably done. Scroll down. Up, up. 

ARMAGHAN BEHLUM: Oh, right here now? TOMAS REIMERS: Or that. Yep. So jQuery has a hosted version which means that you don't actually need to download it, but you're more than welcome to download it and host it yourself. ARMAGHAN BEHLUM: Cool. So now we have jQuery. Now what's next on our to do list. TOMAS REIMERS: Awesome. So next what we need do is we actually need to give p hello world an ID so we can change it, right? So let's give an idea of, I don't know, change text? ARMAGHAN BEHLUM: Let's just do it this way, I guess. TOMAS REIMERS: changeText, cool. And now let's just refresh the page. Make sure everything works. So back in the browser. Cool. Always a good reminder that when you're building a website, probably refresh every time you make any somewhat significant change just because sometimes you accidentally drop a tag, or you accidentally delete something, and then you break something small, but then when you make a bigger change you're like, why did this big change seemingly break the unrelated thing. So it's always good to sort of go and do those sanity checks. 

Anyway so now let's do one last sanity check, which is let's try to change text without Leap Motion, without anything, just on the page load it'll change hello world to goodbye using jQuery. So if you remember jQuery exposes this dollar sign function, which we can pass CSS selector to, namely hashtag change text, which selects the element with an ID of change text. And then we're going to call the method HTML on the object it returns with the argument of a string goodbye, which will change the items HTML to say goodbye. Awesome. That seems pretty cool. And now when we refresh the page we're going to see it instantly changes to goodbye, right? Because it doesn't wait for anything. Sort of as soon as that script runs it changes it to goodbye. Cool. 

So now let's wrap that in a function. Right. So we're going to want to make a function. We'll call it goodbye. So function goodbye is going to take no arguments and it's not really going to return anything. And it's just going to do that in JavaScript. Excellent. So our function goodbye now changes the text to goodbye, right? So this gives us a way to basically change that text to goodbye whenever we called that function. Right? So this is pretty cool. 

ARMAGHAN BEHLUM: Well, we can also just make sure that now since we're not calling the function, if we refresh the page, notice it's not going to change the text. 

TOMAS REIMERS: Excellent. So now we're going to start to get into that Leap stuff that we were talking about. So Armi, do you want to take it from here or? 

ARMAGHAN BEHLUM: Yeah. Sure. I'm probably going to need to double check things, but for example remember we said we wanted to make sure in Options we set enable gestures TOMAS REIMERS: Good catch. ARMAGHAN BEHLUM: To be true. And then we were recommending that you guys would run leap dot loop, which as we said earlier, has two options, a JSON object that is the options for how you want to configure the Leap Motion to work, and then a function that's going to catch a frame as a callback function like Tomas was saying. And then edit what you want to do with that function. 

So we pass in the option and now we define a function that will take in a frame. And now we have to define what that function does. It's also for the sake of the future, do that to make sure. TOMAS REIMERS: Excellent. So now we have this leap dot loop function call which basically says watch Leap with these options and every time something changes, call this function frame with all of the data that you are aware of in frame. Sounds pretty good. So now quick sanity check, which I always recommend, is in that just put console dot log frame. And then in Chrome open it up and look at your console and play around with Leap to see the frames being logged because that will get you an idea of what data you have access to. And as always if you get confused, look up the API reference. And we'll include the link for that at the end of this. 

ARMAGHAN BEHLUM: So we refresh the page and then we go and open up the console again. And now we notice that we're having frames passed in, these little objects we saw earlier. So yeah. These are our frames showing up in the console. Cool. 

So now that we've grabbed the frames, as you might remember earlier from the example that we had, if we check frame dot gestures we get the list of gestures that the frame most recently caught. We can check the length of that array to see if Leap caught any gestures. So if that array is greater than zero then we know that we have some stuff to do. 

So let's wrap that up in an if condition and now in here what we know is we have seen a gesture, let's act on it. So now that we're in here we have a gesture to check out. TOMAS REIMERS: Well, the first thing is it's not just one gesture, it could be as many gestures. 

ARMAGHAN BEHLUM: Very true. TOMAS REIMERS: So per classic C style here we'll probably want to use a for loop. ARMAGHAN BEHLUM: Here we are then. We decided to iterate through the gestures. And let's see. i plus, plus. And now if we maybe made just a var gesture equals frame dot gestures bracket i, now we have gesture itself, which is just one single instance of a gesture object for us to work with inside of this for loop. All right. TOMAS REIMERS: Let's sanity check here again and just console dot log gesture to see what we get. 

ARMAGHAN BEHLUM: Console dot log gesture. Okie dokie. And refresh one more time. 

TOMAS REIMERS: And let's try making a gesture. You'll see that a bunch of, when he swipes, you get a bunch of gestures in the console and if he tries to do a circle, it's just-- 

ARMAGHAN BEHLUM: Circles are just really nice. 

TOMAS REIMERS: Now there's a weird thing here, which is he's doing one circle, but this is logging 80 gestures, right? That's a lot of gestures. So the first sort of thing to realize, and this can be confusing, is that a gesture isn't just logged once. 

On every frame, right, so if I'm doing a circle Leap will detect this is a change, from this is a change, from this is a change. And it will log each one of those. But in each one of those, it's going to say, oh, there's a gesture currently in progress. So let me just say, hey, there's a gesture and it's currently in progress. So what we don't want to do is say, oh, on every one of those gestures you want to change text. What we want to do is when that gesture stops, and we can check for that, then we want to change text. ARMAGHAN BEHLUM: Mhmm. So like Tomas is explaining these gestures might appear through multiple frames, but for example, when we were having that circle, we can see that the ID for that one single circle that we might have been trying to complete was the same ID throughout. And in fact, you can also check out the status. updated. 

And then this is probably the last circle that, oh, well, OK. So sometimes it shows you a status of stopping a gesture and it also shows you a status of starting a new gesture when it recognizes for sure that you've started a new gesture. For example in this case. TOMAS REIMERS: Cool. ARMAGHAN BEHLUM: So yeah. And then, let's see. You can also notice though we were making a circle and gesture has a field called type that tells us what kind of gesture that is. So that might be useful for us you try and do what we're doing. TOMAS REIMERS: So transitioning back to JS, the first thing that occurs to me also, just reading through this code is there's a small optimization, which is we actually don't need this if condition, right? Because if frame dot gestures dot length is zero, that for loop's not going to run anyway. So we may as well just go ahead and get rid of that. Again, while you're writing code it's important to go back and sort of refactor as you realize that you could have done something better, or that there is another way to do that. So now we're just going to clean this up quickly and also clean up your code. That's a big deal. 

ARMAGHAN BEHLUM: Good style is very appreciated. 

TOMAS REIMERS: You can always tell when someone has code where there used to be an if condition and then they removed it, but they didn't uncomment it. It's very obvious and it kind of looks ugly. ARMAGHAN BEHLUM: So what's next on our to do list? TOMAS REIMERS: So now as we were saying, I guess the first thing we want to do is make sure that that gesture's actually a swipe, right? 

ARMAGHAN BEHLUM: Yeah. 

TOMAS REIMERS: So if we're saying that our goodbye is kind of like a swipe, we'll go with it's a swipe, the first thing we need to say is, hey, is the gesture type a swipe, right? Not a circle or a top, but is it a swipe? So the way we can do that is we can say gesture dot type equal equal swipe as a string. 

ARMAGHAN BEHLUM: [INAUDIBLE] gesture dot type equals equals swipe. There we are. 

TOMAS REIMERS: And then the last question we want to see is gesture dot state equal equal stop, right? So that's when the gesture's been stopped. I actually think for swipe, I know this off the top of my head, but you're welcome to look it up, when you swipe every time it registers it until you stop is a start gesture. And then the last one's just a stop gesture. So there will only be one stop gesture, which is great for us. So what we can do is say if gesture dot type equal equal swipe and gesture dot status equal equal stop, then let's sanity check here console dot log gesture. 

So we'll go back here. We'll refresh the page. And now the only time something should be console dot logged is when we swipe. And we try to swipe and we see nothing. Right? So this is actually a big issue. We're not seeing what we expected to. And debugging can be a big part of this. So the first thing we're going to say is, OK, let's console dot log it if gesture dot type equal equal swipe. ARMAGHAN BEHLUM: Yeah, let's do that. TOMAS REIMERS: So we're going to go back to this. We'll refresh. We'll swipe. And we're going to see a bunch of them. OK. So clearly the problem was with our gesture dot status. So if we open up one of these we'll look in the objects and we'll see, well, it's a stop, but, oh, it's called state, not status. So if we head back to our code we can say if gesture dot type equal equal swipe and gesture dot state equal equal stop, then we'll console dot log it. And so refresh. We swipe. And we'll see that on every swipe, we're only getting one, which is the end, which is great, right? That's what we want. 

ARMAGHAN BEHLUM: Yep. And we can also notice that the IDs for each of these gestures are separate. So as Tomas was saying because we're catching this one stop state that exists at the end of a swipe, we're getting individual separate gestures from Leap Motion. Great. 

TOMAS REIMERS: Let's go ahead and just do the final thing, which is, 

ARMAGHAN BEHLUM: Goodbye. 

TOMAS REIMERS: Awesome. And now let's check out our website. One 

ARMAGHAN BEHLUM: Second. We did, yeah, we did call it Goodbye. Great. 

TOMAS REIMERS: No, Goodbye is a real function. 

ARMAGHAN BEHLUM: Yeah. Let's do that. 

TOMAS REIMERS: And when we wave goodbye, it says goodbye. 

ARMAGHAN BEHLUM: We have victory. 

TOMAS REIMERS: So pretty exciting stuff. Hopefully you can build something else, but you get the idea of, right? You can detect gestures. You can call functions. And from that that really gives you some very fundamental building blocks to say, oh, maybe when they swipe up, because you can also detect things like direction. I want them to do something. Or when they swipe right, I want them to do something. And we can start to get creative with how exactly we're going to improve our website using these swipe gestures or circle gestures, or tap gestures, either key taps or screen taps. And then other than that you're more than welcome to play with the actual data, but if you want to do that we would suggest you go to the docs because they're actually really good. So headed to the docs now. Or do you want to talk about that? 

ARMAGHAN BEHLUM: Yeah. Let's do that. Also one other tidbit of advice, do try and think of this in 3D. So actually let's pull up those gestures one more time console dot log gesture and we do that. Come back in and now let's try a couple of these, couple of those. 

If we go in and check out these gestures as well as you can see that they're dimensionality is in three directions, actually. So don't just limit yourself to a 2D screen even though you might be on a 2D website. You can try and think how a user might interact with the website in 3D. TOMAS REIMERS: In a 3D space. ARMAGHAN BEHLUM: Exactly. And yeah. So you get directions, velocities, all these cool bits of information. 

TOMAS REIMERS: And if you're not familiar with that, it goes x, y, and then z is this last dimension. Just something which you probably are familiar with if you've dealt with 3D coordinate planes before. If you haven't, it's the same as a 2D one except there's a third dimension. We call it z. And everything, sort of like direction, which is where it's going, position-- I think it might even expose acceleration, I'm not sure. 

ARMAGHAN BEHLUM: Yeah, I believe. It definitely has speed. I'm actually not 100% sure about acceleration. 

TOMAS REIMERS: It may be an option you can pass on to something. So position and speed are exposed in these sort of three coordinates. So x, y, z or delta x, delta y, delta z. So now headed to the documentation it's developer.leapmotion.com and then you can click Documentation. Again, Leap Motion has all these wonderful APIs, one for JavaScript, one for C Sharp and Unity, one for C++, one for Java, one for Python, and one for Objective C. I personally would push you towards JavaScript or if you want to learn a new language, try Python. Both of those languages I've worked with before and they're really easy to learn and you already know JavaScript, which makes it a really good contender. 

One word of caution when you enter the docs. Make sure you're on Docs v2.0. Because if you're on version one, it won't work. Also for the example gallery. We spent a good 30 minutes trying the debug our Leap before we realized that V1 doesn't work with V2. So just make sure you're on version two. And then I'll let him show your the docs. ARMAGHAN BEHLUM: Yeah. So here's the API overview and then some bits and pieces of the information that we've already told you. Nice little floating hands above a Leap Motion. And a reminder to think about space in 3D. One of the first objects to think about with Leap Motion are hands, of course. We saw those recognized by the Visualizer. And then you might have seen that it recognized part of the wrist and the arm associated with it. TOMAS REIMERS: If you want to pull up the Visualizer. ARMAGHAN BEHLUM: Yeah, let's do that again. TOMAS REIMERS: You can see, always just a good reminder to sort of see, the Visualizer tries to show all the data that Leap sees. So you'll see that we have these sort of four points by the wrist and then the actual wrist. And you also have this ball at the palm. All of these are points recognize recognized by the leap. 

ARMAGHAN BEHLUM: Exactly. And so with that hand object each frame has a hand array as well where you can also get the left and the right hands. You can get which direction the hands are facing with the normal direction of the palm, or as they call it the palm normal. What else do we have? We also, oops. Let's try and scroll down this way. The arms, the fingers are represented by the finger class, which is a pointable object. So like we were saying, we saw that array of pointables for each hand. Those are the little fingers to think about. So this is a good overview to go through to try and understand. TOMAS REIMERS: [INAUDIBLE] hand anatomy up there. ARMAGHAN BEHLUM: Yeah, exactly. So yeah. There's a lot of raw data that the Leap Motion takes in interprets well for you, so it's a great idea to go through here and try and figure out how Leap has already figured things out for you and so what information you have available from there. And then from there I would recommend going into this left section over here, which goes, well actually no, those are actually just more API stuff about-- 

TOMAS REIMERS: The API reference at the bottom is usually a good place to go. You guys probably saw this when we did the Google Maps PSET. But the reference really just goes through all of the functions and parameters available in the object to you. 

ARMAGHAN BEHLUM: Yeah. For example, this is what I was looking for before. When we have a hand we can go and figure out how Leap recommends to us to find a hand. Like I said earlier, we have a hands array. Find out if we have hands and then try and grab a single hand to interact with in that way. So that's what we recommend for you guys. The gestures and stuff as well. This API documentation is going to be a fantastic tool for you guys. Do you have any other recommendations? 

TOMAS REIMERS: I don't. I think that's good for now. 

ARMAGHAN BEHLUM: Yeah, I think so as well. Feel free to email us and get in touch about Leap Motion if you're having maybe any issues or need any recommendations. And we can try and figure stuff out with you guys as well. Thank you. 

TOMAS REIMERS: Great.