PROGRAMACIÓN: CONCEPTOS || MASTER EN ARTES DIGITALES

Sección 7: Bucles

1. Estructuras de repetición: bucles (loops)
2. El "FOR LOOP"
3. Un apunte: abreviaciones

Las estructuras de repetición nos permiten ejecutar varias veces unas mismas líneas de código.

En Processing, hay dos estructuras de repetición, de la que recomiendo utilizar casi exclusivamente la primera: for y while.

While repite una acción mientras (while) tal condición se cumple:

 while(condición) {
  //instucciones;
 }
    

Por ejemplo:

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

Pero hay que ir con cuidado con este tipo de bucle: es muy fácil crear un bucle infinito, que en el caso de Processing hará que se cuelgue la aplicación. Esto pasaría si en el ejemplo anterior olvidamos la línia i=i+2; que es la que permite que en algún moemento deje de cumplirse la condición while(i<height) y por consiguiente se rompa el bucle (y se continúe ejecutando el código).

Si acabáis provocando un loop infinito, en un PC deberéis abrir el Adiministrador de Tareas (ctrl+alt+supr, o bién right-click en la barra de tareas --> administrador de tareas), y en la pestaña aplicaciones seleccionar Processing y escoger "finalizar tarea". Si esto no funciona (u os cansáis de esperar), el la pestaña procesos podéis matar el proceso javaw. Al hacer esto último pararéis Processing y perderéis qualquier cambio en el código después del último "save".

Podéis ver aquí la referéncia de WHILE, aunque recomiendo utilizar la estructura de bucle "FOR", que explico a continuación, aunque sea aparentemente más compleja.

Esta estructura de bucle es más utilizada que el while loop y, en general, más recomendable y eficiente. De hecho funcionan de manera parecida, pero aquí la condición es sólo uno entre tres partes que controlan la estructura del bucle. Así, en el FOR tenemos una incicialización de una condición, su test, y una actualización. El bucle se ejecuta, pues, mientras el resultado del test sea false:

 for(inicio; test; actualización) {
   //instucciones;
 }

Una vez más, en abstracto esto suena extraterrestre, así que miraremos algunos ejemplos:

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

Analizemos este caso. Aquí, la inicialización es: int i=0;, es decir, declaramos una variable, de tipo int y nombre i de valor cero. Hasta aquí suena familiar. En segundo lugar tenemos el test: i<10;. Quando éste dé como resultado true se ejecutará el código que hay entre las claves del bucle, en este caso println(i);, y seguidamente la actualización del bucle (la tercera parte de lo que hay entre paréntesis): i=i+1 (i se incremente en uno). Así pues, en pseudocódigo, el ejemplo anterior se traduciría así:

Por lo tanto, la acción de escribir algo en la consola (el println()) se ejecutará en éste ejemplo tres veces.

La secuencia de eventos es:

-I es cero.
-Se cumple que 0 es menor a 3, por lo tanto ejecuta el código del bucle 
				y luego actualiza 
     -Imprimimos 0 en la consola
  -Acutalización: "i" es ahora igual a 1
-Se cumple que 1 es menor a 3, por lo tanto ejecuta el código del bucle 
				y luego actualiza 
     -Imprimimos cero en la consola
   -Acutalización: "i" es ahora igual a 2
-Se cumple que 2 es menor a 3, por lo tanto ejecuta el código del bucle 
				y luego actualiza 
     -Imprimimos 2 en la consola
   -Actualización: "i" es ahora igual a 3
-No se cumple que 3 sea menor a 3, por lo tanto se rompe el bucle
    

¿Tanta história para ver 0, 1 y 2 en la consola? Pues sí... Cierto que en este caso escribimos más código del que nos ahorramos, pero incluso en sin salir de tan simple ejemplo, probad cambiar el 3 por un mil:

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

y pensad las líneas que os habéis ahorrado ahora!

Pero vamos a lo gráfico. Imaginad que queremos crear un centenar de elipses en posición y de tamaño aleatori. Sin un bucle, habría que hacer una misma operación cien veces. Pero con un for loop es tan fácil como hacer lo siguiente:

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);
}

Ejemplo que por cierto puede aplicarse sin problemas dentro del DRAW, como en este ejemplo burbujero:

Your browser does not support the canvas tag.

Atención: En este caso hemos limitado la velocidad a la que processing se actualiza con framerate(1);

Source code: boles2

donde por cierto puede comprobarse lo intenso que es el smooth() en según qué casos. Provad escribir smooth(); dentro del SETUP.

Un ejemplo donde el bucle nos sirve para realizar una acción un cierto número de veces, pero también podemos hacer que el mismo valor ("i" por convención) que incrementa el valor del bucle sea utilizado como un elemento gráfico más.

Por ejemplo:

Your browser does not support the canvas tag.

Source code: boles3

Si os habéis fijado, en algunos ejemplos he utilizado i++ para aumentar el valor de i dentro del bucle. Esto significa lo mismo que i=i+1. Es simplemente una abreviación, que al ser muy utilizada es necesario conocer. Otras abreviaciones comunes son:

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