Control de flujo, condiciones y bucles para artistas

While vs for

Si bien es cierto que ambas estructuras hacen lo mismo, normalmente el bucle while se utiliza cuando no se conoce el número de veces que necesitamos repetir el bucle y el for cuando sí sabemos el número de veces que lo queremos repetir.

Esto es así porque la sintaxis que ofrece el for simplifica esta necesidad, de ahí que la variable que maneja suela denominarse contador.

Hagamos un último ejemplo muy divertido para ilustrar esto, partiendo de un círculo de 20x20 en medio del lienzo pero sin rellenar su fondo, únicamente con el borde:

function draw() {
  background(220)
  noFill()

  ellipse(200, 200, 20, 20)
}

A partir de esta base nuestro objetivo es dibujar múltiples círculos, cada uno a una distancia del centro que se vaya incrementando 20 píxeles. Es decir, si el primero tiene un diámetro de 20, el segundo lo tendrá de 40, el tercero de 60 y así... Esto lo repetiremos un número determinado de veces, por ejemplo 15.

Como sabemos de antemano cuántas veces queremos repetir el dibujo utilizaremos el for y su variable como contador para limitarlo, incrementándolo una vez en cada iteración. Fijaros:

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

function draw() {
  background(220)
  noFill()
  
  for (var x = 0; x < 15; x += 1) {
    ellipse(200, 200, 20, 20)  
  }
  
}

Con esto ya dibujamos 15 veces un círculo pero nos falta incrementar el diámero 20 píxeles en cada iteración. Para hacerlo podemos utilizar otra variable:

function draw() {
  background(220)
  noFill()
  
  var diametro = 20;
  
  for (var x = 0; x < 15; x += 1) {
    ellipse(200, 200, diametro, diametro)  
    diametro += 20
  }
  
}

¿Así queda más claro por qué la variable del for suele utilizarse como contador verdad?

Con esto la lección se puede dar por concluida pero se me ha ocurrido algo genial y muy divertido.