|
9
|
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>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> |
|
|
242 |
</ul> |
|
|
243 |
</p> |
|
|
244 |
|
|
|
245 |
<hr /> |
|
|
246 |
|
|
|
247 |
<ol type="I" start="7"> |
|
|
248 |
<a name="#VII"><li>Références</li></a> |
|
|
249 |
</ol> |
|
|
250 |
|
|
|
251 |
<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. |
|
|
252 |
Il vous est possible d'utiliser eclipse pour compiler du Processing. |
|
|
253 |
<ul> |
|
|
254 |
<li><a href="http://www.microsoft.com/download/en/details.aspx?id=28782">SDK Kinect 1.0 de Microsoft</a></li> |
|
|
255 |
<li><a href="http://www.tuio.org/">TUIO</a></li> |
|
|
256 |
<li><a href="http://processing.org/">Processing.org</a></li> |
|
|
257 |
<li><a href="http://bodytag.org/">Autres exemples en Processing</a></li> |
|
|
258 |
<li><a href="http://processing.org/learning/eclipse/">Processing sous eclipse</a></li> |
|
|
259 |
</ul> |
|
|
260 |
</p> |
|
|
261 |
</body> |
|
|
262 |
</html> |