|
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 - 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.0) 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 <ol type="I"> |
|
17 <a href="#I"><li>Installation de Processing</li></a> |
|
18 <a href="#II"><li>Structure d'un sketch</li></a> |
|
19 <a href="#III"><li>Fonctions principales de Processing</li></a> |
|
20 <a href="#IV"><li>Récupérer les objets envoyés par le Middleware TraKERS via un Client TUIO</li></a> |
|
21 <a href="#V"><li>Interactions entre les objets TUIO récupérés et des fonctions de dessin basiques</li></a> |
|
22 <a href="#VI"><li>Quelques exemples d'implémentation</li></a> |
|
23 <a href="#VII"><li>Références</li></a> |
|
24 </ol> |
|
25 |
|
26 <hr /> |
|
27 |
|
28 <ol type="I" start="1"> |
|
29 <a name="I"><li>Installation de Processing</li></a> |
|
30 </ol> |
|
31 |
|
32 <p>Avant de pouvoir modifier les sketches Processing fournis dans l'installateur, il est nécessaire d'installer Processing.<br /> |
|
33 Vous trouverez l'archive ici :</p> |
|
34 |
|
35 <a href="http://processing.googlecode.com/files/processing-1.5.1-windows.zip">Processing pour Windows avec Java</a><br /> |
|
36 <a href="http://processing.googlecode.com/files/processing-1.5.1-windows-expert.zip">Processing pour Windows sans Java</a> |
|
37 |
|
38 <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> |
|
39 |
|
40 <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> |
|
41 |
|
42 <hr /> |
|
43 |
|
44 <ol type="I" start="2"> |
|
45 <a name="#II"><li>Structure d'un sketch</li></a> |
|
46 </ol> |
|
47 |
|
48 <p>Un sketch est représenté par un dossier, contenant plusieurs choses : |
|
49 <ul> |
|
50 <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> |
|
51 <li>Un dossier code, contenant les libraries appelées dans les fichiers .pde.</li> |
|
52 </ul> |
|
53 Si le sketch a été exporté en application, le dossier principal contient également jusqu'à trois dossiers, qui sont : |
|
54 <ul> |
|
55 <li>application.linux (si l'option Linux a été cochée durant l'export).</li> |
|
56 <li>application.macosx (si l'option Mac OS X a été cochée durant l'export).</li> |
|
57 <li>application.windows (si l'option Windows a été cochée durant l'export).</li> |
|
58 </ul> |
|
59 Ceux-ci contiennent les applications compilées du code source des fichiers .pde.<br /> |
|
60 Il est également possible d'exporter un applet. On obtiendra donc : |
|
61 <ul> |
|
62 <li>applet (si l'option Linux a été cochée durant l'export).</li> |
|
63 </ul> |
|
64 </p> |
|
65 |
|
66 <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> |
|
67 |
|
68 <hr /> |
|
69 |
|
70 <ol type="I" start="3"> |
|
71 <a name="#III"><li>Fonctions principales de Processing</li></a> |
|
72 </ol> |
|
73 |
|
74 <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> |
|
75 <p>Il existe deux fonctions principales, qui sont : |
|
76 <ul> |
|
77 <li>void setup() : Initialise les différentes variables du sketch.</li> |
|
78 <li>void draw() : Fonction rappelée automatiquement, destinée à contenir des instructions de dessin ou des appels de fonctions.</li> |
|
79 </ul> |
|
80 La gestion des événements souris est naturelle, comme l'indique l'exemple ci-dessous:<br /><br /> |
|
81 |
|
82 <code> |
|
83 public void setup()<br /> |
|
84 {<br /> |
|
85 size(200,200);<br /> |
|
86 background(0);<br /> |
|
87 }<br /> |
|
88 <br /> |
|
89 public void draw()<br /> |
|
90 {<br /> |
|
91 stroke(255);<br /> |
|
92 if(mousePressed)<br /> |
|
93 {<br /> |
|
94 line(mouseX,mouseY,pmouseX,pmouseY);<br /> |
|
95 }<br /> |
|
96 }<br /> |
|
97 </code> |
|
98 <br /> |
|
99 </p> |
|
100 |
|
101 <hr /> |
|
102 |
|
103 <ol type="I" start="4"> |
|
104 <a name="#IV"><li>Récupérer les objets envoyés par le Middleware TraKERS via un Client TUIO</li></a> |
|
105 </ol> |
|
106 |
|
107 <p>Les objets TUIO exploités dans le cadre de TraKERS sont de deux types : |
|
108 <ul> |
|
109 <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> |
|
110 <li>TuioString : Elles comportent une String ayant pour valeur la notification du Middleware en cas de détection de gesture par exemple.</li> |
|
111 </ul> |
|
112 </p> |
|
113 |
|
114 <p>Voici les différentes implémentations permettant d'accéder à ces objets via le client. |
|
115 On appelle dans cet exemple plusieurs fonctions si des curseurs on été reçus par le client.<br /> |
|
116 Un curseur représente une main dans la zone de recherche des mains présente dans le Middleware.<br /><br /> |
|
117 <code> |
|
118 void tuioInput()<br /> |
|
119 {<br /> |
|
120 Vector tuioCursorList = tuioClient.getTuioCursors();<br /> |
|
121 <br /> |
|
122 if(tuioCursorList.size() <= 0)<br /> |
|
123 {<br /> |
|
124 //Code si on ne reçoit pas de curseurs <=> que aucune main n'est dans la zone de recherche des mains.<br /> |
|
125 }<br /> |
|
126 <br /> |
|
127 if(tuioCursorList.size() == 1)<br /> |
|
128 {<br /> |
|
129 //Code si une main est détectée.<br /> |
|
130 //Par exemple, on peut faire appel à une fonction qu'on nommera arbitrairement handleOneHand et qui prendra en paramètre le curseur.<br /> |
|
131 handleOneHand(tuioCursorList.elementAt(0));<br /> |
|
132 }<br /> |
|
133 else if(tuioCursorList.size() == 2)<br /> |
|
134 {<br /> |
|
135 //Code si les deux mains sont détectées.<br /> |
|
136 //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 /> |
|
137 handleBothHands(tuioCursorList);<br /> |
|
138 }<br /> |
|
139 }<br /> |
|
140 </code> |
|
141 Le code suivant montre comment on peut extraire le point contenu dans le curseur.<br /> |
|
142 <code> |
|
143 void handleOneHand(TuioCursor handCursor)<br /> |
|
144 {<br /> |
|
145 TuioPoint pt = handCursor.getPosition();//(TuioPoint)pointList.get(j);<br /> |
|
146 //Code manipulant le point.<br /> |
|
147 //Par exemple un affichage de texte.<br /> |
|
148 text(pt.getX() + " " + pt.getY() + " " + pt.getZ());<br /> |
|
149 }<br /> |
|
150 </code> |
|
151 Le code suivant montre comment on peut extraire les points contenus dans une liste de deux curseurs.<br /> |
|
152 <code> |
|
153 void handleBothHands(Vector tuioCursorList)<br /> |
|
154 {<br /> |
|
155 TuioCursor handLeftCursor = (TuioCursor)tuioCursorList.elementAt(0);<br /> |
|
156 TuioCursor handRightCursor = (TuioCursor)tuioCursorList.elementAt(1);<br /> |
|
157 TuioPoint pt;<br /> |
|
158 <br /> |
|
159 pt = (TuioPoint)handLeftCursor.getPosition();<br /> |
|
160 //Code pour traiter la position de la première main.<br /> |
|
161 //Par exemple un affichage de texte.<br /> |
|
162 text(pt.getX() + " " + pt.getY() + " " + pt.getZ());<br /> |
|
163 pt = (TuioPoint)handRightCursor.getPosition();<br /> |
|
164 //Code pour traiter la position de la seconde main.<br /> |
|
165 //Par exemple un affichage de texte.<br /> |
|
166 text(pt.getX() + " " + pt.getY() + " " + pt.getZ());<br /> |
|
167 }<br /> |
|
168 </code> |
|
169 </p> |
|
170 |
|
171 <p>On appelle dans cet exemple une fonction si un message a été reçu par le client.<br /> |
|
172 Un message représente un événement notifié par le Middleware.<br /><br /> |
|
173 <code> |
|
174 void tuioInput()<br /> |
|
175 {<br /> |
|
176 Vector tuioStringList = tuioClient.getTuioStrings();<br /> |
|
177 if(tuioStringList.size() <= 0)<br /> |
|
178 {<br /> |
|
179 text("Gesture non détectée.");<br /> |
|
180 }<br /> |
|
181 else<br /> |
|
182 {<br /> |
|
183 TuioString message = (TuioString)tuioStringList.elementAt(0);<br /> |
|
184 text(message.getMessage());<br /> |
|
185 }<br /> |
|
186 }<br /> |
|
187 </code> |
|
188 </p> |
|
189 |
|
190 <hr /> |
|
191 |
|
192 <ol type="I" start="5"> |
|
193 <a name="#V"><li>Interactions entre les objets TUIO récupérés et des fonctions de dessin basiques</li></a> |
|
194 </ol> |
|
195 |
|
196 <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 /> |
|
197 <code> |
|
198 //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 /> |
|
199 void drawEllipse(float x, float y, float z, boolean leftHand)<br /> |
|
200 {<br /> |
|
201 //On met la couleur de ce qui va venir en bleu.<br /> |
|
202 fill(0, 0, 255);<br /> |
|
203 //On ne met pas de bordure à ce qu'on va afficher.<br /> |
|
204 stroke(0,0,0);<br /> |
|
205 //On créer un point, une épaisseur de forme.<br /> |
|
206 //Z est la distance de la main par rapport à Kinect. La zone de recherche des mains est toujours comprise entre minDistHands et maxDistHands<br /> |
|
207 float weight = map(z, minDistHands, maxDistHands, 50, 1);<br /> |
|
208 float redColor = map(z, minDistHands, maxDistHands, 255, 80);<br /> |
|
209 <br /> |
|
210 //S'il s'agit de la main gauche, on colore en tons de rouge.<br /> |
|
211 if(leftHand)<br /> |
|
212 fill(redColor,0,0);<br /> |
|
213 //Sinon en tons de vert.<br /> |
|
214 else<br /> |
|
215 fill(0,redColor,0);<br /> |
|
216 <br /> |
|
217 //Si le trait est assez gros, on color en tons de bleu.<br /> |
|
218 if(weight >= 30)<br /> |
|
219 {<br /> |
|
220 fill(0, 0, redColor);<br /> |
|
221 }<br /> |
|
222 <br /> |
|
223 //On dessine une ellipse.<br /> |
|
224 ellipse(x+20, y+100, weight, weight);<br /> |
|
225 }<br /> |
|
226 </code> |
|
227 </p> |
|
228 |
|
229 <hr /> |
|
230 |
|
231 <ol type="I" start="6"> |
|
232 <a name="#VI"><li>Quelques exemples d'implémentation</li></a> |
|
233 </ol> |
|
234 |
|
235 <p>Les exemples fournis dans l'installeur sont répartis dans 4 dossiers principaux : |
|
236 <ul> |
|
237 <li>Trakers : Permet d'afficher des ellipses sur le passage d'une ou deux mains se situant à une certaine distance de Kinect.</li> |
|
238 <li>Trakers_gestures : Permet d'afficher le code des gestures détectées par Kinect et notifiées depuis le Middleware.</li> |
|
239 <li>Fluid_manipulation (code importé de processing.org) : Simule l'action des mains sur un fluide.</li> |
|
240 <li>Smoke_manipulation (code importé de processing.org) : Simule l'action des mains sur de la fumée.</li> |
|
241 <li><a href="http://processing.org/">Processing.org</a></li> |
|
242 <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> |
|
243 </ul> |
|
244 </p> |
|
245 |
|
246 <hr /> |
|
247 |
|
248 <ol type="I" start="7"> |
|
249 <a name="#VII"><li>Références</li></a> |
|
250 </ol> |
|
251 |
|
252 <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. |
|
253 Il vous est possible d'utiliser eclipse pour compiler du Processing. |
|
254 <ul> |
|
255 <li><a href="http://www.microsoft.com/download/en/details.aspx?id=28782">SDK Kinect 1.0 de Microsoft</a></li> |
|
256 <li><a href="http://www.tuio.org/">TUIO</a></li> |
|
257 <li><a href="http://processing.org/">Processing.org</a></li> |
|
258 <li><a href="http://bodytag.org/">Autres exemples en Processing</a></li> |
|
259 <li><a href="http://processing.org/learning/eclipse/">Processing sous eclipse</a></li> |
|
260 </ul> |
|
261 </p> |
|
262 </body> |
|
263 </html> |