---
title: "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:

![](/img/puntos-4x4.png)

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

# Derivación

## Código "manual"

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

```java
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);
```

## Observaciones

Podemos apreciar lo siguiente:

* En cada fila, la coordenada `x` de los puntos que la conforman cambia por un incremento de 100
* En cada fila, la coordenada `y` de los puntos que la conforman es constante 
* Lo que diferencía a las filas es la coordenada `y` de sus puntos, que cambia por un incremento de 100.

## Ciclo para dibujar una fila

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

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

o con `for`:

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

Podemos parametrizar la coordenada `y`:

```java
int y = 100;

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

o con `for`:

```java
int y = 100;

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

## 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.

# Versión con acumulador

## Ciclos `while`

```java
// 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; 
}
```

## Ciclos `for`

```java
// 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);
  }

}
```

# Versión con contador

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

## Ciclos `while`

```java
// 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; 
}
```

## Ciclos `for`

```java
// 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);
  }

}
```

# Relacionado

* [[Ciclos while y for]](/notas/ciclos.html)
* [[Variables: Contadores, Acumuladores, Banderas]](/notas/variables-modos.html)
