|
26
|
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> |