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

Este tutorial detalla el proceso para dibujar un patrón de líneas paralelas horizontales en Processing.

# Boceto

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

Hacemos un boceto de nuestra imagen deseada:

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

Necesitamos un marco de referencia, así que establecemos las dimensiones en el eje `X` y en el eje `Y`. 

En este caso, de manera arbitraria decidimos que el lienzo tendrá 600 pixeles de ancho (`width`) y también 600 de alto (`height`):

![](/img/c2-patrones-lineas/02dimensiones.png)

Para dibujar nuestras líneas, necesitamos los puntos donde inician y terminan.

Marcamos los puntos en nuestro boceto...

![](/img/c2-patrones-lineas/03puntos.png)

...y encontramos sus coordenadas. Podemos notar que todos los puntos de la izquierda tienen una coordenada `X` de 0, y todos los de la derecha una coordenada `X` de 600.

Además, como las líneas están separadas por la misma distancia entre ellas, podemos determinar que en el eje `Y` su posición varía por 100 entre cada una:

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

## Conclusiones

Ya con este boceo anotado, podemos obtener las siguientes conclusiones:

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

# Código

Gracias al boceto, ya tenemos los cuatro parámetros que se necesitan para dibujar cada línea en Processing: `x` inicial, `y` inicial, `x` final y `y` final.

[[Dibujo con puntos y líneas]](/notas/lineas.html)

Solo hay que crear nuestro *canvas* con las dimensiones deseadas, y transcribir las coordenadas de los puntos.

[[Canvas y sistema de coordenadas]](/notas/canvas-y-coordenadas.html)

El código podría quedar de la siguiente forma. Nota cómo los parámetros de las funciones `line();` corresponden a los números del boceto:

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

// dibuja líneas:
line( 0, 100, 600, 100 );
line( 0, 200, 600, 200 );
line( 0, 300, 600, 300 );
line( 0, 400, 600, 400 );
line( 0, 500, 600, 500 );

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

El código tiene *comentarios* para indicar qué realiza cada sección, aquí hay más información al respecto:

[[Notas sobre sintaxis]](/notas/sintaxis.html)

La imagen resultante se ve de la siguiente forma:

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

¡Listo! Ahora a practicar con otros patrones :)
