Control de flujo, condiciones y bucles para artistas

Hora de divertirse

Siguiendo con el ejemplo anterior, imaginad por un momento que en lugar de dibujar 15 círculos empezamos dibujando 0, al cabo de unos instantes dibujamos 1, luego 2 y así hasta llegar a 30. Al llegar a 30 en lugar de sumar 1 restaríamos 1 hasta llegar de nuevo a 0 e invertir el proceso. ¿Os podéis imaginar lo que intento decir? ¡Vamos a hacerlo!

Empezaremos estableciendo una variable para limitar el número de círculos y la utilizaremos en el for:

var limite = 0;

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

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

Ahora vamos a incrementar en cada fotograma ese límite hasta un máximo de 30 y veamos qué ocurre:

// ...

if (limite < 30) {
  limite += 1
}

¡Nada mal! Como el lienzo se dibuja 30 veces por segundo pues se dibujan los 30 círculos en ese tiempo.

Si modificamos el frameRate para que sea 15 fotogramas por segundo debería tardar unos 2 segundos en rellenar el lienzo (30/15 = 2):

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

Ahora viene lo mejor, si utilizamos otra variable para manejar la cantidad que sumamos al límite podemos hacer que valga 1 o -1 dependiendo de si estamos sumando para llegar a 30 o restando para llegar a 0. Eso junto a unas condiciones debería permitirnos generar un efecto infinito que sume y reste círculos:

var cantidad = 1;  // sumamos 

// ...

if (limite > 30) {
  cantidad = -1
} else if (limite < 0) {
  cantidad = 1
}

limite += cantidad