Joan Soler-Adillon || Tutorial de Processing

Despatx 52.803 (Campus de la comunicació, UPF) || 93 542 1238
mail

----------------------------------------------------------------
----------------------------------------------------------------

1.- Estructures de control: Condicionals

En programació, els condicionals són fonamentals. Serveixen per establir el flux del programa: Per donar-li les pautes per prendre decisions i actuar en conseqüència.

El que fan els condicionals és comprobar si tal condició es compleix o no. Si es compleix, el programa realitzarà una acció i, si no, en realitzarà una altra o cap. És a dir, si es compleix A, llavors executa B. I en anglès: if a, then b. I tot això, òbviament, amb la sintaxi corresponent, amb els seus parèntesis i claus:

 

if(condicio){
fesTalCosa();
}

 

Com es veu a l'exemple, la condició ha d'anar entre parèntesis. Després d'aquesta obrim la clau, i les instruccions que podem entre aquí i quan es tanqui la clau són les que s'executaran si es compleix la condició.

En aquest cas, fesTalCosa(); només s'executarà si es compleix la condició. Si no es compleix, no passarà res.

Què passa si volem que, segons es compeixi o no una condició, s'executi o una cosa o una altra (que mai es quedi sense passar res)? Doncs obviament podem fer dos if, then, un per la condició positiva i un per la negativa, però és més eficient utilitzar un if, else. És a dir: si passa A, fés B. En cas contrari (si no passa A -else), fés C:

 

if(condicio){
fesTalCosa();
} else {
fesTalAltra();
}


Respecte a les condicions, en general, aquetes estan compostes per comparacions entre valors. Si "a" és més gran que "b", fés X. Si "c" és menor a "d", fés Y. Si "e" no és igual a "f", fés Z. Etc.

 

if(a > b){
fesTalCosa();
}

Aquestes comparacions es realitzen utilitzant uns operadors (como veurem tot seguit). Allò que l'if es pregunta és si el valor de la condició és verdader o fals. Però aquestes condicions, como veurem en el punt 3, es poden combinar unas amb d'altres. Així, podems preguntar-nos quelcom com: És "a" menor o igual que "b" i a més "c" es no igual a "d"? O, complicant-ho més: Es "a" major a "b" i alhora o bé "c" menor a "d" o bé "f" igual a "g"?

I la cosa es pot anar complicant, però mai s'ens escaparà de les mans si som capaços de controlar la sintaxi, en aquest cas, de paràntesis. Ho veurem amb els exemples.

En tot cas val la pena tenir en compte que qualsevol expressió que formem que conforma una condició, ha de resultar SEMPRE en un valor de cert o fals.

 

 

2.- Operadors

Els operadors (relacionals) ens permeten coparar valors nomèrics, normalment continguts per variables. En Processing, l'operador d'igualtat i no igualtat ens permeten també comparar caràcters, cadenes de caràcters (strings) i valors booleans. Com s'ha dit, els ordinadors són molt bons i ràpids en guardar valors, fer operacions i comparar-les. Doncs bé, quan té sentit comparar valors és quan utilitzem condicionas.

Els operadors qeu podem utilitzar són:

 

== (igualtat)

Compara dos valors per determinar si són iguals. És MOLT IMPORTANT recordar que són necessaris DOS SIGNES D'IGUALTAT. Un de sol correspont a l'assignació d'un valor (el que fem al donar un valor a una variable).

if(a == b){
fesTalCosa();
}


 

!= (no igualtat)

Compara dos valors para determinar si no són iguals. (Si "a" NO és igual a "b"...):

if(a != b){
fesTalCosa();
}


 

> (més gran que)

Compara dos valors per determinar si el primer és més gran que el segon:

if(a > b){
fesTalCosa();
}


 

< (més petit que)

Compara dos valors per determinar si el primer és menor al segon:

if(a < b){
fesTalCosa();
}


 

>= (més gran o igual que)

Compara dos valors per determinar si el primer és més gran o igual que el segon:

if(a >= b){
fesTalCosa();
}


 

<= (més petit o igual que)

Compara dos valors per determinar si el primer és més petit o igual que el segon:

if(a <= b){
fesTalCosa();
}

 

 

3.- Operadors lògics

Si els operadors relacionals ens permeten comparar valors, els lògics ens permeten comparar condicions tal i como les hem definit anteriorment. De fet, el que comparem són valors booleans (cert/falso), ja que això és el que dóna com a resultat les condicions que posem entre parèntesi darrere l'if.

Així, podem entendre que els operadors lògics operen sobre valors de vertader/falso (true/false en Processing, que com sabeu només parla anglès!).

Els operadors lògics són:

 

&& ("i" lògic)

L'"i" lògic compara dos valors booleans i retorna vertader només si ambdós valors comparats resulten vertaders.

true && true = true
true && false = false
false && true = false
false && false = false

 

Atenció amb els parèntesis quan combinem condicions:

if((a < b)&&(c==d)){
fesTalCosa();
}


 

|| ("o" lògic)

L'"oi" lògic compara dos valors booleans i retorna vertader si un dels dos valors comparats resulten vertaders.

true || true = true
true || false = true
false || true = true
false || false = false

 

if((a < b) || (c>d)){
fesTalCosa();
}


 

! ("no" lògic)

El no lògic no compara valors sinó que el que fa és invertir-los.

!false = true
!true = false

 

if(!a){
fesTalCosa();
}


4.- Exemples 1

boolean condU = true;
boolean condDos = false;

//comprovem l'"o" lògic
if(condU || condDos){
print("es compleix el ||");
}
else{
print("no es compleix el ||");
}

//comprovem l'"i" lògic
if(condU && condDos){
print("es compleix el &&");
}
else{
print("no es compleix el &&");
}


Amb un element més gràfic, podem utilitzar un condicional per decidir quan s'atura una acció:

Your browser does not support the canvas tag.

Source code: globus

 

float pos;

void setup(){
size(300,100);
pos = 13;
}

void draw(){
if(pos <= 200){
pos = pos + 4;
}
ellipse(pos,50,20,20);
}

 

O ho podem aplicar a la posició:

Your browser does not support the canvas tag.

Source code: bolaStop

 

float pos;

void setup(){
size(300,100);
pos = 13;
}

void draw(){
if(pos <= 200){
pos = pos + 4;
}
ellipse(pos,50,20,20);
}


O utilizar-los per fer "rebotar" la pilota als límits de la finestra i simular així un espai tancat:

Your browser does not support the canvas tag.

Source code: bouncingBallH

 

int pos, vel;
int sz = 20;

void setup(){
size(300,200);
pos = width/2;
vel = 5;
}

void draw(){

background(0);

//actualitzem la posició
pos = pos+vel;

//dibuixem
ellipse(pos,height/2,sz,sz);

//comprovem si està dins els límits de la finestra
//si ho està, invertim el signe de la velocitat:
if((pos<0)||(pos>width)){
vel = -vel;
}
}


Podeu veure com aquí utilitzem un "o" lògic per fer el doncicional amb dues condicions: O bé major a WIDTH, o bé menor a ZERO.

 

5.- Exemples 2

Elaborant en això, és fàcil afegir el rebot a l'eix Y i crear un exemple clàssic: the bouncing ball.

Your browser does not support the canvas tag.

Source code: bouncingBall

 

 

O podemos utilitzar els condicionals per fer créixer i decréixer la pilota, com si respirés o hi hagués un eix Z.

Your browser does not support the canvas tag.

Source code: breathBall



 

----------------------------------------------------------------------------------------------------

Your browser does not support the canvas tag.