---
title: "Tutorial: Patrones con líneas con ciclos"
---

Este tutorial detalla el proceso para dibujar un patrón de líneas paralelas horizontales en Processing, utilizando varias opciones de expresiones repetitivas.

# Boceto

Primero que nada, vale la pena aterrizar qué es lo que queremos dibujar, y especificarlo a nivel numérico.

![](/img/c2-patrones-lineas/01boceto.png)

De manera arbitraria decidimos que el lienzo tendrá 600 pixeles de ancho (`width`) y también 600 de alto (`height`), y que las líneas estarán separadas por 100 pixeles en lo vertical.

Marcamos los puntos de inicio y final de cada línea, y encontramos sus coordenadas correspondientes:

![](/img/c2-patrones-lineas/04coordenadas.png)

# Hallazgos

Con este boceto anotado, podemos hallar y describir lo siguiente:

* Todas las líneas tienen las mismas coordenadas en `X`: la inicial es 0, y la final es 600
* Cada línea tiene la misma coordenada `Y` en su punto inicial y en su punto final. *Esto hace que sea una línea horizontal*
* Entre cada línea, las coordenadas `Y` varían por una diferencia de 100. 

# Pseudo-código

De acuerdo a los hallazgos, podemos describir a la *plantilla* de nuestras líneas de esta manera:

```java
line( 0, y, 600, y);
```

Así, dejamos claro que las cantidades en `X` son *constantes*, y las cantidades en `Y` son *variables*. La misma cantidad en `Y` se repite en el punto inicial y en el punto final.

Según lo que establecimos, en cada línea la variable `y` tiene una diferencia de 100 con la anterior.


# Código

Hay varias posibilidades para describir en código este comportamiento.

## Ciclo a partir de cantidad de repeticiones

La forma más común de utilizar los ciclos `for` es como una forma de indicar cuántas veces va a repetirse algún bloque de código.

Los siguientes son dos ejemplos de ciclo `for` que se repiten 5 veces:

```java
// Repite 5 veces, i vale: 0, 1, 2, 3, 4:
for( int i=0; i<5; i++ ){
	// 
}

// Repite 5 veces, i vale: 1, 2, 3, 4, 5:
for( int i=1; i<=5; i++){
	//
}
```

*Nota que la diferencia entre ambos es el valor inicial de `i`, y la comparación con el número 5 dentro de la condición*

Con esta estructura de ciclo, hay diversas maneras de "insertar" nuestra plantilla de línea:

### Versión escala

Podemos utilizar a la variable `i` como el factor de una multiplicación, para que en cada iteración, `y` tome el valor correspondiente.

En nuestro ejemplo, `y` sigue la secuencia *100, 200, 300, 400, 500*. Así que si `i` sigue la secuencia *1, 2, 3, 4, 5*, podemos multiplicarla por 100:

```java
// Variable y
float y;

// Repite 5 veces, i vale: 1, 2, 3, 4, 5:
for( int i=1; i<=5; i++){
	y = i * 100; // i como factor
	line( 0, y, 600, y ); // plantilla de línea
}
```

### Versión acumulador

Otra forma de conceptualizar lo que sucede, es establecer que en cada iteración de ciclo, la variable `y` aumenta 100 al valor que tenía previamente. Es decir, se comporta como acumulador.

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

Así que `y` ha de tener un valor inicial, y en cada iteración la incrementamos 100. En este caso no es crucial cuál es la secuencia que sigue `i`, puede ser *0, 1, 2, 3, 4* o *1, 2, 3, 4, 5*

```java
// Variable y, con valor inicial
float y = 100;

// Repite 5 veces, i vale: 1, 2, 3, 4, 5:
for( int i=1; i<=5; i++){
	line( 0, y, 600, y ); // plantilla de línea
	y = y + 100; // incrementa 100 al acumulador
}
```

Como nota, la expresión de incremento del acumulador también puede escribirse:

```java
y += 100; // incrementa 100 al acumulador
```

### Versión mapeo

Podemos utilizar la función `map( )`, que se encargará de realizar las cuentas de acuerdo a los valores de la variable `i`.

Solo hay que tener claro cuál es el rango de `i` (valor mínimo y máximo), y cuál es el rango que le asignaremos a `y`:

```java
// Variable y
float y;

// Repite 5 veces, i vale: 1, 2, 3, 4, 5:
for( int i=1; i<=5; i++){
	// mapea i, de un rango original entre 1 y 5
	// a un rango entre 100 y 500
	y = map( i, 1, 5, 100, 500);

	line( 0, y, 600, y ); // plantilla de línea
}
```

## Ciclo a partir de condición

El ciclo `for` es muy flexible y nos permite tener comportamientos como los descritos arriba sin necesidad de variables extra.

Podemos usar el ciclo para iterar directamente con la variable `y` de nuestra plantilla. Solo necesitamos identificar lo siguiente para nuestro caso:

* **Valor inicial** de `y`: 100
* **Condición "mientras"**: el ciclo se repetirá *mientras*: `y < 600` (o `y <= 500` )
* **Incremento** o cambio en cada iteración: `y` aumenta 100

Esto se traduce a:

```java
for( float y=100; y < 600; y = y + 100 ) {
	line( 0, y, 600, y ); // plantilla de línea
}
```

O un poco más conciso:

```java
for( float y=100; y < 600; y += 100 ) {
	line( 0, y, 600, y ); // plantilla de línea
}
```

## Estructura general

Al final, si no usaremos animación e interacción, nuestro código puede quedar de la siguiente forma:

```java
// crea un lienzo de 600x600
size( 600, 600 );

// Agrega aquí el ciclo que prefieras

// guarda imagen:
save("lineas-paralelas.png");
```

O, usando la estructura del ciclo de animación `draw()`:

```java
void setup(){
    // crea un lienzo de 600x600
    size( 600, 600 );
}

void draw(){
    // Agrega aquí el ciclo de dibujo que prefieras

}
```

De cualquier forma, la imagen resultante se ve de la siguiente forma:

![](/img/c2-patrones-lineas/05resultado.png)

¡Listo! Ahora a practicar con otros patrones :)
