2. Reto 2. Autómatas

2.3. Segunda parte: estructuras de control

2.3.1. Repeticiones

Los ejemplos 4-5 y 4-6 del libro son bastante aclaratorios. Si hacemos varias cosas que se asemejan mucho, no hay que escribir la misma instrucción con pequeñas variaciones muchas veces, sino que podemos usar la instrucción for para repetirla sin tener que escribirla repetida.

En la instrucción for usamos una variable (que a menudo denominamos i) que solo usaremos dentro del bloque que conforma la instrucción for y que nos servirá para contar cuántas veces repetimos las instrucciones del bloque.

Como pone en el libro, la instrucción for tiene la siguiente sintaxis:

for (inicio; test; incremento) {
     bloque de instrucciones
}

• En el inicio declaramos la variable que usaremos para contar el número de repeticiones y le daremos un valor inicial. Puede ser 1, o cualquier otro.
• En el test comprobaremos si hemos hecho ya todas las repeticiones que hacía falta. Para hacerlo, compararemos el valor actual de la variable contadora con un valor.
• Finalmente, en el incremento indicaremos qué número tenemos que sumar a la variable cada vez que damos una vuelta.

Así, en el ejemplo 4-6 declaramos la variable i y la inicializamos en 20, repetiremos las instrucciones mientras el valor de la variable i sea menor de 400 y en cada vuelta sumaremos 60 al valor que tenemos en la variable i.

for (var i = 20; i < 400; i += 60) {

Al final del ejemplo 4-6 del libro, tenemos la lista de todos los operadores de comparación que podemos usar para ponerlos en el espacio de test. Si os fijáis, para comprobar si el contenido de una variable es igual a un determinado valor, usamos el símbolo ==. De este modo diferenciamos la asignación (guardar) de la comparación (igualdad).

Los ejemplos 4-7 a 4-13 nos permiten ver usos muy parecidos de la repetición; vale la pena probar todos los ejemplos e intentar entender lo que hacen.

Vamos a ver un ejemplo sencillo.

Vamos a dibujar esto:

¿Cómo?, con este código:

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

function draw() {
  background(220);
  ellipse(50,50,50,50);
  ellipse(100,100,50,50);
  ellipse(150,150,50,50);
  ellipse(200,200,50,50);
  ellipse(250,250,50,50);
  ellipse(300,300,50,50);
  ellipse(350,350,50,50);
}

Como hemos visto, si tenemos una instrucción repetida muchas veces quizás nos va bien usar un for. Vamos a ver qué diferencias hay entre los diferentes llamamientos a la función ellipse().

Si nos fijamos, solo varían las posiciones. La primera tiene como x 50 y como y 50. La segunda 100 y 100, la tercera 150 y 150, etc.

Podemos decir que la primera x es 50 * 1 (50), la segunda 50 * 2 (100), la tercera 50 * 3 (150) y así hasta llegar a la última, que es 50 * 7 (350). Si usáramos un for, podríamos tener un contador que a cada paso multiplicara la posición inicial de los círculos. Algo como esto:

ellipse(50*i,50*i,50,50);

Bien, lo podemos probar, aquí tenemos el código completo:

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

function draw() {
  background(220);
  for (var i = 1; i <= 7; i++){
	ellipse(50*i,50*i,50,50);
  }
}

Ahora los círculos se dibujan con el for que a cada paso incrementa en 1 el valor de la variable i. El código ha quedado mucho más reducido e incluso claro. Más adelante veremos ejemplos más complejos donde haremos más cosas, pero la idea básica siempre es la misma, repetir una instrucción con pequeños cambios «controlados» por el índice.