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:

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

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:

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

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