tutorial de programación para arte interactivo
Emiliano Causa
e_causa@yahoo.com.ar
www.emiliano-causa.com.ar
www.biopus.com.ar
Christian Silva
entorno3@gmail.com
www.hipertextos.com.ar
Leonardo Garay
todotresde@gmail.com
David Bedoian
bedoiandavid@yahoo.com
www.bedoiandavid.com.ar
tutorial de programación para arte interactivo

Estructuras de control iterativas (repetitivas)

zip descargar

Introducción

Cuando en un apartado anterior introdujimos el tema de las estructuras de control, se dijo que existían dos tipos principales de estructuras: las condicionales y la iterativas (o repetitivas, que es un sinónimo). Mientras que las estructuras condicionales permiten bufurcar el flujo de ejecución en función de una condición, las estructuras iterativas permiten repetir una porción de código en función de una condición.

Los ciclos for-next

La estructura iteartiva más utilizada es la que se conoce como ciclo for-next. Esta estructura permite repetir, una cantidad determinada de veces, las instrucciones que se encuentran en su interior. Como veremos a continuación, la estructura posee tre parámetros que son: la inicialización, la condición y el incremento:

 

 

...
for( inicializacion ; condición ; incremento ){

cuerpo de la estructura

}
...

Hecho en Processing

Como muestra el esquema anterior, estos tres parámetros van separados por puntos y comas (;) a diferencia de la mayoría de las instrucciones en donde los parámetros en que los parámetros van separados por comas (,). En el ejemplo a continuación se muestra una ciclo for-next utilizado para repetir una instrucción 3 veces:

To view this content, you need to install Java from java.com

size(200,200);
int a = 10;
for(int i=0 ; i<3 ; i++){

rect( a , 75 , 50 , 50 );
a += 60;

}

Hecho en Processing

En el ejemplo anterior, las intrucciones que se encuentran en el interior del ciclo for-next ( "rect( a , 75 , 50 , 50 )" y "a += 60") se repiten 3 veces. Es decir que este programa es el equivalente al que sigue, donde la variable a va adoptando los valores 10,70 y 130, que son las posiciones horizontales de los cuadrados:

size(200,200);
int a = 10;
rect( a , 75 , 50 , 50 );
a += 60;
rect( a , 75 , 50 , 50 );
a += 60;
rect( a , 75 , 50 , 50 );
a += 60;

Hecho en Processing

¿Cómo es que se produce esta repetición? Bueno, la forma en que la estructura se ejecuta es la siguiente:

Paso 1: en el primer ciclo se ejecuta la inicialización (en este caso se declara la variable entera llamada i, y se le asigna el valor 0 ) y luego se evalua la condición (en este caso se evalua si el valor de la variable i es menor a 3) y si se cumple se ejecuta el cuerpo de la estructura .
Paso 2: en el siguiente ciclo, ya no se ejecuta la inicialización, sino que se ejecuta el incremento (en este caso i++, que significa incrementar en 1 el valor de la variable i) y luego se vuelve a evaluar la condición (nuevamente i<3) y si se cumple la condición se vuelve a ejecutar el cuerpo del ciclo.
Paso 3 al N-ésimo: a partir de aquí la estructura repite los mismos paso que el paso 2.

En el ejemplo anterior, se inicia la variable i en 0 y como cumple la condición de ser menor a 3 (0 es menor que 3), entonces se ejecuta el cuerpo ( "rect( a , 75 , 50 , 50 )" y "a += 60"), luego se incrementa i (i++) y como i vale 1 y sigue siendo menor a 3, se vuelve a ejecutar el cuerpo, posteriormente vuelve a hacer el incremento y a evaluar la condición e i que pasa a valer 2 sigue siendo menor que 3, y se vuelve a ejecutar el cuerpo, hasta que en el siguiente incremento i pasa a valer 3 que ya no es menor a 3 (sino igual), y por ende termina el ciclo.

ir arriba

La condición

En un ciclo for-next es muy importante que la condición se dé al menos una vez, por que sino no se ingresa nunca en el ciclo:

To view this content, you need to install Java from java.com

size(200,200);
int a = 10;
for(int i=4 ; i<3 ; i++){ //esta línea se modifico poniendo i=4

rect( a , 75 , 50 , 50 );
a += 60;

}

Hecho en Processing

En el ejemplo anterior se muestra queque la condición de i<3 nunca se cumplirá dado que el valor de i se inicia en 4, por ende nunca se ingresa al ciclo y las instrucciones que está en su interior nunca serán ejecutadas.

Tanto la inicialización, como la condición y el incremento, son muy flexible y permiten utiilizar una gran rango de operaciones y valores. Por ejemplo la inicialización puede ser con valores distintos de 0 y el incremento puede ser de valores diferentes a 1 , así como otras operaciones metamáticas más allá de la suma:

for(int i=1 ; i<10 ; i+=2){ //imprime los números impares del 1 al 9
println(i);
}
for(int i=10 ; i>0 ; i--){ //este sería un ciclo que decrece desde 10 a 1
println(i);
}
for(int i=1 ; i<=256 ; i*=2){ //en este los valores se duplican desde 1
println(i); // hasta 256, pasando por 2,4,8,16,32,64 y 128
}

Hecho en Processing

ir arriba

Los bucles infinitos

Otro caso importante de tener en cuenta es el caso del bucle infinito, en donde la condición nunca deja de cumplirse y por ende el ciclo nunca termina. Cuando esto sucede, generalmente queda bloqueada la máquina (colgada) y a veces es necesaria apagarla y volver a encenderla:

// si no desea colgar su computadora NO EJECUTE ESTE CÓDIGO
for(int i=1 ; i>0 ; i++){
println(i);
}

Hecho en Processing

Como se puede ver en el caso anterior, la condición de i>0 se cumple siempre, dado qie i se inicia con el valor 1 y en cada paso se incrementa, pasando por 2, 3, 4, 5, 6, ... y así hasta el infinito.

ir arriba

La practicidad de los parámetros

En el primer ejemplo, la variable a que usamos para determinar la ubicación de los cuadrados, adquiere los valores 10, 60, 130, mientras que la variable del ciclo for-next pasa por los valores 0, 1 y 2. Es posible que la misma variable i del ciclo adopte los valores que necesitamos para ubicar a los cuadrados:

To view this content, you need to install Java from java.com

size(200,200);
for(int i=10 ; i<=130 ; i+=60){

rect( i , 75 , 50 , 50 );

}


Hecho en Processing

Esto es posible por que los valores se incrementan en forma fija (saltando de a 60). Cabe aclarar que la variable del ciclo for-next puede tener cualquier nombre.

ir arriba

Los ciclos anidados

Supongamos que queremos hacer un tablero de ajedrez, es decir un tablero de 8x8 cuadros en donde se alternan los cuadros negros y blancos. El primer problema al que nos enfrentamos es el de hacer los 8x8 cuadros, independientemente del color que tengan. Para hacer una única hilera de cuadrados podemos seguir los ejemplos anteriores:

To view this content, you need to install Java from java.com

size(200,200);
for(int i=0 ; i<8 ; i++){

rect( i * 25 , 0 , 25 , 25 );

}


Hecho en Processing

Si quisieramos repetir 8 veces esta hilera modifiando su posición vertical, entonces debemos anidar dos ciclos for-next, haciendo que un nuevo ciclo (exterior al anterior) repita 8 veces las instrucciones necesarias para hacer una hilera:

To view this content, you need to install Java from java.com

size(200,200);
for(int j=0 ; j<8 ; j++){ //este ciclo repite 8 veces al otro ciclo

for(int i=0 ; i<8 ; i++){

rect( i * 25 , j * 25 , 25 , 25 ); //aqui se // agrego "j * 25"

}

}


Hecho en Processing

Queda pendiente la custión de la alternacia entre cuadros negros y blancos. Para estos aprovecharemos una propiedad del table: como muestra la figura siguiente, si sumamos el número de fila más el número de columna en cada cuadro, notaremos que la alternancia entre resultados pares e impares es equivalente a la de cuadros negros y blancos en una tablero:

Por lo que aprovechamos esta propiedad y utilizamos una estructura if-then-else para pintar de negro o blanco en función de la paridad de la suma entre el número de fila y el de columna. En el ejemplo que sigue, el número de fila es j, mientras que el número de columna es i, así que para evaluar si la suma de estos valores es par, verificamos que el resto de dividir dicha suma por 2 sea 0, dado que los números pares devuelven resto 0 al ser divididos por 2. Esto se traduce a preguntar si (i+j) % 2 == 0, dado que el símbolo (%) es el resto de la división entera:

To view this content, you need to install Java from java.com

size(200,200);

for(int j=0 ; j<8 ; j++){

for(int i=0 ; i<8 ; i++){

if( (i+j) % 2 == 0 ){ //si la suma //fila+columna es par entonces pinta de negro

fill( 0 );

}else{

fill( 255 );

}
rect( i * 25 , j * 25 , 25 , 25 );

}

}


Hecho en Processing

 

ir arriba