4.3. Bucles for
Veamos cómo podríamos resolver el problema planteado en el dibujo anterior:
Fuente: elaboración propia.
// Un bucle for siempre tendrá
// la siguiente estructura:
/*
for (estado inicial; test; actualización) {
Aquí el código a ejecutar
}
*/
Siempre empezaremos utilizando la palabra clave for; a continuación y entre paréntesis, escribiremos las siguientes instrucciones, separadas por punto y coma:
- Estado inicial: aquí declaramos y asignamos un valor inicial a una variable que nos va a servir de contador para el número de repeticiones que queramos realizar. Por ejemplo, podemos definir el estado inicial con let i = 0;, aunque puede ser cualquier otro valor.
- Test: aquí definiremos la condición que se tiene que cumplir para que el bucle continúe ejecutándose o termine. Para ello, compararemos el valor de la variable que hemos declarado en el estado inicial con otro valor a través de los operadores de comparación.
- Actualización: cuando el bucle haya completado una iteración, actualizaremos el valor de nuestra variable de inicio.
Si la condición que hemos definido en test se cumple, pasaremos a ejecutar el código que tengamos en el cuerpo del bucle for, entre las llaves. Si no se cumple, el bucle termina.
Fuente: adaptación de L. McCarthy; A. P. C. Reas; B. Fry (2015). Getting Started with P5.Js: Making Interactive Graphics in JavaScript and Processing. Make Community, LLC.
Veamos un ejemplo práctico:
console.log("Comienza el bucle");
for (let i = 0; i < 5; i ++) {
console.log("La variable i vale: " + i);
}
console.log("Termina el bucle");
Como estado inicial estamos declarando la variable i y asignándole el valor 0. Podéis usar cualquier nombre para esta variable, pero es bastante común utilizar i cuando estamos iterando en un bucle (i de index o índice para llevar la cuenta).
A continuación, la condición que establecemos es i < 5, lo que traducido a lenguaje natural sería: mientras i sea menor que 5. Para definir la condición, utilizamos los denominados operadores de comparación. Los más usados son los siguientes:
Tabla 1. Principales operadores de comparación
| Operador | Descripción | Ejemplo |
| > | Mayor que | 5 > 2 Verdadero
5 > 5 Falso |
| < | Menor que | 0 < 5 Verdadero
7 < 5 Falso |
| >= | Mayor o igual que | 5 >= 5 Verdadero
0 >= 5 Falso |
| <= | Menor o igual que | 10 <= 10 Verdadero
11 <= 10 Falso |
| == | Igual que | 5 == 5 Verdadero
0 == 5 Falso |
| != | Distinto que | 0 != 5 Verdadero
3 != 3 Falso |
Por lo tanto, el código del cuerpo de nuestro bucle se ejecutará mientras nuestra variable i sea menor que 5.
Por último, debemos definir cuál va a ser el incremento de nuestra variable cada vez que se ejecute el bucle. En el ejemplo hemos establecido i ++, lo que –si recordamos del tema anterior– es un atajo equivalente a si escribiésemos i = i + 1, o lo que es lo mismo: la variable i aumentará de uno en uno cada vez que se ejecute el bucle. Si volvemos a nuestro ejemplo, al ejecutarlo veríamos en la consola lo siguiente:
Comienza el bucle La variable i vale: 0 La variable i vale: 1 La variable i vale: 2 La variable i vale: 3 La variable i vale: 4 Termina el bucle
La primera vez que se entra en el bucle la variable i vale 0, por lo que se cumple la condición i < 5 y se ejecuta el código dentro de las llaves (que imprime en la consola el valor de i). Una vez que ha terminado de ejecutar este código, pasa a la fase del incremento, suma 1 a la variable i y vuelve a hacer la comprobación de la condición; ahora i vale 1 (0 + 1) y se sigue cumpliendo la condición. Así hasta que llegamos a la quinta ejecución del bucle, en la que i vale 4. Cuando termina de imprimir en la consola el valor de i, pasa de nuevo a la fase de incremento, i pasa a valer 5 y la condición ya no se cumple porque 5 < 5 es falso. Al no cumplirse la condición, sale del bucle y ejecuta el código que tiene a continuación, que imprime en la consola que el bucle ya ha terminado.
Si volvemos al bucle que nos dibujaba los círculos de la figura 44, nos encontramos el siguiente código:
for(let i = 0; i <= width; i += 20) {
circle(i, height * 0.5, 15);
}
Aquí estamos iniciando el bucle también asignando a la variable i el valor de 0. Variamos la condición que se debe cumplir porque ahora para que se ejecute el código del cuerpo del bucle, el valor de i deberá ser menor o igual que el ancho de nuestro canvas y el incremento esta vez en lugar de ir aumentando de uno en uno aumenta de veinte en veinte.
En el cuerpo del bucle utilizamos la variable i para determinar la posición horizontal de los círculos, mientras que la posición vertical es fija, por lo que esta irá aumentando de veinte en veinte hasta llegar al final del canvas. El primer círculo se dibujará en las coordenadas (0, 200), el segundo en (20, 200), el tercero en (40, 200) y así sucesivamente hasta llegar a la coordenada (200, 200), en la que se dibujará el último círculo.
Para observar mejor el funcionamiento del bucle, podemos cambiar la condición que cumplir introduciendo una variable que nos permita cambiar hasta qué valor en horizontal queremos dibujar los círculos:
let limit = 100;
for(let i = 0; i <= limit; i += 20) {
circle(i, height * 0.5, 15);
}
Fuente: elaboración propia.
Dentro del cuerpo de los bucles, podemos insertar el código que queramos. Podríamos por ejemplo usar la función eye() del tema anterior para dibujar una sucesión de ojos:
Fuente: elaboración propia.