TUTORIAL DE PROCESSING || Secció 7: Bucles

1. Estructures de control iteratives: Bucles
2. Bucle "for"
3. Abreviacions

1.- Estructures de control iteratives: bucles (loops)

Les estructures de repetició ens permeten executar varies vegades unes línies de codi determinades.

A Processing podem utilitzar dues estructures de control iteratives, de les quals és recomanable, si més no el principi que hom programa, utilitzar exclusivametn la segona:while i for.

While repeteix una acció o sèrie d'accions mentre (while) tal condició es compleixi:

 while(condició) {
  //instuccions;
 }
    

Per exemple:

size(255,255); 
    
int i=0; 
    
while(i<height) { 
    stroke(i,0,0); 
    line(0, i, width, i); 
    i = i + 2; 
 } 

Però cal anar amb compte amb aquest tipus de bucle: és molt fàcil crear un bucle infinit, que en el cas de Processing probablement farà que es pengi l'aplicació. Això passaria si en l'exemple anterior oblidem la línia i=i+2; que és la que permet que en algun moment deixi de complir-se la condiciówhile(i<height) i per tant es trenqui el bucle (i es continuï executant el codi).

Si acabeu provocant un bucle infinit, en un PC hauríeu d'obrir e l'Adiministrador de Tasques (ctrl+alt+supr, o bé clic amb el botó dret a la barra de tasques --> Administrador de Tasques), i a la pestanya aplicacions seleccionar Processing i clicar el botó "Fi de la tasca". Si això no funciona (o us canseu d'esperar), a la pestanya processos podeu matar el procés javaw. Al fer això últim parareu Processing i perdreu qualsevol canvi en el codi després de l'últim "save".

Podeu veure aquí la referència de WHILE, tot i que recomano utilitzar sempre l'estructura "FOR", que explico a continuació, encara que sigui aparentment més comlpexa.

Aquesta estructura de bucle és més utilitzada que el while loop i, en general, més recomanable i eficient. De fet funcionen de manera semblant, però aquí la condició és només una de les tres parts que controlen l'estructura del bucle. Així, en el FOR tenim una inicializació d'una condició, el seu test, i una actualització. El bucle s'executa, doncs, mentre el resultat del test sigui true:

 for(inici; test; actualizació) {
   //instuccions;
 }

Un cop més, en abstracte això sona extraterrestre, així que mirarem alguns exemples:

for(int i=0; i<3; i=i+1){
  println(i);
}

Analitzarem aquest cas. Aquí, la inicialització és: int i=0;, és a dir, declararem una variable, de tipus int a la que donem el nom i i el valor inicial zero. Fins a aquí res de nou. En segon lloc tenim el test: i<10;. Quan aquest doni com resultat true s'executarà el codi que hi ha entre les claus del bucle, en aquest cas println(i);, i seguidament l'actualització del bucle (la tercera part del que hi ha entre parèntesi): i=i+1 (i s'incrementa en u). Així doncs, en pseudocodi, l'exemple anterior es traduiria així:

Per tant, l'acció d'escriure quelcom a la consola (el println()) s'executarà en aquest exemple tres vegades.

La seqüència d'esdeveniments és:

-I és zero.
-Es compleix que 0 es menor a 3, per tant executa el codi del bucle 
				i després actualitza 
     -Imprimim 0 a la consola
  -Acutalització: "i" és ara igual a 1
-Es compleix que 1 es menor a 3, per tant executa el codi del bucle 
				i després actualitza 
     -Imprimim 1 a la consola
   -Acutalització: "i" és ara igual a 2
-Es compleix que 2 es menor a 3, per tant executa el codi del bucle 
				i després actualitza
     -Imprimim 3 a la consola
   -Actualizació: "i" és ara igual a 3
-No es compleix que 3 sigui menor a 3, per tant es trenca el bucle
    

Tanta història per a veure 0, 1 i 2 en la consola? Doncs si... És cert que en aquest cas escrivim més codi del que ens estalviem, però fins i tot en sense sortir de tan simple exemple, proveu canviar el 3 per un mil:

for(int i=0; i<1000; i=i+1){
  println(i);
}

i penseu ara les línies que us heu estalviat!

Tornem, però, als gràfics. Imagineu-vos que volem crear un centenar d'el·lipses en posició i de grandària aleatoria. Sense un bucle, caldria fer una mateixa operació cent vegades. Però amb un for loop és tan fàcil com fer el següent:

Your browser does not support the canvas tag.

Source code: boles1

 

size(300,300);
	  
 for(int i=0; i<100; i++){
     float posX = random(width);
     float posY = random(height);
     float tamano = random (100);
     ellipse(posX,posY,tamano,tamano);
}
  

Exemple que per cert pot aplicar-se perfectament dins el draw, com en aquest exemple efervescent:

Your browser does not support the canvas tag.

Atenció: En aquest sketch la velocitat (fps) està limitada a 1, mitjançant framerate(1);

Source code: boles2

on per cert pot comprovar-ser l'intens que pot resultar la instrucció smooth() en segons quins casos. Proveu d'escriure smooth(); dins el SETUP.

El següent és un exemple on el bucle, de nou, ens serveix per a realitzar una acció un cert nombre de vegades, però també on podem fer que el mateix valor que controla el bucle ("i" per convenció) sigui utilitzat com un element gràfic més.

L'exemple és aquest:

Your browser does not support the canvas tag.

Source code: boles3

 

Si us hiheu fixat, en alguns exemples he utilitzat i++ per a augmentar el valor de i dintre del bucle. Això significa el mateix, exactament, que i=i+1. És simplement una abreviació, que al ser molt utilitzada és necessari conèixer. D'altres de molt comunes són:

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