|
1 |
|
2 <html><head> |
|
3 <meta charset="UTF-8" /> |
|
4 <script type="text/javascript" src="../../src/tuio.js"></script> |
|
5 <script type="text/javascript" src="../../connector/npTuioClient/tuiojs.npTuioClient.js"></script> |
|
6 <script type="text/javascript" src="processing.js"></script> |
|
7 <script type="text/javascript" src="tuio.processing.js"></script> |
|
8 <script type="text/javascript" src="init.js"></script> |
|
9 </head> |
|
10 <body> |
|
11 <center> |
|
12 <script type="application/processing"> |
|
13 <!--// All Examples Written by Casey Reas and Ben Fry |
|
14 // unless otherwise stated. |
|
15 var tuioClient; |
|
16 //Indique s'il s'agit de la main gauche. |
|
17 var oneHandLeft; |
|
18 |
|
19 //Taille de la fenêtre |
|
20 var WIDTH = 640, HEIGHT = 480; |
|
21 |
|
22 //Port du Client TUIO |
|
23 var port = 80; |
|
24 var minDistHands = 1; |
|
25 var maxDistHands = 1.5; |
|
26 |
|
27 /*FONCTION D'INITIALISATION |
|
28 Entrée : |
|
29 Sortie : Cr�ation de la fenêtre et du client TUIO*/ |
|
30 void setup() |
|
31 { |
|
32 size (WIDTH, HEIGHT); |
|
33 showMask(); |
|
34 tuioClient = new tuio.TuioProcessing(this); |
|
35 textAlign(CENTER); |
|
36 imageMode(CENTER); |
|
37 smooth(); |
|
38 } |
|
39 |
|
40 /*FONCTION DE DESSIN |
|
41 Entrée : |
|
42 Sortie : Appel à la fonction de traitement d'input du serveur toutes les n millisecondes*/ |
|
43 void draw() |
|
44 { |
|
45 fill(0); |
|
46 tuioInput(); |
|
47 noStroke(); |
|
48 } |
|
49 |
|
50 /*FONCTION DE RECEPTION DES MESSAGES OSC |
|
51 Entrée : |
|
52 Sortie : Appel aux différentes fonctions de dessin si un message est reçu*/ |
|
53 void tuioInput() |
|
54 { |
|
55 noFill(); |
|
56 var tuioCursorList = tuioClient.getTuioCursors(); |
|
57 |
|
58 if(tuioCursorList.length() <= 0) |
|
59 { |
|
60 showMask(); |
|
61 refreshText("Les mains sont trop loin ou trop près.", "Je ne détecte aucune main."); |
|
62 } |
|
63 |
|
64 if(tuioCursorList.length() == 1) |
|
65 { |
|
66 handleOneHand(tuioCursorList[0]); |
|
67 fill(255); |
|
68 refreshText("Les mains sont dans la zone de captation.", "Je détecte une main."); |
|
69 } |
|
70 else if(tuioCursorList.length() == 2) |
|
71 { |
|
72 handleBothHands(tuioCursorList); |
|
73 fill(255); |
|
74 refreshText("Les mains sont dans la zone de captation.", "Je détecte les deux mains."); |
|
75 } |
|
76 } |
|
77 |
|
78 /*FONCTION DE GESTION DES COURBES POUR UNE MAIN DETECTEE |
|
79 Entrée : Un curseur TUIO |
|
80 Sortie : Appel aux différentes fonctions de dessin si un message est reçu*/ |
|
81 void handleOneHand(var handCursor) |
|
82 { |
|
83 var pt = handCursor.getPosition(); |
|
84 drawEllipse(pt.getX(), pt.getY(), pt.getZ(), !oneHandLeft); |
|
85 } |
|
86 |
|
87 /*FONCTION DE GESTION DES COURBES POUR DEUX MAINS DETECTEES |
|
88 Entrée : La liste des curseurs TUIO |
|
89 Sortie : Appel aux différentes fonctions de dessin si un message est reçu*/ |
|
90 void handleBothHands(var tuioCursorList) |
|
91 { |
|
92 var handLeftCursor = tuioCursorList[0]; |
|
93 var handRightCursor = tuioCursorList[1]; |
|
94 var pt; |
|
95 |
|
96 pt = handLeftCursor.getPosition(); |
|
97 drawEllipse(pt.getX(), pt.getY(), pt.getZ(), true); |
|
98 pt = handRightCursor.getPosition(); |
|
99 drawEllipse(pt.getX(), pt.getY(), pt.getZ(), false); |
|
100 } |
|
101 |
|
102 /*FONCTION DE GENERATION DU MASQUE |
|
103 Entrée : |
|
104 Sortie : Place des rectangles autour de la zone de dessin*/ |
|
105 void showMask() |
|
106 { |
|
107 background(0); |
|
108 fill(255); |
|
109 rect(0, 80, width, height-130); |
|
110 } |
|
111 |
|
112 /*FONCTION DE RAFFRACHISSEMENT DU TEXTE SUPERIEUR |
|
113 Entrée : Texte à afficher |
|
114 Sortie : Place un rectangle au dessus de la zone de dessin et raffraichit le texte*/ |
|
115 void refreshText(String txt1, String txt2) |
|
116 { |
|
117 fill(0); |
|
118 rect(0, 0, width, 80); |
|
119 fill(255); |
|
120 text(txt1, width/2 - 20, 20); |
|
121 text(txt2, width/2 - 20, 40); |
|
122 } |
|
123 |
|
124 /*FONCTION DE DESSIN D'UN POINT DE COURBE |
|
125 Entrée : Coordonnées X, Y et Z d'un point |
|
126 Sortie : Le point est dessiné avec une épaisseur et une luminosité dépendant de Z*/ |
|
127 void drawEllipse(float x, float y, float z, boolean leftHand) |
|
128 { |
|
129 |
|
130 fill(0, 0, 255); |
|
131 stroke(0,0,0); |
|
132 |
|
133 float weight = map(z, minDistHands, maxDistHands, 50, 1); |
|
134 float redColor = map(z, minDistHands, maxDistHands, 255, 80); |
|
135 |
|
136 if(leftHand) |
|
137 fill(redColor,0,0); |
|
138 else |
|
139 fill(0,redColor,0); |
|
140 |
|
141 if(weight >= 30) |
|
142 fill(0, 0, redColor); |
|
143 |
|
144 ellipse(x+20, y+100, weight, weight); |
|
145 } |
|
146 </script> |
|
147 <canvas></canvas> |
|
148 </center> |
|
149 </body></html> |