---
title: "Ciclos: while y for"
---

Los ciclos, bucles o *loops* son expresiones que nos permiten programar operaciones repetitivas con pocas líneas de código.

La función de `draw()` es un caso especial de ciclo en cuanto a que se repite pero de acuerdo a nociones de tiempo (30 veces por segundo)

[[Ciclo de animación]](/notas/draw.html)

# Ciclo `while`

El ciclo `while` ("mientras") es la expresión fundamental para indicar ciclos en Processing.

Consiste en un bloque de código que se va a repetir *mientras* una condición booleana sea verdadera (`true`).

[[Variables y expresiones booleanas]](/notas/boolean.html)

Es importante que dentro del ciclo suceda al menos una operación que haga que la condición eventualmente se evalúe como falsa (`false`). De no ser así, habremos establecido un *bucle infinito* y veremos cómo Processing se traba.

## `while` con acumulador

Un ejemplo que dibuja puntos distribuidos horizontalmente, entre 0 y 200 en X, y a una altura de 200 en Y:

```java
// cambia el grosor de los puntos
strokeWeight(5);

// posición inicial del primer punto
float x = 0;
// repite el bloque de código mientras x sea menor a 200
while( x < 200 ){ 
    point( x, 200); // dibuja un punto
    x = x + 5; // incrementa a x 
}
```

La variable `x` funciona como *acumulador*, y tomará los valores 0, 5, 10, 15, 20 ... 190, 195. Cuando llega a 200, la condición ya no se cumple y el ciclo termina.

[[Variables: Contadores, Acumuladores, Banderas]](/notas/variables-modos.html)

## `while` con contador

En este otro ejemplo con resultado visual similar, usamos una variable como *contador*:

```java
// cambia el grosor de los puntos
strokeWeight(5);

// valor inicial del contador
int cuenta = 0;

// repite el bloque de código mientras el contador sea menor a 20
while( cuenta < 20 ){ 
    point( cuenta*5, 200); // dibuja un punto de acuerdo al valor de cuenta

    // incrementa el contador por 1
    cuenta = cuenta + 1;
}
```

Aquí, `cuenta` tomará los valores 0, 1, 2, 3, 4, 5 ... 18, 19. Cuando llega a 20 la condición ya no se cumple, y el ciclo termina. Se habrán dibujado 20 puntos.

Esta es otra forma de obtener 20 repeticiones, pero el resultado visual será un poco distinto. ¿Puedes encontrar cuál es la diferencia?

```java
// cambia el grosor de los puntos
strokeWeight(5);

// valor inicial del contador
int cuenta = 1;

// repite el bloque de código mientras el contador sea menor igual a 20
while( cuenta <= 20 ){ 
    point( cuenta*5, 200); // dibuja un punto de acuerdo al valor de cuenta

    // incrementa el contador por 1
    cuenta = cuenta + 1;
}
```

### Repeticiones contadas

Una ventaja de este formato es que podemos especificar cuántas veces queremos que se repita alguna acción, aunque no haya en juego alguna otra variable que indique el final como en el caso del acumulador.

Por ejemplo, el siguiente código dibuja 100 puntos en posiciones aleatorias dentro de todo el canvas:

```java
int cuenta = 1;

while ( cuenta <= 100 ){
    point( random(width), random(height) );
    cuenta = cuenta + 1;
}
```




# Ciclo `for`

Probablemente es el tipo de ciclo más utilizado en programas gráficos como los que hacemos en processing.

Como sea, es una construcción que se basa en un caso específico del ciclo `while`, así que cualquier operación que podamos realizar con `for` también se puede realizar con `while`.

El ciclo `for` suele utilizarse como una expresión en la que indicamos que ciertas operaciones han de repetirse un número específico de veces.

Desafortunadamente su sintaxis es muy extraña, y hay que practicarla mucho para dejar de tener fallas:

```java
for(int i=0; i<10; i++){
   // repite este bloque de código 10 veces
}
```

Entre los paréntesis del `for`, hay tres partes separadas entre ellas por punto y coma:

* Inicialización: preparación para empezar el ciclo (normalmente es declarar una variable entera (tipo `int`) con el valor de 0, a usarse como contador)
* Condición booleana "*while*": el ciclo se va a repetir *mientras* esta condición sea verdadera (`true`)
* Incremento: operación a realizar en cada iteración del ciclo (normalmente es incrementar la variable entera por 1)

Lo que normalmente hace el ciclo `for` es:

1. Declarar una variable para contar (`i`) que empieza en 0
2. Evaluar si la condición booleana es verdadera (por ejemplo, si la variable es menor al número escrito); si sí, continúa, si no, termina el ciclo
3. Ejecutar el bloque de código en su interior
4. Incrementar en 1 el valor de la variable para contar (`i`)
5. Regresar al paso 2

Durante la primera iteración del ciclo, la variable para contar (`i`) vale 0, la siguiente vez 1, después 2, y así sucesivamente.

En nuestro ejemplo, el último valor al que llega la variable para contar es 9, porque a partir de 10, la condición booleana empieza a tener un resultado `false`.

## Ejemplo: líneas horizontales

Podríamos dibujar 10 líneas horizontales, separadas a la misma distancia entre ellas, de la siguiente forma:

```java
line(0, 0, width, 0);
line(0, 5, width, 5);
line(0, 10, width, 10);
line(0, 15, width, 15);
line(0, 20, width, 20);
line(0, 25, width, 25);
line(0, 30, width, 30);
line(0, 35, width, 35);
line(0, 40, width, 40);
line(0, 45, width, 45);
```

Escribir 10 líneas así tal vez no es mucho problema, pero sí se vuelve inconveniente el hacer 100 o 1000.

Para traducir esa expresión a un ciclo `for`, lo que tenemos que hacer es identificar el patrón que hay: qué tienen en común las funciones, qué cambia, y cómo cambia lo que cambia.

En nuestro caso, podemos ver que:

* Las coordenadas X de todas las líneas son siempre 0 y `width`
* Los pares de coordenadas Y de cada línea son iguales entre ellas
* Cada línea tiene coordenadas Y distintas
* La diferencia entre las coordenadas Y de dos líneas seguidas, es 5

### Versión paramétrica

Ya con el patrón identificado, podemos pasar a abstraerlo dentro de un ciclo:

```java
for(int i=0; i<10; i++){ // repite 10 veces:
  line(0, i*5, width, i*5);
}
```

Nota que las coordenadas X se quedaron igual, constantes, y las coordenadas Y ahora están en función de la variable que cuenta (`i`).

cuando `i` es 0, la expresión se convierte en:

```java
line(0, 0, width, 0);
```

cuando `i` es 1, la expresión se convierte en:

```java
line(0, 5, width, 5);
```

cuando `i` es 2, la expresión se convierte en:

```java
line(0, 10, width, 10);
```

y así sucesivamente.

Una ventaja es que si ahora queremos dibujar 100 o 1000 líneas con esa plantilla, solo hemos de cambiar un número en nuestra expresión:

```java
for(int i=0; i<100; i++){ // repite 100 veces:
  line(0, i*5, width, i*5);
}
```

### Versión acumulador

Otra posibilidad es utilizar una variable `y` para ese parámetro de las líneas, e incrementarla en cada iteración del ciclo:

```java
float y = 0;

for( int i=0; i<10; i++){ // repite 10 veces:
    line( 0, y, width, y); // "plantilla" de la línea
    y = y + 5; // realiza el cambio en cada iteración
}
```

[[Variables: Contadores, Acumuladores, Banderas]](/notas/variables.html)

# Notas relacionadas

En este tutorial se ahonda en más posibilidades de dibujo con ciclos `for`:

[Tutorial: Patrones con líneas con ciclos](/tutoriales/c3-patrones-lineas-ciclos.html)

Y estas notas expanden en variaciones más complejas:

* [[Repeticiones alternadas: Ciclos, módulo y condicionales]](/notas/ciclos-modulo.html)
* [[Ciclos anidados: Repetición en dos dimensiones]](/notas/ciclos-anidados.html)
