1 <!DOCTYPE html> |
|
2 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" class="has_sidebar fixed-header earthrise"> |
|
3 <head> |
|
4 <meta content="text/html; charset=UTF-8" http-equiv="content-type" /> |
|
5 <meta name="description" content="Tutoriel sur le développement et l'utilisation de code Processing utilisant le Middleware TraKERS."/> |
|
6 <meta name="keywords" content="TraKERS, TraKERS Processing, TraKERS Front Processing, TraKERS Front, Kinect Processing"/> |
|
7 <title>TraKERS v3.5 - Tutorial Processing</title> |
|
8 </head> |
|
9 |
|
10 <body> |
|
11 <p>TraKERS (Tracking using Kinect and Extracting Robust Skeletons) est une interface basée sur la détection de gestures / positions du squelette envoyé par le SDK Microsoft (1.5) de Kinect. Il est composé d'un Middleware assurant l'interaction avec Kinect, un rendu visuel et l'envoi de notifications sous forme de messages OSC. |
|
12 Le deuxième module de ce projet est un Front en Processing doté d'un client TUIO et récupérant les messages OSC (sous forme d'objets tels que des Curseurs ou des Strings).</p> |
|
13 |
|
14 <p>Ce tutoriel concerne ce second module et a pour but d'expliquer le fonctionnement général d'un sketch Processing et la récupération des notifications du Middleware. Il sera agrémenté d'exemples fonctionnels créés pour les besoins de ce tutoriel ou inspirés d'exemples réels disponibles sur le site processing.org.</p> |
|
15 |
|
16 <h2>Sommaire</h2> |
|
17 |
|
18 <ol type="I"> |
|
19 <a href="#I"><li>Installation de Processing</li></a> |
|
20 <a href="#II"><li>Structure d'un sketch</li></a> |
|
21 <a href="#III"><li>Fonctions principales de Processing</li></a> |
|
22 <a href="#IV"><li>Récupérer les objets envoyés par le Middleware TraKERS via un Client TUIO</li></a> |
|
23 <a href="#V"><li>Interactions entre les objets TUIO récupérés et des fonctions de dessin basiques</li></a> |
|
24 <a href="#VI"><li>Quelques exemples d'implémentation</li></a> |
|
25 <a href="#VII"><li>Références</li></a> |
|
26 </ol> |
|
27 |
|
28 <hr /> |
|
29 |
|
30 <ol type="I" start="1"> |
|
31 <h3><a name="I"><li>Installation de Processing</li></a></h3> |
|
32 </ol> |
|
33 |
|
34 <p>Avant de pouvoir modifier les sketches Processing fournis dans l'installateur, il est nécessaire d'installer Processing.<br /> |
|
35 Vous trouverez l'archive ici :</p> |
|
36 |
|
37 <a href="http://processing.googlecode.com/files/processing-1.5.1-windows.zip">Processing pour Windows avec Java</a><br /> |
|
38 <a href="http://processing.googlecode.com/files/processing-1.5.1-windows-expert.zip">Processing pour Windows sans Java</a> |
|
39 |
|
40 <p>Une fois téléchargé, il vous suffit de le dézipper, et d'affecter tous les types de fichiers .pde à l'exécutable Processing fourni dans l'archive.</p> |
|
41 |
|
42 <p>Si ce n'est pas déjà fait, il peut être utile de spécifier dans le path Windows l'emplacement du répertoire où vous avez extrait l'archive.</p> |
|
43 |
|
44 <hr /> |
|
45 |
|
46 <ol type="I" start="2"> |
|
47 <h3><a name="#II"><li>Structure d'un sketch</li></a></h3> |
|
48 </ol> |
|
49 |
|
50 <p>Un sketch est représenté par un dossier, contenant plusieurs choses : |
|
51 <ul> |
|
52 <li>Un ou plusieurs fichiers d'extension .pde (Qui contiennent le code Processing). Le .pde principal doit avoir le même nom que le dossier qui les contient.</li> |
|
53 <li>Un dossier code, contenant les libraries appelées dans les fichiers .pde.</li> |
|
54 </ul> |
|
55 Si le sketch a été exporté en application, le dossier principal contient également jusqu'à trois dossiers, qui sont : |
|
56 <ul> |
|
57 <li>application.linux (si l'option Linux a été cochée durant l'export).</li> |
|
58 <li>application.macosx (si l'option Mac OS X a été cochée durant l'export).</li> |
|
59 <li>application.windows (si l'option Windows a été cochée durant l'export).</li> |
|
60 </ul> |
|
61 Ceux-ci contiennent les applications compilées du code source des fichiers .pde.<br /> |
|
62 Il est également possible d'exporter un applet. On obtiendra donc : |
|
63 <ul> |
|
64 <li>applet (si l'option Linux a été cochée durant l'export).</li> |
|
65 </ul> |
|
66 </p> |
|
67 |
|
68 <p>Concernant le projet TraKERS, les sketches fournis peuvent contenir différents fichiers .pde (un pour chaque classe), un fichier TuioFunctions.pde permettant de récupérer les objets TUIO envoyés par le Middleware et un fichier principal du même nom que le sketch.</p> |
|
69 |
|
70 <hr /> |
|
71 |
|
72 <ol type="I" start="3"> |
|
73 <h3><a name="#III"><li>Fonctions principales de Processing</li></a></h3> |
|
74 </ol> |
|
75 |
|
76 <p>En Processing, les variables déclarées absolues (en dehors d'une fonction ou d'une classe) sont visibles dans tous les autres fichiers .pde du sketch. Il en va de même pour les classes et fonctions (et non méthodes de classe, qui est une fonction appartenant à la classe et donc ne pouvant être appelée qu'en créant un objet de cette classe).</p> |
|
77 <p>Il existe deux fonctions principales, qui sont : |
|
78 <ul> |
|
79 <li>void setup() : Initialise les différentes variables du sketch.</li> |
|
80 <li>void draw() : Fonction rappelée automatiquement, destinée à contenir des instructions de dessin ou des appels de fonctions.</li> |
|
81 </ul> |
|
82 La gestion des événements souris est naturelle, comme l'indique l'exemple ci-dessous:<br /><br /> |
|
83 |
|
84 <code> |
|
85 public void setup()<br /> |
|
86 {<br /> |
|
87 size(200,200);<br /> |
|
88 background(0);<br /> |
|
89 }<br /> |
|
90 <br /> |
|
91 public void draw()<br /> |
|
92 {<br /> |
|
93 stroke(255);<br /> |
|
94 if(mousePressed)<br /> |
|
95 {<br /> |
|
96 line(mouseX,mouseY,pmouseX,pmouseY);<br /> |
|
97 }<br /> |
|
98 }<br /> |
|
99 </code> |
|
100 <br /> |
|
101 </p> |
|
102 |
|
103 <hr /> |
|
104 |
|
105 <ol type="I" start="4"> |
|
106 <h3><a name="#IV"><li>Récupérer les objets envoyés par le Middleware TraKERS via un Client TUIO</li></a></h3> |
|
107 </ol> |
|
108 |
|
109 <p>Les objets TUIO exploités dans le cadre de TraKERS sont de deux types : |
|
110 <ul> |
|
111 <li>TuioCursor : Les curseurs sont utilisés pour transmettre des points au Front Processing. On récupère leurs coordonnées sous forme de TuioPoint, qui possèdent comme attributs les valeurs du point en X, Y et Z.</li> |
|
112 <li>TuioString : Elles comportent une String ayant pour valeur la notification du Middleware en cas de détection de gesture par exemple.</li> |
|
113 </ul> |
|
114 </p> |
|
115 |
|
116 <p>Voici les différentes implémentations permettant d'accéder à ces objets via le client. |
|
117 On appelle dans cet exemple plusieurs fonctions si des curseurs on été reçus par le client.<br /> |
|
118 Un curseur représente une main dans la zone de recherche des mains présente dans le Middleware.<br /><br /> |
|
119 <code> |
|
120 void tuioInput()<br /> |
|
121 {<br /> |
|
122 Vector tuioCursorList = tuioClient.getTuioCursors();<br /> |
|
123 <br /> |
|
124 if(tuioCursorList.size() <= 0)<br /> |
|
125 {<br /> |
|
126 //Code si on ne reçoit pas de curseurs <=> que aucune main n'est dans la zone de recherche des mains.<br /> |
|
127 }<br /> |
|
128 <br /> |
|
129 if(tuioCursorList.size() == 1)<br /> |
|
130 {<br /> |
|
131 //Code si une main est détectée.<br /> |
|
132 //Par exemple, on peut faire appel à une fonction qu'on nommera arbitrairement handleOneHand et qui prendra en paramètre le curseur.<br /> |
|
133 handleOneHand(tuioCursorList.elementAt(0));<br /> |
|
134 }<br /> |
|
135 else if(tuioCursorList.size() == 2)<br /> |
|
136 {<br /> |
|
137 //Code si les deux mains sont détectées.<br /> |
|
138 //Par exemple, on peut faire appel à une fonction qu'on nommera arbitrairement handleBothHands et qui prendra en paramètre la liste des curseurs récupérés par le client.<br /> |
|
139 handleBothHands(tuioCursorList);<br /> |
|
140 }<br /> |
|
141 }<br /> |
|
142 </code> |
|
143 Le code suivant montre comment on peut extraire le point contenu dans le curseur.<br /> |
|
144 <code> |
|
145 void handleOneHand(TuioCursor handCursor)<br /> |
|
146 {<br /> |
|
147 TuioPoint pt = handCursor.getPosition();//(TuioPoint)pointList.get(j);<br /> |
|
148 //Code manipulant le point.<br /> |
|
149 //Par exemple un affichage de texte.<br /> |
|
150 text(pt.getX() + " " + pt.getY() + " " + pt.getZ());<br /> |
|
151 }<br /> |
|
152 </code> |
|
153 Le code suivant montre comment on peut extraire les points contenus dans une liste de deux curseurs.<br /> |
|
154 <code> |
|
155 void handleBothHands(Vector tuioCursorList)<br /> |
|
156 {<br /> |
|
157 TuioCursor handLeftCursor = (TuioCursor)tuioCursorList.elementAt(0);<br /> |
|
158 TuioCursor handRightCursor = (TuioCursor)tuioCursorList.elementAt(1);<br /> |
|
159 TuioPoint pt;<br /> |
|
160 <br /> |
|
161 pt = (TuioPoint)handLeftCursor.getPosition();<br /> |
|
162 //Code pour traiter la position de la première main.<br /> |
|
163 //Par exemple un affichage de texte.<br /> |
|
164 text(pt.getX() + " " + pt.getY() + " " + pt.getZ());<br /> |
|
165 pt = (TuioPoint)handRightCursor.getPosition();<br /> |
|
166 //Code pour traiter la position de la seconde main.<br /> |
|
167 //Par exemple un affichage de texte.<br /> |
|
168 text(pt.getX() + " " + pt.getY() + " " + pt.getZ());<br /> |
|
169 }<br /> |
|
170 </code> |
|
171 </p> |
|
172 |
|
173 <p>On appelle dans cet exemple une fonction si un message a été reçu par le client.<br /> |
|
174 Un message représente un événement notifié par le Middleware.<br /><br /> |
|
175 <code> |
|
176 void tuioInput()<br /> |
|
177 {<br /> |
|
178 Vector tuioStringList = tuioClient.getTuioStrings();<br /> |
|
179 if(tuioStringList.size() <= 0)<br /> |
|
180 {<br /> |
|
181 text("Gesture non détectée.");<br /> |
|
182 }<br /> |
|
183 else<br /> |
|
184 {<br /> |
|
185 TuioString message = (TuioString)tuioStringList.elementAt(0);<br /> |
|
186 text(message.getMessage());<br /> |
|
187 }<br /> |
|
188 }<br /> |
|
189 </code> |
|
190 </p> |
|
191 |
|
192 <hr /> |
|
193 |
|
194 <ol type="I" start="5"> |
|
195 <h3><a name="#V"><li>Interactions entre les objets TUIO récupérés et des fonctions de dessin basiques</li></a></h3> |
|
196 </ol> |
|
197 |
|
198 <p>Dans les exemples de code vu précédemment, nous aurions pu remplacer la fonction text() par une fonction de votre cru, comme celle-ci :<br /><br /> |
|
199 <code> |
|
200 //Cette fonction dessine une ellipse à la position (x;y;z) et prend en paramètre la fait qu'il s'agisse de la main droite ou gauche.<br /> |
|
201 void drawEllipse(float x, float y, float z, boolean leftHand)<br /> |
|
202 {<br /> |
|
203 //On met la couleur de ce qui va venir en bleu.<br /> |
|
204 fill(0, 0, 255);<br /> |
|
205 //On ne met pas de bordure à ce qu'on va afficher.<br /> |
|
206 stroke(0,0,0);<br /> |
|
207 //On créer un point, une épaisseur de forme.<br /> |
|
208 //Z est la distance de la main par rapport à Kinect. La zone de recherche des mains est toujours comprise entre minDistHands et maxDistHands<br /> |
|
209 float weight = map(z, minDistHands, maxDistHands, 50, 1);<br /> |
|
210 float redColor = map(z, minDistHands, maxDistHands, 255, 80);<br /> |
|
211 <br /> |
|
212 //S'il s'agit de la main gauche, on colore en tons de rouge.<br /> |
|
213 if(leftHand)<br /> |
|
214 fill(redColor,0,0);<br /> |
|
215 //Sinon en tons de vert.<br /> |
|
216 else<br /> |
|
217 fill(0,redColor,0);<br /> |
|
218 <br /> |
|
219 //Si le trait est assez gros, on color en tons de bleu.<br /> |
|
220 if(weight >= 30)<br /> |
|
221 {<br /> |
|
222 fill(0, 0, redColor);<br /> |
|
223 }<br /> |
|
224 <br /> |
|
225 //On dessine une ellipse.<br /> |
|
226 ellipse(x+20, y+100, weight, weight);<br /> |
|
227 }<br /> |
|
228 </code> |
|
229 </p> |
|
230 |
|
231 <hr /> |
|
232 |
|
233 <ol type="I" start="6"> |
|
234 <h3><a name="#VI"><li>Quelques exemples d'implémentation</li></a></h3> |
|
235 </ol> |
|
236 |
|
237 <p>Les exemples fournis dans l'installeur sont répartis dans 4 dossiers principaux : |
|
238 <ul> |
|
239 <li>Trakers : Permet d'afficher des ellipses sur le passage d'une ou deux mains se situant à une certaine distance de Kinect.</li> |
|
240 <li>Trakers_gestures : Permet d'afficher le code des gestures détectées par Kinect et notifiées depuis le Middleware.</li> |
|
241 <li>Fluid_manipulation (code importé de processing.org) : Simule l'action des mains sur un fluide.</li> |
|
242 <li>Smoke_manipulation (code importé de processing.org) : Simule l'action des mains sur de la fumée.</li> |
|
243 <li>Interaction examples (code importé de processing.org) : Quelques petits exemples utilisant des formes basiques et réagissant à la position de la main la plus proche de Kinect.</li> |
|
244 </ul> |
|
245 </p> |
|
246 |
|
247 <hr /> |
|
248 |
|
249 <ol type="I" start="7"> |
|
250 <h3><a name="#VII"><li>Références</li></a></h3> |
|
251 </ol> |
|
252 |
|
253 <p>Voici quelques liens utiles où se trouvent les dépendances trop lourdes pour être incluses dans cet installeur. Ils vont permettront également d'approfondissant vos connaissances sur Processing ou TUIO. |
|
254 Il vous est possible d'utiliser eclipse pour compiler du Processing. |
|
255 <ul> |
|
256 <li><a href="http://www.microsoft.com/en-us/kinectforwindows/develop/developer-downloads.aspx">SDK Kinect 1.5 de Microsoft</a></li> |
|
257 <li><a href="http://www.tuio.org/">TUIO</a></li> |
|
258 <li><a href="http://processing.org/">Processing.org</a></li> |
|
259 <li><a href="http://bodytag.org/">Autres exemples en Processing</a></li> |
|
260 <li><a href="http://processing.org/learning/eclipse/">Processing sous eclipse</a></li> |
|
261 </ul> |
|
262 </p> |
|
263 |
|
264 <p>Si vous expérimentez des difficultés ou souhaitez nous soumettre une requête, veuillez consulter le fichier contact.txt à la racine du projet.</p> |
|
265 </body> |
|
266 </html> |
|