PAC 2

Projecte Arduino:

La bola esbojarrada
 Marc Acosta Basagañas
Disseny d’interacció - Multimèdia

Breu Descripció El muntatge

El projecte consisteix en un videojoc, molt simple, on l’usuari ha d’evitar

l’impacte d’una bola contra els límits de la finestra. Quan no ho pot fer, el
Material necessari
LED vermell del nostre petit muntatge s’encén i el piezoelèctric emet un
so, donant com a resultat la perduda d’una vida per part del jugador. El joc
disposa de quatre nivells de “dificultat” on s’incrementa la velocitat de la
bola.

Tant el piezoelèctric com el LED vermell estan connectats a una entrada

digital de la placa Arduino, la 8 i la 2 respectivament. El LED es connecta LED Resistència
Piezoelèctric
al terra de la placa mitjançant una resistència de 220ohms. Vermell 220Ω

A més de tot això, s’ha fet servir el programari d’Arduino per a programar
el circuit i Processing per a la creació del videojoc.
L’esquema elèctric
Enllaç a demostració

https://youtu.be/sXswA98NlCI

Esquema elèctric del nostre muntatge

 Marc Acosta Basagañas
Disseny d’interacció - Multimèdia

Pas a pas

Connectar un cable vermell al pin de

5V d’Arduino i l’altre extrem a la línia
1 vertical de la placa de prototips que in-
dica +.

Connectar el cable vermell al pin de te-

2 rra d’Arduino i l’altre extrem a l’altra
línia vertical de la placa que indica -.

Connectar un terminal del piezoelèc-

3 tric a terra de la placa i l’altra al pin 8
d’Arduino.

Connectar un terminal del piezoelèctric

4 a terra de la placa i l’altra al pin 8 d’Ar-
duino.
 Marc Acosta Basagañas
Disseny d’interacció - Multimèdia

El codi
} else{
Arduino digitalWrite(2,LOW);
noTone(8);
}
En l’apartat de declaració de variables globals només en creem una que delay(100);
l’utilitzarem quan es produeixi la connexió entre Arduino i Processing. }
Aquesta variable és l’encarregada d’emmagatzemar les dades enviades des
del joc.
Processing
char val;
Fem servir el programari de Processing per a crear el videojoc, la part amb
la qual l’usuari podrà interactuar amb la nostra aplicació.
En la secció de Setup() inicialitzem la comunicació amb el serial port i
configurem el pin número 2 de sortida (és el pin on tenim connectat el El primer que fem és carregar la llibreria que ens permetrà comunicar-nos
LED. amb l’Arduino.

void setup() { import processing.serial.*;

pinMode(2, OUTPUT);
Serial.begin(9600); L’estructura de Processing és igual a la d’Arduino. Un apartat per a la
}
declaració de variables globals, classes i funcions. Un segon, per a la ini-
cialització de les variables setup(). Finalment, una secció que s’executa en
Finalment, en l’apartat loop() hem de realitzar diverses comprovacions. bucle, drawn(), que és on li diem al nostre programa que ha de fer.
Primer, si el port està disponible, si és així guardem les dades rebudes en
Per començar creem tres classes: una per la bola, la segona pel jugador i la
la variable que hem creat a la primera secció. Seguidament, comprovem si
tercera per crear un temporitzador.
hem rebut el dígit de control (‘1), si és així, encenem el LED vermell i fem
sonar el piezoelèctric. Si no, no el fem sonar i apaguem el LED vermell. La Bola

void loop() La bola serà l’objecte que és mou per tota la pantalla i que l’usuari ha
{ d’evitar que xoqui.
if (Serial.available())
val = Serial.read(); La bola constarà d’unes propietats i uns mètodes. Les propietats defineixen
} els atributs que li volem donar, així com la definició del seu moviment,
if (val == ‘1’) cap a on i amb quina velocitat es mouen. Amb els mètodes, podem crear
digitalWrite(2,HIGH); la bola, fer que es mogui per la pantalla, canviant la direcció i o sentit,
tone(8, 260); controlar la seva velocitat i determinar si la ha xocat amb els límits de la
finestra.
 Marc Acosta Basagañas
Disseny d’interacció - Multimèdia

class Bola { void modificarVelocitat(int time){

float posicioX; switch(time){
float posicioY; case 5:
int mida; this.velocitat= 5.0;
float velocitat; jugador.pujaNivell(2);
int direccio; break;
color colorBola; case 10:
this.velocitat= 10.0;
Bola(float x, float y, int midaBola, float vel, int dir, color colBola ){ jugador.pujaNivell(3);
posicioX=x; break;
posicioY=y; case 15:
mida=midaBola; this.velocitat= 20.0;
velocitat=vel; jugador.pujaNivell(4);
direccio=dir; break;
colorBola=colBola; case 20:
} jugador.pujaNivell(5);
break;
void crearBola() { default:
fill(this.colorBola); break;
ellipse(this.posicioX, this.posicioY, this.mida, this.mida); }
} }

void moureBola(int dir){ boolean xocaBola() {

this.direccio=dir; boolean comprovaXoc= false;
switch (this.direccio) { if((this.direccio==1) || (this.direccio==2)) {
case 1: if (this.posicioX<21) {
this.posicioX= this.posicioX - this.velocitat; this.moureBola(2);
break; comprovaXoc=true;
case 2: }
this.posicioX= this.posicioX + this.velocitat; if (this.posicioX>1479){
break; this.moureBola(1);
case 3: comprovaXoc=true;
this.posicioY= this.posicioY - this.velocitat; }
break; } else if ((this.direccio==3) || (this.direccio==4)) {
case 4: if (this.posicioY<21) {
this.posicioY= this.posicioY + this.velocitat; this.moureBola(4);
break; comprovaXoc=true;
default: }
break; if (this.posicioY>979) {
} this.moureBola(3);
} comprovaXoc=true;
 Marc Acosta Basagañas
Disseny d’interacció - Multimèdia

boolean guanyaPartida(){
}
if (this.nivell>4) {
}
return true;
return comprovaXoc;
}
}
return false;
} }
}

El jugador

Creem una altra classe anomenada Jugador la qual té dues propietats; vides
i nivell i diferents mètodes que ens permetran el control d’aquestes. Po-
drem restar una vida cada cop que la bola xoca amb un límit de la finestra, El temporitzador
puja el nivell de dificultat del joc, comprovar si el jugador ha perdut totes
El temporitzador és un cronòmetre que ens permet controlar el temps que
les vides o si, per contra, ha superat els 4 nivells del que disposa el joc.
discorre des del començament de la partida. Com les altres dues classes
disposa de propietats i mètodes per a controlar-lo.
class Jugador{
int vides; class Cronometro{
int nivell; int crono;
boolean paratCrono;
Jugador(int videsJugador, int nivellJugador){
vides=videsJugador; Cronometre (boolean parat) {
nivell=nivellJugador; paratCrono=parat;
} }

void pujaNivell(int level){ void iniciarCrono() {

this.nivell=level; this.crono=(millis()/1000);
} }
}
void restarVida(){
this.vides= this.vides - 1;
}
Una vegada hem acabat amb les classes, passem a la declaració de varia-
boolean gameOver(){ bles globals.
if (this.vides==0) {
return true;
} Bola bola;
return false; Jugador jugador;
} Cronometre temps;
Serial myPort;
 Marc Acosta Basagañas
Disseny d’interacció - Multimèdia

Passem a la creació de funcions que més tard necessitarem. Primer una En l’apartat setup() fem les configuracions inicials necessàries, configu-
funció per mostrar text per pantalla, com per exemple, les vides que li rem mida de la pantalla, creem els objectes basats en les classes e indi-
resten al jugador. Seguidament, la funció que ja està definida de keyPres- quem a l’objecte Serial quin és el port amb al que ha d’enviar dades.
sed(), amb la qual fem que l’usuari pugui moure la bola mitjançant les
tecles de moviment. void setup()
{
void mostraDadesPantalla(int tamanyLletra, int posicioX, int posicioY, size(1500, 1000);
String cadena, int numero){ String portName = Serial.list()[1];
textSize(tamanyLletra); myPort = new Serial(this, portName, 9600);
text(cadena, posicioX, posicioY); bola= new Bola(random(50,1400),random(50,900), 40, 2.0,int(ran
if(numero!=0){ dom(1,4)),205);
text(numero, posicioX +90 ,posicioY); jugador=new Jugador(3,1);
} temps=new Cronometre(false);
} }

void keyPressed(){
switch(keyCode){ Finalment, arribem a l’apartat draw(). El primer que hem de fer és netejar
case 37: la pantalla. Una vegada fet això comprovem que la partida no està acaba-
bola.moureBola(1); da. Els motius que podem fer que una partida s’acabi són dos; o el jugador
break; ha perdut totes les vides o ha superat tots els nivells del joc. En qualsevol
case 38: d’aquestes situacions ens apareix un missatge en pantalla, sigui anunciant
bola.moureBola(3); que hem perdut o donant-se l’enhorabona.
break;
case 39: Si no es dona cap d’aquestes situacions la partida pot continuar.
bola.moureBola(2);
break;
case 40: void draw(){
bola.moureBola(4); background(0,0,0);
break; if (jugador.gameOver()) {
background(0,0,0);
default:
mostraDadesPantalla(50,width/3 +100,height/2,”GAME OVER”,0);
break;
} else if (jugador.guanyaPartida()){
}
background(0,0,0); // Netejem pantalla.
} mostraDadesPantalla(50,width/3 +100,height/2,”ENHORABO
NA”,0);
}
 Marc Acosta Basagañas
Disseny d’interacció - Multimèdia

A partir d’aquí tot son crides a la funció (que hem creat) per a mostrar da-
Reflexions i millores
des en pantalla o a mètodes dels objectes. Passo a detallar l’ordre:

Iniciem el cronòmetre.
• Mostrem dades en pantalla; vides, temps, etc.
• Dibuixem la bola.
• Li donem velocitat en funció del temps transcorregut.
• Movem la bola en la direcció pertinent.
else {
temps.iniciarCrono();
mostraDadesPantalla(20,55,50,”Temps:”,temps.crono);
mostraDadesPantalla(20,1350,50,”Nivell:”,jugador.nivell);
mostraDadesPantalla(20,1350,100,”Vides:”,jugador.vides);
bola.crearBola();
bola.modificarVelocitat(temps.crono);
bola.moureBola(bola.direccio);
Al principi no tenia cap idea clara de quin seria el meu projecte, a més els
meus coneixements en electrònica són molt bàsics; llei d’Ohm i reconeixe-
ment de components electrònic, no tant el seu funcionament.
Així doncs, vaig començar amb els projectes del llibre que venia amb el
kit Arduino. No sé en quin projecte exactament va ser, imagino que vaig
anar sumant una mica d’un i una del següent, vaig tenir la idea d’intentar
fer que quan una bola rebotés contra els límits de la finestra s’encengués
un LED i sonés un piezoelèctric. Però, no hi havia interacció.
Després de donar-hi una volta, vaig pensar en el joc del Pong. Pels que no
el conegueu o no el recordeu, és el joc on hi ha dues barres enfrontades que
han de fer rebotar una bola per intentar anotar un punt. Però, com no dis-
posaria del temps necessari per fer-ho correctament, vaig acabar derivant
cap a la creació d’aquest projecte: La bola esbojarrada.
El primer de tot, va ser muntar el circuit, tot seguit, vaig fer una petita pro-
va amb Arduino per veure que funcionava i que no hi havia cap problema.

Després vaig passar a realitzar la part amb Processing, és en la que he

Finalment, la part més important, comprovar si la bola ha xocat contra els estat més temps (òbviament) Quan vaig aconseguir que el codi fes el que
límits de la finestra. Si ho ha fet, enviem el dígit de control (‘1’) pel port necessitava vaig fer les proves necessàries per a poder enviar dades d’un
COM3, fent que l’Arduino encengui el LED vermell i faci sonar el pie- programari a l’altre. En el cas d’aquest projecte, de Processing a Arduino.
zoelèctric. Si no ho ha fet, enviem el dígit de control (‘0’) El nostre circuit
Una vegada tenia el circuit muntat, el joc funcionant correctament i la
no farà res.
connexió entre els dos programaris feta correctament, vaig acabar fent el
petit codi d’Arduino.
if (bola.xocaBola()) {
jugador.restarVida(); Tanmateix, quan tot funcionava correctament, vaig començar a tenir pro-
myPort.write(‘1’); blemes amb la placa d’Arduino
} else {
myPort.write(‘0’); Finalment, m’agradaria apuntar unes quantes millores que es podrien ha-
} ver fet al projecte:
} • Encendre un llum verd quan el jugador puja un nivell.
} • Col·locar tants LEDS com vides de l’usuari i anar-los apagant a mesu-
ra que se’n van perdent.
• Incloure objectes en alguns llocs de la pantalla per a incrementar-la
dificultar.
• Incloure sons amb el piezoelèctric, diferents del que fem servir actual-
ment, per anunciar que el jugador ha superat tots els nivells.
Bibliografia

Apunts:

https://campus.uoc.edu/webapps/aulaca/classroom/Niu.ac-
tion?s=5ac033a5e0014db73ba44643e32971a7c3285d4c6cca9ec-
ce99e068fb2b8e9626ae0d7d364b2ecb541a78cbd0171eb2d6ff28e-
1f24f2e3ab5eb2d6c902e37e63&classroomId=931134&subjectI-
d=926955&javascriptDisabled=false&niuId=38445&langNiu=a

Llibre de projectes:

https://candy-ho.com/Drivers/librodeproyectosdearduinostarter-
kit-151212174250.pdf

Com comunicar Processing i Arduino

https://learn.sparkfun.com/tutorials/connecting-arduino-to-processing/all

Drets d’imatge

Imatges propietat de freepick.

https://www.freepik.es/

Programari

Processing
Arduino
Lucidchart.