front_idill/extern/fajran-tuiojs/examples/processingjs/hand_pointing.html
author bastiena
Thu, 12 Apr 2012 13:09:46 +0200
changeset 27 6c08d4d7219e
parent 26 858e90c7cbaa
child 28 9ccef81f02ab
permissions -rw-r--r--
Middleware : GPL License added. Front Processing : GPL License added. Front IDILL : extern altered to send TUIO cursors from Middleware to Front. implemented as a plugin.


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