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.

1 Boceto

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

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:

2 Hallazgos

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

3 Pseudo-código

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

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.

4 Código

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

4.1 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:

// 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:

4.1.1 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:

// 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
}

4.1.2 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]

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

// 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:

y += 100; // incrementa 100 al acumulador

4.1.3 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:

// 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
}

4.2 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:

Esto se traduce a:

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

O un poco m√°s conciso:

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

4.3 Estructura general

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

// 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():

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:

¬°Listo! Ahora a practicar con otros patrones :)