--- a/front_idill/extern/fajran-tuiojs/examples/processingjs/hand_pointing.html Thu Apr 12 13:09:46 2012 +0200
+++ b/front_idill/extern/fajran-tuiojs/examples/processingjs/hand_pointing.html Thu Apr 12 15:33:25 2012 +0200
@@ -1,149 +1,152 @@
-
-<html><head>
-<meta charset="UTF-8" />
-<script type="text/javascript" src="../../src/tuio.js"></script>
-<script type="text/javascript" src="../../connector/npTuioClient/tuiojs.npTuioClient.js"></script>
-<script type="text/javascript" src="processing.js"></script>
-<script type="text/javascript" src="tuio.processing.js"></script>
-<script type="text/javascript" src="init.js"></script>
-</head>
-<body>
-<center>
- <script type="application/processing">
- <!--// All Examples Written by Casey Reas and Ben Fry
- // unless otherwise stated.
- var tuioClient;
- //Indique s'il s'agit de la main gauche.
- var oneHandLeft;
-
- //Taille de la fenêtre
- var WIDTH = 640, HEIGHT = 480;
-
- //Port du Client TUIO
- var port = 80;
- var minDistHands = 1;
- var maxDistHands = 1.5;
-
- /*FONCTION D'INITIALISATION
- Entrée :
- Sortie : Cr�ation de la fenêtre et du client TUIO*/
- void setup()
- {
- size (WIDTH, HEIGHT);
- showMask();
- tuioClient = new tuio.TuioProcessing(this);
- textAlign(CENTER);
- imageMode(CENTER);
- smooth();
- }
-
- /*FONCTION DE DESSIN
- Entrée :
- Sortie : Appel à la fonction de traitement d'input du serveur toutes les n millisecondes*/
- void draw()
- {
- fill(0);
- tuioInput();
- noStroke();
- }
-
- /*FONCTION DE RECEPTION DES MESSAGES OSC
- Entrée :
- Sortie : Appel aux différentes fonctions de dessin si un message est reçu*/
- void tuioInput()
- {
- noFill();
- var tuioCursorList = tuioClient.getTuioCursors();
-
- if(tuioCursorList.length() <= 0)
- {
- showMask();
- refreshText("Les mains sont trop loin ou trop près.", "Je ne détecte aucune main.");
- }
-
- if(tuioCursorList.length() == 1)
- {
- handleOneHand(tuioCursorList[0]);
- fill(255);
- refreshText("Les mains sont dans la zone de captation.", "Je détecte une main.");
- }
- else if(tuioCursorList.length() == 2)
- {
- handleBothHands(tuioCursorList);
- fill(255);
- refreshText("Les mains sont dans la zone de captation.", "Je détecte les deux mains.");
- }
- }
-
- /*FONCTION DE GESTION DES COURBES POUR UNE MAIN DETECTEE
- Entrée : Un curseur TUIO
- Sortie : Appel aux différentes fonctions de dessin si un message est reçu*/
- void handleOneHand(var handCursor)
- {
- var pt = handCursor.getPosition();
- drawEllipse(pt.getX(), pt.getY(), pt.getZ(), !oneHandLeft);
- }
-
- /*FONCTION DE GESTION DES COURBES POUR DEUX MAINS DETECTEES
- Entrée : La liste des curseurs TUIO
- Sortie : Appel aux différentes fonctions de dessin si un message est reçu*/
- void handleBothHands(var tuioCursorList)
- {
- var handLeftCursor = tuioCursorList[0];
- var handRightCursor = tuioCursorList[1];
- var pt;
-
- pt = handLeftCursor.getPosition();
- drawEllipse(pt.getX(), pt.getY(), pt.getZ(), true);
- pt = handRightCursor.getPosition();
- drawEllipse(pt.getX(), pt.getY(), pt.getZ(), false);
- }
-
- /*FONCTION DE GENERATION DU MASQUE
- Entrée :
- Sortie : Place des rectangles autour de la zone de dessin*/
- void showMask()
- {
- background(0);
- fill(255);
- rect(0, 80, width, height-130);
- }
-
- /*FONCTION DE RAFFRACHISSEMENT DU TEXTE SUPERIEUR
- Entrée : Texte à afficher
- Sortie : Place un rectangle au dessus de la zone de dessin et raffraichit le texte*/
- void refreshText(String txt1, String txt2)
- {
- fill(0);
- rect(0, 0, width, 80);
- fill(255);
- text(txt1, width/2 - 20, 20);
- text(txt2, width/2 - 20, 40);
- }
-
- /*FONCTION DE DESSIN D'UN POINT DE COURBE
- Entrée : Coordonnées X, Y et Z d'un point
- Sortie : Le point est dessiné avec une épaisseur et une luminosité dépendant de Z*/
- void drawEllipse(float x, float y, float z, boolean leftHand)
- {
-
- fill(0, 0, 255);
- stroke(0,0,0);
-
- float weight = map(z, minDistHands, maxDistHands, 50, 1);
- float redColor = map(z, minDistHands, maxDistHands, 255, 80);
-
- if(leftHand)
- fill(redColor,0,0);
- else
- fill(0,redColor,0);
-
- if(weight >= 30)
- fill(0, 0, redColor);
-
- ellipse(x+20, y+100, weight, weight);
- }
- </script>
- <canvas></canvas>
-</center>
-</body></html>
+<!--
+ Modified by alexandre.bastien@iri.centrepompidou.fr to manage TUIO strings.
+-->
+
+<html><head>
+<meta charset="UTF-8" />
+<script type="text/javascript" src="../../src/tuio.js"></script>
+<script type="text/javascript" src="../../connector/npTuioClient/tuiojs.npTuioClient.js"></script>
+<script type="text/javascript" src="processing.js"></script>
+<script type="text/javascript" src="tuio.processing.js"></script>
+<script type="text/javascript" src="init.js"></script>
+</head>
+<body>
+<center>
+ <script type="application/processing">
+ <!--// All Examples Written by Casey Reas and Ben Fry
+ // unless otherwise stated.
+ var tuioClient;
+ //Indique s'il s'agit de la main gauche.
+ var oneHandLeft;
+
+ //Taille de la fenêtre
+ var WIDTH = 640, HEIGHT = 480;
+
+ //Port du Client TUIO
+ var port = 80;
+ var minDistHands = 1;
+ var maxDistHands = 1.5;
+
+ /*FONCTION D'INITIALISATION
+ Entrée :
+ Sortie : Cr�ation de la fenêtre et du client TUIO*/
+ void setup()
+ {
+ size (WIDTH, HEIGHT);
+ showMask();
+ tuioClient = new tuio.TuioProcessing(this);
+ textAlign(CENTER);
+ imageMode(CENTER);
+ smooth();
+ }
+
+ /*FONCTION DE DESSIN
+ Entrée :
+ Sortie : Appel à la fonction de traitement d'input du serveur toutes les n millisecondes*/
+ void draw()
+ {
+ fill(0);
+ tuioInput();
+ noStroke();
+ }
+
+ /*FONCTION DE RECEPTION DES MESSAGES OSC
+ Entrée :
+ Sortie : Appel aux différentes fonctions de dessin si un message est reçu*/
+ void tuioInput()
+ {
+ noFill();
+ var tuioCursorList = tuioClient.getTuioCursors();
+
+ if(tuioCursorList.length() <= 0)
+ {
+ showMask();
+ refreshText("Les mains sont trop loin ou trop près.", "Je ne détecte aucune main.");
+ }
+
+ if(tuioCursorList.length() == 1)
+ {
+ handleOneHand(tuioCursorList[0]);
+ fill(255);
+ refreshText("Les mains sont dans la zone de captation.", "Je détecte une main.");
+ }
+ else if(tuioCursorList.length() == 2)
+ {
+ handleBothHands(tuioCursorList);
+ fill(255);
+ refreshText("Les mains sont dans la zone de captation.", "Je détecte les deux mains.");
+ }
+ }
+
+ /*FONCTION DE GESTION DES COURBES POUR UNE MAIN DETECTEE
+ Entrée : Un curseur TUIO
+ Sortie : Appel aux différentes fonctions de dessin si un message est reçu*/
+ void handleOneHand(var handCursor)
+ {
+ var pt = handCursor.getPosition();
+ drawEllipse(pt.getX(), pt.getY(), pt.getZ(), !oneHandLeft);
+ }
+
+ /*FONCTION DE GESTION DES COURBES POUR DEUX MAINS DETECTEES
+ Entrée : La liste des curseurs TUIO
+ Sortie : Appel aux différentes fonctions de dessin si un message est reçu*/
+ void handleBothHands(var tuioCursorList)
+ {
+ var handLeftCursor = tuioCursorList[0];
+ var handRightCursor = tuioCursorList[1];
+ var pt;
+
+ pt = handLeftCursor.getPosition();
+ drawEllipse(pt.getX(), pt.getY(), pt.getZ(), true);
+ pt = handRightCursor.getPosition();
+ drawEllipse(pt.getX(), pt.getY(), pt.getZ(), false);
+ }
+
+ /*FONCTION DE GENERATION DU MASQUE
+ Entrée :
+ Sortie : Place des rectangles autour de la zone de dessin*/
+ void showMask()
+ {
+ background(0);
+ fill(255);
+ rect(0, 80, width, height-130);
+ }
+
+ /*FONCTION DE RAFFRACHISSEMENT DU TEXTE SUPERIEUR
+ Entrée : Texte à afficher
+ Sortie : Place un rectangle au dessus de la zone de dessin et raffraichit le texte*/
+ void refreshText(String txt1, String txt2)
+ {
+ fill(0);
+ rect(0, 0, width, 80);
+ fill(255);
+ text(txt1, width/2 - 20, 20);
+ text(txt2, width/2 - 20, 40);
+ }
+
+ /*FONCTION DE DESSIN D'UN POINT DE COURBE
+ Entrée : Coordonnées X, Y et Z d'un point
+ Sortie : Le point est dessiné avec une épaisseur et une luminosité dépendant de Z*/
+ void drawEllipse(float x, float y, float z, boolean leftHand)
+ {
+
+ fill(0, 0, 255);
+ stroke(0,0,0);
+
+ float weight = map(z, minDistHands, maxDistHands, 50, 1);
+ float redColor = map(z, minDistHands, maxDistHands, 255, 80);
+
+ if(leftHand)
+ fill(redColor,0,0);
+ else
+ fill(0,redColor,0);
+
+ if(weight >= 30)
+ fill(0, 0, redColor);
+
+ ellipse(x+20, y+100, weight, weight);
+ }
+ </script>
+ <canvas></canvas>
+</center>
+</body></html>