Control de flujo, condiciones y bucles para artistas

Bucles while y for

Dentro del control de flujo encontramos unas estructuras muy interesantes llamadas iteraciones o bucles.

Como podéis suponer los bucles son unas estructuras que sirven para repetir la ejecución de un bloque de código.

Para entender este comportamiento vamos a desarrollarlo visualmente, partiendo de un ejercicio donde vamos a dividir en líneas verticales un lienzo cada 40 píxeles de ancho. Suponiendo que el lienzo tiene 400 píxeles de ancho al final tendríamos 10 porciones de 40 píxeles cada una. Podríamos hacerlo incrementando una variable para dibujar cada línea:

13 - Mientras/sketch.js

function setup() {
  createCanvas(400, 400)
}

function draw() {
  background(220)
  
  var x = 0
  
  x += 40
  line(x, 0, x, 400)
  
  x += 40
  line(x, 0, x, 400)
  
  x += 40
  line(x, 0, x, 400)
  
  x += 40
  line(x, 0, x, 400)
  
  x += 40
  line(x, 0, x, 400)
  
  x += 40
  line(x, 0, x, 400)
  
  x += 40
  line(x, 0, x, 400)
  
  x += 40
  line(x, 0, x, 400)
  
  x += 40
  line(x, 0, x, 400)
  
}

En seguida se ve que en este ejemplo hay mucho código repetido, siendo un escenario para automatizar el código repetido en un bucle.

¿Para qué vamos a escribir 9 veces el mismo código si podemos decirle a nuestra máquina que repita ese código 9 veces? Os enseñaré a hacerlo de dos formas distintas.

Bucle while (for)

La primera estructura de control iterativo es el while, conocido en español como mientras y sirve para ejecutar un código mientras se cumple una condición.

Para ejecutar correctamente un bucle mientras lo primero es identificar la condición que nos permite repetir el código y lo segundo aseurarnos de que esa condición se dejará de cumplir eventualmente. Este segundo punto es vital porque si se repita para siempre estaremos ante un bucle infinito y el proceso acabará colapsando.

En nuestro caso el ejemplo es muy sencillo pues sabemos exactamente cuando tenemos que dejar de dibujar líneas. Ese momento es cuando la x sea mayor que el ancho del lienzo:

Vamos a por ello:

13 - Mientras/sketch.js

function setup() {
  createCanvas(400, 400)
}

function draw() {
  background(220)
  
  var x = 0
  while (x < width) {
    x += 40
    line(x, 0, x, 400)
  }
  
}

Nuestro bucle while se leería como "Mientras X sea menor que el ancho del lienzo incrementamos la X en 40 píxeles y trazamos una línea vertical". Cuando la X sea mayor de 400 la condición no se cumplirá y el bucle dejará de ejecutarse (todo sucede en un único fotograma).

Bucle for (para)

La segunda forma de solucionar el problema es mediante el bucle for, conocido como para en español y funciona igual que el while pero cambiando su sintaxis.

Este bucle nos permite crear una variable, condicionarla y manipularla en cada iteración, fijaros como quedaría el while transformado en for:

function draw() {
  background(220)
  
  for (var x = 0; x < width; x += 40) {
    line(x, 0, x, 400)
  }
  
}