Disseny d'un sistema interactiu: "El gatet poruc"

37
Grau en Multimèdia Curs 2013/14 – 2 n Semestre Disseny d'Interacció Pràctica – Disseny d'un sistema interactiu Autor Jordi Zango Novell [email protected] Data de lliurament 26/05/2014

Transcript of Disseny d'un sistema interactiu: "El gatet poruc"

Grau en Multimèdia Curs 2013/14 – 2n Semestre

Disseny d'InteraccióPràctica – Disseny d'un sistema interactiu

Autor

Jordi Zango [email protected]

Data de lliurament

26/05/2014

Índex

1. Justificació........................................................................................................3

2. La idea..............................................................................................................4

3. Disseny.............................................................................................................5

3.1.L'escenari....................................................................................................5

3.2.Patronatge..................................................................................................5

4. Material per al circuit.........................................................................................7

5. Esquema del circuit...........................................................................................9

6. Diagrama de flux.............................................................................................11

7. Procés.............................................................................................................12

8. Firmware Arduino............................................................................................19

9. Software Processing.......................................................................................30

10. Funcionament...............................................................................................34

10.1.Vídeo......................................................................................................34

10.2.Seqüència de funcionament...................................................................34

11. Conclusió.......................................................................................................36

12. Fonts.............................................................................................................37

13. Llicència........................................................................................................37

Disseny d'Interacció - Pràcticaper Jordi Zango Novell ([email protected]) 2

1. Justificació

1. JustifcacióPer la meva activitat professional, estic en contacte amb nens i adults de totesles edats, en un àmbit esportiu. Un dels trets comuns a moltes d'aquestespersones amb les que em trobo és que porten un ritme de vida força accelerat.

En el cas d'alguns dels nens, encara que sembli mentida, això és encara méspatent. Els seus pares (alguns amb l'afany de donar-lis la millor educaciópossible i d'altres, senzillament, per tal d'encabir-los) els han inscrit a totes lesactivitats extraescolars hagudes i per haver.

Això comporta que, d'una o altra manera, sembla que no hi hagi un moment pera fer una pausa o per agafar-se les coses amb més calma, per a parar-se iagafar aire.

D'altra banda, el tipus d'activitat esportiva al que em dedico requereix gransdosis de diverses habilitats i, entre elles, l'equilibri i la concentració en són duesde primordials.

Per tot això, vaig decidir enfocar el meu projecte cap a alguna cosa que empermetés construir algun dispositiu per a fer que l'usuari es veiés obligat a ferles coses lentament, amb concentració i equilibri, intentant que almenys durantuns moments tingués que enfocar tota la seva atenció en una tasca concretaque el fes oblidar-se de la resta de coses.

Finalment, l'experiència amb l'Arduino durant aquesta assignatura m'ha suposatel descobriment de tot un món nou de possibilitats d'implementació dedispositius d'interacció i per això he decidit que fos la base tècnica per aconstruir el meu projecte.

Disseny d'Interacció - Pràcticaper Jordi Zango Novell ([email protected]) 3

2. La idea

2. La ideaTot va començar amb el plantejament d'un joc que es semblés al tradicional “1,2, 3... pica paret”. Però a mida que la idea ha anat madurant i després de fermoltes proves amb el maquinari disponible, el resultat ha estat eldesenvolupament d'un joc per nens (majors de 8 anys) i adults, amb unadificultat mitjana-alta.

Bàsicament, es tracta d'una interfície física en la que apareix un gat en unaescena nocturna. L'objectiu del joc es començar a jugar a una distànciaadequada i anar-se apropant al gat fins a poder tocar-li la panxa sense queaquest s'espanti.

A casa tenim un gat que vam recollir del carrer quan era petit perquè el vamtrobar maltractat i ferit. A causa del maltractament que va patir, durant molt detemps va ser difícil poder apropar-se a ell sense que fugís.

O sigui que el nostre gat “Botes”, de color taronja, ha estat la inspiració per algat del projecte.

He decidit emprar un suport tèxtil en el que he disposat tota la part electrònica,perquè m'ha semblat que això li dona un aspecte més agradable i que aixísembla més una joguina.

Disseny d'Interacció - Pràcticaper Jordi Zango Novell ([email protected]) 4

3. Disseny

3. Disseny

3.1. L'escenari

Un cop fet l'esbós inicial, he fet un disseny de més qualitat amb AdobeIllustrator per a acabar de definir els elements del joc, la seva forma i color i laseva situació en l'escenari.

El disseny s'ha fet a escala 1:1 per a facilitar la tasca de patronatge de lesdiferents peces a tallar i cosir.

Il·lustració 1: Disseny de l'escenari

3.2. Patronatge

He descompost els diferents elements de l'escenari en les diferents peces atallar per a obtenir el patró de cadascuna d'elles.

Il·lustració 2: Patró de les parts del gat

Disseny d'Interacció - Pràcticaper Jordi Zango Novell ([email protected]) 5

3. Disseny

Il·lustració 3: Patró de complements

Il·lustració 4: Patró del cub de la brossa

Disseny d'Interacció - Pràcticaper Jordi Zango Novell ([email protected]) 6

4. Material per al circuit

4. Material per al circuitA més dels components que he comprat per a implementar el projecte, heemprat un altaveu de 8 ohms que he reciclat d'una vella torre d'ordinador itambé he confeccionat un parell de sensors de pressió amb làmines de plàsticconductor.

Il·lustració 5: Comprovant el funcionament d'un vell altaveu d'una torre d'ordinador, per a incloure'l en el projecte

Il·lustració 6: Confecció i prova desensors de pressió

Llista de components per al circuit electrònic:

• 1 Arduino One rev.3• 1 Sensor PIR (sensor de moviment passiu per infraroigs)• 1 Sensor de distància per ultrasons (HC-SR04)• 1 Altaveu 0'5 w, 8 ohms• 2 Sensors de pressió

Disseny d'Interacció - Pràcticaper Jordi Zango Novell ([email protected]) 7

4. Material per al circuit

• Un rotador de registres (Shifter 74HC595)• 8 LEDs de color groc• 1 LED de color vermell• 9 Resistències 330 ohms• 3 Resistències 10K ohms• Cables de diferents colors• 1 Protoboard• Cable USB

Assignació de ports:

• Sensor PIR (lluna): pin 4 (digital)• LED vermell (nas del gat): pin 5 (digital)• Polsador de l'estrella: pin A0 (analògic)• Polsador de la panxa del gat: pin A2 (analògic)• Altaveu: pin 8 (digital)• Sensor de distància:

◦ Echo: pin 9 (digital)◦ Trigger: pin 10 (digital)

• Rotador de registres: ◦ Clock: pin 11 (digital)◦ Latch: pin 12 (digital)◦ Data: pin 13 (digital)

Disseny d'Interacció - Pràcticaper Jordi Zango Novell ([email protected]) 8

5. Esquema del circuit

5. Esquema del circuitPer a la confecció de l'esquema que es mostra a continuació s'ha emprat elprograma Fritzing (http://fritzing.org/home/):

Disseny d'Interacció - Pràcticaper Jordi Zango Novell ([email protected]) 9

6. Diagrama de flux

6. Diagrama de fux

Disseny d'Interacció - Pràcticaper Jordi Zango Novell ([email protected]) 11

7. Procés

7. ProcésEl primer pas ha estat el plantejament de la idea i determinar el diagrama deflux per poder determinar què era el que necessitava. Un cop he tingut clar totel que volia fer i el que em calia per a fer-ho, he abordat la part de dissenygràfic per a l'aspecte de la interfície del joc.

Després de la fase d'anàlisi i disseny, he començat la fase d'implementació delprojecte, amb tres parts ben diferenciades: maquinari, interfície tèxtil iprogramari.

Abans de començar amb el desenvolupament de la part de programari, m'hecentrat en la construcció del circuit electrònic i la confecció de la interfície tèxtild'usuari, alternant les dues tasques.

Durant la construcció del circuit, mentre anava investigant sobre elfuncionament dels components que he emprat, he anat desenvolupant algunesparts de codi però només per a finalitats de testeig. La gran part d'aquest codide prova no apareix ja en el firmware definitiu de l'Arduino.

Fins que no he tingut completament finalitzada la part electrònica i he poguttestejar el seu correcte funcionament no he començant amb eldesenvolupament definitiu del firmware.

Quan ja he arribat als darrers estadis de desenvolupament del programari per aArduino, amb el seu correcte funcionament també testejat, no he començantamb la part de programari en Processing.

Respecte a la part de confecció tèxtil, fins ara no hi tenia gairebé capexperiència. En aquest aspecte he comptat amb ajuda externa sense la quehagués estat força complicat finalitzar aquesta part del projecte.

A continuació mostro algunes fotografies del que ha estat tot el procés.

Disseny d'Interacció - Pràcticaper Jordi Zango Novell ([email protected]) 12

7. Procés

Esbós, dea inicial. Disseny gràfic de l'escenari.

Inici de prova de components. Prova de sensor d'ultrasons per acàlcul de distància.

Prova de rotador de registres.

Disseny d'Interacció - Pràcticaper Jordi Zango Novell ([email protected]) 13

7. Procés

Prova de polsadors i sensor PIR per adetecció de moviment.

Muntatge provisional per a provaconjunta de components.

Bossa conductiva per a confecció desensors de pressió.

Cablejat per a confecció de sensorsde pressió.

Prova dels sensors de pressió.

Disseny d'Interacció - Pràcticaper Jordi Zango Novell ([email protected]) 14

7. Procés

El piezo donava molt poc volum.Prova d'un vell altaveu de PC, 8 ohms.

En ple procés de desenvolupamentdel projecte.

Inici de soldadures dels LEDsde color groc.

Comprovació amb el multímetre de lacontinuïtat de les soldadures fetes.

Tall de les peces del suport tèxtil.

Disseny d'Interacció - Pràcticaper Jordi Zango Novell ([email protected]) 15

7. Procés

Cosint les peces tallades. Fons de l'escenari.

Base pel gat. Afegint el gat a l'escenari.

Primera prova de la interfície tèxtil. Inici del cablejat per a incorporar elcircuit electrònic al suport tèxtil.

Disseny d'Interacció - Pràcticaper Jordi Zango Novell ([email protected]) 16

7. Procés

Comprovació amb multímetre de lesconnexions després de cosir.

Primera prova del funcionament delcircuit electrònic ja acabat de fixar.

Aspecte final del circuitamb el cablejat.

Primera prova del joc.

Interfície amb Processing, per a controlar l'inici de la partidai lectura de paràmetres.

Disseny d'Interacció - Pràcticaper Jordi Zango Novell ([email protected]) 17

7. Procés

Aspecte final.

Disseny d'Interacció - Pràcticaper Jordi Zango Novell ([email protected]) 18

8. Firmware Arduino

8. Firmware ArduinoEn condicions normals, tots els “defines” per a les notes musicals s'haurieninclòs en una llibreria externa, però no s'ha fet així per a evitar instal·lacionsdurant el procés d'avaluació del projecte.

/** Pràctica per a Disseny d'interacció* Grau en Multimèdia* Universitat Oberta de Catalunya* ----* Jordi Zango Novell* [email protected]* ----* Curs 2013-2014* 2n Semestre*///==============================//Llibreries

#include <NewPing.h>

//==============================//Notes musicals

#define n_B0 31 #define n_C1 33#define n_CS1 35#define n_D1 37#define n_DS1 39#define n_E1 41#define n_F1 44#define n_FS1 46#define n_G1 49#define n_GS1 52#define n_A1 55#define n_AS1 58#define n_B1 62#define n_C2 65#define n_CS2 69#define n_D2 73#define n_DS2 78#define n_E2 82#define n_F2 87#define n_FS2 93#define n_G2 98#define n_GS2 104#define n_A2 110#define n_AS2 117#define n_B2 123#define n_C3 131#define n_CS3 139#define n_D3 147#define n_DS3 156

Disseny d'Interacció - Pràcticaper Jordi Zango Novell ([email protected]) 19

8. Firmware Arduino

#define n_E3 165#define n_F3 175#define n_FS3 185#define n_G3 196#define n_GS3 208#define n_A3 220#define n_AS3 233#define n_B3 247#define n_C4 262#define n_CS4 277#define n_D4 294#define n_DS4 311#define n_E4 330#define n_F4 349#define n_FS4 370#define n_G4 392#define n_GS4 415#define n_A4 440#define n_AS4 466#define n_B4 494#define n_C5 523#define n_CS5 554#define n_D5 587#define n_DS5 622#define n_E5 659#define n_F5 698#define n_FS5 740#define n_G5 784#define n_GS5 831#define n_A5 880#define n_AS5 932#define n_B5 988#define n_C6 1047#define n_CS6 1109#define n_D6 1175#define n_DS6 1245#define n_E6 1319#define n_F6 1397#define n_FS6 1480#define n_G6 1568#define n_GS6 1661#define n_A6 1760#define n_AS6 1865#define n_B6 1976#define n_C7 2093#define n_CS7 2217#define n_D7 2349#define n_DS7 2489#define n_E7 2637#define n_F7 2794#define n_FS7 2960#define n_G7 3136#define n_GS7 3322#define n_A7 3520#define n_AS7 3729#define n_B7 3951#define n_C8 4186

Disseny d'Interacció - Pràcticaper Jordi Zango Novell ([email protected]) 20

8. Firmware Arduino

#define n_CS8 4435#define n_D8 4699#define n_DS8 4978

//==============================//Rotador 74HC595

#define r_CLOCKPIN 11 //Pin connectat a SH_CP#define r_LATCHPIN 12 //Pin connectat a ST_CP#define r_DATAPIN 13 //Pin connectat a DS

////==============================

#define t_TEMPS_RECLAM 350 //Temps d'espera per a activar musicade reclam#define DIST_MINIMA 120 //Distància mínima per a començar el joc

//==============================//Altres PINs

#define TRIGGER_PIN 10 // Pin per trigger sensor d'ultrasons#define ECHO_PIN 9 // Pin per al echo de sensor d'ultrasons#define MAX_DISTANCE 500 // Distància màximaNewPing sonar(TRIGGER_PIN, ECHO_PIN, MAX_DISTANCE); // Config

inicial per a la llibreria NewPing

#define pinBuzzer 8 //Pin de l'altaveu#define pinBotoEstel A0 //Sensor de pressió inici/parada del joc#define p_BOTONS 400 //Valor a superar per a considerar que s'ha

premut sensor#define pinBotoGat A2 //Sensor de pressió de la panxa del gat#define pinNas 5 //LED vermell, al nas del gat#define pinPIR 4 //Detector de moviment

//==============================

int comptadorReclam= 0;int distancia= 0;

//==============================//Tocar notes passades en array

void musica(int notes[][2], int numNotes) { for (int i = 0; i < numNotes; i++) {

//per a calcular la durada de la nota, dividim un segon pel tipus de nota

//p.e.: un quart = 1000 / 4, un vuité = 1000/8, etc. int noteDuration = 1000/notes[i][1]; tone(8, notes[i][0],noteDuration);

//per a poder distingir les notes cal separar-les //la durada de la nota + 30% funciona correctament int pauseBetweenNotes = noteDuration * 1.30; delay(pauseBetweenNotes); //deixar de reproduir la nota

Disseny d'Interacció - Pràcticaper Jordi Zango Novell ([email protected]) 21

8. Firmware Arduino

noTone(8); } }

//==============================//Melodia quan s'ha detectat moviment del jugador

void melodiaGameOver() { int tema[8][2] = { {n_C4, 4}, {n_G3, 8}, {n_G3, 8}, {n_A3, 4}, {n_G3, 4}, {0, 4}, {n_B3, 4}, {n_C4, 4} }; musica(tema, 8); }

//==============================//Melodia quan es guanya ("We Are The Champions")

void melodiaVictoria() { int tema[18][2] = { {n_F4, 3}, {n_E4, 6}, {n_F4, 6}, {n_E4, 3}, {n_C4, 2}, {n_A3, 6}, {n_D4, 3}, {n_A3, 2}, {0, 4}, {n_C4, 6}, {n_F4, 3}, {n_G4, 6}, {n_A4, 6}, {n_C5, 3}, {n_A4, 4}, {n_D4, 6}, {n_E4, 6}, {n_D4, 2} }; musica(tema, 18); }

Disseny d'Interacció - Pràcticaper Jordi Zango Novell ([email protected]) 22

8. Firmware Arduino

//==============================//Música per convidar a jugar ("La cucaracha")

void melodiaReclam() { int tema[19][2] = { {n_C4, 8}, {n_C4, 8}, {n_C4, 8}, {n_F4, 4}, {n_A4, 8}, {0,5}, {n_C4, 8}, {n_C4, 8}, {n_C4, 8}, {n_F4, 4}, {n_A4, 8}, {0,5}, {n_F4, 8}, {n_F4, 8}, {n_E4, 8}, {n_E4, 8}, {n_D4, 8}, {n_D4, 8}, {n_C4, 4} }; musica(tema, 19);}

//==============================//Melodia indicant que comença el joc

void melodiaInici() { int tema[6][2] = { {n_C4, 8}, {n_C5, 4}, {n_C4, 8}, {n_C5, 4}, {n_C4, 8}, {n_C5, 4}}; musica(tema, 6); }

//==============================//Activar pins del rotador amb un número

void numeroShift(int n) { digitalWrite(r_LATCHPIN, LOW); shiftOut(r_DATAPIN, r_CLOCKPIN, MSBFIRST, n); digitalWrite(r_LATCHPIN, HIGH); }

Disseny d'Interacció - Pràcticaper Jordi Zango Novell ([email protected]) 23

8. Firmware Arduino

//==============================//Activar pins del rotador per a un array i una durada

void arrayShift(int nombres[], int numNombres, int durada) { for (int i=0; i<numNombres; i++) { numeroShift(nombres[i]); delay(durada); } }

//==============================//LEDs, s'encenen de fora cap endins

void LEDsConvergent() { int nombres[]= {129,66,36,24}; arrayShift(nombres, 4, 200); }

//==============================//LEDS encendre de forma aleatòria

void LEDsAleatori() { long n; n= random(256); numeroShift(n);}

//==============================//Tots els LEDs encesos

void LEDsTots(boolean onOff) { if (onOff) numeroShift(255); else numeroShift(0);};

//==============================//Calcular distància

void llegirDistancia() { unsigned int uS = sonar.ping(); //Enviar ping, obtenir temps

de resposta en microsegons (uS) distancia = uS / US_ROUNDTRIP_CM; //Convertir temps obtingut a

cm (0 = fora de l'abast)

}

Disseny d'Interacció - Pràcticaper Jordi Zango Novell ([email protected]) 24

8. Firmware Arduino

//==============================//Preparar joc

void preparar() { int tema[1][2] = { {n_A5, 5} }; int avis[1][2] = { {n_A2, 3} }; int comptador= 0; boolean seguir= false; while (!seguir) { comptador++; if (comptador > 5) { comptador= 9; //Per a evitar desbordament (9 = mesurant

distància) Serial.println("P9"); //Comprovar distància mínima llegirDistancia(); if (distancia > DIST_MINIMA) { digitalWrite(pinNas, LOW); LEDsTots(true); melodiaInici(); delay(500); seguir= true; jugar(); } else { Serial.println("E0"); digitalWrite(pinNas, HIGH); musica(avis, 1); delay(500); //Indicar distancia Serial.print("D"); Serial.println(distancia);

}

} else { //Rastre de preparació Serial.print("P"); Serial.println(comptador); switch (comptador) {

Disseny d'Interacció - Pràcticaper Jordi Zango Novell ([email protected]) 25

8. Firmware Arduino

case 1: numeroShift(255); break; case 2: numeroShift(126); break;

case 3: numeroShift(60); break;

case 4: numeroShift(24); break;

default: numeroShift(0); break; } musica(tema, 1); delay(500); }

} }

//==============================//Abandonar el joc//(No és necessari, emprat per a debug)

void abandonar() {

digitalWrite(pinNas, HIGH); numeroShift(85); melodiaGameOver(); numeroShift(170); delay(300); digitalWrite(pinNas, LOW); }

Disseny d'Interacció - Pràcticaper Jordi Zango Novell ([email protected]) 26

8. Firmware Arduino

//==============================//Temps de joc

void jugar() { int tema[1][2] = { {n_C8, 5} }; int pillat[1][2] = { {n_C2, 1} };

int btGat; int moviment; boolean seguir= false; boolean llums= true; int comptador= 0; LEDsTots(false); //Venen encesos de la preparació

while(!seguir) { btGat= analogRead(pinBotoGat); if (btGat < p_BOTONS) { //Guanya partida Serial.println("V0"); //Rastre de senyal de victòria digitalWrite(pinNas, HIGH); LEDsTots(true); melodiaVictoria(); delay(500); digitalWrite(pinNas, LOW); LEDsTots(false); seguir= true; } else { moviment = digitalRead(pinPIR); if (moviment==HIGH) { //Detectat moviment (game over) Serial.println("Z0"); //Rastre de senyal de derrota LEDsTots(true); digitalWrite(pinNas, HIGH); musica(pillat, 1); delay(1000); melodiaGameOver(); digitalWrite(pinNas, LOW); LEDsTots(false); seguir= true; } else { //Rastre de joc Serial.print("J");

Disseny d'Interacció - Pràcticaper Jordi Zango Novell ([email protected]) 27

8. Firmware Arduino

Serial.println(comptador); //Calcular distància llegirDistancia(); Serial.print("D"); Serial.println(distancia); comptador++; if (comptador>50) { comptador= 0; llums= !llums; if (llums) musica(tema, 1); digitalWrite(pinNas, !llums); LEDsTots(llums); } } } } }

//==============================//Inicialització

void setup() {

Serial.begin(9600); //Iniciar lectura en el port serial amb els baudis desitjats

randomSeed(analogRead(0)); //Per a major aleatorietat, emprantentrada analògica sense ús

pinMode(pinBuzzer, OUTPUT); //Pin de l'altaveu pinMode(pinNas, OUTPUT); //Pin del nas del gat //Inicialitzar pins del rotador pinMode(r_CLOCKPIN, OUTPUT); pinMode(r_LATCHPIN, OUTPUT); pinMode(r_DATAPIN, OUTPUT); //Salutació inicial LEDsTots(true); digitalWrite(pinNas, HIGH); melodiaReclam(); delay(500); LEDsTots(false); digitalWrite(pinNas, LOW); }

Disseny d'Interacció - Pràcticaper Jordi Zango Novell ([email protected]) 28

8. Firmware Arduino

//==============================//Bucle principal

void loop() { int senyalInici = 0;

//Esperant inici del joc int btEstel= analogRead(pinBotoEstel);

if (btEstel < p_BOTONS) { //Inciar joc preparar(); } else { LEDsAleatori(); delay(100); //Rastre de loop principal Serial.print("R"); Serial.println(comptadorReclam); //Mesurar distància (només amb finalitat informativa) llegirDistancia(); Serial.print("D"); Serial.println(distancia); //Rastre de distància //Llegir serial, si es dóna el cas, per a començar joc if (Serial.available() > 0) { senyalInici= Serial.read(); if (senyalInici == 1) preparar(); }

comptadorReclam++; if (comptadorReclam > t_TEMPS_RECLAM) { comptadorReclam= 0; Serial.println("M0"); //Rastre de reclam melodiaReclam(); } }

}

Disseny d'Interacció - Pràcticaper Jordi Zango Novell ([email protected]) 29

9. Software Processing

9. Software ProcessingInicialment, vaig provar a confeccionar un programa amb més opcions, peròvaig trobar que feia el joc força més lent.

Sembla que Java consumeix molts recursos i fa que tot el procés sigui, engeneral, més lent.

Per això he acabat optant per una interfície més senzilla amb la lecturad'alguns paràmetres i la funcionalitat bàsica de poder enviar a l'Arduino l'ordreper a començar a jugar.

/*Disseny d'InteraccióGrau en MultimèdiaUniversitat Oberta de Catalunya---Pràctica final: "El gatet poruc"---per Jordi Zango NovellCurs 2013-2014, 2n semestre*///==============================

import processing.serial.*;Serial port; //Port sèrieint baudis= 9600;String lectura= ""; //Per a guardar dada rebuda del port sèrieString portNom= "/dev/tty.usbmodem411";boolean esperant= false;//String portname = Serial.list()[0] //Anar canviant índex si cal

//==============================

PFont font;

//==============================

void mostrarTitols() { PImage img; background(255); img = loadImage("gatet.jpg"); image(img, 350, 10); font = loadFont("Roboto-Regular-48.vlw"); textFont(font); fill(0); text("'El gatet poruc'", 10, 45);

Disseny d'Interacció - Pràcticaper Jordi Zango Novell ([email protected]) 30

9. Software Processing

font = loadFont("Roboto-Regular-16.vlw"); textFont(font); fill(0); text("DISSENY D'INTERACCIÓ - Pràctica final", 20,90); text("Grau en Multimèdia", 20,110); font = loadFont("Roboto-Regular-48.vlw"); textFont(font); fill(153); text("Esperant jugar", 20, 190); text("Distància (cm)", 20, 310); }

//==============================void mostrarEscoltant(){ fill(255); rect(20,198,200,50); fill(0); if (esperant) text("Sí", 20, 240); else text("No", 20, 240); dibuixarBoto(); }

//==============================void mostrarDistancia(String distancia){ fill(255); rect(20,318,200,50); fill(0); text(distancia, 20, 360); } //==============================void dibuixarBoto() { PImage img; if (esperant) { img = loadImage("jugar_on.jpg"); image(img, 10, 382); } else { img = loadImage("jugar_off.jpg"); image(img, 10, 382); } }

Disseny d'Interacció - Pràcticaper Jordi Zango Novell ([email protected]) 31

9. Software Processing

//==============================void mousePressed() { //Calcular si el ratolí es troba damunt el botó quan es clica if (mouseX >= 25 && mouseX <= 245 && mouseY >= 408 && mouseY <= 468) port.write(1); //println(1);}

//==============================void mostrarLectura(){

String inicial= ""; String valor= "";

if (port.available() > 0) { //Si hi ha dades disponibles lectura = port.readStringUntil('\n'); //Llegir i

emmagatzemar lectura } if (lectura != null) { println(lectura); //Mostrar lectura a la consola inicial = lectura.substring(0, 1); valor = lectura.substring(1); if (inicial.equals("D")) { mostrarDistancia(valor); } else if (inicial.equals("R")) { esperant = true; mostrarEscoltant(); } else { esperant = false; mostrarEscoltant(); } } }

//==============================void setup () { //Mostrar llista dels ports serie disponibles println("Ports sèrie disponibles:"); println(Serial.list()); //Connectar al port especificat port = new Serial(this, portNom, baudis); //Especificar mida de la finestra size(550, 500); background(255); stroke(255); //Especificacions generals font textAlign(LEFT);

//Iniciar títols

Disseny d'Interacció - Pràcticaper Jordi Zango Novell ([email protected]) 32

9. Software Processing

mostrarTitols(); }

//==============================void draw () {

mostrarLectura();}

Disseny d'Interacció - Pràcticaper Jordi Zango Novell ([email protected]) 33

10. Funcionament

10. Funcionament

10.1. Vídeo

Pot trobar-se un vídeo explicatiu del funcionament del sistema a Vimeo:

https://vimeo.com/jordizango/elgatetporuc

10.2. Seqüència de funcionament

Quan es connecta el sistema, aquest ofereix una salutació de benvingudaactivant tots els LEDs i fent sonar una melodia. Després queda a l'espera ques'activi el joc.

Durant el període d'inactivitat, el sistema va fent sonar una melodia per aatreure l'atenció del jugador.

Per a començar la partida cal prémer el botó d'inici que es troba a l'estrellagroga amb la diana en el seu interior.

Quan es prem el botó d'inici, el joc comença un compte enrere, donantindicacions visuals amb els LEDs i també acústiques.

Mentre es fa el compte enrere, el sistema comença a mesurar la distància aque es troba el jugador. Si aquesta distància no està en un marge predefinit, eldispositiu avisa al jugador amb senyals de llum i so. Aquestes senyals perdurenmentre el jugador no corregeix la distància.

Un cop es determina que la distància és l'adequada, es dóna un avís visual isonor que indica que comença el joc.

Durant el joc, es van alternant dos tipus de senyals diferents per a indicar aljugador que vagi en compte al moure's per tal que no sigui detectat el seumoviment.

Si, durant la seqüència de joc, el sistema detecta que el jugador s'ha mogut liemet un senyal visual i acústic que així ho indica i, a continuació, activa unamelodia de “Game over”.

En cas que el sistema no detecti moviment del jugador i aquest aconsegueixitocar la panxa del gat, s'emet un senyal visual i acústic que ho indica i despréss'emet una melodia de victòria.

Tant en el cas de detectar el moviment i fer el “Game over” com en el cas queel jugador guanyi la partida, el sistema torna al bucle principal i resta a l'espera

Disseny d'Interacció - Pràcticaper Jordi Zango Novell ([email protected]) 34

10. Funcionament

d'una nova partida i s'inicia de nou tota la seqüència.

A més de poder començar la partida prement l'estrella que es troba en el suporttèxtil, també pot activar-se la l'inici del joc clicant el botó “Jugar” que es mostraa la interfície amb Processing que acompanya aquest projecte.

Disseny d'Interacció - Pràcticaper Jordi Zango Novell ([email protected]) 35

11. Conclusió

11. ConclusióTal i com he comentat anteriorment, conèixer Arduino ha estat tot undescobriment per a mi. M'ha obert tot un món que no sabia que existia i quecrec que utilitzaré per a projectes futurs.

M'hagués agradat desenvolupar el projecte amb altres materials però no haestat possible. Per exemple, la meva intenció inicial era afegir un Lilypad en llocd'un Arduino One i cosir el circuit amb fil conductor.

El problema ha estat que l'enviament del Lilypad del que tenia que disposar haestat retingut a la duana i, en el moment de fer el lliurament d'aquest treball,encara no es tenen notícies del que ha passat amb aquest material.

D'altra banda, al principi del projecte també vaig provar d'incorporar algunafuncionalitat de Visió per computadora amb OpenCV però, com molts delsmeus companys, he tingut problemes amb aquesta llibreria i l'actual versió deProcessing. Això m'ha fet perdre molt de temps en l'estadi inicial del projecte.

Per a finalitzar, vull dir que el desenvolupament del projecte ha estat llarg icostós però crec que l'esforç ha valgut la pena tant pels coneixement adquiritscom pel producte final obtingut.

Disseny d'Interacció - Pràcticaper Jordi Zango Novell ([email protected]) 36

12. Fonts

12. FontsArduino. The Arduino Playground. [en línia]. http://playground.arduino.cc/ [data de consulta: 15/05/2014]

Fritzing. [en línia]. http://fritzing.org/home/ [data de consulta: 17/05/2014]

Processing. [en línia]. http://processing.org/ [data de consulta: 18/05/2014]

Vilanova Ángeles, Santiago. (2011). Dispositius electrònics. Barcelona: FUOC

13. LlicènciaAquest treball és obra de Jordi Zango Novell, amb llicència Creative CommonsAtribució-NoComercial-CompartirIgual BY-NC-SA 3.0 Unported.

Disseny d'Interacció - Pràcticaper Jordi Zango Novell ([email protected]) 37