29

Punto 7 Control: iteraciones

Estructura iterativa: for
Una estructura iterativa es una estructura que contiene acciones que se repiten siempre y cuando
una condicin resulte verdadera.
Tomemos el siguiente caso: nos disponemos a dibujar 13 lneas verticales equidistantes entre s, a
una distancia de 10 pxeles. Todas ellas tendrn el mismo tamao. Supongamos que utilizaremos el
siguiente cdigo:
size(200,200);
line(20,20,20,180);
line(30,20,30,180);
line(40,20,40,180);
line(50,20,50,180);
line(60,20,60,180);
line(70,20,70,180);
line(80,20,80,180);
line(90,20,90,180);
line(100,20,100,180);
line(110,20,110,180);
line(120,20,120,180);
line(130,20,130,180);
line(140,20,140,180);

Podemos notar varias cosas a partir del cdigo anterior:

1) la posicin del eje y en las coordenadas de origen y destino en cada instruccin tienen el
mismo valor: 20 y 180.
2) la posicin del eje x en las coordenadas de origen y destino en cada instruccin se
incrementan a una paso de 10 unidades positivas. Ambas comienzan en el valor 20 y llegan
hasta 140.
Por lo tanto, se puede expresar esta construccin de una manera ms simple? La respuesta es s!
Utilizando una estructura for! Veamos el ejemplo optimizado a continuacin:
size(200,200);
for(inti=20;i<150;i+=10){
line(i,20,i,180);
}

Hmmm... todo bien... pero parece un poco crptico, no? Bueno, s, un poco. Hasta que nos
acostumbramos a leerlo. Veamos cmo podemos decodificarlo.
Luego de la instruccin size() nos encontramos con el bloque for. El mismo se lee as:
1) Se ejecuta la instruccin de inicializacin o contador interno (int i = 20;), que se
encarga de inicializar el valor de la variable de control (i) del bloque for. En este caso se
inicia en 20.
2) Luego pasamos a la instruccin de evaluacin (i<150;), encargada de determinar si la
variable de control se encuentra dentro del rango de valores contemplados en la condicin
(es decir, que i sea un valor menor a 150).
3) Si dicha evaluacin resulta verdadera continuamos con el paso 4. Si resulta falsa saltamos al
paso 6.
IntroduccinaProcessingv1.5+

Docente:RalLacabanne

30
4) Se ejecutan las instrucciones dentro del bloque marcado entre llaves. Note que se utiliza la
variable de control como variable dinmica que devuelve los valores correspondientes al eje
x en coordenadas de origen y destino.
5) A continuacin se ejecuta la instruccin de actualizacin (i+=10), encargada de renovar
el valor de la variable de control. A continuacin se salta al paso 2.
6) Se sale de la estructura de iteracin y contina la ejecucin del programa.
De esta forma se procede con cada estructura for que nos encontremos:

Estructura iterativa anidada

La estructura for produce repeticiones en una dimensin. Si anidamos esta estructura dentro de
otra, combinando su efecto, crearemos iteraciones en dos dimensiones:
for(inty=10;y<100;y+=10){
for(intx=10;x<100;x+=10){
point(x,y);
}
}

El funcionamiento del cdigo anterior es el siguiente: por cada punto dibujado en la estructura
externa, se dibujan 9 puntos en la estructura interna.

IntroduccinaProcessingv1.5+

Docente:RalLacabanne

31
A continuacin veremos una larga serie de ejemplos que recomendamos ejecutar y jugar con las
modificaciones de los valores de la variable de control y las formas de evaluacin y actualizacin de
dicha variable:
for(inti=10;i<=90;i+=5){
line(i,10,i,90);
}

for(intx=16;x<100;x+=10){
line(x,0,x+15,50);
}
strokeWeight(4);
for(intx=8;x<100;x+=10){
line(x,50,x+15,100);
}

noFill();
for(intd=150;d>0;d=10){
ellipse(50,50,d,d);
}

/*Cambiodematiz,mientraslasaturacinyelbrillosemantienenconstantes
*/
colorMode(HSB);
for(inti=0;i<100;i++){
stroke(i*2.5,255,255);
line(i,0,i,100);
}

/*Cambiodesaturacin,mientraselmatizyelbrillosemantienenconstantes
*/
colorMode(HSB);
for(inti=0;i<100;i++){
stroke(132,i*2.5,204);
line(i,0,i,100);
}

/*Cambiodebrillo,mientraselmatizylasaturacinsemantienenconstantes
*/
colorMode(HSB);
for(inti=0;i<100;i++){
stroke(132,108,i*2.5);
line(i,0,i,100);
}

IntroduccinaProcessingv1.5+

Docente:RalLacabanne

32
/*Cambiodesaturacinybrillo,mientraselmatizsemantieneconstante*/
colorMode(HSB);
for(inti=0;i<100;i++){
for(intj=0;j<100;j++){
stroke(132,j*2.5,i*2.5);
point(i,j);
}
}
/*Cambiodesaturacinybrillo,mientraselmatizsemantieneconstante*/
colorMode(HSB);
for(inti=0;i<100;i++){
for(intj=0;j<100;j++){
stroke(132,j*2.5,i*2.5);
point(i,j);
}
}
//CambiodelazulalverdeenmodoRGB
colorMode(RGB);
for(inti=0;i<100;i++){
floatr=61+(i*0.92);
floatg=156+(i*0.48);
floatb=204(i*1.43);
stroke(r,g,b);
line(i,0,i,100);
}
//CambiodelazulalverdeenmodoHSB
colorMode(HSB,360,100,100);
for(inti=0;i<100;i++){
floatnewHue=200(i*1.2);
stroke(newHue,70,80);
line(i,0,i,100);
}
for(inty=1;y<100;y+=10){
for(intx=1;x<y;x+=10){
line(x,y,x+6,y+6);
line(x+6,y,x,y+6);
}
}
noStroke();
for(inty=0;y<100;y+=10){
for(intx=0;x<100;x+=10){
fill((x+y)*1.4);
rect(x,y,10,10);
}
}

IntroduccinaProcessingv1.5+

Docente:RalLacabanne

33

IntroduccinaProcessingv1.5+

Docente:RalLacabanne

34

IntroduccinaProcessingv1.5+

Docente:RalLacabanne

35

Estructura iterativa: while

La otra estructura iterativa que contamos en Processing es while, que a diferencia de for, se utiliza
de forma conjunta con una variable de control externa al bloque. Por lo tanto, la estructura while
ejecuta una serie de instrucciones de manera continua mientras que la expresin condicional sea
verdadera. La expresin debe ser actualizada durante la iteracin, de lo contrario nunca saldremos
del bucle while.
while(expresin){
instrucciones(algunadeellasserladeactualizacin)
}

Esta estructura puede resultar peligrosa para los programadores novatos ya que el cdigo dentro del
bucle while no se detendr hasta que la expresin dentro del mismo resulte falsa. Bloquear
cualquier otro cdigo a ser utilizado (los eventos de ratn no sern actualizados, etc.). Por lo tanto
debemos ser cautelosos ya que podemos llegar a inmovilizar el cdigo (y hasta a veces el entorno
Processing mismo) si se usa de manera incorrecta.
A continuacin un ejemplo simple:
inti=0;
while(i<80){
line(30,i,80,i);
i=i+5;
}

Ejercicio 08

Utilizar dos estructuras for para generar:

un fondo con cambio de matiz; y por sobre este,
una serie de ocho cuadrados negros concntricos (el menor deber tener 10 px de lado y
el mayor 80 px), separados por una distancia de 5 px en cada uno de sus lados.
Probar la funcin rectMode() con alguno de sus parmetros.
Comentar todas las instrucciones.

Lectura recomendada

Buioli, I. & Prez Marn, J. "Processing: un lenguaje al alcance de todos", Autoedicin,

2013, Alpha, Unidad 6 "Control: Repeticin" (pag. 31).
Reas, C. & Fry, B. "Processing: A Programming Handbook for Visual Designers and
Artists, MIT Press, 2007, Captulo "Control 2: Repetition" (pag. 61)..

IntroduccinaProcessingv1.5+

Docente:RalLacabanne