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 Alors salut, tout le monde. 4 00:00:13,230 --> 00:00:14,300 Tomas de mon nom. 5 00:00:14,300 --> 00:00:15,744 Je suis un TF et ce est 6 00:00:15,744 --> 00:00:16,660 Armaghan BEHLUM: Armi. 7 00:00:16,660 --> 00:00:17,637 Ravi de vous voir les gars. 8 00:00:17,637 --> 00:00:18,470 TOMAS REIMERS: Cool. 9 00:00:18,470 --> 00:00:20,740 Nous allons donc parler à propos de Leap Motion aujourd'hui. 10 00:00:20,740 --> 00:00:22,800 Donc Leap Motion est un produit vraiment cool 11 00:00:22,800 --> 00:00:25,900 vous permet d'interagir avec un ordinateur d'une manière différente. 12 00:00:25,900 --> 00:00:28,560 Donc, l'idée derrière mouvement saut est que vous 13 00:00:28,560 --> 00:00:31,430 peut utiliser vos mains pour interagir avec l'ordinateur. 14 00:00:31,430 --> 00:00:33,610 Donc ici je ai quelque chose mis en place. 15 00:00:33,610 --> 00:00:34,790 Je vais en parler un peu. 16 00:00:34,790 --> 00:00:37,540 Mais la version de base vous est peut voir que je ai mes mains devant 17 00:00:37,540 --> 00:00:42,840 de mon ordinateur et quand je leur propose, vous obtenez l'analogique sur l'ordinateur 18 00:00:42,840 --> 00:00:44,170 et vous pouvez analyser cela. 19 00:00:44,170 --> 00:00:46,230 Vous pouvez faire des gestes. 20 00:00:46,230 --> 00:00:49,176 Vous pouvez utiliser vos mains pour interagir avec l'ordinateur 21 00:00:49,176 --> 00:00:50,300 de façon nouvelle et intéressante. 22 00:00:50,300 --> 00:00:55,550 23 00:00:55,550 --> 00:00:57,520 >> Eh bien, je ai d'abord vouloir passer à Armi 24 00:00:57,520 --> 00:01:00,400 vous montrer quelques démos fraîches de ce certaines personnes ont fait avec cela. 25 00:01:00,400 --> 00:01:02,816 Et puis nous allons parler de la façon dont vous avez réellement code avec cela. 26 00:01:02,816 --> 00:01:04,800 Armaghan BEHLUM: Ouais. 27 00:01:04,800 --> 00:01:05,300 Bonjour. 28 00:01:05,300 --> 00:01:08,870 Donc, comme nous l'avons vu, peu données ici, mais nous allons voir 29 00:01:08,870 --> 00:01:11,680 ce que certaines personnes ont fait avec cela. 30 00:01:11,680 --> 00:01:15,130 Permettez-moi donc il suffit d'ouvrir cet exemple. 31 00:01:15,130 --> 00:01:20,770 Et puis, si, par exemple, vous pouvez voir mon analogique de la main là-bas, mais maintenant cette fois 32 00:01:20,770 --> 00:01:26,680 certaines personnes utilisant Unity ont décidé de mettre un peu plus de peau 33 00:01:26,680 --> 00:01:28,670 et des choses autour de la main. 34 00:01:28,670 --> 00:01:35,900 Je ne peux donc, allons-y avec celui-ci, Bien sûr, mes mains ont interaction. 35 00:01:35,900 --> 00:01:41,050 Et vous pouvez probablement imaginer une quelques autres choses utiles fraîches 36 00:01:41,050 --> 00:01:42,840 que vous pouvez faire avec cela. 37 00:01:42,840 --> 00:01:45,530 Donc, ce est au moins un exemple. 38 00:01:45,530 --> 00:01:48,910 Et puis nous allons sauter sur cela. 39 00:01:48,910 --> 00:01:56,590 >> Et puis un autre une fraîche est, allons-y avec celui-ci. 40 00:01:56,590 --> 00:01:58,390 Plasmo balle. 41 00:01:58,390 --> 00:02:03,510 Encore une fois, nous ne aurions pas nécessairement attendre à ce niveau de complexité 42 00:02:03,510 --> 00:02:06,450 à partir d'un projet final pour CS50. 43 00:02:06,450 --> 00:02:10,029 Ce est juste pour vous montrer une partie de la, vous donner les gars 44 00:02:10,029 --> 00:02:14,570 un peu d'inspiration pour ce vous les gars peuvent faire avec Leap Motion. 45 00:02:14,570 --> 00:02:20,500 Ainsi, par exemple, voici un endroit frais exemple de la physique, ce qui là nous allons. 46 00:02:20,500 --> 00:02:24,305 A mes deux mains alors maintenant vous avoir cette petite boule de plasma. 47 00:02:24,305 --> 00:02:31,030 Et la balle réagit à la physique me déplacer ma main autour de la balle. 48 00:02:31,030 --> 00:02:36,920 Maintenant, ce est tout bien avec Unity, utilisant genre d'outils et cadres 49 00:02:36,920 --> 00:02:39,510 que nous ne avons pas appris vous les gars dans la classe, 50 00:02:39,510 --> 00:02:46,590 mais comme vous pouvez voir quelques jolies terme fraîche throughs avec cela. 51 00:02:46,590 --> 00:02:51,750 >> Mais une chose que vous les gars peuvent faire en commençant dès maintenant avec Leap Motion 52 00:02:51,750 --> 00:02:53,260 est un travail en JavaScript. 53 00:02:53,260 --> 00:02:58,960 Leap Motion a une API JavaScript qui vous les gars peuvent utiliser et nous très, très 54 00:02:58,960 --> 00:03:02,040 recommande que vous les gars construire vos projets utilisant cette. 55 00:03:02,040 --> 00:03:04,350 Donc, avec cela, laissez-moi passer reculer à Tomas 56 00:03:04,350 --> 00:03:06,582 pour parler de Leap Motion et JavaScript. 57 00:03:06,582 --> 00:03:07,415 TOMAS REIMERS: Cool. 58 00:03:07,415 --> 00:03:09,230 Ou voulez-vous montrer les Visualiseur en premier? 59 00:03:09,230 --> 00:03:09,670 >> Armaghan BEHLUM: Oh oui. 60 00:03:09,670 --> 00:03:10,170 Oui. 61 00:03:10,170 --> 00:03:11,900 Parlons plus à ce sujet Visualizer. 62 00:03:11,900 --> 00:03:14,983 >> TOMAS REIMERS: Donc, sur une base plus niveau, quand vous arrivez premier à Leap Motion 63 00:03:14,983 --> 00:03:16,940 vous allez avoir cette case. 64 00:03:16,940 --> 00:03:18,330 Ici, je veux moi de prendre le contrôle? 65 00:03:18,330 --> 00:03:19,180 >> Armaghan BEHLUM: Oui, allez-y. 66 00:03:19,180 --> 00:03:20,530 >> TOMAS REIMERS: Ainsi, lorsque vous d'abord apprendre à Leap Motion 67 00:03:20,530 --> 00:03:21,780 vous allez avoir cette case. 68 00:03:21,780 --> 00:03:24,460 Il dispose d'un dispositif qui ressemble à quelque chose comme ça. 69 00:03:24,460 --> 00:03:28,990 Vous le branchez sur votre ordinateur, installer les pilotes nécessaires, 70 00:03:28,990 --> 00:03:30,950 puis il sera en principe être mis en place. 71 00:03:30,950 --> 00:03:34,160 Donc, la meilleure façon de trier d'accord avec Leap Motion 72 00:03:34,160 --> 00:03:39,240 est d'ouvrir ce programme, il installe appelé le Leap Motion Visualizer. 73 00:03:39,240 --> 00:03:41,490 Et le Visualiseur est littéralement ce que je montre ici. 74 00:03:41,490 --> 00:03:45,340 Il vous permet de voir la aperçu du squelette de vos mains. 75 00:03:45,340 --> 00:03:49,940 Et ce que le Leap Motion est de les interpréter comme. 76 00:03:49,940 --> 00:03:53,750 Ainsi, le Leap Motion utilise la caméra pour trier des oeil à vos mains 77 00:03:53,750 --> 00:03:59,176 puis il essaie de deviner ce que le Composition du squelette de base que vous 78 00:03:59,176 --> 00:04:00,460 voir sur l'écran est. 79 00:04:00,460 --> 00:04:01,669 Et ce est ce qu'il vous montre. 80 00:04:01,669 --> 00:04:03,418 Armaghan BEHLUM: Chaque seul petit point de 81 00:04:03,418 --> 00:04:06,580 et chose que vous voyez là est données qui est disponible pour vous les gars 82 00:04:06,580 --> 00:04:07,270 ainsi à utiliser. 83 00:04:07,270 --> 00:04:09,670 Donc, vous voyez que ce est capture que Tomas 84 00:04:09,670 --> 00:04:12,160 a cinq doigts, chacun ces différents doigts 85 00:04:12,160 --> 00:04:17,110 sont également disponibles pour vous en tant que données de points à utiliser dans ne importe quelle application 86 00:04:17,110 --> 00:04:18,256 que vous pourriez vouloir. 87 00:04:18,256 --> 00:04:20,339 Si vous voulez voir si quelqu'un a fait un coup de pouce 88 00:04:20,339 --> 00:04:23,860 vous pouvez voir si leurs doigts sont bouclés et se ils sont 89 00:04:23,860 --> 00:04:25,850 pouce doigt pointe vers le haut, et où 90 00:04:25,850 --> 00:04:30,037 leur poignet ou de palme est et ce genre de choses. 91 00:04:30,037 --> 00:04:30,870 TOMAS REIMERS: Cool. 92 00:04:30,870 --> 00:04:35,186 Donc vous pouvez voir quelques gestes qu'il comprend mieux que d'autres. 93 00:04:35,186 --> 00:04:38,310 Rappelez-vous, que ce est à la recherche à votre la main à partir d'au un appareil photo à partir du bas, 94 00:04:38,310 --> 00:04:41,630 donc quand vous avez vos mains comme cela, il les comprend entièrement, 95 00:04:41,630 --> 00:04:44,509 mais une fois que vous commencez à essayer de faire un thumbs up, parfois il le lit, 96 00:04:44,509 --> 00:04:47,550 parfois, il peut le deviner, mais honnêtement, l'appareil photo juste ne peut pas voir le pouce. 97 00:04:47,550 --> 00:04:49,810 Donc, ce ne est pas vraiment que ce qui se passe. 98 00:04:49,810 --> 00:04:54,910 Juste quelques limitations à garder à l'esprit lorsque vous êtes en développement avec cela. 99 00:04:54,910 --> 00:04:56,540 >> Quoi qu'il en soit, afin de revenir à cela. 100 00:04:56,540 --> 00:04:59,040 Le Visualiseur fait a beaucoup d'outils utiles. 101 00:04:59,040 --> 00:05:01,780 Ainsi, le Leap Motion est programmé de telle manière 102 00:05:01,780 --> 00:05:04,280 qu'ils ne vous attendez pas à interagir avec ce que les données d'image. 103 00:05:04,280 --> 00:05:06,230 Ils ne ont pas vraiment attendez-vous à comprendre 104 00:05:06,230 --> 00:05:08,060 ce qui se passe dans les coulisses. 105 00:05:08,060 --> 00:05:11,620 Ce qu'ils font est exposer un tas d'API pour vous 106 00:05:11,620 --> 00:05:13,420 de telle sorte que vous pouvez interagir avec ces données 107 00:05:13,420 --> 00:05:18,400 directement, sans compréhension ce qui se passe sous le capot. 108 00:05:18,400 --> 00:05:27,790 >> Donc, si nous avons touché H ici dans le Visualizer vous verrez beaucoup d'options. 109 00:05:27,790 --> 00:05:35,450 L'important ici, quoique est si vous frappez O puis frappez H, 110 00:05:35,450 --> 00:05:38,080 vous verrez que ce vous permet de dessiner des gestes. 111 00:05:38,080 --> 00:05:43,380 Donc, un geste, vous verrez il tire une flèche à travers. 112 00:05:43,380 --> 00:05:47,010 Un geste est l'un des moyens qui Leap Mouvement sorte de vous permet d'obtenir à la données 113 00:05:47,010 --> 00:05:48,462 sans avoir à traiter. 114 00:05:48,462 --> 00:05:51,170 Donc, plutôt que de me avoir à comprendre sur, oh, la main se déplaçait, 115 00:05:51,170 --> 00:05:54,970 même si je ai un point d'accès, le API sorte de juste me dire, 116 00:05:54,970 --> 00:05:56,380 hey, ils ont fait ce geste. 117 00:05:56,380 --> 00:05:58,920 Ainsi, vous pouvez faire des gestes de direction de base. 118 00:05:58,920 --> 00:06:00,590 Vous pouvez faire des gestes circulaires. 119 00:06:00,590 --> 00:06:03,530 Vous pouvez faire tapant gestes. 120 00:06:03,530 --> 00:06:07,630 Et vous pouvez faire des gestes de presse clés. 121 00:06:07,630 --> 00:06:09,394 Ouais. 122 00:06:09,394 --> 00:06:10,800 Et ce genre de choses. 123 00:06:10,800 --> 00:06:14,370 Alors, maintenant que nous avons en quelque sorte vu ce que Leap Motion peut faire, 124 00:06:14,370 --> 00:06:17,792 vous pouvez le voir il peut lire un tas ensemble de gestes. 125 00:06:17,792 --> 00:06:19,500 Je pense que je vais passer de nouveau à Armi 126 00:06:19,500 --> 00:06:22,300 et il va parler de la façon vous obtenez à ceux-ci avec JavaScript, 127 00:06:22,300 --> 00:06:24,520 comment vous même de commencer un projet avec cela. 128 00:06:24,520 --> 00:06:27,724 Et puis nous allons parler un peu endroits cool que vous pouvez aller avec ça. 129 00:06:27,724 --> 00:06:28,640 Armaghan BEHLUM: Ouais. 130 00:06:28,640 --> 00:06:29,300 Ça m'a l'air bien. 131 00:06:29,300 --> 00:06:31,950 Donc oui, la première chose que nous voudront vous faire bien sûr, 132 00:06:31,950 --> 00:06:37,170 est après avoir obtenu le Leap Motion est de aller à leapmotion.com, mis en place, installez 133 00:06:37,170 --> 00:06:38,420 les pilotes et d'autres choses. 134 00:06:38,420 --> 00:06:42,520 Après avoir fait cela, vous pouvez aller assurez-vous qu'il est connecté. 135 00:06:42,520 --> 00:06:46,910 Si vous voyez dans votre petit plateau du Leap Motion icône et ce est vert, 136 00:06:46,910 --> 00:06:48,640 alors vous savez que vous êtes tous ensemble. 137 00:06:48,640 --> 00:06:53,710 Et bien sûr vérifier exactement ce que Tomas viens de vous montrer avec les gestes 138 00:06:53,710 --> 00:06:59,320 et de faire les robinets d'écran, et robinets clés, et ce genre de choses. 139 00:06:59,320 --> 00:07:02,180 >> Après cela, si nous, une fois de plus, comme je l'ai dit, 140 00:07:02,180 --> 00:07:06,530 nous avons accès à toutes ces les choses en JavaScript ainsi. 141 00:07:06,530 --> 00:07:09,020 L'idéal mis en place que nous vous recommandons 142 00:07:09,020 --> 00:07:16,440 gars est d'aller dans votre répertoire serveur virtuel, hôte local, 143 00:07:16,440 --> 00:07:19,340 public dans votre appareil CS50. 144 00:07:19,340 --> 00:07:24,790 Et quand vous allez là-bas ce que vous allez voir, ce est un fichier HTML indice de dot. 145 00:07:24,790 --> 00:07:28,180 Maintenant que l'indice dot fichier HTML ou de l'indice dot 146 00:07:28,180 --> 00:07:32,740 fichier PHP, selon le bien, ce que vous pouvez ensuite faire 147 00:07:32,740 --> 00:07:35,150 est d'aller à votre système d'exploitation principal. 148 00:07:35,150 --> 00:07:38,650 Et si vous allez à l'adresse IP qui est listée en bas à droite 149 00:07:38,650 --> 00:07:45,180 coin de votre appareil ici, comme vous pouvez le voir, alors ce qui se passe 150 00:07:45,180 --> 00:07:51,240 est vous allez à la page qui est référencé par ce fichier HTML indice de dot. 151 00:07:51,240 --> 00:07:56,610 Donc, tout le code que vous pourriez mettre en il est envoyé et est utilisable ici. 152 00:07:56,610 --> 00:07:58,960 >> TOMAS REIMERS: Donc, ce est aussi seulement important pour référence 153 00:07:58,960 --> 00:08:06,554 que si vous les gars savent réellement comment configurer un serveur vous-même, 154 00:08:06,554 --> 00:08:09,720 ou si vous voulez mettre cela sur le monde entier web, vous êtes invités à faire tout. 155 00:08:09,720 --> 00:08:11,594 Rappelez-vous que ce sont seulement les fichiers JavaScript 156 00:08:11,594 --> 00:08:14,250 et tout le traitement Leap ce est le cas sur le client. 157 00:08:14,250 --> 00:08:16,510 Donc, il n'a pas vraiment d'importance où vos vies de serveur 158 00:08:16,510 --> 00:08:19,660 à condition que l'ordinateur vous consultez le site Web sur 159 00:08:19,660 --> 00:08:22,024 a installé Leap Motion. 160 00:08:22,024 --> 00:08:23,190 Armaghan BEHLUM: Absolument. 161 00:08:23,190 --> 00:08:25,680 Comme Tomas dit, ouais, tout ce qui fonctionne pour vous les gars. 162 00:08:25,680 --> 00:08:28,570 Ce est juste une de nos recommandations. 163 00:08:28,570 --> 00:08:31,660 Maintenant, pour commencer à utiliser Leap Mouvement ce que vous feriez 164 00:08:31,660 --> 00:08:36,640 est vous importez le Fichier JavaScript de Leap Motion. 165 00:08:36,640 --> 00:08:39,610 Puis à partir de là que vous pouvez faire est, en ce moment 166 00:08:39,610 --> 00:08:44,250 Je ai juste ce paragraphe tag mis en place avec un ID de texte. 167 00:08:44,250 --> 00:08:48,690 Les choses que nous recommandons sont les options de réglage du régulateur 168 00:08:48,690 --> 00:08:52,012 pour Leap Motion avec le permettre aux gestes pour être vrai. 169 00:08:52,012 --> 00:08:53,970 Donc, par défaut ceux gestes que nous vous avons montré 170 00:08:53,970 --> 00:08:57,010 les gars, le cercle, et la robinet clé et les balayages, 171 00:08:57,010 --> 00:09:00,330 ceux qui ne sont pas représentés à vous les gars par défaut. 172 00:09:00,330 --> 00:09:04,450 Mais nous recommandons fortement d'utiliser les de sorte que vous n'êtes pas réinventer la roue. 173 00:09:04,450 --> 00:09:09,489 Permettre à ceux à true, en passant ceux options de contrôleur de sauter boucle de dot 174 00:09:09,489 --> 00:09:10,530 et vous êtes prêt à aller. 175 00:09:10,530 --> 00:09:13,270 Parce que vous avez juste défini une fonction anonyme 176 00:09:13,270 --> 00:09:16,910 qui aura dans un cadre de Leap Motion 177 00:09:16,910 --> 00:09:21,150 et ce cadre a tout le informations que vous allez avoir besoin. 178 00:09:21,150 --> 00:09:25,310 >> TOMAS REIMERS: Donc, juste pour rappel, vous avez un objet. 179 00:09:25,310 --> 00:09:28,250 Vous avez cette fonction appelé saut boucle de dot. 180 00:09:28,250 --> 00:09:30,460 Et vous l'appelez avec deux arguments. 181 00:09:30,460 --> 00:09:33,134 Vous l'appelez avec un, les options de contrôleur. 182 00:09:33,134 --> 00:09:35,300 Et il ya beaucoup de options que vous pouvez mettre en là. 183 00:09:35,300 --> 00:09:38,170 Celui que nous allons l'accent est de permettre gestes. 184 00:09:38,170 --> 00:09:41,230 Et si vous définissez égale à vrai, alors vous pouvez obtenir l'accès à ces gestes 185 00:09:41,230 --> 00:09:42,940 que nous vous avons montré dans le Visualizer. 186 00:09:42,940 --> 00:09:47,500 >> Et puis le second argument est une fonction, ce est un peu comme un appel de retour 187 00:09:47,500 --> 00:09:53,010 qui sera appelé chaque temps chaque image de Leap, 188 00:09:53,010 --> 00:09:57,340 Ainsi, chaque fois que les registres bissextiles votre déménagement de la main, il a une nouvelle trame. 189 00:09:57,340 --> 00:10:02,130 Et il appelle cette fonction avec une argument, qui est l'objet de cadre. 190 00:10:02,130 --> 00:10:05,909 Et cet objet de trame décrit le cadre comme Leap voit. 191 00:10:05,909 --> 00:10:06,950 Armaghan BEHLUM: Exactement. 192 00:10:06,950 --> 00:10:10,450 Donc, ce contient toutes les utile des morceaux de l'information 193 00:10:10,450 --> 00:10:12,550 que nous parlions plus tôt. 194 00:10:12,550 --> 00:10:18,010 Vérification de trame de points gestes est un ensemble de gestes 195 00:10:18,010 --> 00:10:23,680 que le mouvement de saut attiré votre les mains qui font dans la dernière image. 196 00:10:23,680 --> 00:10:26,470 Ainsi, par exemple, ce que nous sommes fais ici est que nous sommes en vérifiant, 197 00:10:26,470 --> 00:10:31,820 hey, Leap, dans cette dernière image fait vous attrapez des gestes que je ai fait? 198 00:10:31,820 --> 00:10:36,350 Et si ce que nous décidons de faire itérer sur ces gestes 199 00:10:36,350 --> 00:10:39,760 et essayer d'obtenir un peu utile informations de leur part. 200 00:10:39,760 --> 00:10:44,290 Chaque geste a une situation unique ID associé. 201 00:10:44,290 --> 00:10:46,280 Ils ont des types. 202 00:10:46,280 --> 00:10:50,220 Vous pouvez regarder qui doigts ont été impliqués dans les gestes 203 00:10:50,220 --> 00:10:52,770 en vérifiant ce genre de choses orientable. 204 00:10:52,770 --> 00:10:56,490 Donc, si lorsque vous passez par le Leap Motion JavaScript API choses, 205 00:10:56,490 --> 00:10:59,630 quand ils mentionnent pointables, ils parlent ces doigts. 206 00:10:59,630 --> 00:11:04,480 Et puis les mains, bien sûr, l'objet entier de la main. 207 00:11:04,480 --> 00:11:05,210 >> Quoi d'autre? 208 00:11:05,210 --> 00:11:08,630 Vous pouvez vérifier combien de temps le mouvement continua 209 00:11:08,630 --> 00:11:11,640 pour et, oui, toutes ces choses utiles. 210 00:11:11,640 --> 00:11:16,490 Donc ce que je fais en ce moment ici, ce est je me suis connecté le cadre, 211 00:11:16,490 --> 00:11:24,350 et puis je mettre à jour mon HTML pour afficher l'ensemble de ces bits d'information 212 00:11:24,350 --> 00:11:25,820 à partir de la trame. 213 00:11:25,820 --> 00:11:28,010 Donc, nous allons vérifier cela. 214 00:11:28,010 --> 00:11:29,440 >> Si elle est ici. 215 00:11:29,440 --> 00:11:34,730 Voici le fichier HTML indice de dot. 216 00:11:34,730 --> 00:11:38,560 Et comme vous venez de voir quand je viens de déménager ma main Leap pris un mouvement de cercle. 217 00:11:38,560 --> 00:11:44,960 Ainsi, vous pouvez me voir faire un cercle plus ici, met à jour des informations de cercle. 218 00:11:44,960 --> 00:11:48,332 Faire balayages, les captures frottis. 219 00:11:48,332 --> 00:11:49,290 Essayons un onglet de l'écran. 220 00:11:49,290 --> 00:11:50,090 Nous y voilà. 221 00:11:50,090 --> 00:11:52,370 robinet de l'écran et un robinet clé. 222 00:11:52,370 --> 00:11:55,040 Donc robinets clés aussi, par le Ainsi, sont quand vous frappez vers le bas. 223 00:11:55,040 --> 00:11:57,260 Alors vous pouvez imaginer peut-être jouer un piano. 224 00:11:57,260 --> 00:11:59,869 >> Et puis de toucher l'écran sont quand vous frappez l'écran. 225 00:11:59,869 --> 00:12:02,910 Alors vous pouvez imaginer peut-être vous fait avoir un écran tactile en face de vous 226 00:12:02,910 --> 00:12:05,190 et vous frapper la touche écran en face de vous. 227 00:12:05,190 --> 00:12:08,470 Et puis nous pouvons saisir une de ces objets dans ici. 228 00:12:08,470 --> 00:12:12,960 Alors ne oubliez pas que je ai dit que je étais passant le cadre dans journal de la console. 229 00:12:12,960 --> 00:12:17,160 Et afin que nous puissions vérifier toutes les des morceaux de l'information 230 00:12:17,160 --> 00:12:22,500 qui sont disponibles dans ce cadre ainsi à utiliser. 231 00:12:22,500 --> 00:12:26,320 >> Comme je l'ai dit plus tôt, pointables sont les doigts. 232 00:12:26,320 --> 00:12:30,260 À ce moment, nous ne avions pas notre les mains devant le Leap Motion 233 00:12:30,260 --> 00:12:32,010 il inscrit zéro, mais ce est la façon dont vous 234 00:12:32,010 --> 00:12:35,980 commencerait à savoir peut-être combien de doigts sont l'écran. 235 00:12:35,980 --> 00:12:37,810 Et ce type d'information. 236 00:12:37,810 --> 00:12:40,060 TOMAS REIMERS: Et se souvenir ce est juste un objet. 237 00:12:40,060 --> 00:12:42,185 Donc, tout peut être consulté un peu comme un struct 238 00:12:42,185 --> 00:12:45,540 en C. Vous avez l'objet dot nommer le nom de propriété. 239 00:12:45,540 --> 00:12:48,830 Et puis dans ce que vous avez tableaux et vous avez d'autres objets, 240 00:12:48,830 --> 00:12:50,850 mais ne oubliez pas que ce est juste un objet. 241 00:12:50,850 --> 00:12:53,788 Il ya rien de spécial car nous utilisons Leap. 242 00:12:53,788 --> 00:12:54,704 Armaghan BEHLUM: Ouais. 243 00:12:54,704 --> 00:12:56,544 Cool. 244 00:12:56,544 --> 00:12:58,710 Faut-il consulter un couple des exemples JavaScript? 245 00:12:58,710 --> 00:13:05,070 246 00:13:05,070 --> 00:13:07,810 >> TOMAS REIMERS: Donc, ne oubliez pas que nous rapidement 247 00:13:07,810 --> 00:13:12,470 dit que Leap peut effectivement de fonctionner sur ne importe quel site web. 248 00:13:12,470 --> 00:13:15,250 LeapJS est simplement servi à un client. 249 00:13:15,250 --> 00:13:19,850 Et si long que le client a Leap Motion attaché cela va fonctionner. 250 00:13:19,850 --> 00:13:22,540 Donc Leap Motion a une site web où les gens 251 00:13:22,540 --> 00:13:24,540 peuvent partager leurs exemples des choses qu'ils ont fait. 252 00:13:24,540 --> 00:13:26,623 Donc, nous allons juste aller par un couple d'entre eux 253 00:13:26,623 --> 00:13:29,980 pour voir ce qui est possible avant plonger dans plus de détails sur la façon 254 00:13:29,980 --> 00:13:32,510 ce est possible. 255 00:13:32,510 --> 00:13:33,346 Si 256 00:13:33,346 --> 00:13:34,470 Armaghan BEHLUM: Voyons voir. 257 00:13:34,470 --> 00:13:36,136 TOMAS REIMERS: Maintenant, il doit travailler. 258 00:13:36,136 --> 00:13:38,520 Armaghan BEHLUM: Alors maintenant avant, nous avons vu un exemple 259 00:13:38,520 --> 00:13:45,280 avec Unity qui a rendu nos mains avec des peaux graphiques assez impressionnant, 260 00:13:45,280 --> 00:13:50,200 mais maintenant vous pouvez voir que vous pouvez faire la même à l'intérieur d'un navigateur Web. 261 00:13:50,200 --> 00:13:54,640 Ce est tout l'intérieur Chrome simplement en utilisant JavaScript. 262 00:13:54,640 --> 00:13:57,460 Et puis l'autre belle chose est si vous voulez 263 00:13:57,460 --> 00:14:02,610 de savoir comment ils ont fait cela, les exemples sur JavaScript 264 00:14:02,610 --> 00:14:07,540 inclure également des options de code vous pouvez vérifier et ensuite voir 265 00:14:07,540 --> 00:14:12,570 comment cette personne a été saisissant les mains et les codes et autres. 266 00:14:12,570 --> 00:14:16,730 >> Donc, ce est tout ce que vous pouvez trouver au developer.leapmotion.com. 267 00:14:16,730 --> 00:14:20,810 Vous pouvez aller vérifier sur JavaScript exemples qu'ils ont là-bas. 268 00:14:20,810 --> 00:14:23,280 Donc oui. 269 00:14:23,280 --> 00:14:25,205 Voici ci, oops désolé. 270 00:14:25,205 --> 00:14:27,680 Essayons encore une fois. 271 00:14:27,680 --> 00:14:29,002 Oh. 272 00:14:29,002 --> 00:14:29,960 Je ai deux mains droites. 273 00:14:29,960 --> 00:14:32,540 274 00:14:32,540 --> 00:14:34,380 Donc oui. 275 00:14:34,380 --> 00:14:37,440 >> TOMAS REIMERS: Donc, et encore, rappelez-vous parfois Leap mess up. 276 00:14:37,440 --> 00:14:40,790 Juste lui donner une seconde. 277 00:14:40,790 --> 00:14:42,784 Ce ne est pas parfait, mais il est assez bon. 278 00:14:42,784 --> 00:14:44,700 Armaghan BEHLUM: Un autre recommandation aussi 279 00:14:44,700 --> 00:14:48,780 est de ne pas le faire en plein soleil. 280 00:14:48,780 --> 00:14:51,260 Ainsi, la manière Leap Motion œuvres est, en fait 281 00:14:51,260 --> 00:14:54,500 si je montre la caméra cette ainsi, la lumière infrarouge. 282 00:14:54,500 --> 00:14:57,375 Donc il envoie ceux sur puis les lit quand ils reviennent. 283 00:14:57,375 --> 00:14:59,250 Donc, si vous essayez de faire lumière directe du soleil, 284 00:14:59,250 --> 00:15:01,610 par exemple, ce est probablement ne va pas travailler, 285 00:15:01,610 --> 00:15:05,850 ou il va exiger un certain calibrage de le faire. 286 00:15:05,850 --> 00:15:10,450 >> Aussi une autre recommandation est de dégager l'espace derrière le Leap 287 00:15:10,450 --> 00:15:12,740 et en face de saut. 288 00:15:12,740 --> 00:15:15,520 Pensez-y comme travail à l'intérieur d'un dôme qui est 289 00:15:15,520 --> 00:15:18,360 entourant cet objet Leap Motion. 290 00:15:18,360 --> 00:15:20,550 Se il est vrai stuff derrière elle ainsi, 291 00:15:20,550 --> 00:15:24,740 Ce est aussi aller à interférer la façon dont le Leap Motion essaye 292 00:15:24,740 --> 00:15:26,690 de reconnaître votre main et ce genre de choses. 293 00:15:26,690 --> 00:15:30,010 >> Ainsi, par exemple, je pense que dans ce cas, ce est mon ordinateur portable fait 294 00:15:30,010 --> 00:15:34,351 ce est le genre de rendre le Leap Motion. 295 00:15:34,351 --> 00:15:35,100 Ouais, là nous allons. 296 00:15:35,100 --> 00:15:41,021 Donc, si je effacer mon ordinateur portable à partir de derrière elle la main montrent assez bien. 297 00:15:41,021 --> 00:15:41,520 Donc oui. 298 00:15:41,520 --> 00:15:42,061 Il ya cela. 299 00:15:42,061 --> 00:15:44,650 300 00:15:44,650 --> 00:15:46,417 Alors quoi d'autre avons-nous leur montrons. 301 00:15:46,417 --> 00:15:48,250 TOMAS REIMERS: Je pense que maintenant serait le moment 302 00:15:48,250 --> 00:15:52,039 pour trier des plongée dans et disons simplement faire une démo entièrement à partir de zéro. 303 00:15:52,039 --> 00:15:53,330 Ça va être vraiment simple. 304 00:15:53,330 --> 00:15:55,250 Fondamentalement, ce que nous allons pour essayer de faire, ce est rendre 305 00:15:55,250 --> 00:15:58,570 de sorte que lorsque vous glissez votre main, le fond va commencer comme rouge, 306 00:15:58,570 --> 00:16:01,361 et quand vous glissez votre main, le fond va devenir verte. 307 00:16:01,361 --> 00:16:01,970 D'ACCORD? 308 00:16:01,970 --> 00:16:03,709 Vraiment simple. 309 00:16:03,709 --> 00:16:05,750 Et il est fondamentalement juste va passer par beaucoup 310 00:16:05,750 --> 00:16:08,360 des concepts sous-jacents Leap afin que nous puissions 311 00:16:08,360 --> 00:16:12,630 entrer dans cette idéologie de la façon dont fonctionne Leap et comment nous pouvons construire des choses avec cela. 312 00:16:12,630 --> 00:16:16,760 Et puis à partir de là nous allons probablement juste vous montrer 313 00:16:16,760 --> 00:16:19,710 la documentation de l'API et où vous peut en lire plus à ce sujet. 314 00:16:19,710 --> 00:16:21,030 Et puis nous l'appellerons jour. 315 00:16:21,030 --> 00:16:24,294 Alors voulez-vous de coder ou vous ne me voulez code? 316 00:16:24,294 --> 00:16:25,210 Armaghan BEHLUM: Ouais. 317 00:16:25,210 --> 00:16:28,350 Eh bien, je suppose que nous pouvons travailler ensemble sur ce et essayer 318 00:16:28,350 --> 00:16:30,292 >> TOMAS REIMERS: Donc, nous allons faire un peu de paire codage. 319 00:16:30,292 --> 00:16:31,500 Armaghan BEHLUM: Il nous allons. 320 00:16:31,500 --> 00:16:33,250 Ce est exactement ce que je voulu vérifier. 321 00:16:33,250 --> 00:16:34,700 Cool. 322 00:16:34,700 --> 00:16:38,750 Ainsi, par exemple ici, nous allons voir. 323 00:16:38,750 --> 00:16:40,979 Alors que nous sommes itération à travers les gestes déjà, 324 00:16:40,979 --> 00:16:43,270 TOMAS REIMERS: Vous voulez faire juste un tout nouveau fichier? 325 00:16:43,270 --> 00:16:43,870 Armaghan BEHLUM: Complètement nouveau fichier? 326 00:16:43,870 --> 00:16:44,246 Oui, bien sûr. 327 00:16:44,246 --> 00:16:45,000 >> TOMAS REIMERS: Ouais. 328 00:16:45,000 --> 00:16:45,920 >> Armaghan BEHLUM: Alors, faisons cela. 329 00:16:45,920 --> 00:16:48,253 >> TOMAS REIMERS: Donc, nous allons Pour créer un fichier complètement. 330 00:16:48,253 --> 00:16:51,290 Nous l'appellerons main HTML point. 331 00:16:51,290 --> 00:16:52,670 Ce est cool avec moi. 332 00:16:52,670 --> 00:16:59,020 Alors souvenez-vous d'une balise HTML, puis à l'intérieur que vous avez une tête. 333 00:16:59,020 --> 00:17:02,982 Cette tête a un titre en son sein. 334 00:17:02,982 --> 00:17:04,349 Donc onglet dans l'autre sens. 335 00:17:04,349 --> 00:17:05,589 Là vous allez. 336 00:17:05,589 --> 00:17:09,359 Titre, que nous allons appeler Leap exemple. 337 00:17:09,359 --> 00:17:12,163 Yep. 338 00:17:12,163 --> 00:17:13,540 >> Armaghan BEHLUM: Oups. 339 00:17:13,540 --> 00:17:14,040 Titre. 340 00:17:14,040 --> 00:17:14,474 >> TOMAS REIMERS: Yep. 341 00:17:14,474 --> 00:17:15,776 >> Armaghan BEHLUM: Il nous sommes. 342 00:17:15,776 --> 00:17:18,180 >> TOMAS REIMERS: Et alors faisons un corps. 343 00:17:18,180 --> 00:17:20,852 >> Armaghan BEHLUM: Patientez, de laisser assurez-vous également à importer. 344 00:17:20,852 --> 00:17:22,060 TOMAS REIMERS: Oh, bien sûr. 345 00:17:22,060 --> 00:17:22,560 Ma mauvaise. 346 00:17:22,560 --> 00:17:28,700 Il faut donc toujours se assurer que vous avez le Leap script afin qu'il est un script qui vous est donné 347 00:17:28,700 --> 00:17:31,810 par Leap Motion qui essentiellement permet au navigateur Web pour se connecter 348 00:17:31,810 --> 00:17:35,580 au dispositif sur l'ordinateur de l'utilisateur. 349 00:17:35,580 --> 00:17:38,510 Et puis nous avons également dans ce besoin d'un corps et disons simplement 350 00:17:38,510 --> 00:17:40,580 rendre le corps dit salut afin que nous pouvons montrer aux élèves 351 00:17:40,580 --> 00:17:42,704 comment se connecter à ce nouveau page Web qu'ils ont fait. 352 00:17:42,704 --> 00:17:44,260 Armaghan BEHLUM: Bien sûr. 353 00:17:44,260 --> 00:17:45,724 Donc, nous allons simplement mettre another-- 354 00:17:45,724 --> 00:17:48,730 >> TOMAS REIMERS: Salut, bonjour monde. 355 00:17:48,730 --> 00:17:50,210 Ainsi, un exemple très basique. 356 00:17:50,210 --> 00:17:53,400 Vraiment juste une démo. 357 00:17:53,400 --> 00:17:58,505 >> Armaghan BEHLUM: Et puis ici nous peut aller, nous l'appelions la main dot HTML, 358 00:17:58,505 --> 00:18:00,000 droit? 359 00:18:00,000 --> 00:18:00,810 Et oh! 360 00:18:00,810 --> 00:18:04,310 Donc, je me demande ce qui ne va pas ça maintenant. 361 00:18:04,310 --> 00:18:07,639 Ajoutons autorisations de lecture de remettre HTML point. 362 00:18:07,639 --> 00:18:09,930 TOMAS REIMERS: Voulez-vous de le faire dans la grande borne 363 00:18:09,930 --> 00:18:11,080 de sorte que nous ne pouvons afficher sur the-- 364 00:18:11,080 --> 00:18:12,501 >> Armaghan BEHLUM: Ouais, ce est logique. 365 00:18:12,501 --> 00:18:13,001 Bien. 366 00:18:13,001 --> 00:18:15,720 Donc je ai simplement ajouté le autorisations, mais si nous 367 00:18:15,720 --> 00:18:18,350 étaient à consulter la autorisations avant 368 00:18:18,350 --> 00:18:22,560 aurait vu que fait la main dot HTML ne dispose pas des autorisations de lecture 369 00:18:22,560 --> 00:18:25,570 et donc nous ne pouvions pas le rendre. 370 00:18:25,570 --> 00:18:30,850 Mais maintenant, si nous le faisons, nous voyons notre petit monde de bonjour là. 371 00:18:30,850 --> 00:18:33,580 >> TOMAS REIMERS: Alors disons effectivement, comme il a été écrit, bonjour le monde, 372 00:18:33,580 --> 00:18:35,371 Je ai pensé à un moyen nous pourrions changer cela. 373 00:18:35,371 --> 00:18:41,150 Faisons dire bonjour monde, et puis quand vous agitez, il dit au revoir. 374 00:18:41,150 --> 00:18:41,650 Droite? 375 00:18:41,650 --> 00:18:42,210 Alors bonjour, au revoir. 376 00:18:42,210 --> 00:18:42,560 >> Armaghan BEHLUM: Bien sûr. 377 00:18:42,560 --> 00:18:44,010 >> TOMAS REIMERS: Cela semble assez bonne. 378 00:18:44,010 --> 00:18:45,120 >> Armaghan BEHLUM: Ce sonne bien à moi aussi. 379 00:18:45,120 --> 00:18:46,920 >> TOMAS REIMERS: Donc, si nous sommes va faire de ce que nous allons juste 380 00:18:46,920 --> 00:18:48,980 pense à travers la page web un peu. 381 00:18:48,980 --> 00:18:51,800 Nous allons avoir besoin d'un script qui enregistre essentiellement 382 00:18:51,800 --> 00:18:56,470 que vous brandi et à un bond, une vague et un coup, même chose. 383 00:18:56,470 --> 00:18:59,584 Donc, nous allons avoir besoin d'un script qui enregistre essentiellement pour ce coup. 384 00:18:59,584 --> 00:19:01,500 Et une autre chose que nous sommes allez avoir besoin est que nous sommes 385 00:19:01,500 --> 00:19:04,360 allez avoir besoin d'un certain contenu réel de changer. 386 00:19:04,360 --> 00:19:07,850 >> Alors que vous vous souvenez, jQuery vous permet de changer le contenu. 387 00:19:07,850 --> 00:19:13,017 Donc, une chose que nous pourrions vouloir inclure dans ce est la bibliothèque jQuery. 388 00:19:13,017 --> 00:19:16,100 Et puis pour être en mesure de choisir ce que nous allons en fait de modifier le contenu, 389 00:19:16,100 --> 00:19:18,224 qui va avoir besoin d'un ID ou une classe, ou quelque chose 390 00:19:18,224 --> 00:19:20,100 que nous pouvons utiliser pour le sélectionner. 391 00:19:20,100 --> 00:19:25,010 Nous allons donc lui donner un ID rapide du changement texte. 392 00:19:25,010 --> 00:19:26,974 Et puis voulez-vous saisir jQuery? 393 00:19:26,974 --> 00:19:29,890 Armaghan BEHLUM: Alors, quelle est la première chose sur notre liste, puis faire maintenant? 394 00:19:29,890 --> 00:19:30,620 TOMAS REIMERS: Laissez Saisissons jQuery? 395 00:19:30,620 --> 00:19:32,494 Armaghan BEHLUM: LET'S saisir jQuery, OK, cool. 396 00:19:32,494 --> 00:19:34,502 Dans ce cas, je vais avoir à actually-- 397 00:19:34,502 --> 00:19:36,210 où serait le meilleur endroit pour faire cela? 398 00:19:36,210 --> 00:19:39,677 >> TOMAS REIMERS: jQuery, donc si vous Google jQuery, jQuery a frappé, la première 399 00:19:39,677 --> 00:19:41,010 Armaghan BEHLUM: Très première. 400 00:19:41,010 --> 00:19:42,135 TOMAS REIMERS: Ou téléchargement. 401 00:19:42,135 --> 00:19:42,650 Ce est bien. 402 00:19:42,650 --> 00:19:46,482 Hit téléchargement v1 et v2 à gauche. 403 00:19:46,482 --> 00:19:49,190 Nous allons donc décrire de jQuery en ligne comme vous avez probablement fait. 404 00:19:49,190 --> 00:19:50,440 Faites défiler vers le bas. 405 00:19:50,440 --> 00:19:51,260 Up, up. 406 00:19:51,260 --> 00:19:53,502 >> Armaghan BEHLUM: Oh, ici maintenant? 407 00:19:53,502 --> 00:19:54,460 TOMAS REIMERS: Ou que. 408 00:19:54,460 --> 00:19:54,960 Yep. 409 00:19:54,960 --> 00:20:00,150 Donc jQuery a une version hébergée qui signifie que vous ne avez pas réellement 410 00:20:00,150 --> 00:20:01,890 besoin de le télécharger, mais vous êtes plus que 411 00:20:01,890 --> 00:20:07,734 bienvenue à télécharger et héberger vous-même. 412 00:20:07,734 --> 00:20:08,650 Armaghan BEHLUM: Cool. 413 00:20:08,650 --> 00:20:09,566 Nous avons donc maintenant jQuery. 414 00:20:09,566 --> 00:20:11,122 Maintenant quelle est la prochaine sur notre liste à faire. 415 00:20:11,122 --> 00:20:12,080 TOMAS REIMERS: Awesome. 416 00:20:12,080 --> 00:20:13,910 Alors, la prochaine ce que nous devons faire, ce est nous avons réellement besoin 417 00:20:13,910 --> 00:20:17,750 pour donner p Bonjour tout le monde un ID de sorte que nous pouvons changer, non? 418 00:20:17,750 --> 00:20:24,514 Donc, nous allons donner une idée de, Je ne sais pas, changer le texte? 419 00:20:24,514 --> 00:20:26,680 Armaghan BEHLUM: Disons juste faire de cette façon, je suppose. 420 00:20:26,680 --> 00:20:28,013 TOMAS REIMERS: changeText, cool. 421 00:20:28,013 --> 00:20:29,830 Et maintenant, nous allons simplement rafraîchir la page. 422 00:20:29,830 --> 00:20:31,142 Assurez-vous que tout fonctionne. 423 00:20:31,142 --> 00:20:32,100 Donc, retour dans le navigateur. 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 Toujours un bon rappel que lorsque vous construire un site web, 427 00:20:39,380 --> 00:20:44,450 probablement actualiser chaque fois que vous faites tout changement significatif peu juste 428 00:20:44,450 --> 00:20:47,993 parce que parfois vous accidentellement tomber une étiquette, 429 00:20:47,993 --> 00:20:51,640 ou si vous supprimez accidentellement quelque chose, puis vous cassez quelque chose de petit, 430 00:20:51,640 --> 00:20:55,880 mais quand vous faites un changement plus important vous êtes comme, pourquoi ce grand changement 431 00:20:55,880 --> 00:20:57,910 apparemment briser la chose sans rapport. 432 00:20:57,910 --> 00:21:02,840 Donc, il est toujours bon de trier des aller faire les vérifications de bonne santé. 433 00:21:02,840 --> 00:21:05,610 >> Quoi qu'il en soit maintenant faisons une dernière vérification de santé, 434 00:21:05,610 --> 00:21:09,800 qui est essayons de changer texte sans Leap Motion, 435 00:21:09,800 --> 00:21:11,820 sans rien, juste sur la page de chargement ça va 436 00:21:11,820 --> 00:21:17,140 changer bonjour monde revoir en utilisant jQuery. 437 00:21:17,140 --> 00:21:21,400 Donc, si vous vous souvenez de expose jQuery cette fonction de signe de dollar, 438 00:21:21,400 --> 00:21:28,640 que nous pouvons passer au sélecteur CSS, à savoir texte de changement hashtag, qui 439 00:21:28,640 --> 00:21:31,590 sélectionne l'élément avec une pièce d'identité du changement texte. 440 00:21:31,590 --> 00:21:34,980 Et puis nous allons pour appeler la méthode HTML 441 00:21:34,980 --> 00:21:40,390 sur l'objet qu'il retourne avec le argument d'un au revoir de chaîne, ce qui 442 00:21:40,390 --> 00:21:45,600 va changer les articles HTML de dire au revoir. 443 00:21:45,600 --> 00:21:46,210 Impressionnant. 444 00:21:46,210 --> 00:21:48,790 Cela semble assez cool. 445 00:21:48,790 --> 00:21:52,365 Et maintenant, quand nous renouvelons la page que nous allons voir 446 00:21:52,365 --> 00:21:54,040 il change instantanément à revoir, non? 447 00:21:54,040 --> 00:21:55,910 Parce qu'il ne attend pas pour rien. 448 00:21:55,910 --> 00:21:59,200 Trier des dès que ce script exécute change à revoir. 449 00:21:59,200 --> 00:22:00,430 Cool. 450 00:22:00,430 --> 00:22:03,790 >> Alors maintenant, nous Terminons que dans une fonction. 451 00:22:03,790 --> 00:22:04,290 Droite. 452 00:22:04,290 --> 00:22:06,270 Donc, nous allons vouloir de faire une fonction. 453 00:22:06,270 --> 00:22:08,160 Nous l'appellerons au revoir. 454 00:22:08,160 --> 00:22:11,570 Donc la fonction est revoir va prendre aucun argument 455 00:22:11,570 --> 00:22:14,170 et il ne est pas vraiment va retourner quelque chose. 456 00:22:14,170 --> 00:22:18,850 Et il va juste faire en JavaScript. 457 00:22:18,850 --> 00:22:22,240 458 00:22:22,240 --> 00:22:23,140 Excellente. 459 00:22:23,140 --> 00:22:27,000 Donc, notre au revoir de la fonction maintenant modifie le texte à revoir, non? 460 00:22:27,000 --> 00:22:28,930 Cela nous donne un moyen change fondamentalement 461 00:22:28,930 --> 00:22:32,871 ce texte à revoir chaque fois nous avons appelé cette fonction. 462 00:22:32,871 --> 00:22:33,370 Droite? 463 00:22:33,370 --> 00:22:35,290 Donc, ce est assez cool. 464 00:22:35,290 --> 00:22:37,430 >> Armaghan BEHLUM: Eh bien, nous peut aussi assurez-vous juste 465 00:22:37,430 --> 00:22:41,040 que maintenant car nous ne sommes pas d'appeler le fonction, si nous rafraîchir la page, 466 00:22:41,040 --> 00:22:44,460 remarquez ça ne va pas pour modifier le texte. 467 00:22:44,460 --> 00:22:45,509 >> TOMAS REIMERS: Excellent. 468 00:22:45,509 --> 00:22:47,800 Alors maintenant, nous allons commencer entrer dans ce Leap trucs 469 00:22:47,800 --> 00:22:49,880 que nous parlions. 470 00:22:49,880 --> 00:22:52,240 Donc Armi, voulez-vous prendre d'ici ou? 471 00:22:52,240 --> 00:22:52,640 >> Armaghan BEHLUM: Ouais. 472 00:22:52,640 --> 00:22:53,139 Bien sûr. 473 00:22:53,139 --> 00:22:56,260 Je vais probablement avoir besoin vérifier les choses, 474 00:22:56,260 --> 00:22:58,250 mais par exemple souvenir nous avons dit que nous voulions 475 00:22:58,250 --> 00:23:02,627 pour se assurer que dans les options nous avons mis activer gestes 476 00:23:02,627 --> 00:23:03,710 TOMAS REIMERS: Bonne prise. 477 00:23:03,710 --> 00:23:06,250 Armaghan BEHLUM: pour être vrai. 478 00:23:06,250 --> 00:23:08,960 Et puis, nous avons recommandé que vous les gars serait 479 00:23:08,960 --> 00:23:12,230 exécuter saut boucle de dot, qui comme nous le disions plus tôt, 480 00:23:12,230 --> 00:23:18,140 a deux options, un objet JSON est les options pour la façon dont vous voulez 481 00:23:18,140 --> 00:23:22,030 pour configurer le Leap Motion à travail, puis une fonction qui est 482 00:23:22,030 --> 00:23:27,640 va attraper un cadre comme un rappel fonction comme Tomas disait. 483 00:23:27,640 --> 00:23:30,470 Et puis modifiez ce que vous voulez à voir avec cette fonction. 484 00:23:30,470 --> 00:23:33,890 >> Donc, nous passons dans le option et maintenant nous définissons 485 00:23:33,890 --> 00:23:36,117 une fonction qui prendra dans un cadre. 486 00:23:36,117 --> 00:23:38,200 Et maintenant nous avons à définir ce que la fonction fait. 487 00:23:38,200 --> 00:23:42,569 Ce est aussi dans l'intérêt de la avenir, faire cela pour se assurer. 488 00:23:42,569 --> 00:23:43,610 TOMAS REIMERS: Excellent. 489 00:23:43,610 --> 00:23:45,940 Alors maintenant, nous avons cette fonction de boucle dot saut 490 00:23:45,940 --> 00:23:52,420 appeler qui dit en substance regarder Leap avec ces options et à chaque fois 491 00:23:52,420 --> 00:23:55,710 quelque chose change, appellent cette cadre de fonction avec toutes les données 492 00:23:55,710 --> 00:23:59,510 que vous êtes au courant de dans le cadre. 493 00:23:59,510 --> 00:24:01,320 Sons assez bonne. 494 00:24:01,320 --> 00:24:03,680 Alors maintenant, le test de validation rapide, que je recommande toujours, 495 00:24:03,680 --> 00:24:07,020 est dans cette vient de mettre console cadre logique dot. 496 00:24:07,020 --> 00:24:10,320 Et puis dans Chrome ouvrir et regardez votre console 497 00:24:10,320 --> 00:24:13,870 et de jouer avec Leap pour voir le cadres étant enregistrés car cette volonté 498 00:24:13,870 --> 00:24:16,300 vous aurez une idée de ce que données que vous avez accès. 499 00:24:16,300 --> 00:24:20,680 Et comme toujours si vous êtes perdu, rechercher la référence de l'API. 500 00:24:20,680 --> 00:24:23,430 Et nous allons inclure le lien pour qu'à la fin de cette. 501 00:24:23,430 --> 00:24:26,300 >> Armaghan BEHLUM: Donc nous actualiser la page, puis 502 00:24:26,300 --> 00:24:28,880 nous allons et ouvrons la console à nouveau. 503 00:24:28,880 --> 00:24:33,590 Et maintenant, nous remarquons que nous sommes ayant des cadres passés dans, 504 00:24:33,590 --> 00:24:37,834 ces petits objets, nous avons vu plus tôt. 505 00:24:37,834 --> 00:24:38,690 Donc oui. 506 00:24:38,690 --> 00:24:42,870 Ce sont nos cadres apparaître dans la console. 507 00:24:42,870 --> 00:24:43,370 Cool. 508 00:24:43,370 --> 00:24:46,970 >> Alors, maintenant que nous avons attrapé le cadres, comme vous se souviendront peut-tôt 509 00:24:46,970 --> 00:24:51,800 de l'exemple que nous avons eu, si nous vérifions cadre gestes de points 510 00:24:51,800 --> 00:24:56,270 nous obtenons la liste des gestes qui le cadre plus récemment capturé. 511 00:24:56,270 --> 00:25:01,510 Nous pouvons vérifier la longueur de ce tableau pour voir si Leap pris des gestes. 512 00:25:01,510 --> 00:25:05,010 Donc, si ce tableau est supérieure à zéro alors nous 513 00:25:05,010 --> 00:25:07,570 savoir que nous avons des choses à faire. 514 00:25:07,570 --> 00:25:15,040 >> Alors disons que jusqu'à envelopper dans un état si et maintenant ici ce que nous savons, ce est nous 515 00:25:15,040 --> 00:25:20,390 ont vu un geste, nous allons agir sur elle. 516 00:25:20,390 --> 00:25:25,721 Alors, maintenant que nous sommes ici, nous avoir un geste de vérifier. 517 00:25:25,721 --> 00:25:28,470 TOMAS REIMERS: Eh bien, la première chose est qu'il ne est pas seulement un seul geste, 518 00:25:28,470 --> 00:25:29,840 il pourrait être aussi beaucoup de gestes. 519 00:25:29,840 --> 00:25:30,964 >> Armaghan BEHLUM: Très vrai. 520 00:25:30,964 --> 00:25:33,340 TOMAS REIMERS: Donc par C style classique ici 521 00:25:33,340 --> 00:25:36,334 nous allons probablement vouloir utiliser une boucle for. 522 00:25:36,334 --> 00:25:37,750 Armaghan BEHLUM: Nous voici donc. 523 00:25:37,750 --> 00:25:42,870 Nous avons décidé de parcourir à travers les gestes. 524 00:25:42,870 --> 00:25:46,412 Et nous allons voir. 525 00:25:46,412 --> 00:25:49,380 i plus, plus. 526 00:25:49,380 --> 00:25:56,150 Et maintenant, si nous peut-être fait juste un geste de var est égale 527 00:25:56,150 --> 00:26:01,210 gestes trame de points support i, nous avons maintenant 528 00:26:01,210 --> 00:26:06,260 geste lui-même, qui ne est qu'un seule instance d'un objet geste 529 00:26:06,260 --> 00:26:10,582 pour nous de travailler avec l'intérieur de cette boucle. 530 00:26:10,582 --> 00:26:12,869 Bien. 531 00:26:12,869 --> 00:26:15,410 TOMAS REIMERS: la santé mentale de Let vérifier ici et juste consoler 532 00:26:15,410 --> 00:26:17,370 dot log geste pour voir ce que nous obtenons. 533 00:26:17,370 --> 00:26:19,410 >> Armaghan BEHLUM: Console journal dot geste. 534 00:26:19,410 --> 00:26:22,900 535 00:26:22,900 --> 00:26:23,780 Dokie Okie. 536 00:26:23,780 --> 00:26:26,250 Et rafraîchir une fois de plus. 537 00:26:26,250 --> 00:26:30,030 >> TOMAS Reimers: Et soyons essayer de faire un geste. 538 00:26:30,030 --> 00:26:34,600 Vous verrez que un tas de, quand il glisse, 539 00:26:34,600 --> 00:26:39,780 vous obtenez un tas de gestes dans le console et se il essaie de faire un cercle, 540 00:26:39,780 --> 00:26:40,470 ce est just-- 541 00:26:40,470 --> 00:26:41,750 >> Armaghan BEHLUM: Cercles sont vraiment gentil. 542 00:26:41,750 --> 00:26:45,000 >> TOMAS REIMERS: Maintenant il ya une chose étrange ici, ce qui est il fait une cercle, 543 00:26:45,000 --> 00:26:48,730 mais cela se connecte 80 gestes, non? 544 00:26:48,730 --> 00:26:50,070 Ce est beaucoup de gestes. 545 00:26:50,070 --> 00:26:53,560 Ainsi, le premier genre de chose à réaliser, et cela peut être source de confusion, 546 00:26:53,560 --> 00:26:57,050 est qu'un geste ne est pas seulement une fois connecté. 547 00:26:57,050 --> 00:27:01,107 >> Sur chaque image, à droite, donc si je fais un cercle 548 00:27:01,107 --> 00:27:02,940 Leap détecte cette est un changement, à partir de cette 549 00:27:02,940 --> 00:27:04,398 est un changement, à partir de ce est un changement. 550 00:27:04,398 --> 00:27:05,970 Et il va enregistrer chacun de ceux-ci. 551 00:27:05,970 --> 00:27:08,200 Mais dans chacun de ceux-ci, il va dire, oh, 552 00:27:08,200 --> 00:27:10,050 il ya un geste en cours. 553 00:27:10,050 --> 00:27:14,260 Alors permettez-moi de dire, bon, il ya un geste et il est actuellement en cours. 554 00:27:14,260 --> 00:27:17,000 Donc, ce que nous ne voulons pas faire est de dire, oh, une sur chaque 555 00:27:17,000 --> 00:27:19,370 de ces gestes vous vouloir changer le texte. 556 00:27:19,370 --> 00:27:23,660 Ce que nous voulons faire, ce est quand ce geste se arrête, et nous pouvons vérifier pour cela, 557 00:27:23,660 --> 00:27:24,974 alors nous voulons changer le texte. 558 00:27:24,974 --> 00:27:25,890 Armaghan BEHLUM: Mhmm. 559 00:27:25,890 --> 00:27:30,550 Donc, comme Tomas est expliquer ces gestes 560 00:27:30,550 --> 00:27:33,580 pourrait apparaître à travers multiples des cadres, mais par exemple, 561 00:27:33,580 --> 00:27:36,200 quand nous étions en train de ce cercle, on peut voir 562 00:27:36,200 --> 00:27:40,140 que l'ID pour que l'on cercle unique que nous 563 00:27:40,140 --> 00:27:43,950 on aurait pu essayer de compléter était le même ID partout. 564 00:27:43,950 --> 00:27:46,320 Et en fait, vous pouvez aussi vérifier l'état. 565 00:27:46,320 --> 00:27:49,500 566 00:27:49,500 --> 00:27:50,270 mis à jour. 567 00:27:50,270 --> 00:27:55,680 >> Et puis ce est probablement le dernier cercle que, oh, eh bien, OK. 568 00:27:55,680 --> 00:28:00,480 Alors parfois il vous montre un état de l'arrêt d'un geste 569 00:28:00,480 --> 00:28:04,180 et il vous montre également un statut de lancer un nouveau geste lors 570 00:28:04,180 --> 00:28:09,140 il reconnaît avec certitude que vous avez commencé un nouveau geste. 571 00:28:09,140 --> 00:28:10,637 Par exemple dans ce cas. 572 00:28:10,637 --> 00:28:11,470 TOMAS REIMERS: Cool. 573 00:28:11,470 --> 00:28:12,511 Armaghan BEHLUM: Donc oui. 574 00:28:12,511 --> 00:28:14,420 Et puis, nous allons voir. 575 00:28:14,420 --> 00:28:16,490 Vous pouvez également remarquer si nous faisions 576 00:28:16,490 --> 00:28:22,179 un cercle et le geste a un type de champ appelé 577 00:28:22,179 --> 00:28:23,970 qui nous dit quel genre du geste qui est. 578 00:28:23,970 --> 00:28:27,829 Alors qu'il pourrait être utile pour nous vous essayez de faire ce que nous faisons. 579 00:28:27,829 --> 00:28:29,620 TOMAS REIMERS: Donc, la transition de retour à JS, 580 00:28:29,620 --> 00:28:31,696 la première chose qui me vient à aussi, en train de lire à travers ce code 581 00:28:31,696 --> 00:28:34,340 ce est qu'il ya une petite optimisation, qui est que nous fait 582 00:28:34,340 --> 00:28:35,980 ne ont pas besoin de cette si la condition, non? 583 00:28:35,980 --> 00:28:39,330 Parce que si gestes cadre de Dot Dot la longueur est égale à zéro, que pour la boucle de 584 00:28:39,330 --> 00:28:40,450 ne va pas fonctionner de toute façon. 585 00:28:40,450 --> 00:28:43,100 Donc, nous pouvons tout aussi bien aller de l'avant et se débarrasser de cela. 586 00:28:43,100 --> 00:28:46,620 Encore une fois, alors que vous êtes l'écriture de code il est important de revenir en arrière et de tri 587 00:28:46,620 --> 00:28:50,330 des refactor que vous réalisez que vous aurait pu faire quelque chose de mieux, 588 00:28:50,330 --> 00:28:53,370 ou qu'il ya une autre façon de le faire. 589 00:28:53,370 --> 00:28:57,170 Alors maintenant, nous allons juste pour nettoyer ce rapidement et aussi nettoyer votre code. 590 00:28:57,170 --> 00:28:58,310 Ce est une grosse affaire. 591 00:28:58,310 --> 00:28:59,870 >> Armaghan BEHLUM: Bon le style est très apprécié. 592 00:28:59,870 --> 00:29:01,828 >> TOMAS REIMERS: Vous pouvez toujours dire quand quelqu'un 593 00:29:01,828 --> 00:29:05,240 a code où il y avait un si état et puis ils enlevé, 594 00:29:05,240 --> 00:29:07,530 mais ils ne ont pas décommenter. 595 00:29:07,530 --> 00:29:10,147 Ce est très évident et il semble genre de laid. 596 00:29:10,147 --> 00:29:12,230 Armaghan BEHLUM: Alors, quel est prochain sur notre liste à faire? 597 00:29:12,230 --> 00:29:15,479 TOMAS REIMERS: Alors maintenant, comme nous le disions, Je suppose que la première chose que nous voulons faire 598 00:29:15,479 --> 00:29:17,970 est de se assurer que ce geste de effectivement un coup, non? 599 00:29:17,970 --> 00:29:18,270 >> Armaghan BEHLUM: Ouais. 600 00:29:18,270 --> 00:29:21,750 >> TOMAS REIMERS: Donc, nous disant que si notre au revoir est un peu comme un coup, 601 00:29:21,750 --> 00:29:25,280 nous irons avec lui est un coup, le première chose que nous devons dire, ce est bon, 602 00:29:25,280 --> 00:29:27,410 est le type le geste un coup, non? 603 00:29:27,410 --> 00:29:30,860 Pas un cercle ou un top, mais est-ce un coup? 604 00:29:30,860 --> 00:29:34,280 Donc, la façon dont nous pouvons le faire ce est que nous pouvons dire geste 605 00:29:34,280 --> 00:29:38,530 Type dot égale glissement égale comme une chaîne. 606 00:29:38,530 --> 00:29:44,030 >> Armaghan BEHLUM: [inaudible] geste Type égaux dot égale glisser. 607 00:29:44,030 --> 00:29:46,790 608 00:29:46,790 --> 00:29:47,730 Nous y sommes. 609 00:29:47,730 --> 00:29:49,438 >> TOMAS REIMERS: Et puis la dernière question 610 00:29:49,438 --> 00:29:53,170 nous voulons voir, ce est le geste dot Etat arrêt égale égale, non? 611 00:29:53,170 --> 00:29:55,860 Donc, ce est lorsque le geste a été arrêté. 612 00:29:55,860 --> 00:29:58,490 En fait, je pense que pour coup, je le savoir du haut de ma tête, 613 00:29:58,490 --> 00:30:00,340 mais vous êtes les bienvenus pour regarder vers le haut, lorsque vous 614 00:30:00,340 --> 00:30:05,627 glisser à chaque fois qu'il enregistre jusqu'à ce que vous arrêtez est un geste de démarrage. 615 00:30:05,627 --> 00:30:07,460 Et puis le dernier de juste un geste d'arrêt. 616 00:30:07,460 --> 00:30:11,090 Donc, il n'y aura qu'un seul arrêt geste, ce qui est excellent pour nous. 617 00:30:11,090 --> 00:30:17,180 Donc, ce que nous pouvons faire est de dire si le geste dot tapez glissement égale égale et le geste dot 618 00:30:17,180 --> 00:30:19,950 l'égalité de statut égal la santé mentale de se arrêter, puis laissez- 619 00:30:19,950 --> 00:30:21,725 cochez ici consoler journal dot geste. 620 00:30:21,725 --> 00:30:29,420 621 00:30:29,420 --> 00:30:30,790 >> Nous allons donc revenir ici. 622 00:30:30,790 --> 00:30:33,570 Nous allons actualiser la page. 623 00:30:33,570 --> 00:30:38,380 Et maintenant, la seule fois que quelque chose devrait être connecté console point, ce est quand nous faisons glisser. 624 00:30:38,380 --> 00:30:40,780 Et nous essayons de glisser et nous ne voyons rien. 625 00:30:40,780 --> 00:30:41,280 Droite? 626 00:30:41,280 --> 00:30:43,990 Donc ce est effectivement un gros problème. 627 00:30:43,990 --> 00:30:47,560 Nous ne voyons pas ce que nous nous attendions à. 628 00:30:47,560 --> 00:30:49,356 Et le débogage peut être une grande partie de cette. 629 00:30:49,356 --> 00:30:51,980 Nous sommes donc la première chose que va est-à-dire, OK, nous allons consoler dot 630 00:30:51,980 --> 00:30:54,568 connectez-vous si le geste dot tapez glissement égale égale. 631 00:30:54,568 --> 00:30:56,109 Armaghan BEHLUM: Oui, nous allons le faire. 632 00:30:56,109 --> 00:30:59,979 633 00:30:59,979 --> 00:31:02,020 TOMAS REIMERS: Donc, nous sommes va revenir à cela. 634 00:31:02,020 --> 00:31:03,140 Nous allons rafraîchir. 635 00:31:03,140 --> 00:31:04,020 Nous allons PASSER. 636 00:31:04,020 --> 00:31:05,150 Et nous allons voir un tas d'entre eux. 637 00:31:05,150 --> 00:31:05,650 D'ACCORD. 638 00:31:05,650 --> 00:31:08,710 Il apparaît donc clairement que le problème était à notre statut geste de points. 639 00:31:08,710 --> 00:31:14,000 Donc, si nous ouvrons un de ces nous allons regardez dans les objets et nous verrons, 640 00:31:14,000 --> 00:31:18,700 bien, ce est un arrêt, mais, oh, ça se appelle l'état, pas de statut. 641 00:31:18,700 --> 00:31:21,890 Donc, si nous retournons à notre code nous pouvons dire 642 00:31:21,890 --> 00:31:27,780 si le type de geste dot égale glissement égale et l'arrêt égale état geste de points égal, 643 00:31:27,780 --> 00:31:29,160 puis nous consolons dot enregistrons il. 644 00:31:29,160 --> 00:31:30,940 Et ainsi de rafraîchir. 645 00:31:30,940 --> 00:31:31,856 Nous PASSER. 646 00:31:31,856 --> 00:31:33,730 Et nous voyons que sur chaque coup, nous sommes seulement 647 00:31:33,730 --> 00:31:36,247 obtenir une, qui est la fin, ce qui est génial, non? 648 00:31:36,247 --> 00:31:37,080 Ce est ce que nous voulons. 649 00:31:37,080 --> 00:31:37,955 >> Armaghan BEHLUM: Yep. 650 00:31:37,955 --> 00:31:42,640 Et nous pouvons également remarquer que les ID chacun de ces gestes sont séparés. 651 00:31:42,640 --> 00:31:47,470 Alors que Tomas disait parce que nous sommes attraper cet état unique, qui 652 00:31:47,470 --> 00:31:52,850 existe à la fin d'un coup, nous sommes obtenir des gestes individuels séparés 653 00:31:52,850 --> 00:31:54,441 de Leap Motion. 654 00:31:54,441 --> 00:31:54,940 Grande. 655 00:31:54,940 --> 00:31:58,610 656 00:31:58,610 --> 00:32:03,040 >> TOMAS REIMERS: Allons de l'avant et il suffit de faire la chose la finale, qui est, 657 00:32:03,040 --> 00:32:04,826 >> Armaghan BEHLUM: Au revoir. 658 00:32:04,826 --> 00:32:06,425 >> TOMAS REIMERS: Awesome. 659 00:32:06,425 --> 00:32:08,925 Et maintenant, nous allons vérifier notre site Web. 660 00:32:08,925 --> 00:32:09,425 Une 661 00:32:09,425 --> 00:32:09,730 >> Armaghan BEHLUM: Deuxième. 662 00:32:09,730 --> 00:32:11,271 Nous ne avons, oui, nous ne appelons revoir. 663 00:32:11,271 --> 00:32:11,920 Grande. 664 00:32:11,920 --> 00:32:13,490 >> TOMAS REIMERS: Non, Goodbye est une fonction réelle. 665 00:32:13,490 --> 00:32:14,406 >> Armaghan BEHLUM: Ouais. 666 00:32:14,406 --> 00:32:15,670 Faisons cela. 667 00:32:15,670 --> 00:32:20,566 >> TOMAS REIMERS: Et quand nous Wave Goodbye, il dit au revoir. 668 00:32:20,566 --> 00:32:22,360 >> Armaghan BEHLUM: Nous avons la victoire. 669 00:32:22,360 --> 00:32:25,632 >> TOMAS REIMERS: trucs donc très excitant. 670 00:32:25,632 --> 00:32:28,590 Je espère que vous pouvez construire quelque chose d'autre, mais vous voyez l'idée de, non? 671 00:32:28,590 --> 00:32:30,260 Vous pouvez détecter des gestes. 672 00:32:30,260 --> 00:32:31,469 Vous pouvez appeler des fonctions. 673 00:32:31,469 --> 00:32:34,510 Et à partir de ce que vous donne vraiment certains blocs de construction très fondamentaux 674 00:32:34,510 --> 00:32:38,800 à-dire, oh, peut-être quand ils balayez vers le haut, parce que vous pouvez également détecter des choses 675 00:32:38,800 --> 00:32:39,674 direction comme. 676 00:32:39,674 --> 00:32:40,840 Je veux qu'ils fassent quelque chose. 677 00:32:40,840 --> 00:32:43,470 Ou quand ils swipe droit, je veulent qu'ils fassent quelque chose. 678 00:32:43,470 --> 00:32:45,880 Et nous pouvons commencer à obtenir créatif avec exactement comment 679 00:32:45,880 --> 00:32:48,840 nous allons améliorer notre site Web l'utilisation de ces mouvements de glissement, ou cercle 680 00:32:48,840 --> 00:32:53,695 des gestes ou des gestes de robinet, soit des robinets ou des robinets d'écran clé. 681 00:32:53,695 --> 00:32:56,070 Et puis autre que celui que vous êtes plus que bienvenus pour jouer 682 00:32:56,070 --> 00:32:59,640 avec les données réelles, mais si vous voulez faire 683 00:32:59,640 --> 00:33:03,870 que nous vous suggérons d'aller aux docs parce qu'ils sont effectivement très belle. 684 00:33:03,870 --> 00:33:05,034 Alors dirigé vers les docs maintenant. 685 00:33:05,034 --> 00:33:06,450 Ou voulez-vous parler? 686 00:33:06,450 --> 00:33:06,940 >> Armaghan BEHLUM: Ouais. 687 00:33:06,940 --> 00:33:07,920 Faisons cela. 688 00:33:07,920 --> 00:33:13,680 Aussi un autre friandise de conseils, ne essayer de penser de cette en 3D. 689 00:33:13,680 --> 00:33:22,611 Donc en fait nous allons tirer vers le haut ces gestes une fois de plus journal console dot geste 690 00:33:22,611 --> 00:33:24,290 et nous le faisons. 691 00:33:24,290 --> 00:33:29,460 Revenez dans et maintenant nous allons essayer une deux d'entre eux, quelques personnes. 692 00:33:29,460 --> 00:33:32,940 >> Si nous allons et de départ ces gestes ainsi 693 00:33:32,940 --> 00:33:36,830 comme vous pouvez voir que ils sont dimensionnalité 694 00:33:36,830 --> 00:33:38,980 est dans trois directions, en fait. 695 00:33:38,980 --> 00:33:42,500 Donc, ne pas limiter pas vous à un écran 2D 696 00:33:42,500 --> 00:33:45,200 Même si vous pouvez sur un site 2D. 697 00:33:45,200 --> 00:33:49,152 Vous pouvez essayer de penser comment un utilisateur pourraient interagir avec le site Web en 3D. 698 00:33:49,152 --> 00:33:50,360 TOMAS REIMERS: Dans un espace 3D. 699 00:33:50,360 --> 00:33:51,401 Armaghan BEHLUM: Exactement. 700 00:33:51,401 --> 00:33:52,310 Et oui. 701 00:33:52,310 --> 00:33:55,350 Donc vous obtenir les directions, vitesses, tous ces bits d'informations fraîches. 702 00:33:55,350 --> 00:33:58,890 >> TOMAS REIMERS: Et si vous n'êtes pas courant de cela, il va de x, y, 703 00:33:58,890 --> 00:34:01,566 puis z est cette dernière dimension. 704 00:34:01,566 --> 00:34:04,690 Juste quelque chose que vous êtes probablement familiariser avec si vous avez fait affaire avec la 3D 705 00:34:04,690 --> 00:34:05,731 coordonner les plans avant. 706 00:34:05,731 --> 00:34:09,565 Si vous ne avez pas, ce est la même chose qu'un 2D une exception il ya une troisième dimension. 707 00:34:09,565 --> 00:34:11,420 Nous l'appelons z. 708 00:34:11,420 --> 00:34:16,449 Et tout, un peu comme direction, qui est où il va, 709 00:34:16,449 --> 00:34:19,810 Position-- je pense qu'il pourrait même exposer l'accélération, je ne suis pas sûr. 710 00:34:19,810 --> 00:34:21,341 >> Armaghan BEHLUM: Oui, je crois. 711 00:34:21,341 --> 00:34:22,340 Il a certainement vitesse. 712 00:34:22,340 --> 00:34:25,699 Je suis en fait pas 100% sûr de l'accélération. 713 00:34:25,699 --> 00:34:28,810 >> TOMAS REIMERS: Il peut être une option vous pouvez passer à quelque chose. 714 00:34:28,810 --> 00:34:33,409 Donc, la position et la vitesse sont exposés dans ce genre de trois coordonnées. 715 00:34:33,409 --> 00:34:38,812 Donc, x, y, z ou x delta, le delta y, z delta. 716 00:34:38,812 --> 00:34:44,130 Donc, maintenant dirigé à la documentation ce est developer.leapmotion.com 717 00:34:44,130 --> 00:34:46,460 et puis vous pouvez cliquer sur Documentation. 718 00:34:46,460 --> 00:34:50,010 Encore une fois, Leap Motion a toutes ces API merveilleux, un pour JavaScript, 719 00:34:50,010 --> 00:34:53,750 un pour C Sharp et Unity, un pour C ++, un pour Java, un pour Python, 720 00:34:53,750 --> 00:34:59,020 et un pour Objective C. Je ai personnellement pourrait vous pousser vers JavaScript 721 00:34:59,020 --> 00:35:01,280 ou si vous voulez apprendre une nouvelle langue, essayez Python. 722 00:35:01,280 --> 00:35:05,910 Ces deux langues que je ai travaillé avant et ils sont vraiment facile à apprendre 723 00:35:05,910 --> 00:35:10,250 et vous savez déjà JavaScript, qui en fait un très bon candidat. 724 00:35:10,250 --> 00:35:12,930 >> Un mot de prudence lorsque vous entrez les docs. 725 00:35:12,930 --> 00:35:15,940 Assurez-vous que vous êtes sur Docs v2.0. 726 00:35:15,940 --> 00:35:20,250 Parce que si vous êtes sur versions un, cela ne fonctionnera pas. 727 00:35:20,250 --> 00:35:21,830 Aussi pour la galerie d'exemple. 728 00:35:21,830 --> 00:35:25,100 Nous avons passé un bon 30 minutes essayer le débogage notre Leap 729 00:35:25,100 --> 00:35:28,640 avant nous avons réalisé que V1 ne fonctionne pas avec V2. 730 00:35:28,640 --> 00:35:31,660 Il suffit donc de vous assurer que vous êtes sur la version deux. 731 00:35:31,660 --> 00:35:33,904 Et puis je vais lui laisser montrer vos docs. 732 00:35:33,904 --> 00:35:34,820 Armaghan BEHLUM: Ouais. 733 00:35:34,820 --> 00:35:39,480 Alors, voici la liste de l'API, puis certains morceaux de l'information 734 00:35:39,480 --> 00:35:41,420 que nous vous avons déjà dit. 735 00:35:41,420 --> 00:35:44,270 Joli petit flottement mains au-dessus d'un mouvement Leap. 736 00:35:44,270 --> 00:35:47,850 Et un rappel à penser sur l'espace en 3D. 737 00:35:47,850 --> 00:35:53,140 Un des premiers objets à penser avec Leap Motion sont les mains, bien sûr. 738 00:35:53,140 --> 00:35:57,060 Nous avons vu ceux qui sont reconnus par le Visualizer. 739 00:35:57,060 --> 00:35:59,180 Et alors vous pourriez avoir vu qu'il reconnaissait 740 00:35:59,180 --> 00:36:03,202 une partie de poignet et de la le bras qui lui est associé. 741 00:36:03,202 --> 00:36:05,410 TOMAS REIMERS: Si vous voulez de remonter le Visualiseur. 742 00:36:05,410 --> 00:36:07,190 Armaghan BEHLUM: Ouais, nous allons le faire à nouveau. 743 00:36:07,190 --> 00:36:10,148 TOMAS REIMERS: Vous pouvez voir, toujours juste un bon rappel pour voir en quelque sorte, 744 00:36:10,148 --> 00:36:14,060 Visualiseur tente de montrer toutes les données qui Leap voit. 745 00:36:14,060 --> 00:36:17,606 Donc, vous verrez que nous avons ce genre de quatre points 746 00:36:17,606 --> 00:36:19,230 par le poignet et les doigts réelle. 747 00:36:19,230 --> 00:36:21,625 Et vous avez aussi cette boule à la paume. 748 00:36:21,625 --> 00:36:24,000 Tous ces éléments sont des points Reconnaître reconnu par le saut. 749 00:36:24,000 --> 00:36:25,041 >> Armaghan BEHLUM: Exactement. 750 00:36:25,041 --> 00:36:32,300 Et ainsi, avec cet objet à la main chaque image a un tableau de la main 751 00:36:32,300 --> 00:36:36,470 ainsi où vous pouvez également obtenir l'entre de bonnes mains et gauche. 752 00:36:36,470 --> 00:36:39,410 Vous pouvez obtenir ce qui direction les mains 753 00:36:39,410 --> 00:36:42,410 face avec la normale direction de la paume, 754 00:36:42,410 --> 00:36:45,470 ou comme ils l'appellent la paume normale. 755 00:36:45,470 --> 00:36:46,510 Quoi d'autre avons-nous? 756 00:36:46,510 --> 00:36:48,120 Nous avons également, oops. 757 00:36:48,120 --> 00:36:50,640 Essayons de faire défiler vers le bas de cette façon. 758 00:36:50,640 --> 00:36:54,410 Les bras, les doigts sont représentée par le doigt 759 00:36:54,410 --> 00:36:57,890 classe, qui est un objet orientable. 760 00:36:57,890 --> 00:37:01,420 Donc, comme nous le disions, nous avons vu que tableau de pointables pour chaque main. 761 00:37:01,420 --> 00:37:04,240 Ce sont la petite doigts à penser. 762 00:37:04,240 --> 00:37:09,809 Ce est donc un bon aperçu d'aller par le biais d'essayer de comprendre. 763 00:37:09,809 --> 00:37:11,850 TOMAS REIMERS: [inaudible] main anatomie là-haut. 764 00:37:11,850 --> 00:37:13,680 Armaghan BEHLUM: Oui, exactement. 765 00:37:13,680 --> 00:37:14,220 Donc oui. 766 00:37:14,220 --> 00:37:18,150 Il ya beaucoup de données brutes que le Leap Motion prend en interprète bien 767 00:37:18,150 --> 00:37:20,750 pour vous, ce est tellement un grand idée de passer par ici 768 00:37:20,750 --> 00:37:25,300 et essayer de comprendre comment Leap a déjà compris les choses pour vous 769 00:37:25,300 --> 00:37:28,830 et ainsi les informations que vous disposer à partir de là. 770 00:37:28,830 --> 00:37:33,150 Et puis à partir de là je recommanderais entrer dans cette section gauche ici, 771 00:37:33,150 --> 00:37:39,210 qui va, bien en fait non, ce sont en fait juste des trucs plus API about-- 772 00:37:39,210 --> 00:37:42,670 >> TOMAS REIMERS: La référence de l'API à la bas est généralement un bon endroit où aller. 773 00:37:42,670 --> 00:37:45,720 Vous les gars probablement vu cela quand nous avons fait le Google Maps PSET. 774 00:37:45,720 --> 00:37:48,590 Mais la référence vraiment va juste à travers tout 775 00:37:48,590 --> 00:37:54,540 des fonctions et des paramètres disponible dans l'objet à vous. 776 00:37:54,540 --> 00:37:55,500 >> Armaghan BEHLUM: Ouais. 777 00:37:55,500 --> 00:37:57,740 Par exemple, ce est ce que Je cherchais avant. 778 00:37:57,740 --> 00:38:01,030 Lorsque nous avons un nous de la main peut aller et de comprendre 779 00:38:01,030 --> 00:38:03,750 comment Leap recommande à nous de trouver une main. 780 00:38:03,750 --> 00:38:06,080 Comme je l'ai dit plus tôt, nous avons une gamme de mains. 781 00:38:06,080 --> 00:38:10,340 Cherchez à savoir si nous avons les mains et puis essayer de saisir une seule main 782 00:38:10,340 --> 00:38:12,410 d'interagir avec cette manière. 783 00:38:12,410 --> 00:38:16,540 Donc, ce est ce que nous recommander pour vous les gars. 784 00:38:16,540 --> 00:38:18,400 Les gestes et des choses ainsi. 785 00:38:18,400 --> 00:38:23,857 Cette documentation de l'API va être un outil fantastique pour vous les gars. 786 00:38:23,857 --> 00:38:25,440 Avez-vous d'autres recommandations? 787 00:38:25,440 --> 00:38:26,398 >> TOMAS REIMERS: Je ne sais pas. 788 00:38:26,398 --> 00:38:27,590 Je pense que ce est bon pour l'instant. 789 00:38:27,590 --> 00:38:29,340 >> Armaghan BEHLUM: Ouais, Je pense de même. 790 00:38:29,340 --> 00:38:33,330 Ne hésitez pas à nous envoyer un courriel et obtenir des en contact à propos de Leap Motion 791 00:38:33,330 --> 00:38:36,210 si vous rencontrez peut-être des problèmes ou le besoin des recommandations. 792 00:38:36,210 --> 00:38:40,310 Et nous pouvons essayer de comprendre des choses avec vous les gars ainsi. 793 00:38:40,310 --> 00:38:40,810 Merci. 794 00:38:40,810 --> 00:38:42,360 >> TOMAS REIMERS: Très bien. 795 00:38:42,360 --> 00:38:42,880