Ciclos anidados: Repetición en dos dimensiones

Hay patrones basados en repetición que consisten en repetir algún elemento que de por sí es repetitivo.

Por ejemplo, podemos entender a la siguiente imagen como la repetición de 4 filas, donde cada fila consiste en la repetición de 4 puntos:

Se le llama ciclos anidados a los ciclos que colocamos dentro de otro(s) ciclo(s).

1 Derivación

1.1 Código “manual”

El siguiente código dibuja de manera “manual” a la imagen previa:

size(500, 500);
background(0);
stroke(255);
strokeWeight(8);

// primera fila
point( 100, 100);
point( 200, 100);
point( 300, 100);
point( 400, 100);

// segunda fila
point( 100, 200);
point( 200, 200);
point( 300, 200);
point( 400, 200);

// tercera fila
point( 100, 300);
point( 200, 300);
point( 300, 300);
point( 400, 300);

// cuarta fila
point( 100, 400);
point( 200, 400);
point( 300, 400);
point( 400, 400);

1.2 Observaciones

Podemos apreciar lo siguiente:

1.3 Ciclo para dibujar una fila

Un ciclo que realiza el comportamiento presente en la primera fila podría verse así:

int x = 100;
while( x <= 400 ){
    point( x, 100);
    x = x + 100;
}

o con for:

for( int x=100; x<=400; x = x + 100){
    point( x, 100);
}

Podemos parametrizar la coordenada y:

int y = 100;

int x = 100;
while( x <= 400 ){
    point( x, y );
    x = x + 100;
}

o con for:

int y = 100;

for( int x=100; x<=400; x = x + 100){
    point( x, y );
}

1.4 Ciclo para dibujar varias filas

Ya que identificamos cómo dibujar una fila, podemos entonces indicar una repetición de todo ese bloque de código, cambiando la variable y en cada iteración.

De esta manera tendremos un ciclo externo que itera sobre la variable y, y un ciclo interno que itera sobre la variable x por cada valor de la variable y. Así definiremos un comportamiento que pasa por cada combinación posible entre las variables x y y.

A continuación varios ejemplos.

2 Versión con acumulador

2.1 Ciclos while

// este ciclo dibuja a las filas
int y = 100;
while( y <= 400 ){

  // este ciclo dibuja a una fila:
  int x = 100;
  while( x <= 400 ){
    point( x, y );
    x = x + 100;
  } // aquí acaba el ciclo que dibuja a una fila

  y = y + 100; 
}

2.2 Ciclos for

// ciclo que dibuja a las filas
for( int y = 100; y <= 400; y = y + 100){

  // ciclo que dibuja una fila:
  for( int x = 100; x <= 400; x = x + 100){
    point(x, y);
  }

}

3 Versión con contador

En ocasiones puede tener sentido utilizar contadores para este tipo de iteración:

3.1 Ciclos while

// este ciclo dibuja a las filas
int j = 1;
while( j <= 4 ){

  // este ciclo dibuja a una fila:
  int i = 1;
  while( i <= 4 ){
    point( i*100 , j*100 );
    i = i + 100;
  } // aquí acaba el ciclo que dibuja a una fila

  j = j + 100; 
}

3.2 Ciclos for

// ciclo que dibuja a las filas
for( int j = 1; j <= 4; j = j + 1){

  // ciclo que dibuja una fila:
  for( int i = 1; i <= 4; i = i + 1){
    point( i*100, j*100);
  }

}

4 Relacionado