Amusez-vous avec Leap Motion

  5 avril 2016 Mis à jour le 15 mai 2016   30 min   80 vus

Le Leap Motion est un dispositif de reconnaissance de mouvements des mains créé et développée par Leap Motion, Inc. Vous pouvez vous en acheter un sur leur site à l’adresse suivante : https://www.leapmotion.com/, ou venir au FabLabw et demander à l’utiliser pour le tester directement sur votre machine.

Initiation Leap Motion en Javascript

Nous allons écrire une application qui fera bouger une image en fonction des mouvements de votre main.

Voici les étapes :
  • Téléchargez puis installez Leap_Motion_Installer_release_public_win_x86_2.3.1+31549_ah1886.exe pour Windows depuis ce lien è (je te passerai le lien, à moins qu’on puisse mettre un fichier d’environ 115Mo sur le serveur). Ou le Leap_Motion_Installer_release_public_osx_2.3.1+31549.dmg pour Mac OSX depuis ce lien.
  • Téléchargez aussi le fichier blop.png
  • Activez le Leap Motion Control Panel

Leap_1

  • Connectez le Leap Motion à votre PC et laissez les drivers s’installer. Si le contrôleur vous affiche une erreur de maculage, frottez doucement avec une de vos manches le haut du Leap Motion.
  • Vous aurez besoin de votre navigateur internet et d’un éditeur de texte tel que Notepad++ ou Sublimetext.

https://notepad-plus-plus.org/

https://www.sublimetext.com/

  • Créez un nouveau fichier html et ouvrez-le dans votre éditeur de texte.
  • Vous mettrez également le fichier blop.png dans le même chemin que celui de votre fichier html.

Leap_2

  • Insérez ce code html qui servira de structure avant de pouvoir commencer à programmer en javascript. L’attribut <div id= »output »></div> nous permettra notamment d’avoir la sortie de notre code dans le navigateur.

Capture d’écran 2016-04-07 à 15.40.05

  • Ensuite, nous allons ajouter le fichier javascript qui contient l’API Leap Motion et celui qui contient les plugins nécessaires après l’attribut </body> :

code 2

  • Nous allons pouvoir désormais commencer à programmer notre code javascript.

Ajouter la zone de script dans laquelle nous allons travailler.

code 3

  • Nous allons créer un objet qui fait référence à notre image :

code 4

  • Maintenant, nous allons faire une boucle qui surveillera à chaque capture les positions des mains grâce à la méthode forEach et positionnera l’image en adéquation.

code 5

  • Mettons en place notre classe Image qui va gérer les éléments html et leurs interactions.

Nous utiliserons l’image de la mascotte du FabLab-w, notre cher Blop !

code 6

  • Nous allons nous servir du plugin Leap Motion screenPosition() qui permet la conversion des coordonnées réelles vers des coordonnées sur l’écran.

code 7

  • Il nous faut maintenant faire en sorte que l’image reste au centre lorsque des mouvements avec les mains seront faits.

code 8

  • Nous avons bientôt fini ! Nous allons créer notre objet images[0] = new Image(); à la fin de notre script. Au final, ça donne ça !

code 9

  • Maintenant, ouvrez votre fichier html dans votre navigateur, vous pouvez bouger notre ami Blop en plaçant votre main au-dessus du Leap Motion.

Leap_3

 

  • Note : si vous voulez ajouter un deuxième blop.png, il suffit de rajouter un nouvel objet.

code 10


Leap_4

 

  • Et vous pouvez désormais utiliser vos deux mains pour les contrôler. Une pour chaque Blop !
  • Si vous désirez directement tester le résultat de ce tuto, le fichier leap_motion.html et blop.png sont disponibles pour téléchargement sur ce site.

Réagir sur l'article

Partages
Partager