1 00:00:00,000 --> 00:00:11,010 2 00:00:11,010 --> 00:00:11,965 >> TOMAS REIMERS: Cool. 3 00:00:11,965 --> 00:00:13,230 So hi, everyone. 4 00:00:13,230 --> 00:00:14,300 My name's Tomas. 5 00:00:14,300 --> 00:00:15,744 I'm a TF and this is 6 00:00:15,744 --> 00:00:16,660 ARMAGHAN BEHLUM: Armi. 7 00:00:16,660 --> 00:00:17,637 Nice to see you guys. 8 00:00:17,637 --> 00:00:18,470 TOMAS REIMERS: Cool. 9 00:00:18,470 --> 00:00:20,740 So we're going to be talking about Leap Motion today. 10 00:00:20,740 --> 00:00:22,800 So Leap Motion is a really cool product that 11 00:00:22,800 --> 00:00:25,900 lets you interact with a computer in a different way. 12 00:00:25,900 --> 00:00:28,560 So the whole idea behind leap motion is that you 13 00:00:28,560 --> 00:00:31,430 can use your hands to interact with the computer. 14 00:00:31,430 --> 00:00:33,610 So right here I have something set up. 15 00:00:33,610 --> 00:00:34,790 I'll talk about it in a bit. 16 00:00:34,790 --> 00:00:37,540 But the basic version is you can see that I have my hands in front 17 00:00:37,540 --> 00:00:42,840 of my computer and when I move them, you get the analog on the computer 18 00:00:42,840 --> 00:00:44,170 and you can analyze this. 19 00:00:44,170 --> 00:00:46,230 You can make gestures. 20 00:00:46,230 --> 00:00:49,176 You can use your hands to interact with the computer 21 00:00:49,176 --> 00:00:50,300 in new and interesting way. 22 00:00:50,300 --> 00:00:55,550 23 00:00:55,550 --> 00:00:57,520 >> Well, I actually first want to pass off to Armi 24 00:00:57,520 --> 00:01:00,400 to show you some cool demos of what some people have done with this. 25 00:01:00,400 --> 00:01:02,816 And then we'll talk about how you actually code with this. 26 00:01:02,816 --> 00:01:04,800 ARMAGHAN BEHLUM: Yeah. 27 00:01:04,800 --> 00:01:05,300 Hello. 28 00:01:05,300 --> 00:01:08,870 So as we saw, little data here, but let's see 29 00:01:08,870 --> 00:01:11,680 what some people have done with this. 30 00:01:11,680 --> 00:01:15,130 So let me just open up this example. 31 00:01:15,130 --> 00:01:20,770 And then, so, for example, you can see my hand analog there, but now this time 32 00:01:20,770 --> 00:01:26,680 some people using Unity have decided to put a little more skin 33 00:01:26,680 --> 00:01:28,670 and stuff around the hand. 34 00:01:28,670 --> 00:01:35,900 So I can, let's go with this one, sure, have my hands interacting. 35 00:01:35,900 --> 00:01:41,050 And you can probably imagine a couple of other cool useful things 36 00:01:41,050 --> 00:01:42,840 that you can do with this. 37 00:01:42,840 --> 00:01:45,530 So this is at least one example. 38 00:01:45,530 --> 00:01:48,910 And then let's jump out of this. 39 00:01:48,910 --> 00:01:56,590 >> And then another cool one is, let's go with this one. 40 00:01:56,590 --> 00:01:58,390 Plasmo ball. 41 00:01:58,390 --> 00:02:03,510 Again, we wouldn't necessarily expect this level of complexity 42 00:02:03,510 --> 00:02:06,450 from a final project for CS50. 43 00:02:06,450 --> 00:02:10,029 This is just to show you some of the, give you guys 44 00:02:10,029 --> 00:02:14,570 a little inspiration for what you guys can do with Leap Motion. 45 00:02:14,570 --> 00:02:20,500 So for example here's a cool physics example, which there we go. 46 00:02:20,500 --> 00:02:24,305 Has both of my hands so now you have this little plasma ball. 47 00:02:24,305 --> 00:02:31,030 And the ball is reacting to the physics of me moving my hand around the ball. 48 00:02:31,030 --> 00:02:36,920 Now this is all though using Unity, using kind of tools and frameworks 49 00:02:36,920 --> 00:02:39,510 that we haven't taught you guys in class, 50 00:02:39,510 --> 00:02:46,590 but as you can see some pretty cool run throughs with that. 51 00:02:46,590 --> 00:02:51,750 >> But one thing that you guys can do starting off right now with Leap Motion 52 00:02:51,750 --> 00:02:53,260 is work in JavaScript. 53 00:02:53,260 --> 00:02:58,960 Leap Motion has a JavaScript API that you guys can use and we highly, highly 54 00:02:58,960 --> 00:03:02,040 recommend that you guys build your projects using that. 55 00:03:02,040 --> 00:03:04,350 So with that, let me pass it back off to Tomas 56 00:03:04,350 --> 00:03:06,582 to talk about Leap Motion and JavaScript. 57 00:03:06,582 --> 00:03:07,415 TOMAS REIMERS: Cool. 58 00:03:07,415 --> 00:03:09,230 Or do you want to show them the Visualizer first? 59 00:03:09,230 --> 00:03:09,670 >> ARMAGHAN BEHLUM: Oh yes. 60 00:03:09,670 --> 00:03:10,170 Yes. 61 00:03:10,170 --> 00:03:11,900 Let's talk more about that Visualizer. 62 00:03:11,900 --> 00:03:14,983 >> TOMAS REIMERS: So on a most basic level, when you first get to Leap Motion 63 00:03:14,983 --> 00:03:16,940 you're going to have this box. 64 00:03:16,940 --> 00:03:18,330 Here, want me to take control? 65 00:03:18,330 --> 00:03:19,180 >> ARMAGHAN BEHLUM: Yeah, go for it. 66 00:03:19,180 --> 00:03:20,530 >> TOMAS REIMERS: So When you first get to Leap Motion 67 00:03:20,530 --> 00:03:21,780 you're going to have this box. 68 00:03:21,780 --> 00:03:24,460 It has a device which looks something like this. 69 00:03:24,460 --> 00:03:28,990 You plug it into your computer, install the necessary drivers, 70 00:03:28,990 --> 00:03:30,950 and then it will basically be set up. 71 00:03:30,950 --> 00:03:34,160 So the easiest way to sort of deal with Leap Motion 72 00:03:34,160 --> 00:03:39,240 is open up this program it installs called the Leap Motion Visualizer. 73 00:03:39,240 --> 00:03:41,490 And the Visualizer is literally what I'm showing here. 74 00:03:41,490 --> 00:03:45,340 It allows you to see the skeletal outline of your hands. 75 00:03:45,340 --> 00:03:49,940 And what the Leap Motion is interpreting them as. 76 00:03:49,940 --> 00:03:53,750 So the Leap Motion uses the camera to sort of look at your hands 77 00:03:53,750 --> 00:03:59,176 and then it tries to guess what the basic skeletal composition that you 78 00:03:59,176 --> 00:04:00,460 see on the screen is. 79 00:04:00,460 --> 00:04:01,669 And that's what it shows you. 80 00:04:01,669 --> 00:04:03,418 ARMAGHAN BEHLUM: Every single little point 81 00:04:03,418 --> 00:04:06,580 and thing that you see there is data that's available to you guys 82 00:04:06,580 --> 00:04:07,270 as well to use. 83 00:04:07,270 --> 00:04:09,670 So you see that it's capturing that Tomas 84 00:04:09,670 --> 00:04:12,160 has five fingers, each of those different fingers 85 00:04:12,160 --> 00:04:17,110 are also available for you as data points to use in whatever application 86 00:04:17,110 --> 00:04:18,256 that you might want. 87 00:04:18,256 --> 00:04:20,339 If you want to see if somebody's doing a thumbs up 88 00:04:20,339 --> 00:04:23,860 you can see if their fingers are curled and whether they're 89 00:04:23,860 --> 00:04:25,850 thumb finger is pointing upwards, or where 90 00:04:25,850 --> 00:04:30,037 their wrist or palm is and that type of stuff. 91 00:04:30,037 --> 00:04:30,870 TOMAS REIMERS: Cool. 92 00:04:30,870 --> 00:04:35,186 So you can see some gestures it understands better than others. 93 00:04:35,186 --> 00:04:38,310 Remember, that it is looking at your hand from at a camera from the bottom, 94 00:04:38,310 --> 00:04:41,630 so when you have your hands like this it understands them fully, 95 00:04:41,630 --> 00:04:44,509 but once you start to try and do a thumbs up, sometimes it reads it, 96 00:04:44,509 --> 00:04:47,550 sometimes it can guess, but honestly the camera just can't see the thumb. 97 00:04:47,550 --> 00:04:49,810 So it's not really sure what's happening. 98 00:04:49,810 --> 00:04:54,910 Just some limitations to keep in mind when you're developing with this. 99 00:04:54,910 --> 00:04:56,540 >> Anyway, so going back to this. 100 00:04:56,540 --> 00:04:59,040 The Visualizer actually has a lot of useful tools. 101 00:04:59,040 --> 00:05:01,780 So the Leap Motion is programmed in such a way 102 00:05:01,780 --> 00:05:04,280 that they don't expect you to interact with that image data. 103 00:05:04,280 --> 00:05:06,230 They don't really expect you to understand 104 00:05:06,230 --> 00:05:08,060 what's happening behind the scenes. 105 00:05:08,060 --> 00:05:11,620 What they do is expose a bunch of APIs for you 106 00:05:11,620 --> 00:05:13,420 such that you can interact with this data 107 00:05:13,420 --> 00:05:18,400 directly without understanding what's going on under the hood. 108 00:05:18,400 --> 00:05:27,790 >> So if we hit H here in the Visualizer you'll see a lot of options. 109 00:05:27,790 --> 00:05:35,450 The important one here though is if you hit O and then hit H, 110 00:05:35,450 --> 00:05:38,080 you'll see that it lets you draw gestures. 111 00:05:38,080 --> 00:05:43,380 So a gesture, you'll see it draws an arrow across. 112 00:05:43,380 --> 00:05:47,010 A gesture is one of the ways which Leap Motion sort of lets you get at the data 113 00:05:47,010 --> 00:05:48,462 without having to process it. 114 00:05:48,462 --> 00:05:51,170 So rather than me needing to figure out, oh, the hand was moving, 115 00:05:51,170 --> 00:05:54,970 even if I have point access, the API will sort of just tell me, 116 00:05:54,970 --> 00:05:56,380 hey, they made this gesture. 117 00:05:56,380 --> 00:05:58,920 So you can make basic arrow gestures. 118 00:05:58,920 --> 00:06:00,590 You can make circle gestures. 119 00:06:00,590 --> 00:06:03,530 You can make tapping gestures. 120 00:06:03,530 --> 00:06:07,630 And you can make key press gestures. 121 00:06:07,630 --> 00:06:09,394 Yeah. 122 00:06:09,394 --> 00:06:10,800 And that kind of stuff. 123 00:06:10,800 --> 00:06:14,370 So now that we've sort of seen what Leap Motion can do, 124 00:06:14,370 --> 00:06:17,792 you can see it can read a whole bunch of gestures. 125 00:06:17,792 --> 00:06:19,500 I think I'm going to pass it back to Armi 126 00:06:19,500 --> 00:06:22,300 and he's going to talk about how you get at these with JavaScript, 127 00:06:22,300 --> 00:06:24,520 how you even begin a project with this. 128 00:06:24,520 --> 00:06:27,724 And then we'll talk about some cool places you can go with that. 129 00:06:27,724 --> 00:06:28,640 ARMAGHAN BEHLUM: Yeah. 130 00:06:28,640 --> 00:06:29,300 Sounds good. 131 00:06:29,300 --> 00:06:31,950 So yeah, the very first thing we will want you to do of course, 132 00:06:31,950 --> 00:06:37,170 is after you get the Leap Motion is to go to leapmotion.com, set up, install 133 00:06:37,170 --> 00:06:38,420 the drivers and stuff. 134 00:06:38,420 --> 00:06:42,520 After doing that you can go make sure that it's connected. 135 00:06:42,520 --> 00:06:46,910 If you see in your little tray the Leap Motion icon and it's green, 136 00:06:46,910 --> 00:06:48,640 then you know you're all set. 137 00:06:48,640 --> 00:06:53,710 And of course check out exactly what Tomas just showed you with the gestures 138 00:06:53,710 --> 00:06:59,320 and doing the screen taps, and key taps, and that type of stuff. 139 00:06:59,320 --> 00:07:02,180 >> After that though we, once again, like I said, 140 00:07:02,180 --> 00:07:06,530 we have access to all of these things in JavaScript as well. 141 00:07:06,530 --> 00:07:09,020 The ideal set up that we would recommend you 142 00:07:09,020 --> 00:07:16,440 guys is to go into your vhost directory, local host, 143 00:07:16,440 --> 00:07:19,340 public in your CS50 appliance. 144 00:07:19,340 --> 00:07:24,790 And when you go there what you'll see is a index dot HTML file. 145 00:07:24,790 --> 00:07:28,180 Now that index dot HTML file or index dot 146 00:07:28,180 --> 00:07:32,740 PHP file, whichever is fine, what you can then do 147 00:07:32,740 --> 00:07:35,150 is go to your main operating system. 148 00:07:35,150 --> 00:07:38,650 And if you go to the IP address that's listed in the bottom right 149 00:07:38,650 --> 00:07:45,180 corner of your appliance right here, as you can see, then what happens 150 00:07:45,180 --> 00:07:51,240 is you go to the page that's referenced by that index dot HTML file. 151 00:07:51,240 --> 00:07:56,610 So all the code that you might put in there gets sent and is usable here. 152 00:07:56,610 --> 00:07:58,960 >> TOMAS REIMERS: So it's also important just for reference 153 00:07:58,960 --> 00:08:06,554 that if you guys actually know how to set up a server yourself, 154 00:08:06,554 --> 00:08:09,720 or you want to put this on the worldwide web, you're welcome to do whatever. 155 00:08:09,720 --> 00:08:11,594 Remember that these are just JavaScript files 156 00:08:11,594 --> 00:08:14,250 and all the Leap processing is done on the client. 157 00:08:14,250 --> 00:08:16,510 So it doesn't really matter where your server lives 158 00:08:16,510 --> 00:08:19,660 so long as the computer you're viewing the website on 159 00:08:19,660 --> 00:08:22,024 has Leap Motion installed. 160 00:08:22,024 --> 00:08:23,190 ARMAGHAN BEHLUM: Absolutely. 161 00:08:23,190 --> 00:08:25,680 Like Tomas said, yeah, whatever works for you guys. 162 00:08:25,680 --> 00:08:28,570 This is just one of our recommendations. 163 00:08:28,570 --> 00:08:31,660 Now to start using Leap Motion what you would do 164 00:08:31,660 --> 00:08:36,640 is you would import the JavaScript file from Leap Motion. 165 00:08:36,640 --> 00:08:39,610 And then from there what you can do is, right now 166 00:08:39,610 --> 00:08:44,250 I just have this paragraph tag set up with an ID of text. 167 00:08:44,250 --> 00:08:48,690 Things that we would recommend are setting controller options 168 00:08:48,690 --> 00:08:52,012 for Leap Motion with the enable gestures to be true. 169 00:08:52,012 --> 00:08:53,970 So by default those gestures that we showed you 170 00:08:53,970 --> 00:08:57,010 guys, the circle, and the key tap, and the swipes, 171 00:08:57,010 --> 00:09:00,330 those aren't shown to you guys by default. 172 00:09:00,330 --> 00:09:04,450 But we highly recommend using those so you're not reinventing the wheel. 173 00:09:04,450 --> 00:09:09,489 Enable those to true, passing those controller options to leap dot loop 174 00:09:09,489 --> 00:09:10,530 and you're all set to go. 175 00:09:10,530 --> 00:09:13,270 Because then you just have defined a anonymous function 176 00:09:13,270 --> 00:09:16,910 that will take in a frame from Leap Motion 177 00:09:16,910 --> 00:09:21,150 and that frame has all the information that you're going to need. 178 00:09:21,150 --> 00:09:25,310 >> TOMAS REIMERS: So just to recap, you have one object. 179 00:09:25,310 --> 00:09:28,250 You have this function called leap dot loop. 180 00:09:28,250 --> 00:09:30,460 And you call it with two arguments. 181 00:09:30,460 --> 00:09:33,134 You call it with one, the controller options. 182 00:09:33,134 --> 00:09:35,300 And there are a lot of options you can put in there. 183 00:09:35,300 --> 00:09:38,170 The one we're going to emphasize is enable gestures. 184 00:09:38,170 --> 00:09:41,230 And if you set it equal to true then you can get access at this gestures 185 00:09:41,230 --> 00:09:42,940 that we showed you in the Visualizer. 186 00:09:42,940 --> 00:09:47,500 >> And then the second argument is a function, it's kind of like a call back 187 00:09:47,500 --> 00:09:53,010 which will be called every time every frame of Leap, 188 00:09:53,010 --> 00:09:57,340 so every time leap registers that your hand move, it has a new frame. 189 00:09:57,340 --> 00:10:02,130 And it calls this function with one argument, which is the frame object. 190 00:10:02,130 --> 00:10:05,909 And that frame object describes the frame as Leap sees it. 191 00:10:05,909 --> 00:10:06,950 ARMAGHAN BEHLUM: Exactly. 192 00:10:06,950 --> 00:10:10,450 So this contains all the useful bits and pieces of information 193 00:10:10,450 --> 00:10:12,550 that we were talking about earlier. 194 00:10:12,550 --> 00:10:18,010 Checking frame dot gestures is a array of gestures 195 00:10:18,010 --> 00:10:23,680 that the leap motion caught your hands doing in the last frame. 196 00:10:23,680 --> 00:10:26,470 So for example, what we're doing here is we're checking, 197 00:10:26,470 --> 00:10:31,820 hey, Leap, in that last frame did you catch any gestures that I did? 198 00:10:31,820 --> 00:10:36,350 And if so what we decide to do is iterate through those gestures 199 00:10:36,350 --> 00:10:39,760 and try and get some useful information from them. 200 00:10:39,760 --> 00:10:44,290 Each gesture has a unique ID associated with it. 201 00:10:44,290 --> 00:10:46,280 They have types. 202 00:10:46,280 --> 00:10:50,220 You can look at which fingers were involved in the gestures 203 00:10:50,220 --> 00:10:52,770 by checking out this pointable stuff. 204 00:10:52,770 --> 00:10:56,490 So if when you go through the Leap Motion JavaScript API stuff, 205 00:10:56,490 --> 00:10:59,630 when they mention pointables, they're talking about these fingers. 206 00:10:59,630 --> 00:11:04,480 And then hands are, of course, the entire hand object. 207 00:11:04,480 --> 00:11:05,210 >> What else? 208 00:11:05,210 --> 00:11:08,630 You can check how long the motion went on 209 00:11:08,630 --> 00:11:11,640 for and, yeah, all those useful things. 210 00:11:11,640 --> 00:11:16,490 So what I'm doing right now here is I logged the frame, 211 00:11:16,490 --> 00:11:24,350 and then I update my HTML to display all of these bits of information 212 00:11:24,350 --> 00:11:25,820 from the frame. 213 00:11:25,820 --> 00:11:28,010 So let's check that out. 214 00:11:28,010 --> 00:11:29,440 >> So here it is. 215 00:11:29,440 --> 00:11:34,730 Here's the index dot HTML file. 216 00:11:34,730 --> 00:11:38,560 And as you just saw when I just moved my hand Leap caught a circle motion. 217 00:11:38,560 --> 00:11:44,960 So you can see me doing a circle over here, updates with circle information. 218 00:11:44,960 --> 00:11:48,332 Doing swipes, catches swipes. 219 00:11:48,332 --> 00:11:49,290 Let's try a screen tab. 220 00:11:49,290 --> 00:11:50,090 There we go. 221 00:11:50,090 --> 00:11:52,370 Screen tap and a key tap. 222 00:11:52,370 --> 00:11:55,040 So key taps also, by the way, are when you hit down. 223 00:11:55,040 --> 00:11:57,260 So you can imagine maybe playing a piano. 224 00:11:57,260 --> 00:11:59,869 >> And then screen taps are when you hit the screen. 225 00:11:59,869 --> 00:12:02,910 So you can imagine maybe you actually have a touch screen in front of you 226 00:12:02,910 --> 00:12:05,190 and you're hitting the touch screen in front of you. 227 00:12:05,190 --> 00:12:08,470 And then we can grab one of these objects in here. 228 00:12:08,470 --> 00:12:12,960 So remember I said that I was passing the frame into console log. 229 00:12:12,960 --> 00:12:17,160 And so we can check out all the bits and pieces of information 230 00:12:17,160 --> 00:12:22,500 that are available in that frame as well to use. 231 00:12:22,500 --> 00:12:26,320 >> Like I said earlier, pointables are the fingers. 232 00:12:26,320 --> 00:12:30,260 At that moment we didn't have our hands in front of the Leap Motion 233 00:12:30,260 --> 00:12:32,010 so it registered zero, but this is how you 234 00:12:32,010 --> 00:12:35,980 would start to find out maybe how many fingers are the screen. 235 00:12:35,980 --> 00:12:37,810 And that type of information. 236 00:12:37,810 --> 00:12:40,060 TOMAS REIMERS: And remembering this is just an object. 237 00:12:40,060 --> 00:12:42,185 So everything can be accessed sort of like a struct 238 00:12:42,185 --> 00:12:45,540 in C. You have the object name dot the property name. 239 00:12:45,540 --> 00:12:48,830 And then within that you have arrays and you have other objects, 240 00:12:48,830 --> 00:12:50,850 but remember it's just an object. 241 00:12:50,850 --> 00:12:53,788 There's nothing special because we're using Leap. 242 00:12:53,788 --> 00:12:54,704 ARMAGHAN BEHLUM: Yeah. 243 00:12:54,704 --> 00:12:56,544 Cool. 244 00:12:56,544 --> 00:12:58,710 Should we check out a couple of JavaScript examples? 245 00:12:58,710 --> 00:13:05,070 246 00:13:05,070 --> 00:13:07,810 >> TOMAS REIMERS: So quickly remember that we 247 00:13:07,810 --> 00:13:12,470 said that Leap can actually run on any website. 248 00:13:12,470 --> 00:13:15,250 LeapJS is just served to a client. 249 00:13:15,250 --> 00:13:19,850 And so along as the client has Leap Motion attached it will work. 250 00:13:19,850 --> 00:13:22,540 So Leap Motion has a website where people 251 00:13:22,540 --> 00:13:24,540 can share their examples of things they've made. 252 00:13:24,540 --> 00:13:26,623 So we're just going to go through a couple of them 253 00:13:26,623 --> 00:13:29,980 to see what's possible before diving into more specifics about how 254 00:13:29,980 --> 00:13:32,510 it's possible. 255 00:13:32,510 --> 00:13:33,346 So 256 00:13:33,346 --> 00:13:34,470 ARMAGHAN BEHLUM: Let's see. 257 00:13:34,470 --> 00:13:36,136 TOMAS REIMERS: Now it should be working. 258 00:13:36,136 --> 00:13:38,520 ARMAGHAN BEHLUM: So now before we saw an example 259 00:13:38,520 --> 00:13:45,280 using Unity that rendered our hands with pretty impressive graphic skins, 260 00:13:45,280 --> 00:13:50,200 but now you can see you can do the same thing inside a web browser. 261 00:13:50,200 --> 00:13:54,640 This is all inside Chrome just using JavaScript. 262 00:13:54,640 --> 00:13:57,460 And then the other nice thing is if you want 263 00:13:57,460 --> 00:14:02,610 to know how they did this, the examples on JavaScript 264 00:14:02,610 --> 00:14:07,540 also include code options that you can check out and then see 265 00:14:07,540 --> 00:14:12,570 how this person was grabbing hands and codes and such. 266 00:14:12,570 --> 00:14:16,730 >> So that's all you can find at developer.leapmotion.com. 267 00:14:16,730 --> 00:14:20,810 You can go and check out JavaScript examples that they have there. 268 00:14:20,810 --> 00:14:23,280 So yeah. 269 00:14:23,280 --> 00:14:25,205 Here are these, oops sorry. 270 00:14:25,205 --> 00:14:27,680 Let's try that again. 271 00:14:27,680 --> 00:14:29,002 Oh. 272 00:14:29,002 --> 00:14:29,960 I have two right hands. 273 00:14:29,960 --> 00:14:32,540 274 00:14:32,540 --> 00:14:34,380 So yeah. 275 00:14:34,380 --> 00:14:37,440 >> TOMAS REIMERS: So and again, remember sometimes Leap messes up. 276 00:14:37,440 --> 00:14:40,790 Just give it a second. 277 00:14:40,790 --> 00:14:42,784 It's not perfect, but it's pretty good. 278 00:14:42,784 --> 00:14:44,700 ARMAGHAN BEHLUM: One other recommendation also 279 00:14:44,700 --> 00:14:48,780 is to not do it in direct sunlight. 280 00:14:48,780 --> 00:14:51,260 So the way Leap Motion works is, actually 281 00:14:51,260 --> 00:14:54,500 if I show the camera this as well, infrared light. 282 00:14:54,500 --> 00:14:57,375 So it sends those out and then reads them when they come back. 283 00:14:57,375 --> 00:14:59,250 So if you're trying to do it direct sunlight, 284 00:14:59,250 --> 00:15:01,610 for example, it's probably not going to work, 285 00:15:01,610 --> 00:15:05,850 or it's going to require some calibration to do so. 286 00:15:05,850 --> 00:15:10,450 >> Also another recommendation is to clear the space behind the Leap 287 00:15:10,450 --> 00:15:12,740 and in front of Leap. 288 00:15:12,740 --> 00:15:15,520 Think of it as working inside of a dome that's 289 00:15:15,520 --> 00:15:18,360 surrounding this Leap Motion object. 290 00:15:18,360 --> 00:15:20,550 If there's stuff right behind it as well, 291 00:15:20,550 --> 00:15:24,740 that's also going to interfere with how the Leap Motion's trying 292 00:15:24,740 --> 00:15:26,690 to recognize your hand and that type of stuff. 293 00:15:26,690 --> 00:15:30,010 >> So, for example, I think in this case it's my laptop actually 294 00:15:30,010 --> 00:15:34,351 that's kind of making the Leap Motion. 295 00:15:34,351 --> 00:15:35,100 Yeah, there we go. 296 00:15:35,100 --> 00:15:41,021 So if I clear out my laptop from behind it the hand show up pretty well. 297 00:15:41,021 --> 00:15:41,520 So yeah. 298 00:15:41,520 --> 00:15:42,061 There's that. 299 00:15:42,061 --> 00:15:44,650 300 00:15:44,650 --> 00:15:46,417 So what else did we show them. 301 00:15:46,417 --> 00:15:48,250 TOMAS REIMERS: I think now would be the time 302 00:15:48,250 --> 00:15:52,039 to sort of dive into and let's just make a demo totally from scratch. 303 00:15:52,039 --> 00:15:53,330 It's going to be really simple. 304 00:15:53,330 --> 00:15:55,250 Basically what we're going to try to do is make it 305 00:15:55,250 --> 00:15:58,570 so that when you swipe your hand, the background's going to start out as red, 306 00:15:58,570 --> 00:16:01,361 and when you swipe your hand, the background's going to turn green. 307 00:16:01,361 --> 00:16:01,970 OK? 308 00:16:01,970 --> 00:16:03,709 Really simple. 309 00:16:03,709 --> 00:16:05,750 And it's basically just going to go through a lot 310 00:16:05,750 --> 00:16:08,360 of the concepts behind Leap so that we can 311 00:16:08,360 --> 00:16:12,630 get into this ideology of how Leap works and how we can build stuff with that. 312 00:16:12,630 --> 00:16:16,760 And then from there we'll probably just show you 313 00:16:16,760 --> 00:16:19,710 the API Docs and where you can read more about this. 314 00:16:19,710 --> 00:16:21,030 And then we'll call it day. 315 00:16:21,030 --> 00:16:24,294 So do you want to code or do you want me to code? 316 00:16:24,294 --> 00:16:25,210 ARMAGHAN BEHLUM: Yeah. 317 00:16:25,210 --> 00:16:28,350 Well, I guess we can work together on this and try 318 00:16:28,350 --> 00:16:30,292 >> TOMAS REIMERS: So we'll do some pair coding. 319 00:16:30,292 --> 00:16:31,500 ARMAGHAN BEHLUM: There we go. 320 00:16:31,500 --> 00:16:33,250 That's exactly what I wanted to check out. 321 00:16:33,250 --> 00:16:34,700 Cool. 322 00:16:34,700 --> 00:16:38,750 So for example in here, let's see. 323 00:16:38,750 --> 00:16:40,979 While we are iterating through the gestures already, 324 00:16:40,979 --> 00:16:43,270 TOMAS REIMERS: Want to make just a completely new file? 325 00:16:43,270 --> 00:16:43,870 ARMAGHAN BEHLUM: Completely new file? 326 00:16:43,870 --> 00:16:44,246 Yeah, sure. 327 00:16:44,246 --> 00:16:45,000 >> TOMAS REIMERS: Yeah. 328 00:16:45,000 --> 00:16:45,920 >> ARMAGHAN BEHLUM: So let's do that. 329 00:16:45,920 --> 00:16:48,253 >> TOMAS REIMERS: So we're going to make a completely file. 330 00:16:48,253 --> 00:16:51,290 We'll call it hand dot HTML. 331 00:16:51,290 --> 00:16:52,670 That's cool with me. 332 00:16:52,670 --> 00:16:59,020 So remember you do an HTML tag, then within that you have a head. 333 00:16:59,020 --> 00:17:02,982 That head has a title within it. 334 00:17:02,982 --> 00:17:04,349 So tab the other way. 335 00:17:04,349 --> 00:17:05,589 There you go. 336 00:17:05,589 --> 00:17:09,359 Title, we'll call it Leap Example. 337 00:17:09,359 --> 00:17:12,163 Yep. 338 00:17:12,163 --> 00:17:13,540 >> ARMAGHAN BEHLUM: Oops. 339 00:17:13,540 --> 00:17:14,040 Title. 340 00:17:14,040 --> 00:17:14,474 >> TOMAS REIMERS: Yep. 341 00:17:14,474 --> 00:17:15,776 >> ARMAGHAN BEHLUM: There we are. 342 00:17:15,776 --> 00:17:18,180 >> TOMAS REIMERS: And then let's make a body. 343 00:17:18,180 --> 00:17:20,852 >> ARMAGHAN BEHLUM: Wait, let's also make sure to import. 344 00:17:20,852 --> 00:17:22,060 TOMAS REIMERS: Oh, of course. 345 00:17:22,060 --> 00:17:22,560 My bad. 346 00:17:22,560 --> 00:17:28,700 So always make sure you have the Leap script so that's a script given to you 347 00:17:28,700 --> 00:17:31,810 by Leap Motion which basically allows the web browser to connect 348 00:17:31,810 --> 00:17:35,580 to the device on the user's computer. 349 00:17:35,580 --> 00:17:38,510 And then in this we also need a body and let's just 350 00:17:38,510 --> 00:17:40,580 make the body say hi so that we can show students 351 00:17:40,580 --> 00:17:42,704 how to connect to this new web page that they made. 352 00:17:42,704 --> 00:17:44,260 ARMAGHAN BEHLUM: Sure. 353 00:17:44,260 --> 00:17:45,724 So let's just put another-- 354 00:17:45,724 --> 00:17:48,730 >> TOMAS REIMERS: Hi, hello world. 355 00:17:48,730 --> 00:17:50,210 So a very basic example. 356 00:17:50,210 --> 00:17:53,400 Really just a demo. 357 00:17:53,400 --> 00:17:58,505 >> ARMAGHAN BEHLUM: And then in here we can go to, we called it hand dot HTML, 358 00:17:58,505 --> 00:18:00,000 right? 359 00:18:00,000 --> 00:18:00,810 And oh! 360 00:18:00,810 --> 00:18:04,310 So I wonder what's wrong with this right now. 361 00:18:04,310 --> 00:18:07,639 Let's add read permissions to hand dot HTML. 362 00:18:07,639 --> 00:18:09,930 TOMAS REIMERS: Do you want to do it in the big terminal 363 00:18:09,930 --> 00:18:11,080 so that we can just show it on the-- 364 00:18:11,080 --> 00:18:12,501 >> ARMAGHAN BEHLUM: Yeah, that makes sense. 365 00:18:12,501 --> 00:18:13,001 All right. 366 00:18:13,001 --> 00:18:15,720 So I just added the permissions, but if we 367 00:18:15,720 --> 00:18:18,350 were to check out the permissions before we 368 00:18:18,350 --> 00:18:22,560 would have seen that actually hand dot HTML didn't have read permissions 369 00:18:22,560 --> 00:18:25,570 and therefore we couldn't render it. 370 00:18:25,570 --> 00:18:30,850 But now if we do so, we see our little hello world right there. 371 00:18:30,850 --> 00:18:33,580 >> TOMAS REIMERS: So let's actually, as he was writing, hello world, 372 00:18:33,580 --> 00:18:35,371 I thought about a way we could change this. 373 00:18:35,371 --> 00:18:41,150 Let's make it say hello world, and then when you wave, it says goodbye. 374 00:18:41,150 --> 00:18:41,650 Right? 375 00:18:41,650 --> 00:18:42,210 So hello, goodbye. 376 00:18:42,210 --> 00:18:42,560 >> ARMAGHAN BEHLUM: Sure. 377 00:18:42,560 --> 00:18:44,010 >> TOMAS REIMERS: That sounds pretty good. 378 00:18:44,010 --> 00:18:45,120 >> ARMAGHAN BEHLUM: That sounds good to me, too. 379 00:18:45,120 --> 00:18:46,920 >> TOMAS REIMERS: So if we're going to do that let's just 380 00:18:46,920 --> 00:18:48,980 think through the web page a little bit. 381 00:18:48,980 --> 00:18:51,800 We're going to need some script which basically registers 382 00:18:51,800 --> 00:18:56,470 that you waved and to a Leap, a wave and a swipe, same thing. 383 00:18:56,470 --> 00:18:59,584 So we're going to need a script that basically registers for that swipe. 384 00:18:59,584 --> 00:19:01,500 And another thing we're going to need is we're 385 00:19:01,500 --> 00:19:04,360 going to need some actual content to change. 386 00:19:04,360 --> 00:19:07,850 >> So as you remember, jQuery allows you to change content. 387 00:19:07,850 --> 00:19:13,017 So one thing we might want to include in this is the jQuery library. 388 00:19:13,017 --> 00:19:16,100 And then to be able to select what we're actually going to change content, 389 00:19:16,100 --> 00:19:18,224 that's going to need an ID or a class, or something 390 00:19:18,224 --> 00:19:20,100 that we can use to select it. 391 00:19:20,100 --> 00:19:25,010 So we'll just give it a quick ID of change text. 392 00:19:25,010 --> 00:19:26,974 And then do you want to grab jQuery? 393 00:19:26,974 --> 00:19:29,890 ARMAGHAN BEHLUM: So what's the first thing on our to do list then now? 394 00:19:29,890 --> 00:19:30,620 TOMAS REIMERS: Let's grab jQuery? 395 00:19:30,620 --> 00:19:32,494 ARMAGHAN BEHLUM: Let's grab jQuery, OK, cool. 396 00:19:32,494 --> 00:19:34,502 In that case, I'm going to have to actually-- 397 00:19:34,502 --> 00:19:36,210 where would be the best place to do that? 398 00:19:36,210 --> 00:19:39,677 >> TOMAS REIMERS: jQuery, so if you Google jQuery, hit jQuery, the first 399 00:19:39,677 --> 00:19:41,010 ARMAGHAN BEHLUM: Very first one. 400 00:19:41,010 --> 00:19:42,135 TOMAS REIMERS: Or download. 401 00:19:42,135 --> 00:19:42,650 It's fine. 402 00:19:42,650 --> 00:19:46,482 Hit download v1 and v2 on the left. 403 00:19:46,482 --> 00:19:49,190 So we're describing jQuery from online like you've probably done. 404 00:19:49,190 --> 00:19:50,440 Scroll down. 405 00:19:50,440 --> 00:19:51,260 Up, up. 406 00:19:51,260 --> 00:19:53,502 >> ARMAGHAN BEHLUM: Oh, right here now? 407 00:19:53,502 --> 00:19:54,460 TOMAS REIMERS: Or that. 408 00:19:54,460 --> 00:19:54,960 Yep. 409 00:19:54,960 --> 00:20:00,150 So jQuery has a hosted version which means that you don't actually 410 00:20:00,150 --> 00:20:01,890 need to download it, but you're more than 411 00:20:01,890 --> 00:20:07,734 welcome to download it and host it yourself. 412 00:20:07,734 --> 00:20:08,650 ARMAGHAN BEHLUM: Cool. 413 00:20:08,650 --> 00:20:09,566 So now we have jQuery. 414 00:20:09,566 --> 00:20:11,122 Now what's next on our to do list. 415 00:20:11,122 --> 00:20:12,080 TOMAS REIMERS: Awesome. 416 00:20:12,080 --> 00:20:13,910 So next what we need do is we actually need 417 00:20:13,910 --> 00:20:17,750 to give p hello world an ID so we can change it, right? 418 00:20:17,750 --> 00:20:24,514 So let's give an idea of, I don't know, change text? 419 00:20:24,514 --> 00:20:26,680 ARMAGHAN BEHLUM: Let's just do it this way, I guess. 420 00:20:26,680 --> 00:20:28,013 TOMAS REIMERS: changeText, cool. 421 00:20:28,013 --> 00:20:29,830 And now let's just refresh the page. 422 00:20:29,830 --> 00:20:31,142 Make sure everything works. 423 00:20:31,142 --> 00:20:32,100 So back in the browser. 424 00:20:32,100 --> 00:20:35,820 425 00:20:35,820 --> 00:20:36,922 Cool. 426 00:20:36,922 --> 00:20:39,380 Always a good reminder that when you're building a website, 427 00:20:39,380 --> 00:20:44,450 probably refresh every time you make any somewhat significant change just 428 00:20:44,450 --> 00:20:47,993 because sometimes you accidentally drop a tag, 429 00:20:47,993 --> 00:20:51,640 or you accidentally delete something, and then you break something small, 430 00:20:51,640 --> 00:20:55,880 but then when you make a bigger change you're like, why did this big change 431 00:20:55,880 --> 00:20:57,910 seemingly break the unrelated thing. 432 00:20:57,910 --> 00:21:02,840 So it's always good to sort of go and do those sanity checks. 433 00:21:02,840 --> 00:21:05,610 >> Anyway so now let's do one last sanity check, 434 00:21:05,610 --> 00:21:09,800 which is let's try to change text without Leap Motion, 435 00:21:09,800 --> 00:21:11,820 without anything, just on the page load it'll 436 00:21:11,820 --> 00:21:17,140 change hello world to goodbye using jQuery. 437 00:21:17,140 --> 00:21:21,400 So if you remember jQuery exposes this dollar sign function, 438 00:21:21,400 --> 00:21:28,640 which we can pass CSS selector to, namely hashtag change text, which 439 00:21:28,640 --> 00:21:31,590 selects the element with an ID of change text. 440 00:21:31,590 --> 00:21:34,980 And then we're going to call the method HTML 441 00:21:34,980 --> 00:21:40,390 on the object it returns with the argument of a string goodbye, which 442 00:21:40,390 --> 00:21:45,600 will change the items HTML to say goodbye. 443 00:21:45,600 --> 00:21:46,210 Awesome. 444 00:21:46,210 --> 00:21:48,790 That seems pretty cool. 445 00:21:48,790 --> 00:21:52,365 And now when we refresh the page we're going to see 446 00:21:52,365 --> 00:21:54,040 it instantly changes to goodbye, right? 447 00:21:54,040 --> 00:21:55,910 Because it doesn't wait for anything. 448 00:21:55,910 --> 00:21:59,200 Sort of as soon as that script runs it changes it to goodbye. 449 00:21:59,200 --> 00:22:00,430 Cool. 450 00:22:00,430 --> 00:22:03,790 >> So now let's wrap that in a function. 451 00:22:03,790 --> 00:22:04,290 Right. 452 00:22:04,290 --> 00:22:06,270 So we're going to want to make a function. 453 00:22:06,270 --> 00:22:08,160 We'll call it goodbye. 454 00:22:08,160 --> 00:22:11,570 So function goodbye is going to take no arguments 455 00:22:11,570 --> 00:22:14,170 and it's not really going to return anything. 456 00:22:14,170 --> 00:22:18,850 And it's just going to do that in JavaScript. 457 00:22:18,850 --> 00:22:22,240 458 00:22:22,240 --> 00:22:23,140 Excellent. 459 00:22:23,140 --> 00:22:27,000 So our function goodbye now changes the text to goodbye, right? 460 00:22:27,000 --> 00:22:28,930 So this gives us a way to basically change 461 00:22:28,930 --> 00:22:32,871 that text to goodbye whenever we called that function. 462 00:22:32,871 --> 00:22:33,370 Right? 463 00:22:33,370 --> 00:22:35,290 So this is pretty cool. 464 00:22:35,290 --> 00:22:37,430 >> ARMAGHAN BEHLUM: Well, we can also just make sure 465 00:22:37,430 --> 00:22:41,040 that now since we're not calling the function, if we refresh the page, 466 00:22:41,040 --> 00:22:44,460 notice it's not going to change the text. 467 00:22:44,460 --> 00:22:45,509 >> TOMAS REIMERS: Excellent. 468 00:22:45,509 --> 00:22:47,800 So now we're going to start to get into that Leap stuff 469 00:22:47,800 --> 00:22:49,880 that we were talking about. 470 00:22:49,880 --> 00:22:52,240 So Armi, do you want to take it from here or? 471 00:22:52,240 --> 00:22:52,640 >> ARMAGHAN BEHLUM: Yeah. 472 00:22:52,640 --> 00:22:53,139 Sure. 473 00:22:53,139 --> 00:22:56,260 I'm probably going to need to double check things, 474 00:22:56,260 --> 00:22:58,250 but for example remember we said we wanted 475 00:22:58,250 --> 00:23:02,627 to make sure in Options we set enable gestures 476 00:23:02,627 --> 00:23:03,710 TOMAS REIMERS: Good catch. 477 00:23:03,710 --> 00:23:06,250 ARMAGHAN BEHLUM: To be true. 478 00:23:06,250 --> 00:23:08,960 And then we were recommending that you guys would 479 00:23:08,960 --> 00:23:12,230 run leap dot loop, which as we said earlier, 480 00:23:12,230 --> 00:23:18,140 has two options, a JSON object that is the options for how you want 481 00:23:18,140 --> 00:23:22,030 to configure the Leap Motion to work, and then a function that's 482 00:23:22,030 --> 00:23:27,640 going to catch a frame as a callback function like Tomas was saying. 483 00:23:27,640 --> 00:23:30,470 And then edit what you want to do with that function. 484 00:23:30,470 --> 00:23:33,890 >> So we pass in the option and now we define 485 00:23:33,890 --> 00:23:36,117 a function that will take in a frame. 486 00:23:36,117 --> 00:23:38,200 And now we have to define what that function does. 487 00:23:38,200 --> 00:23:42,569 It's also for the sake of the future, do that to make sure. 488 00:23:42,569 --> 00:23:43,610 TOMAS REIMERS: Excellent. 489 00:23:43,610 --> 00:23:45,940 So now we have this leap dot loop function 490 00:23:45,940 --> 00:23:52,420 call which basically says watch Leap with these options and every time 491 00:23:52,420 --> 00:23:55,710 something changes, call this function frame with all of the data 492 00:23:55,710 --> 00:23:59,510 that you are aware of in frame. 493 00:23:59,510 --> 00:24:01,320 Sounds pretty good. 494 00:24:01,320 --> 00:24:03,680 So now quick sanity check, which I always recommend, 495 00:24:03,680 --> 00:24:07,020 is in that just put console dot log frame. 496 00:24:07,020 --> 00:24:10,320 And then in Chrome open it up and look at your console 497 00:24:10,320 --> 00:24:13,870 and play around with Leap to see the frames being logged because that will 498 00:24:13,870 --> 00:24:16,300 get you an idea of what data you have access to. 499 00:24:16,300 --> 00:24:20,680 And as always if you get confused, look up the API reference. 500 00:24:20,680 --> 00:24:23,430 And we'll include the link for that at the end of this. 501 00:24:23,430 --> 00:24:26,300 >> ARMAGHAN BEHLUM: So we refresh the page and then 502 00:24:26,300 --> 00:24:28,880 we go and open up the console again. 503 00:24:28,880 --> 00:24:33,590 And now we notice that we're having frames passed in, 504 00:24:33,590 --> 00:24:37,834 these little objects we saw earlier. 505 00:24:37,834 --> 00:24:38,690 So yeah. 506 00:24:38,690 --> 00:24:42,870 These are our frames showing up in the console. 507 00:24:42,870 --> 00:24:43,370 Cool. 508 00:24:43,370 --> 00:24:46,970 >> So now that we've grabbed the frames, as you might remember earlier 509 00:24:46,970 --> 00:24:51,800 from the example that we had, if we check frame dot gestures 510 00:24:51,800 --> 00:24:56,270 we get the list of gestures that the frame most recently caught. 511 00:24:56,270 --> 00:25:01,510 We can check the length of that array to see if Leap caught any gestures. 512 00:25:01,510 --> 00:25:05,010 So if that array is greater than zero then we 513 00:25:05,010 --> 00:25:07,570 know that we have some stuff to do. 514 00:25:07,570 --> 00:25:15,040 >> So let's wrap that up in an if condition and now in here what we know is we 515 00:25:15,040 --> 00:25:20,390 have seen a gesture, let's act on it. 516 00:25:20,390 --> 00:25:25,721 So now that we're in here we have a gesture to check out. 517 00:25:25,721 --> 00:25:28,470 TOMAS REIMERS: Well, the first thing is it's not just one gesture, 518 00:25:28,470 --> 00:25:29,840 it could be as many gestures. 519 00:25:29,840 --> 00:25:30,964 >> ARMAGHAN BEHLUM: Very true. 520 00:25:30,964 --> 00:25:33,340 TOMAS REIMERS: So per classic C style here 521 00:25:33,340 --> 00:25:36,334 we'll probably want to use a for loop. 522 00:25:36,334 --> 00:25:37,750 ARMAGHAN BEHLUM: Here we are then. 523 00:25:37,750 --> 00:25:42,870 We decided to iterate through the gestures. 524 00:25:42,870 --> 00:25:46,412 And let's see. 525 00:25:46,412 --> 00:25:49,380 i plus, plus. 526 00:25:49,380 --> 00:25:56,150 And now if we maybe made just a var gesture equals 527 00:25:56,150 --> 00:26:01,210 frame dot gestures bracket i, now we have 528 00:26:01,210 --> 00:26:06,260 gesture itself, which is just one single instance of a gesture object 529 00:26:06,260 --> 00:26:10,582 for us to work with inside of this for loop. 530 00:26:10,582 --> 00:26:12,869 All right. 531 00:26:12,869 --> 00:26:15,410 TOMAS REIMERS: Let's sanity check here again and just console 532 00:26:15,410 --> 00:26:17,370 dot log gesture to see what we get. 533 00:26:17,370 --> 00:26:19,410 >> ARMAGHAN BEHLUM: Console dot log gesture. 534 00:26:19,410 --> 00:26:22,900 535 00:26:22,900 --> 00:26:23,780 Okie dokie. 536 00:26:23,780 --> 00:26:26,250 And refresh one more time. 537 00:26:26,250 --> 00:26:30,030 >> TOMAS REIMERS: And let's try making a gesture. 538 00:26:30,030 --> 00:26:34,600 You'll see that a bunch of, when he swipes, 539 00:26:34,600 --> 00:26:39,780 you get a bunch of gestures in the console and if he tries to do a circle, 540 00:26:39,780 --> 00:26:40,470 it's just-- 541 00:26:40,470 --> 00:26:41,750 >> ARMAGHAN BEHLUM: Circles are just really nice. 542 00:26:41,750 --> 00:26:45,000 >> TOMAS REIMERS: Now there's a weird thing here, which is he's doing one circle, 543 00:26:45,000 --> 00:26:48,730 but this is logging 80 gestures, right? 544 00:26:48,730 --> 00:26:50,070 That's a lot of gestures. 545 00:26:50,070 --> 00:26:53,560 So the first sort of thing to realize, and this can be confusing, 546 00:26:53,560 --> 00:26:57,050 is that a gesture isn't just logged once. 547 00:26:57,050 --> 00:27:01,107 >> On every frame, right, so if I'm doing a circle 548 00:27:01,107 --> 00:27:02,940 Leap will detect this is a change, from this 549 00:27:02,940 --> 00:27:04,398 is a change, from this is a change. 550 00:27:04,398 --> 00:27:05,970 And it will log each one of those. 551 00:27:05,970 --> 00:27:08,200 But in each one of those, it's going to say, oh, 552 00:27:08,200 --> 00:27:10,050 there's a gesture currently in progress. 553 00:27:10,050 --> 00:27:14,260 So let me just say, hey, there's a gesture and it's currently in progress. 554 00:27:14,260 --> 00:27:17,000 So what we don't want to do is say, oh, on every one 555 00:27:17,000 --> 00:27:19,370 of those gestures you want to change text. 556 00:27:19,370 --> 00:27:23,660 What we want to do is when that gesture stops, and we can check for that, 557 00:27:23,660 --> 00:27:24,974 then we want to change text. 558 00:27:24,974 --> 00:27:25,890 ARMAGHAN BEHLUM: Mhmm. 559 00:27:25,890 --> 00:27:30,550 So like Tomas is explaining these gestures 560 00:27:30,550 --> 00:27:33,580 might appear through multiple frames, but for example, 561 00:27:33,580 --> 00:27:36,200 when we were having that circle, we can see 562 00:27:36,200 --> 00:27:40,140 that the ID for that one single circle that we 563 00:27:40,140 --> 00:27:43,950 might have been trying to complete was the same ID throughout. 564 00:27:43,950 --> 00:27:46,320 And in fact, you can also check out the status. 565 00:27:46,320 --> 00:27:49,500 566 00:27:49,500 --> 00:27:50,270 updated. 567 00:27:50,270 --> 00:27:55,680 >> And then this is probably the last circle that, oh, well, OK. 568 00:27:55,680 --> 00:28:00,480 So sometimes it shows you a status of stopping a gesture 569 00:28:00,480 --> 00:28:04,180 and it also shows you a status of starting a new gesture when 570 00:28:04,180 --> 00:28:09,140 it recognizes for sure that you've started a new gesture. 571 00:28:09,140 --> 00:28:10,637 For example in this case. 572 00:28:10,637 --> 00:28:11,470 TOMAS REIMERS: Cool. 573 00:28:11,470 --> 00:28:12,511 ARMAGHAN BEHLUM: So yeah. 574 00:28:12,511 --> 00:28:14,420 And then, let's see. 575 00:28:14,420 --> 00:28:16,490 You can also notice though we were making 576 00:28:16,490 --> 00:28:22,179 a circle and gesture has a field called type 577 00:28:22,179 --> 00:28:23,970 that tells us what kind of gesture that is. 578 00:28:23,970 --> 00:28:27,829 So that might be useful for us you try and do what we're doing. 579 00:28:27,829 --> 00:28:29,620 TOMAS REIMERS: So transitioning back to JS, 580 00:28:29,620 --> 00:28:31,696 the first thing that occurs to me also, just reading through this code 581 00:28:31,696 --> 00:28:34,340 is there's a small optimization, which is we actually 582 00:28:34,340 --> 00:28:35,980 don't need this if condition, right? 583 00:28:35,980 --> 00:28:39,330 Because if frame dot gestures dot length is zero, that for loop's 584 00:28:39,330 --> 00:28:40,450 not going to run anyway. 585 00:28:40,450 --> 00:28:43,100 So we may as well just go ahead and get rid of that. 586 00:28:43,100 --> 00:28:46,620 Again, while you're writing code it's important to go back and sort 587 00:28:46,620 --> 00:28:50,330 of refactor as you realize that you could have done something better, 588 00:28:50,330 --> 00:28:53,370 or that there is another way to do that. 589 00:28:53,370 --> 00:28:57,170 So now we're just going to clean this up quickly and also clean up your code. 590 00:28:57,170 --> 00:28:58,310 That's a big deal. 591 00:28:58,310 --> 00:28:59,870 >> ARMAGHAN BEHLUM: Good style is very appreciated. 592 00:28:59,870 --> 00:29:01,828 >> TOMAS REIMERS: You can always tell when someone 593 00:29:01,828 --> 00:29:05,240 has code where there used to be an if condition and then they removed it, 594 00:29:05,240 --> 00:29:07,530 but they didn't uncomment it. 595 00:29:07,530 --> 00:29:10,147 It's very obvious and it kind of looks ugly. 596 00:29:10,147 --> 00:29:12,230 ARMAGHAN BEHLUM: So what's next on our to do list? 597 00:29:12,230 --> 00:29:15,479 TOMAS REIMERS: So now as we were saying, I guess the first thing we want to do 598 00:29:15,479 --> 00:29:17,970 is make sure that that gesture's actually a swipe, right? 599 00:29:17,970 --> 00:29:18,270 >> ARMAGHAN BEHLUM: Yeah. 600 00:29:18,270 --> 00:29:21,750 >> TOMAS REIMERS: So if we're saying that our goodbye is kind of like a swipe, 601 00:29:21,750 --> 00:29:25,280 we'll go with it's a swipe, the first thing we need to say is, hey, 602 00:29:25,280 --> 00:29:27,410 is the gesture type a swipe, right? 603 00:29:27,410 --> 00:29:30,860 Not a circle or a top, but is it a swipe? 604 00:29:30,860 --> 00:29:34,280 So the way we can do that is we can say gesture 605 00:29:34,280 --> 00:29:38,530 dot type equal equal swipe as a string. 606 00:29:38,530 --> 00:29:44,030 >> ARMAGHAN BEHLUM: [INAUDIBLE] gesture dot type equals equals swipe. 607 00:29:44,030 --> 00:29:46,790 608 00:29:46,790 --> 00:29:47,730 There we are. 609 00:29:47,730 --> 00:29:49,438 >> TOMAS REIMERS: And then the last question 610 00:29:49,438 --> 00:29:53,170 we want to see is gesture dot state equal equal stop, right? 611 00:29:53,170 --> 00:29:55,860 So that's when the gesture's been stopped. 612 00:29:55,860 --> 00:29:58,490 I actually think for swipe, I know this off the top of my head, 613 00:29:58,490 --> 00:30:00,340 but you're welcome to look it up, when you 614 00:30:00,340 --> 00:30:05,627 swipe every time it registers it until you stop is a start gesture. 615 00:30:05,627 --> 00:30:07,460 And then the last one's just a stop gesture. 616 00:30:07,460 --> 00:30:11,090 So there will only be one stop gesture, which is great for us. 617 00:30:11,090 --> 00:30:17,180 So what we can do is say if gesture dot type equal equal swipe and gesture dot 618 00:30:17,180 --> 00:30:19,950 status equal equal stop, then let's sanity 619 00:30:19,950 --> 00:30:21,725 check here console dot log gesture. 620 00:30:21,725 --> 00:30:29,420 621 00:30:29,420 --> 00:30:30,790 >> So we'll go back here. 622 00:30:30,790 --> 00:30:33,570 We'll refresh the page. 623 00:30:33,570 --> 00:30:38,380 And now the only time something should be console dot logged is when we swipe. 624 00:30:38,380 --> 00:30:40,780 And we try to swipe and we see nothing. 625 00:30:40,780 --> 00:30:41,280 Right? 626 00:30:41,280 --> 00:30:43,990 So this is actually a big issue. 627 00:30:43,990 --> 00:30:47,560 We're not seeing what we expected to. 628 00:30:47,560 --> 00:30:49,356 And debugging can be a big part of this. 629 00:30:49,356 --> 00:30:51,980 So the first thing we're going to say is, OK, let's console dot 630 00:30:51,980 --> 00:30:54,568 log it if gesture dot type equal equal swipe. 631 00:30:54,568 --> 00:30:56,109 ARMAGHAN BEHLUM: Yeah, let's do that. 632 00:30:56,109 --> 00:30:59,979 633 00:30:59,979 --> 00:31:02,020 TOMAS REIMERS: So we're going to go back to this. 634 00:31:02,020 --> 00:31:03,140 We'll refresh. 635 00:31:03,140 --> 00:31:04,020 We'll swipe. 636 00:31:04,020 --> 00:31:05,150 And we're going to see a bunch of them. 637 00:31:05,150 --> 00:31:05,650 OK. 638 00:31:05,650 --> 00:31:08,710 So clearly the problem was with our gesture dot status. 639 00:31:08,710 --> 00:31:14,000 So if we open up one of these we'll look in the objects and we'll see, 640 00:31:14,000 --> 00:31:18,700 well, it's a stop, but, oh, it's called state, not status. 641 00:31:18,700 --> 00:31:21,890 So if we head back to our code we can say 642 00:31:21,890 --> 00:31:27,780 if gesture dot type equal equal swipe and gesture dot state equal equal stop, 643 00:31:27,780 --> 00:31:29,160 then we'll console dot log it. 644 00:31:29,160 --> 00:31:30,940 And so refresh. 645 00:31:30,940 --> 00:31:31,856 We swipe. 646 00:31:31,856 --> 00:31:33,730 And we'll see that on every swipe, we're only 647 00:31:33,730 --> 00:31:36,247 getting one, which is the end, which is great, right? 648 00:31:36,247 --> 00:31:37,080 That's what we want. 649 00:31:37,080 --> 00:31:37,955 >> ARMAGHAN BEHLUM: Yep. 650 00:31:37,955 --> 00:31:42,640 And we can also notice that the IDs for each of these gestures are separate. 651 00:31:42,640 --> 00:31:47,470 So as Tomas was saying because we're catching this one stop state that 652 00:31:47,470 --> 00:31:52,850 exists at the end of a swipe, we're getting individual separate gestures 653 00:31:52,850 --> 00:31:54,441 from Leap Motion. 654 00:31:54,441 --> 00:31:54,940 Great. 655 00:31:54,940 --> 00:31:58,610 656 00:31:58,610 --> 00:32:03,040 >> TOMAS REIMERS: Let's go ahead and just do the final thing, which is, 657 00:32:03,040 --> 00:32:04,826 >> ARMAGHAN BEHLUM: Goodbye. 658 00:32:04,826 --> 00:32:06,425 >> TOMAS REIMERS: Awesome. 659 00:32:06,425 --> 00:32:08,925 And now let's check out our website. 660 00:32:08,925 --> 00:32:09,425 One 661 00:32:09,425 --> 00:32:09,730 >> ARMAGHAN BEHLUM: Second. 662 00:32:09,730 --> 00:32:11,271 We did, yeah, we did call it Goodbye. 663 00:32:11,271 --> 00:32:11,920 Great. 664 00:32:11,920 --> 00:32:13,490 >> TOMAS REIMERS: No, Goodbye is a real function. 665 00:32:13,490 --> 00:32:14,406 >> ARMAGHAN BEHLUM: Yeah. 666 00:32:14,406 --> 00:32:15,670 Let's do that. 667 00:32:15,670 --> 00:32:20,566 >> TOMAS REIMERS: And when we wave goodbye, it says goodbye. 668 00:32:20,566 --> 00:32:22,360 >> ARMAGHAN BEHLUM: We have victory. 669 00:32:22,360 --> 00:32:25,632 >> TOMAS REIMERS: So pretty exciting stuff. 670 00:32:25,632 --> 00:32:28,590 Hopefully you can build something else, but you get the idea of, right? 671 00:32:28,590 --> 00:32:30,260 You can detect gestures. 672 00:32:30,260 --> 00:32:31,469 You can call functions. 673 00:32:31,469 --> 00:32:34,510 And from that that really gives you some very fundamental building blocks 674 00:32:34,510 --> 00:32:38,800 to say, oh, maybe when they swipe up, because you can also detect things 675 00:32:38,800 --> 00:32:39,674 like direction. 676 00:32:39,674 --> 00:32:40,840 I want them to do something. 677 00:32:40,840 --> 00:32:43,470 Or when they swipe right, I want them to do something. 678 00:32:43,470 --> 00:32:45,880 And we can start to get creative with how exactly 679 00:32:45,880 --> 00:32:48,840 we're going to improve our website using these swipe gestures or circle 680 00:32:48,840 --> 00:32:53,695 gestures, or tap gestures, either key taps or screen taps. 681 00:32:53,695 --> 00:32:56,070 And then other than that you're more than welcome to play 682 00:32:56,070 --> 00:32:59,640 with the actual data, but if you want to do 683 00:32:59,640 --> 00:33:03,870 that we would suggest you go to the docs because they're actually really good. 684 00:33:03,870 --> 00:33:05,034 So headed to the docs now. 685 00:33:05,034 --> 00:33:06,450 Or do you want to talk about that? 686 00:33:06,450 --> 00:33:06,940 >> ARMAGHAN BEHLUM: Yeah. 687 00:33:06,940 --> 00:33:07,920 Let's do that. 688 00:33:07,920 --> 00:33:13,680 Also one other tidbit of advice, do try and think of this in 3D. 689 00:33:13,680 --> 00:33:22,611 So actually let's pull up those gestures one more time console dot log gesture 690 00:33:22,611 --> 00:33:24,290 and we do that. 691 00:33:24,290 --> 00:33:29,460 Come back in and now let's try a couple of these, couple of those. 692 00:33:29,460 --> 00:33:32,940 >> If we go in and check out these gestures as well 693 00:33:32,940 --> 00:33:36,830 as you can see that they're dimensionality 694 00:33:36,830 --> 00:33:38,980 is in three directions, actually. 695 00:33:38,980 --> 00:33:42,500 So don't just limit yourself to a 2D screen 696 00:33:42,500 --> 00:33:45,200 even though you might be on a 2D website. 697 00:33:45,200 --> 00:33:49,152 You can try and think how a user might interact with the website in 3D. 698 00:33:49,152 --> 00:33:50,360 TOMAS REIMERS: In a 3D space. 699 00:33:50,360 --> 00:33:51,401 ARMAGHAN BEHLUM: Exactly. 700 00:33:51,401 --> 00:33:52,310 And yeah. 701 00:33:52,310 --> 00:33:55,350 So you get directions, velocities, all these cool bits of information. 702 00:33:55,350 --> 00:33:58,890 >> TOMAS REIMERS: And if you're not familiar with that, it goes x, y, 703 00:33:58,890 --> 00:34:01,566 and then z is this last dimension. 704 00:34:01,566 --> 00:34:04,690 Just something which you probably are familiar with if you've dealt with 3D 705 00:34:04,690 --> 00:34:05,731 coordinate planes before. 706 00:34:05,731 --> 00:34:09,565 If you haven't, it's the same as a 2D one except there's a third dimension. 707 00:34:09,565 --> 00:34:11,420 We call it z. 708 00:34:11,420 --> 00:34:16,449 And everything, sort of like direction, which is where it's going, 709 00:34:16,449 --> 00:34:19,810 position-- I think it might even expose acceleration, I'm not sure. 710 00:34:19,810 --> 00:34:21,341 >> ARMAGHAN BEHLUM: Yeah, I believe. 711 00:34:21,341 --> 00:34:22,340 It definitely has speed. 712 00:34:22,340 --> 00:34:25,699 I'm actually not 100% sure about acceleration. 713 00:34:25,699 --> 00:34:28,810 >> TOMAS REIMERS: It may be an option you can pass on to something. 714 00:34:28,810 --> 00:34:33,409 So position and speed are exposed in these sort of three coordinates. 715 00:34:33,409 --> 00:34:38,812 So x, y, z or delta x, delta y, delta z. 716 00:34:38,812 --> 00:34:44,130 So now headed to the documentation it's developer.leapmotion.com 717 00:34:44,130 --> 00:34:46,460 and then you can click Documentation. 718 00:34:46,460 --> 00:34:50,010 Again, Leap Motion has all these wonderful APIs, one for JavaScript, 719 00:34:50,010 --> 00:34:53,750 one for C Sharp and Unity, one for C++, one for Java, one for Python, 720 00:34:53,750 --> 00:34:59,020 and one for Objective C. I personally would push you towards JavaScript 721 00:34:59,020 --> 00:35:01,280 or if you want to learn a new language, try Python. 722 00:35:01,280 --> 00:35:05,910 Both of those languages I've worked with before and they're really easy to learn 723 00:35:05,910 --> 00:35:10,250 and you already know JavaScript, which makes it a really good contender. 724 00:35:10,250 --> 00:35:12,930 >> One word of caution when you enter the docs. 725 00:35:12,930 --> 00:35:15,940 Make sure you're on Docs v2.0. 726 00:35:15,940 --> 00:35:20,250 Because if you're on version one, it won't work. 727 00:35:20,250 --> 00:35:21,830 Also for the example gallery. 728 00:35:21,830 --> 00:35:25,100 We spent a good 30 minutes trying the debug our Leap 729 00:35:25,100 --> 00:35:28,640 before we realized that V1 doesn't work with V2. 730 00:35:28,640 --> 00:35:31,660 So just make sure you're on version two. 731 00:35:31,660 --> 00:35:33,904 And then I'll let him show your the docs. 732 00:35:33,904 --> 00:35:34,820 ARMAGHAN BEHLUM: Yeah. 733 00:35:34,820 --> 00:35:39,480 So here's the API overview and then some bits and pieces of the information 734 00:35:39,480 --> 00:35:41,420 that we've already told you. 735 00:35:41,420 --> 00:35:44,270 Nice little floating hands above a Leap Motion. 736 00:35:44,270 --> 00:35:47,850 And a reminder to think about space in 3D. 737 00:35:47,850 --> 00:35:53,140 One of the first objects to think about with Leap Motion are hands, of course. 738 00:35:53,140 --> 00:35:57,060 We saw those recognized by the Visualizer. 739 00:35:57,060 --> 00:35:59,180 And then you might have seen that it recognized 740 00:35:59,180 --> 00:36:03,202 part of the wrist and the arm associated with it. 741 00:36:03,202 --> 00:36:05,410 TOMAS REIMERS: If you want to pull up the Visualizer. 742 00:36:05,410 --> 00:36:07,190 ARMAGHAN BEHLUM: Yeah, let's do that again. 743 00:36:07,190 --> 00:36:10,148 TOMAS REIMERS: You can see, always just a good reminder to sort of see, 744 00:36:10,148 --> 00:36:14,060 the Visualizer tries to show all the data that Leap sees. 745 00:36:14,060 --> 00:36:17,606 So you'll see that we have these sort of four points 746 00:36:17,606 --> 00:36:19,230 by the wrist and then the actual wrist. 747 00:36:19,230 --> 00:36:21,625 And you also have this ball at the palm. 748 00:36:21,625 --> 00:36:24,000 All of these are points recognize recognized by the leap. 749 00:36:24,000 --> 00:36:25,041 >> ARMAGHAN BEHLUM: Exactly. 750 00:36:25,041 --> 00:36:32,300 And so with that hand object each frame has a hand array 751 00:36:32,300 --> 00:36:36,470 as well where you can also get the left and the right hands. 752 00:36:36,470 --> 00:36:39,410 You can get which direction the hands are 753 00:36:39,410 --> 00:36:42,410 facing with the normal direction of the palm, 754 00:36:42,410 --> 00:36:45,470 or as they call it the palm normal. 755 00:36:45,470 --> 00:36:46,510 What else do we have? 756 00:36:46,510 --> 00:36:48,120 We also, oops. 757 00:36:48,120 --> 00:36:50,640 Let's try and scroll down this way. 758 00:36:50,640 --> 00:36:54,410 The arms, the fingers are represented by the finger 759 00:36:54,410 --> 00:36:57,890 class, which is a pointable object. 760 00:36:57,890 --> 00:37:01,420 So like we were saying, we saw that array of pointables for each hand. 761 00:37:01,420 --> 00:37:04,240 Those are the little fingers to think about. 762 00:37:04,240 --> 00:37:09,809 So this is a good overview to go through to try and understand. 763 00:37:09,809 --> 00:37:11,850 TOMAS REIMERS: [INAUDIBLE] hand anatomy up there. 764 00:37:11,850 --> 00:37:13,680 ARMAGHAN BEHLUM: Yeah, exactly. 765 00:37:13,680 --> 00:37:14,220 So yeah. 766 00:37:14,220 --> 00:37:18,150 There's a lot of raw data that the Leap Motion takes in interprets well 767 00:37:18,150 --> 00:37:20,750 for you, so it's a great idea to go through here 768 00:37:20,750 --> 00:37:25,300 and try and figure out how Leap has already figured things out for you 769 00:37:25,300 --> 00:37:28,830 and so what information you have available from there. 770 00:37:28,830 --> 00:37:33,150 And then from there I would recommend going into this left section over here, 771 00:37:33,150 --> 00:37:39,210 which goes, well actually no, those are actually just more API stuff about-- 772 00:37:39,210 --> 00:37:42,670 >> TOMAS REIMERS: The API reference at the bottom is usually a good place to go. 773 00:37:42,670 --> 00:37:45,720 You guys probably saw this when we did the Google Maps PSET. 774 00:37:45,720 --> 00:37:48,590 But the reference really just goes through all 775 00:37:48,590 --> 00:37:54,540 of the functions and parameters available in the object to you. 776 00:37:54,540 --> 00:37:55,500 >> ARMAGHAN BEHLUM: Yeah. 777 00:37:55,500 --> 00:37:57,740 For example, this is what I was looking for before. 778 00:37:57,740 --> 00:38:01,030 When we have a hand we can go and figure out 779 00:38:01,030 --> 00:38:03,750 how Leap recommends to us to find a hand. 780 00:38:03,750 --> 00:38:06,080 Like I said earlier, we have a hands array. 781 00:38:06,080 --> 00:38:10,340 Find out if we have hands and then try and grab a single hand 782 00:38:10,340 --> 00:38:12,410 to interact with in that way. 783 00:38:12,410 --> 00:38:16,540 So that's what we recommend for you guys. 784 00:38:16,540 --> 00:38:18,400 The gestures and stuff as well. 785 00:38:18,400 --> 00:38:23,857 This API documentation is going to be a fantastic tool for you guys. 786 00:38:23,857 --> 00:38:25,440 Do you have any other recommendations? 787 00:38:25,440 --> 00:38:26,398 >> TOMAS REIMERS: I don't. 788 00:38:26,398 --> 00:38:27,590 I think that's good for now. 789 00:38:27,590 --> 00:38:29,340 >> ARMAGHAN BEHLUM: Yeah, I think so as well. 790 00:38:29,340 --> 00:38:33,330 Feel free to email us and get in touch about Leap Motion 791 00:38:33,330 --> 00:38:36,210 if you're having maybe any issues or need any recommendations. 792 00:38:36,210 --> 00:38:40,310 And we can try and figure stuff out with you guys as well. 793 00:38:40,310 --> 00:38:40,810 Thank you. 794 00:38:40,810 --> 00:38:42,360 >> TOMAS REIMERS: Great. 795 00:38:42,360 --> 00:38:42,880