1 Linealidad y no linealidad

En ocasiones, el uso de ciclos for se puede complementar con condicionales.

[Expresiones condicionales]

Al usar la variable i del ciclo for por sí sola, multiplicada o sumada, como parámetro numérico, podemos lograr comportamientos que llamaríamos lineales o proporcionales. Por ejemplo: la posición aumenta conforme i aumenta, el grosor cambia gradualmente conforme i aumenta, etc.

La posibilidad que nos da el uso de condicionales es tener cambios abruptos (no lineales) de acuerdo a la variable i.

Entre otras cosas, esto nos permite construir repeticiones alternadas. Por ejemplo: un patrón de líneas en el que alternan entre dos colores distintos, un patrón que alterna entre dos o más figuras, etc.

El operador módulo nos será de mucha ayuda aquí, pues “convierte” a nuestra variable i, que solo se incrementa, a un valor que alterna dentro de un rango determinado.

[Operador módulo]

2 Ejemplos de repeticiones alternadas

Después de revisar las nociones y comportamientos del operador módulo, podemos pasar a utilizarlo en nuestro ciclo.

Partimos de este ejemplo, que dibuja 10 líneas separadas por 20 pixeles:

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

2.1 Alternando entre dos opciones

Si queremos que las líneas alternen entre dos colores distintos, podemos aplicar “módulo 2” a la variable i, y usar un condicional para cambiar el color de acuerdo al resultado:

for(int i=0; i<10; i++){
    if( i%2 == 0){ 
      stroke(200); // gris claro
    }
    else{
      stroke(20); // gris oscuro
    }
    line(0, i*20, width, i*20);
}

Nota que la condición dentro del if la podríamos entender/leer también como “si i es un número par”: estamos coloreando de gris claro las líneas “pares” y de gris oscuro las “impares”.

Recordatorio: cualquier número “módulo 2” resultará en una de dos posibilidades: 0 o 1.

2.2 Alternando módulo 3

Podemos hacer lo mismo con otros valores de módulo. Un número “módulo 3” resultará en una de tres posibilidades: 0, 1 o 2.

Por ejemplo, para hacer que el patrón sea: una línea gris claro, dos líneas gris oscuro:

for(int i=0; i<10; i++){
    if( i%3 == 0){ 
      stroke(200); // gris claro
    }
    else{ // cuando el resultado es 1 o 2
      stroke(20); // gris oscuro
    }
    line(0, i*20, width, i*20);
}

o si queremos tener tres colores distintos:

for(int i=0; i<10; i++){
    if( i%3 == 0){ 
      stroke(200); // gris claro
    }
    else if( i%3 == 1){
      stroke(255); // blanco
    }
    else{ // cuando el resultado es 2
      stroke(20); // gris oscuro
    }
    line(0, i*20, width, i*20);
}

2.3 Y más…

¡Todo esto se puede utilizar con valores mayores de módulo!

También es importante considerar que no solo se puede cambiar el color de esta manera, sino que podríamos cambiar todo el dibujo para cada posible resultado de la operación.

Por ejemplo, podemos ir alternando entre cuadrados y círculos, podemos hacer un patrón de ladrillos (filas idénticas pero desfasadas), etc.