From 7f0d583e0863b38ed98189ea6d0130ede6e7e2ba Mon Sep 17 00:00:00 2001
From: Octavio Herrera Contreras <156601957+Octavi00@users.noreply.github.com>
Date: Mon, 16 Feb 2026 06:28:27 +0000
Subject: [PATCH 1/4] Code has been translate to Spanish, and all editable text
 code has been verified as functioning. Still requires a coulpe proof reads
 and code style checks.

---
 .../tutorials/es/repeating-with-loops.mdx     | 1415 +++++++++++++++++
 1 file changed, 1415 insertions(+)
 create mode 100644 src/content/tutorials/es/repeating-with-loops.mdx

diff --git a/src/content/tutorials/es/repeating-with-loops.mdx b/src/content/tutorials/es/repeating-with-loops.mdx
new file mode 100644
index 0000000000..3ccd2517ac
--- /dev/null
+++ b/src/content/tutorials/es/repeating-with-loops.mdx
@@ -0,0 +1,1415 @@
+---
+title: "Repitiendo con Bucles"
+description: "¡Creando una carrera con una oruga arrastrándose utilizando bucles y formaciones!"
+category: introduction
+categoryIndex: 5
+featuredImage: ../images/featured/loops.png
+featuredImageAlt: Tres orugas rositas con ojos saltonas esperando que la carrera empiece en la línea de empezar con el texto “Click to start”.
+relatedContent:
+  references:
+    - en/p5/for
+    - en/p5/noloop
+    - en/p5/random
+authors:
+  - Joanne Amarisa
+  - Layla Quiñones
+  - Greg Benedis-Grab
+---
+
+import EditableSketch from "../../../components/EditableSketch/index.astro";
+import Callout from "../../../components/Callout/index.astro";
+import AnnotatedLine from "../../../components/AnnotatedLine/index.astro";
+
+
+## Introducion
+
+¿Un día has querido elevar tus proyectos dibujando formas con solamente pocas líneas de código? Imagínate dibujando una fila de árboles, una pila de libros, los arcos de un arcoíris o lo de adentro de un panal. Para crear imágenes que son hechas con versiones de la misma figura, iremos adelante creando figuras individuales y aventuraremos adentro del mundo lindo de bucles y formaciones. ¡Empezamos a aprender cómo crear diseños con solamente pocas líneas de código!
+
+![An arch and hexagon shape are vertically aligned with the label that reads “single object.” Arrows point from these shapes to corresponding patterns that are vertically aligned under a label that reads “multiplied objects.”  The single arch points to five vertically stacked arches creating a rainbow shape. The hexagon points to many hexagon arranged in a honeycomb tessellation.](../images/introduction/loops-intro.png)
+
+Dibujar cada figura con una nueva línea de código sería muy fatigoso. En vez, podemos usar *bucles* que nos empoderan a repetir bloques de código las veces que ocupamos. En este tutorial, usaremos bucles y formaciones para crear [una oruga arrastrándose](https://editor.p5js.org/gbenedis@gmail.com/sketches/BrmtZ36ET).
+
+![Three pink caterpillars crawling to reach a green finish line at the right of the canvas.](../images/introduction/caterpillar-race-end.gif)
+
+Un grupo de orugas empezarán a la línea de empiezo, y el primer oruga que pasa la línea de fin ganará la carrera. ¡La oruga que ganará variará cada vez que corramos el dibujo!
+
+En este tutorial, tú aprenderás:
+
+- Dibujar y actualizar tareas y figuras repetitivas usando *bucles*
+- Usar funciones para actualizar variables y estados del programa y hacer cambios en el programa mientras el dibujo corre.
+- Usar [condicionales](/reference/p5/if) y `random()` para generar resultados diferentes
+- Correr y parar tus dibujos usando gatillos de mouse y [variables booleanas](/reference/p5/Boolean)
+- Guardar las posiciones del orugas en una formación
+
+### Lo que ocuparas
+
+- El [p5.js Web Editor](https://editor.p5js.org/)
+- Un comprensión del p5.js dibujando figuras básicas y texto usando coordenadas X y Y
+  - Podrás referir a nuestro tutorial anterior, [Empezando](/tutorials/get-started)
+- Un comprensión de variables y condicionales
+  - Podrás referir a nuestros tutoriales anteriores, [Variables y Cambio](/tutorials/variables-and-change/) y [Condicionales e Interactividad](/tutorials/conditionals-and-interactivity)
+- Un comprensión de funciones personalizadas y parámetros
+  - Podrás referir a nuestro tutorial anterior, [Organizando Código con Funciones](/tutorials/organizing-code-with-functions)
+
+
+## Paso 1 - Dibujando la pista de carreras
+
+- Abre un nuevo proyecto en el [p5.js Web Editor](https://editor.p5js.org/), dale un nombre como “Carrera de Orugas” y guárdalo.
+- En `setup(),` crea un canvas de 500x500 píxeles.
+- Declara dos nuevas variables globales arriba de `setup()` para definir las coordenadas x de tu línea de empiezo y la línea de fin. Llamaremos a las dos variables líneaInicio y líneaFin.
+  - Asigna valores al eje X, dependiendo de dónde quieres colocar tus líneas de comienzo y fin. En este ejemplo, vamos a poner la líneaInicio a 30 y la líneaFin a 360.
+- En la función `draw()`:
+  - Pon un color de fondo. Por ejemplo, lo pondremos marrón utilizando `background(121, 96, 76)`;
+  - Dibuja un rectángulo y pon su coordenada X como `líneaInicio`. Pon su altura a `height` para que se estire verticalmente a través del canvas.
+  - Dibuja otro rectángulo en `líneaFin` y repite el mismo paso.
+  - Rellena los dos rectángulos utilizando colores diferentes.
+- No olvides nombrar y guardar tu dibujo.
+
+Por ejemplo tu código podría verse así:
+
+<EditableSketch code={`
+// Declara las variables para dibujar la pista de carreras.
+let líneaInicio = 30;
+let líneaFin = 400;
+function setup() {
+  // Declara un canvas de 500x500 píxeles.
+  createCanvas(500, 500); 
+}
+
+function draw() {
+  // Rellena el fondo con un color
+  background(121, 96, 76);
+
+  // Dibuja las líneas de comienzo y fin.
+  noStroke();
+  fill(0);
+  rect(líneaInicio, 0, 5, height);
+  fill(0, 255, 0);
+  rect(líneaFin, 0, 20, height);
+}
+`} />
+
+## Paso 2 - Dibuja un segmento de oruga y hazlo moverse.
+
+A continuación, dibujaremos un segmento de una oruga en el canvas y lo haremos viajar desde la línea de empiezo hasta la línea de fin. Se parará al final de la carrera.
+
+- Declara una nueva variable global llamada 'circX' y asígnale el valor de 'líneaInicio'.
+  - Esto será la coordenada X del segmento de la oruga.
+- Declara una nueva variable global llamada 'circY' y asígnale el valor de 250 (o la mitad de la altura).
+  - Esto será la coordenada Y del segmento de la oruga.
+- En `draw()`:
+  - Dibuja el segmento de la oruga utilizando la función `circle()`. Incluye `circX`, `circY`, y 50 como argumentos para especificar la coordenada x, coordenada y, y el diámetro: `circle(circX, circY, 50);`
+  - También rellenaremos el círculo con un color blanco y una línea negra delgada.
+  - Bajo el comando del círculo, incrementa `circX` por 20 usando `circX += 20;`
+    - Esto significa que cada vez que la función `draw()` corre, la variable `circX` aumentará por 20 píxeles. Se dibujará un nuevo círculo a una coordenada X que está 20 píxeles a la derecha del círculo anterior creando la forma de una oruga.
+- Agrega la siguiente declaración condicional al final de `draw()`:
+
+  ```js
+  // Si el variable circX es mayor que líneaFin
+  if (circX > líneaFin) {
+    // Para el bucle de draw() usando noLoop()
+    noLoop();
+  }
+  ```
+
+La función `noLoop()` parará la función `draw()` de correr otra vez. La declaración `if`, para la función `draw()` usando `noLoop()` cuando la coordenada X del círculo pasa el valor de `líneaFin`. Visita la referencia de p5.js para más información sobre [`noLoop()`](/reference/p5/noLoop).
+
+En `setup()`, agrega: `frameRate(3);`
+
+- Un [frame rate](/reference/p5/frameRate) es el número de veces que `draw()` corre en un segundo. Ponerlo a un número bajo hará los movimientos más notables y dramáticos para esta animación.
+
+Tu codigo podría verse así:
+
+<EditableSketch code={`
+// Declara las variables para dibujar la pista de carreras.
+let líneaInicio = 30;
+let líneaFin = 400;
+
+// Declara las variables para dibujar el punto de comienzo de los círculos.
+let circX = líneaInicio;
+
+let circY = 250;
+
+function setup() {
+  createCanvas(500, 500); 
+
+  // Pon un frame rate lento.
+  frameRate(3);
+  // Recuerda que el frame rate es el número de veces que draw() corre en un segundo.
+}
+
+function draw() {
+  // Dibuja el fondo.
+  background(121, 96, 76);
+
+  // Dibuja las líneas de empiezo y fin.
+  noStroke();
+  fill(0);
+  rect(líneaInicio, 0, 5, height);
+  fill(0, 255, 0);
+  rect(líneaFin, 0, 20, height);
+
+  // Dibuja un círculo.
+  fill(255);
+  stroke(0);
+  circle(circX, circY, 50);
+
+  // Mueve la coordenada X a la derecha.
+  circX += 20;
+
+  // Si el variable X llega al línea de fin
+  if (circX > líneaFin) {
+    // Para el bucle de draw() usando noLoop()
+    noLoop();
+  }
+}
+`} />
+
+### [Declaraciones If](/reference/p5/if)
+
+Declaraciones if, como la que se aplicó arriba, se refieren a bloques de código que se ejecutan solamente cuando una condición dada es verdadera. Normalmente se escribe:
+
+```js
+if (<condición>) {
+  <código>
+}
+```
+
+El condicional es especificado dentro de los paréntesis de la declaración if. Los brackets '{ }' marcan el inicio y el fin del bloque de código. En el paso 2, la condición `circX > líneaFin`, para la función `draw()` de seguir corriendo otra vez cuando la coordenada X del círculo es mayor que el valor de `líneaFin` usando `noLoop()`.
+
+Visita la referencia de p5.js para [if](/reference/p5/if) para aprender más.
+
+
+## Paso 3 – Dibuja una oruga
+
+Repetiremos el segmento de la oruga del Paso 2 para hacer una fila de círculos que forman el cuerpo de la oruga. Usaremos un bucle *for* para dibujar múltiples círculos en una fila.
+
+
+### 3.1 - Declara las propiedades del cuerpo de la oruga
+
+Arriba de `setup()`:
+
+- Declara una nueva variable llamada `segmentos` y asigna un valor de 6.
+  - Esta variable define cuántos círculos forman el cuerpo de la oruga.
+- Declara una nueva variable llamada `espacio` y asígnale un valor de 20.
+  - Esta variable define el espacio en píxeles entre los segmentos del cuerpo de la oruga.
+- Declara una nueva variable llamada `tamañoSegmento` y asígnale un valor de 50.
+  - Esta variable define el diámetro de los círculos que forman el cuerpo de la oruga.
+
+
+### 3.2 - Dibuja el cuerpo de la oruga usando un bucle *for*
+
+En `draw()`:
+
+- Después del código que dibuja la línea de fin, declara una nueva variable local `x` para posicionar los segmentos del cuerpo: `let x = circX;`
+- Agrega un bucle *for* usando: `for (let i = 0; i < segmentos; i += 1) { }`
+  - Un bucle *for* repetirá el código que escribamos dentro de las llaves múltiples veces. 
+  - Mueve las líneas de código que dibujan el `circle()` dentro de las llaves del bucle *for*.
+- Después del bucle for, agrega: `circX += espacio` 
+  - Esto mueve el cuerpo de la oruga a la derecha cada vez que `draw()` corre.
+
+Tu codigo podria verse así:
+
+<EditableSketch code={`
+
+// Declara las variables para dibujar la pista de carreras.
+let líneaInicio = 30;
+let líneaFin = 400;
+
+// Declara las variables para la oruga.
+let circX = líneaInicio;
+let circY = 250;
+let espacio = 20;
+let segmentos = 6;
+let tamañoSegmento = 50;
+
+function setup() {
+  createCanvas(500, 500);
+
+// Pon un frame rate lento.
+  frameRate(3);
+}
+
+function draw() {
+  // Dibuja el fondo.
+  background(121, 96, 76);
+
+  // Dibuja las líneas de empiezo y fin.
+  noStroke();
+  fill(0);
+  rect(líneaInicio, 0, 5, height);
+  fill(0, 255, 0);
+  rect(líneaFin, 0, 20, height);
+
+  // Declara una variable local para posicionar los segmentos del cuerpo de la oruga.
+  let x = circX;
+
+  // Dibuja varios círculos para el cuerpo de la oruga usando un bucle de for.
+  for (let i = 0; i < segmentos; i += 1) {
+    // Dibuja un círculo.
+    fill(255);
+    stroke(0);
+    circle(x, circY, tamañoSegmento);
+    x += espacio;
+  }
+
+  // Mueva la oruga a la derecha.
+  circX += espacio;
+
+  // Para la animación cuando x llega a la línea de fin.
+  if (circX > líneaFin) {
+    noLoop();
+  }
+}
+
+`} />
+
+
+#### [Bucles For](/reference/p5/for)
+
+Un bucle for puede ejecutar una sección (o bloque) de código múltiples veces. Los bucles for pueden ser escritos así:
+
+```js
+for (let i = 0; i < numero; i += 1) { 
+  // Código que quieres ejecutar número de veces
+}
+```
+
+Dentro de los brackets `{}` de un bucle for, escribimos el código que queremos ejecutar repetidamente. Podemos especificar el número de veces que queremos que el código se repita estableciendo la condición del bucle.
+
+Un bucle for está definido por tres declaraciones dentro de sus paréntesis, cada una separada por punto y coma. Ellas son:
+
+<AnnotatedLine code={({ bottom }) => `for (${bottom('init', ' let i = 0; ')} ${bottom('cond', 'i < number;')} ${bottom('instr', '  i += 1  ')}) { }`}>
+  <Fragment slot="init">Inicialización</Fragment>
+  <Fragment slot="cond">Condición</Fragment>
+  <Fragment slot="instr">Instrucción</Fragment>
+</AnnotatedLine>
+
+
+- **Inicialización**: la variable de iteración `i` es inicializada con un número para empezar a contar. 
+
+  ```js
+  let i = 0;
+  ```
+
+- **Condición:** la condición que mantiene el bucle corriendo. Mientras esta condición sea verdadera, el bucle for continuará corriendo. Cuando esta condición es `false` (falso), el bucle for se detendrá.
+
+  ```js
+  i < numero;
+  ```
+
+- **Instrucción:** esto le dice al programa cómo cambiar el número de conteo cada vez que el bucle corre.
+
+  ```js
+  i += 1;
+  ```
+
+La primera expresión, `let i = 0`, inicializa o empieza el bucle for.
+
+- i es la variable que define el estado inicial del bucle for. También se conoce como la variable de *índice*. Comúnmente, el índice empieza en un valor de 0 y aumenta cada vez que el bucle corre. El nombre de esta variable puede ser cualquier cosa que te guste. Generalmente, se usan variables de una sola letra como `i`, `j` y `k`, pero siéntete libre de usar algo más descriptivo.
+
+La segunda expresión, `i < number`, es la condición para que el bucle siga corriendo. Se conoce como una expresión booleana, ya que esta expresión puede devolver `true` (cierto) o `false` (falso). Mientras esta expresión sea `true` (cierto), el bucle for continuará ejecutándose, y en este caso la variable de índice (`i`) seguirá aumentando.
+
+- El `número` puede ser cualquier valor numérico o variable que guarde un valor numérico. Para contar, a menudo se usan enteros.
+  - Ejemplo: `i < 5;` o `i < segmentos;`
+- En este caso, `numero` determina el número de veces que el bucle for se ejecutará porque el valor inicial `i` comienza en 0.
+- En la oruga de arriba, establecemos este valor en la variable `segmentos`, que especifica el número de círculos que forman el cuerpo de la oruga. Mientras el índice no haya alcanzado el número almacenado en `segmentos`, el bucle continuará dibujando círculos.
+  - Una vez que el número de círculos dibujados ya no es menor que segmentos, el programa se escapa del bucle for y continúa a la siguiente línea de código.
+
+La tercera expresión, `i += 1`, es cómo el índice cambiará al final de cada iteración del bucle.
+
+- Un [**iteración de bucle**](https://developer.mozilla.org/es/docs/Web/JavaScript/Guide/Loops_and_iteration) se refiere a una sola vez que un bucle corre. Por ejemplo, si un bucle for corre 3 veces, tiene 3 iteraciones.
+- En este ejemplo, el índice `i` se usa para aumentar la posición por 1 cada círculo en el cuerpo de la oruga. En la primera iteración, `i` es 0 y el primer círculo se dibuja en `x`. En la segunda iteración, `i` es 1 y el segundo círculo se dibuja en `x + espacio`. En la tercera iteración, `i` es 2 y el tercer círculo se dibuja en `x + espacio + espacio`, y así sucesivamente.
+
+En corto:
+
+1. Cuando un programa ejecuta un bucle for, primero declara la variable de índice del bucle en la primera expresión.
+2. Luego, el programa verifica la condición en la segunda expresión. Si la condición es `true` (cierto), el programa ejecuta el código dentro de las llaves `{}`. En el caso de que sea falso desde el principio, brinca al paso cuatro.
+3. Al final de cada iteración del bucle, el programa ejecuta la tercera expresión para aumentar el valor de la variable de índice.
+4. El bucle repite este proceso hasta que la condición en la segunda expresión es `false` (falso). Cuando la condición es `false` (falso), el programa sale del bucle for y continúa en las siguientes líneas de código en el sketch.
+
+Visite la [referencia de bucles for](/reference/p5/for) para aprender más.
+
+
+### 3.3 - Agregando más detalles a la oruga
+
+- Ajuste el `fill()` color para el cuerpo de tu oruga si le quieres cambiar el color. En este ejemplo, le daremos un color rosita: `fill(255, 0, 200);`
+- Dibuja los ojos de la oruga. La posición de los ojos es la misma que las coordenadas X y Y del último círculo que se dibuja para el cuerpo. Esto significa que viene DESPUÉS de que el bucle for ya ha dibujado todos los círculos, así que agregaremos los ojos después del bucle for, pero antes de `noLoop()`. Esto asegura que los ojos se dibujen encima del último círculo en el cuerpo de la oruga.
+  - Declare una variable global llamada `eyeSize` y asígnale el valor de 15.
+    - Esta variable define el tamaño de los ojos de la oruga.
+  - Dibuja dos círculos.
+    - Rellene los de negro y un toque de blanco greusito.
+  - Agregue el primer ojo y establezca sus coordenadas y tamaño: `círculo(x, circY-tamañoOjo, tamañoOjo);`
+    - Esto posiciona el ojo aderiba del último círculo puesto.
+  - Agregue el segundo ojo y establezca sus coordenadas y tamaño: `círculo(x - tamañoOjo, circY-tamañoOjo, tamañoOjo);`
+    - Aquí restamos el segundo ojo coordenado x de `tamañoOjo` para que entonces los dos ojos estén lados a lado sin tapar uno al otro.
+- Cuando completas tu oruga, organiza tu código dentro de una función personalizada y llámala `drawCaterpillar()`. ¡Siéntete libre de personalizar la oruga a tu gusto!
+  - Define la función `drawCaterpillar()` afuera de la función `draw()`.
+  - La función debería incluir tu bucle for de círculos para el cuerpo del orugo y los dos círculos de ojitos
+  - Recuerda invocar `drawCaterpillar()` dentro de la función `draw()`. Escribe `drawCaterpillar();` dentro de `draw()` antes de la declaración if que acabe el bucle.
+
+
+Esto es como tu código podría verse ahora:
+
+<EditableSketch code={`
+// Declara las variables para dibujar la pista de carreras.
+let líneaInicio = 30;
+let líneaFin = 400;
+
+//declara las variables para la oruga
+let circX = líneaInicio;
+let circY = 250;
+let espacio = 20;
+let segmentos = 6;
+let tamañoSegmento = 50;
+let tamañoOjo = 15;
+
+function setup() {
+  createCanvas(500, 500);
+  frameRate(3);
+}
+
+function draw() {
+  // Dibuja el fondo.
+  background(121, 96, 76);
+
+  // Dibuja las líneas de empiezo y fin.
+  noStroke();
+  fill(0);
+  rect(líneaInicio, 0, 5, height);
+  fill(0, 255, 0);
+  rect(líneaFin, 0, 20, height);
+  drawCaterpillar();
+
+  circX += espacio;
+
+  // Se termina el bucle cuando x llega a la línea de fin.
+  if (circX > líneaFin) {
+    noLoop();
+  }
+}
+
+function drawCaterpillar() {
+  // Creamos un bucle de círculos para formar el cuerpo de la oruga.
+  let x = circX;
+
+  for (let i = 0; i < segmentos; i += 1) {
+    fill(255, 0, 200);
+    stroke(0);
+    strokeWeight(1);
+    circle(x, circY, tamañoSegmento);
+
+    x += espacio;
+  }
+ 
+  // Dibuja los ojos de la oruga. 
+  fill(0);
+  stroke(255);
+  strokeWeight(3);
+  circle(x, circY - tamañoOjo, tamañoOjo);
+  circle(x - tamañoOjo, circY - tamañoOjo, tamañoOjo);
+}
+`} />
+
+<Callout>
+Juega con diferentes tamaños para el cuerpo del orugo y sus ojos ajustando las variables 'bodySize' y 'tamañoOjo'.
+</Callout>
+
+
+## Paso 4 - Generaliza la función `drawCaterpillar()`
+
+Cuando el dibujo corre por primera vez, queremos que cada oruga esté en la línea de empiezo. Esto significa que necesitaremos agregar parámetros a nuestra función para que podamos modificarlos y especificar dónde se dibujan las orugas.
+
+- Ve a la función `drawCaterpillar()` y haz los siguientes cambios:
+  - Agrega `x` como el primer argumento en la: `function drawCaterpillar(x) { ...}`
+    - Nota que ya habíamos declarado `x` como una variable local en la función `drawCaterpillar()`. Podemos eliminar esa declaración y usar el parámetro `x` en su lugar.
+  - Agrega `y` como el segundo argumento en la función: `drawCaterpillar(x, y) { ... }`
+    - Substituye `y` por `circY` en el cuerpo de la función.
+
+Podrás aprender más sobre funciones personalizadas, argumentos, y parámetros en nuestro tutorial anterior, [Organizando Código con Funciones](/tutorials/organizing-code-with-functions), y la referencia de p5.js para [funciones](/reference/p5/function).
+
+Tu función personalizada debería verse así:
+
+```js
+function drawCaterpillar(x,y) {
+  // Creamos un bucle de círculos para formar el cuerpo de la oruga.
+  for (let i = 0; i < segmentos; i += 1) {
+    fill(255, 0, 200);
+    stroke(0);
+    strokeWeight(1);
+    circulo(x, y, 50);
+
+    x += espacio;
+  }
+ 
+  // Dibuja los ojos de la oruga usando la función circle(x, y) para dibujar un círculo
+  fill(0);
+  stroke(255);
+  strokeWeight(3);
+  circle(x, y - tamañoOjo, tamañoOjo);
+  circle(x - tamañoOjo, y - tamañoOjo, tamañoOjo);
+}
+```
+
+- Dentro de `draw()` ejecuta `drawCaterpillar()` tres veces para crear tres orugas.
+
+Tu función `draw()` debería verse así:
+
+```js
+function draw() {
+  // Dibuja el fondo
+  background(121, 96, 76);
+  // Dibuja las líneas de comienzo y fin.
+  noStroke();
+  fill(0);
+  rect(li, 0, 5, height);
+  fill(0, 255, 0);
+  rect(líneaFin, 0, 20, height);
+
+  // Dibuja tres orugas
+  drawCaterpillar(circX, circY-150);
+  drawCaterpillar(circX, circY);
+  drawCaterpillar(circX, circY+150);
+
+  circX += espacio;
+
+  // Escape del bucle de draw() cuando x llega a la línea de fin.
+  if (circX > finishLine) {
+    noLoop();
+  }
+}
+```
+
+
+## Paso 5 - Crea una función `drawCaterpillars()`
+
+Ya tenemos tres orugas viajando a través de la pantalla al mismo tiempo. Podemos usar un bucle para dibujar las tres orugas en vez de tres llamadas individuales a `drawCaterpillar()`.
+
+- Declara una nueva variable global arriba de `setup()` en tu sketch para el número de orugas que quieres en la carrera: `let numCaterpillars = 3;`
+- Crea una nueva función personalizada de afuera de `draw()` y nómbrala `drawCaterpillars()`
+  - Haz un nuevo bucle for dentro de la función `drawCaterpillars()`.
+    - Inicializa y empieza la variable del bucle en 0 en la primera expresión del bucle.
+    - Establece la condición a `i < numCaterpillars` en la segunda expresión del bucle.
+    - Incrementa la variable del bucle en la tercera expresión.
+  - Llama a `drawCaterpillar(circX, circY);` dentro de las llaves del bucle for.
+
+- Dentro de `draw()`, borra las tres llamadas a `drawCaterpillar()` y reemplázalas con una sola llamada a `drawCaterpillars();`
+
+Tu función `draw()` y `drawCaterpillars()` deberían verse así:
+
+```js
+let numOrugas = 3;
+
+function draw() {
+  // Dibuja el fondo
+  background(121, 96, 76);
+  // Dibuja la línea de comienzo y fin.
+  noStroke();
+  fill(0);
+  rect(líneaInicio, 0, 5, height);
+  fill(0, 255, 0);
+  rect(líneaFin, 0, 20, height);
+
+  circX += espacio;
+
+  // Dibuja las orugas
+  drawCaterpillars();
+
+  // Escapa del bucle de draw() cuando x llega a la línea de fin.
+  if (circX > líneaFin) {
+    noLoop();
+  }
+}
+
+function drawCaterpillars() {
+  for (let i = 0; i < numOrugas; i += 1) {
+    drawCaterpillar(circX, circY);
+  }
+}
+```
+
+El dibujo debería correr pero solo verás una oruga esta vez. Esto es porque las tres orugas se dibujan una encima de la otra. Para arreglar esto en el siguiente paso ajustaremos la coordenada Y de cada oruga:
+
+<EditableSketch code={`
+let numOrugas = 3;
+
+// Establezca las variables para dibujar la pista de carreras.
+let líneaInicio = 30;
+let líneaFin = 400;
+
+// Establezca las variables para la oruga.
+let circX = líneaInicio;
+let circY = 250;
+let espacio = 20;
+let segmentos = 6;
+let tamañoSegmento = 50;
+let tamañoOjo = 15;
+
+function setup() {
+  createCanvas(500, 500);
+  frameRate(3);
+}
+
+function draw() {
+  // Dibuja el fondo
+  background(121, 96, 76);
+  // Dibuja las líneas de comienzo y fin.
+  noStroke();
+  fill(0);
+  rect(líneaInicio, 0, 5, height);
+  fill(0, 255, 0);
+  rect(líneaFin, 0, 20, height);
+
+  circX += espacio;
+
+  // Dibuja las orugas
+  drawCaterpillars();
+  
+  // Escapa del bucle de draw() cuando x llega a la línea de fin.
+  if (circX > líneaFin) {
+    noLoop();
+  }
+}
+
+function drawCaterpillars() {
+  for (let i = 0; i < numOrugas; i += 1) {
+    drawCaterpillar(circX, circY);
+  }
+}
+
+function drawCaterpillar(x, y) {
+  // Crea un bucle de círculos para formar el cuerpo.
+  for (let i = 0; i < segmentos; i += 1) {
+    fill(255, 0, 200);
+    stroke(0);
+    strokeWeight(1);
+    circle(x, y, 50);
+
+    x += espacio;
+  }
+ 
+  // Dibuja los ojos de la oruga.
+  fill(0);
+  stroke(255);
+  strokeWeight(3);
+  circle(x, y - tamañoOjo, tamañoOjo);
+  circle(x - tamañoOjo, y - tamañoOjo, tamañoOjo);
+}
+`} />
+
+
+## Paso 6 - Posiciona las orugas para la carrera
+
+**¡Repaso!** De los pasos 3 y 4, tenemos dos funciones personalizadas en nuestro sketch.
+
+- 'drawCaterpillar()' dibuja una oruga usando los parámetros X y Y.
+- 'drawCaterpillars()' llama a la función 'drawCaterpillar()' y la coloca dentro de un bucle for para que podamos dibujar varias orugas.
+
+Ahora, cada oruga está en las mismas coordenadas X y Y. Ajustaremos el código en el bucle for para separar las orugas con la coordenada Y.
+
+- Ve dentro de la función `drawCaterpillar()`.
+ - Dentro del bucle for, agrega una nueva línea de código: `let relleno = height / numCaterpillars;`
+   - Esto declara una nueva variable llamada `relleno` que determina el espacio vertical entre cada oruga.
+   - Le asignamos el valor de la `height` del canvas, dividido por el número de orugas que hay en el sketch. Esto divide el canvas verticalmente en filas (una para cada oruga). La altura de cada fila es el valor de `relleno`.
+  - Luego, inicializa la variable `y` asignándole este valor: `let y = (i + 0.5) * relleno`, donde `y` determina la coordenada y de cada oruga.
+    - Usando la variable `i`, cada iteración del bucle for posiciona una oruga en su propia fila 
+    - Agregar 0.5 a `i` centra la oruga en esa fila.
+  - Similar al Paso 5, agrega `y` como un argumento en los paréntesis de la llamada a `drawCaterpillar()`. 
+    - La línea de código ahora debería ser: `drawCaterpillar(circX, y);`
+
+En corto, hemos asignado `x` y `y` como parámetros para ser usados dentro de la función `drawCaterpillar()`. Usamos `circX` y `y` como argumentos al llamar a esta función en `drawCaterpillars()`.
+
+Podrás aprender más sobre funciones personalizadas, argumentos, y parámetros en nuestro tutorial anterior, [Organizando Código con Funciones](/tutorials/organizing-code-with-functions), y la referencia de p5.js para [funciones](/reference/p5/function).
+
+Tu función `drawCaterpillars()` debería verse así hasta ahora:
+
+```js
+function drawCaterpillars() {
+  for (let i = 0; i < numOrugas; i += 1) {
+    let relleno = height / numOrugas;
+    let y = (i + 0.5) * relleno;
+
+    drawCaterpillar(circX, y, 6);
+  }
+}
+```
+
+
+### Dibujando con variables de índice de bucles for
+
+La variable de índice de un bucle for (`i`) puede aumentar o disminuir incrementalmente con cada iteración del bucle. En este tutorial, la variable `i` comienza en 0 y aumenta por 1 cada vez que el *bucle for* se ejecuta.
+
+- El primer vez que este bucle for corre, `i` es 0.
+- La segunda vez que el bucle corre, `i` es 1.
+- La tercera vez que corre, `i` es 2, y así sucesivamente.
+
+Podemos usar la variable de índice en nuestros dibujos para sumar, restar, multiplicar y dividir números para que su resultado sea diferente para cada iteración del bucle for.
+
+En este ejemplo, usamos `i` para calcular un espacio consistente entre cada oruga (ver tabla abajo):
+
+- During the first iteration `i` is 0 and `y` is `0.5 * padding`. The first caterpillar is drawn with that y value.
+- During the second iteration, `i` is 1 and `y` becomes `1.5 * padding`. The second caterpillar is drawn at the new y value.
+- During the third iteration, `i` is 2 and `y` becomes `2.5 * padding`. The third caterpillar is drawn at the new y value.
+
+- Durante la primera iteración `i` es 0 y `y` es `0.5 * relleno`. La primera oruga se dibuja con ese valor de y.
+- Durante la segunda iteración, `i` es 1 y `y` se vuelve `1.5 * relleno`. La segunda oruga se dibuja con ese nuevo valor de y.
+- Durante la tercera iteración, `i` es 2 y `y` se vuelve `2.5 * relleno`. La tercera oruga se dibuja con ese nuevo valor de y.
+
+<table>
+
+<tr>
+
+<th>
+
+Orugas (iteración del bucle)
+
+</th>
+
+<th>
+
+`x`
+
+</th>
+
+<th>
+
+`y`
+
+</th>
+
+</tr>
+
+<tr>
+
+<td>
+
+Primera
+
+</td>
+
+<td>
+
+0
+
+</td>
+
+<td>
+
+`0.5 * relleno`
+
+</td>
+
+</tr>
+
+<tr>
+
+<td>
+
+Segunda
+
+</td>
+
+<td>
+
+1
+
+</td>
+
+<td>
+
+`1.5 * relleno`
+
+</td>
+
+</tr>
+
+<tr>
+
+<td>
+
+Tercera
+
+</td>
+
+<td>
+
+2
+
+</td>
+
+<td>
+
+`2.5 * relleno`
+
+</td>
+
+</tr>
+
+</table>
+
+`drawCaterpillar()` y `drawCaterpillars()` ahora deberían verse así:
+
+```js
+// ... declaraciones de variables, setup(), y draw()
+
+function drawCaterpillars() {
+  for (let i = 0; i < numOrugas; i += 1) {
+    // El espacio entre cada oruga.
+    let relleno = height / numOrugas;
+    let y = (i + 0.5) * relleno;
+
+    // Dibuja la oruga
+    drawCaterpillar(circX, y);
+  }
+}
+
+function drawCaterpillar(x, y) {
+  // Crea un bucle de círculos para formar el cuerpo.
+  for (let i = 0; i < segmentos; i += 1) {
+    fill(255, 0, 200);
+    stroke(0);
+    strokeWeight(1);
+    circle(x, y, 50);
+
+    x += espacio;
+  }
+
+  // Dibuja los ojos de la oruga.
+  fill(0);
+  stroke(255);
+  strokeWeight(3);
+  circle(x, y - tamañoOjo, tamañoOjo);
+  circle(x - tamañoOjo, y - tamañoOjo, tamañoOjo);
+}
+```
+
+Esto es como debería verse todo junto:
+
+<EditableSketch code={`
+let numOrugas = 3;
+
+// Declara las variables para dibujar la pista de carreras.
+let líneaInicio = 30;
+let líneaFin = 400;
+
+// Declara las variables para la oruga.
+let circX = líneaInicio;
+let circY = 250;
+let espacio = 20;
+let segmentos = 6;
+let tamañoSegmento = 50;
+let tamañoOjo = 15;
+
+function setup() {
+  createCanvas(500, 500);
+  frameRate(3);
+}
+
+function draw() {
+  // Dibuja el fondo
+  background(121, 96, 76);
+  // Dibuja las líneas de comienzo y fin.
+  noStroke();
+  fill(0);
+  rect(líneaInicio, 0, 5, height);
+  fill(0, 255, 0);
+  rect(líneaFin, 0, 20, height);
+
+  circX += espacio;
+
+  // Dibuja las orugas en el canvas
+  drawCaterpillars();
+  
+  // Escape del bucle de draw() cuando x llega a la línea de fin.
+  if (circX > líneaFin) {
+    noLoop();
+  }
+}
+
+function drawCaterpillars() {
+  for (let i = 0; i < numOrugas; i += 1) {
+    // El espacio entre cada oruga.
+    let relleno = height / numOrugas;
+    let y = (i + 0.5) * relleno;
+
+    // Dibuja la oruga
+    drawCaterpillar(circX, y);
+  }
+}
+
+function drawCaterpillar(x, y) {
+  // Crea un bucle de círculos para formar el cuerpo.
+  for (let i = 0; i < segmentos; i += 1) {
+    fill(255, 0, 200);
+    stroke(0);
+    strokeWeight(1);
+    circle(x, y, 50);
+
+    x += espacio;
+  }
+
+  // Dibuja los ojos de la oruga.
+  fill(0);
+  stroke(255);
+  strokeWeight(3);
+  circle(x, y - tamañoOjo, tamañoOjo);
+  circle(x - tamañoOjo, y - tamañoOjo, tamañoOjo);
+}
+`} />
+
+<Callout>
+Cambia el valor de la variable global `numOrugas` y observa cómo el bucle for en `drawCaterpillars()` las separa verticalmente en el canvas.
+</Callout>
+
+
+## Paso 7 - Crea un array para guardar la posición de cada oruga
+
+Ahora que hemos posicionado las orugas verticalmente en el canvas, queremos darle a cada una una coordenada x única. Podemos hacer esto usando un array. El array contendrá las coordenadas x para cada oruga. Entonces podemos mover las orugas aleatoriamente a través de la pantalla, haciendo posible una carrera.
+
+
+### 7.1 - Crea un [array](https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/Array)
+
+-Declare una nueva variable global llamada `collasDeOrugas` justo después de `numOrugas`: `let collasDeOrugas = [];`
+  - Este array guardará la posición x del segmento más a la izquierda para cada oruga.
+
+
+Ocuparás aprender más sobre arrays en el siguiente tutorial, [Jardín de estructuras de datos](/tutorials/data-structure-garden). Visita la referencia de MDN para [arrays](https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/Array) para aprender más.
+
+- En `setup()`, agrega el coordenada x para cada oruga, colocándolas todas en la línea de empiezo.
+  - Haz un bucle for que se repita una vez por cada oruga: `for (let i=0; i < numOrugas; i++) { }`
+  - Dentro de las llaves, agrega la línea `collasDeOrugas.push(líneaInicio);`
+    - Esto agregará el valor `líneaInicio` al array `collasDeOrugas` una vez por cada oruga que necesita ser dibujada en el sketch.
+    - El método `.push()` se usa para agregar un nuevo valor al final de un array.
+
+Ahora `setup()` debería verse así:
+
+```js
+function setup() {
+  createCanvas(500, 500);
+
+  // Establece un frame rate lento.
+  frameRate(6);
+
+  for (let i=0; i < numOrguas; i++) {
+    //Agrega la posición del último segmento de cada oruga en un array
+    collasDeOrugas.push(líneaInicio);
+  }
+}
+```
+
+
+- En la función `drawCaterpillar()`, cambia la línea `drawCaterpillar(circX, y)`:
+  - En vez de usar `circX`, ahora usaremos los valores en el array `collasDeOrugas`.
+  - Ya que el índice `i` en el bucle for representa la posición correcta del índice en el array `collasDeOrugas`, podemos cambiar `circX` a `collasDeOrugas[i]`: `drawCaterpillar(collasDeOrugas[i], y);`
+- Remueve `circX` de la función
+  - Nota: `circX` todavía se usa al final de `draw()`. Adelante y remuévelo y lo agregaremos de nuevo más tarde.
+
+Tu función `drawCaterpillars()` debería verse así:
+
+```js
+function drawCaterpillars() {
+  for (let i = 0; i < numOrugas; i += 1) {  
+    // El espacio entre cada oruga.
+    let relleno = height / numOrugas;
+    let y = (i + 0.5) * relleno;
+
+    // Dibuja las orugas usando un array
+    drawCaterpillar(collasDeOrugas[i], y);
+  }
+}
+```
+
+
+### 7.2 - Mueve las orugas aleatoriamente
+
+- Crea una nueva función personalizada afuera de `draw()` y nómbrala `moveCaterpillars()`
+- Define un nuevo bucle for que itere el mismo número de veces que hay orugas: `for (let i = 0; i < numOrugas; i += 1) { }`
+  - Esto es lo mismo que el bucle for usado en la función `drawCaterpillars()` ya que te permite referirte individualmente a cada oruga.
+- Dentro del bucle for, usa la función random para asignar un valor aleatorio a `move`:
+
+  ```js
+  let move = random(5,30);
+  ```
+
+- Cuando la carrera empieza, esto moverá aleatoriamente cada oruga entre 5 y 30 píxeles a la derecha cada vez que `draw()` se ejecute.
+- Puedes modificar los valores en `random()` dependiendo del rango de movimiento que quieras para tus orugas. Visita la [referencia de p5.js para `random()`](/reference/p5/random) para aprender más.
+
+Tu function podría verse así:
+
+```js
+function moveCaterpillars() {
+  for (let i = 0; i < numOrugas; i += 1) {
+    // Asigna un valor aleatorio a move
+    let move = random(5, 30);
+    collasDeOrugas[i] += move;
+  }
+}
+```
+
+En corto, el orden de eventos en la función de arriba es:
+
+- Por cada iteración del bucle, asignamos `move` a un número aleatorio entre 5 y 30.
+  - Esto indica que cada oruga se asigna un valor aleatorio a `move`.
+- Después podemos actualizar el valor en la posición `i`<sup>th</sup> del array `collasDeOrugas`, que es lo que la función `drawCaterpillar()` usa para mostrar la oruga.
+
+
+
+### 7.3 - Mueve las orugas
+
+- Al fin llamaremos la función `moveCaterpillars()` en `draw()` antes de la llamada a `drawCaterpillars()`.
+
+
+Tu codigo debería verse así:
+
+<EditableSketch code={`
+// Declara variables para dibujar la pista de carreras.
+let líneaInicio = 30;
+let líneaFin = 400;
+
+// Declara las variables para la oruga.
+let espacio = 20;
+let tamañoSegmento = 30;
+let tamañnoOjo = 15;
+
+let segmentos = 6;
+
+// Declara las variables para la carrera.
+let numOrugas = 3;
+let collasDeOrugas = [];
+
+function setup() {
+  createCanvas(500, 500);
+  frameRate(3);
+
+  for (let i=0; i < numOrugas; i++) {
+    collasDeOrugas.push(líneaInicio)
+  }
+}
+
+function draw() {
+  // Dibuja el fondo.
+  background(121, 96, 76);
+
+  // Dibuja las líneas de comienzo y fin.
+  noStroke();
+  fill(0);
+  rect(líneaInicio, 0, 5, height);
+  fill(0, 255, 0);
+  rect(líneaFin, 0, 20, height);
+  
+  // Haz cambios a las posiciones de las orugas.
+  moveCaterpillars();
+
+  // Dibuja las orugas en sus nuevas posiciones.
+  drawCaterpillars();
+}
+
+function moveCaterpillars() {
+  for (let i = 0; i < numOrugas; i += 1) {
+    // Dala a cada oruga una velocidad aleatoria.
+    let move = random(5, 30);
+
+    // Realiza cambios a las coordenadas x de cada oruga usando el array collasDeOrugas.
+    collasDeOrugas[i] += move;
+  }
+}
+
+function drawCaterpillars() {
+  for (let i = 0; i < numOrugas; i += 1) {
+    // Dale a cada oruga su propia coordenada x.
+
+    let relleno = height / numOrugas;
+    let y = (i + 0.5) * relleno;
+    drawCaterpillar(collasDeOrugas[i], y);
+  }
+}
+
+function drawCaterpillar(x, y) {
+  // Crea un bucle de círculos para formar el cuerpo.
+  for (let i = 0; i < segmentos; i += 1) {
+    fill(255, 0, 200);
+    stroke(0);
+    strokeWeight(1);
+    circle(x, y, 50);
+    x += espacio; // Change x for next circle.
+  }
+
+  // Draw the caterpillar's eyes.
+  fill(0);
+  stroke(255);
+  strokeWeight(3);
+  circle(x, y - tamañnoOjo, tamañnoOjo);
+  circle(x - tamañnoOjo, y - tamañnoOjo, tamañnoOjo);
+}
+`} />
+
+
+## Paso 8 - Anadiendo un motion gateo al cuerpo de la oruga
+
+Para replicar un movimiento de 'gateo', randomizaremos el número de segmentos de cada oruga usando la función `random()`. Como recordatorio, la variable global `segmentos` determina el número de segmentos que se muestran para las orugas. Ahora cambiaremos eso para que sea un parámetro en la función `drawCaterpillar()`.
+
+- Vaya a la función `drawCaterpillar()`.
+  - Agrega un nuevo parámetro llamado `segmentos` en la definición de la función: `function drawCaterpillar(x, y, segmentos) { ... }`
+  - Remueve la variable global `segmentos` en la parte superior del sketch.
+- Vaya a la función `drawCaterpillars()`.
+  - Agrega `gateo` como el tercer argumento en los paréntesis donde se llama a la función `drawCaterpillar()`: `drawCaterpillar(x, y, gateo);`
+  - Encima de esta línea, asigna un nuevo valor aleatorio a la variable `gateo` escribiendo: `let gateo = round(random(3, 6));`
+    - Esto significa que mientras el sketch está corriendo, el programa dibujará continuamente las orugas con longitudes aleatorias (entre 3 a 6 círculos) mientras se mueven de la línea de empiezo a la línea de fin.
+    - Puedes modificar los valores en `random()` dependiendo de qué tan largas y cortas quieres que sean las orugas.
+    - El valor aleatorio de la variable `gateo` llenará el parámetro `segmentos` en la definición de la función `drawCaterpillar()`, que determina cuántos círculos se dibujan.
+
+Tus funciones deberían verse así:
+
+```js
+// ... declarationes de variables, setup(), draw(), moveCaterpillars()
+function drawCaterpillars() {
+  for (let i = 0; i < numOrugas; i += 1) {
+    // Realiza la coordenada x de cada oruga usando el array collasDeOrugas.
+    let relleno = height / collasDeOrugas;
+    let y = (i + 0.5) * relleno;
+
+    // Realiza el largo del oruga usando un valor aleatorio.
+    let gateo = round(random(3, 6));
+
+    // Dibuja la oruga
+    drawCaterpillar(x, y, gateo);
+  }
+}
+
+function drawCaterpillar(x, y, segments) {
+  // Crea un bucle de círculos para formar el cuerpo.
+  for (let i = 0; i < segmentos; i += 1) {
+    fill(255, 0, 200);
+    stroke(0);
+    strokeWeight(1);
+    circle(x, y, 50);
+    x += espacio;
+  }
+
+  // Dibuja los ojos de la oruga.
+  fill(0);
+  stroke(255);
+  strokeWeight(3);
+  circle(x, y - tamañoOjo, tamañoOjo);
+  circle(x - tamañoOjo, y - tamañoOjo, tamañoOjo);
+}
+```
+
+## Paso 9 - Inicia la carrera con un trigger de mouse
+
+- Declare una nueva variable global booleana llamada `enCarrera` y asígnale el valor `false` (falso): `let enCarrera = false;`
+  - Esta variable se comportará como una variable de estado, almacenando información sobre si las orugas están en carrera o no, como un valor booleano (`true` o `false`).
+- Define una función `mousePressed()`.
+  - En la función, asigna el valor `true` a la variable `enCarrera`.
+- La función debería verse así:
+
+  ```js
+  // Empieza la carrera cuando el usuario presiona el mouse.
+  function mousePressed() {
+    enCarrera = true;
+  }
+  ```
+
+- En la función `draw()`, crea una nueva declaración if antes de la llamada a `drawCaterpillars()`: `if (enCarrera === true) { }`
+- Mueve la llamada a la función `moveCaterpillars()` dentro de la declaración if.
+  - Esto significa que las orugas solo comenzarán a moverse una vez que la carrera comience (después de que se presione el mouse).
+- Tu código debería verse así:
+
+```js
+// ... define variables globales
+
+let enCarrera = false;
+
+function setup() {
+  createCanvas(500, 500);
+  // Establece un frame rate lento.
+  frameRate(3);
+
+  for (let i=0; i<numOrugas; i++) {
+    collasDeOrugas.push(líneaInicio);
+  }
+}
+
+function draw() {
+  // Dibuja el fondo.
+  background(121, 96, 76);
+
+  // Dibuja las líneas de comienzo y fin.
+  noStroke();
+  fill(0);
+  rect(líneaInicio, 0, 5, height);
+  fill(0, 255, 0);
+  rect(líneaFin, 0, 20, height);
+
+  // Mueve las orugas si la carrera ha comenzado.
+  if (enCarrera === true) {
+    moveCaterpillars();
+  }
+
+  drawCaterpillars();
+}
+
+// Empieza la carrera cuando el usuario presiona el mouse.
+function mousePressed() {
+  enCarrera = true;
+}
+
+// ... funciones moveCaterpillars, drawCaterpillars y drawCaterpillar.
+```
+
+
+## Paso 10 - Agrega mensajes para el inicio y el fin de la carrera
+
+¡Bien hecho! En esta etapa de tu dibujo, tienes una carrera de orugas que comienza al hacer clic con el mouse.
+
+Ahora solo nos queda agregar instrucciones en el canvas sobre cómo usar el programa. También agregaremos un mensaje al final de la carrera para anunciar la oruga ganadora, que será aleatoria. Volveremos a agregar la función noLoop() para que la carrera termine cuando se declare un ganador.
+
+
+### 10.1 - Escribe un mensaje de inicio
+
+- Crea una nueva función personalizada después de `draw()` y nómbrala `writeStart()`.
+- Dentro de la función, agrega: `text("¡Clic para Empezar 🏁!", width / 2, height /2);`
+  - Esto escribe el texto de instrucciones y lo coloca en el centro del canvas.
+  - Alinea el texto al centro agregando `textAlign(CENTER);` (centrar el texto) arriba del comando `text()`.
+  - Agrega estilos al texto. En este ejemplo, le daremos un color blanco sin stroke y un tamaño de texto de 24.
+- Tu función `writeStart()` debería verse así:
+
+  ```js
+  function writeStart() {
+    // Estiliza el texto.
+    textSize(24);
+    textAlign(CENTER);
+    fill(255);
+    noStroke();
+   
+    // Muestra el mensaje.
+    text("¡Clic para Empezar 🏁!", width / 2, height /2);
+  }
+  ```
+
+- Regresa al función `draw()` y agrega una declaración else: `else { }`
+  - Esta declaración se ejecutará si la carrera no ha comenzado.
+- Llama a la función `writeStart()` dentro de este bloque de código else.
+
+La función `draw()` debería verse así:
+
+```js
+function draw() {
+  // Dibuja el fondo.
+  background(121, 96, 76);
+
+  // Dibuja las líneas de comienzo y fin.
+  noStroke();
+  fill(0);
+  rect(líneaInicio, 0, 5, height);
+  fill(0, 255, 0);
+  rect(líneaFin, 0, 20, height);
+
+  // Si la carrera ha comenzado, mueve las orugas.
+  if (enCarrera === true) {
+    moveCaterpillars();
+  } 
+  
+  // En el caso de que la carrera no haya comenzado, escribe las instrucciones para empezar.
+  else { 
+    writeStart();
+  }
+
+  // Dibuja las orugas en sus nuevas posiciones.
+  drawCaterpillars();
+}
+```
+
+
+### 10.2 - Verifica si hay un ganador y escribe quién ganó.
+
+Necesitamos verificar si una de las orugas ha ganado. Si es así, necesitamos mostrar esa información y terminar la carrera.
+
+- Crea una nueva función debajo de `draw()` para verificar el ganador: `function checkWinner() {}`
+- Dentro de las llaves de la función, escribe un bucle for para revisar cada una de las coordenadas x de las orugas para ver si han ganado: `for (let i = 0; i < collasDeOrugas.length; i += 1) {}`
+- Dentro de las llaves del bucle for, incluye una declaración if para ver si cada oruga cruzó la línea de fin: `if (collasDeOrugas[i] >= líneaFin) {}`
+- Dentro de esta declaración if, escribe el ganador en el texto dinámicamente usando un literal de texto:
+
+  ```js
+  text(`¡Oruga ${i + 1} Gana!`, width / 2, height / 2);
+  ```
+
+  - Esto dinámicamente escribe el texto mostrando el índice de la oruga que ganó. Dado que los índices comienzan en 0 y normalmente contamos las orugas comenzando en 1, agregamos 1 al valor de `i`.
+  - Similar al Paso 9.1, alinea el texto al centro agregando: `textAlign(CENTER);` y agrega estilos al texto.
+- Dentro de la declaración if también incluye la función `noLoop()` para hacer que `draw()` deje de ejecutarse. Esto detendrá la carrera una vez que se declare un ganador.
+
+Tu función `checkWinner()` puede verse así:
+
+```js
+function checkWinner() {
+  for (let i = 0; i < collasDeOruga.length; i += 1) {
+    if (collasDeOruga[i] >= líneaFin) {
+      // Estiliza el texto  
+      textSize(24);
+      textAlign(CENTER);
+      fill(255);
+      noStroke();
+
+      // Muestra el mensaje.
+      text(`¡Oruga ${i + 1} Gana!`, width / 2, height / 2);
+
+      // Termina la carrera deteniendo draw() de ejecutarse
+      noLoop();
+    }
+  }
+}
+```
+
+Tu dibujo final debería verse así:
+
+<EditableSketch code={`
+// Declare variables para dibujar la pista de carreras.
+let líneaInicio = 30;
+let líneaFin = 400;
+
+// Declara las variables para la oruga.
+let espacio = 20;
+let tamañoSegmento = 30;
+let tamañoOjo = 15;
+
+// Declara las variables para la carrera.
+let numOrugas = 3;
+let collasDeOrugas = [];
+
+// Declara el estado por defecto antes de que la carrera comience.
+let enCarrera = false;
+
+function setup() {
+  createCanvas(500, 500);
+ 
+  // Establece un frame rate lento.
+  frameRate(3);
+
+  for (let i=0; i < numOrugas; i++) {
+    collasDeOrugas.push(líneaInicio);
+  }
+}
+
+function draw() {
+  // Dibuja el fondo, las líneas de comienzo y fin. 
+  background(121, 96, 76);
+  noStroke();
+  fill(0);
+  rect(líneaInicio, 0, 5, height);
+  fill(0, 255, 0);
+  rect(líneaFin, 0, 20, height);
+
+  // Mueve las orugas si la carrera ha comenzado.
+  if (enCarrera === true) {
+    moveCaterpillars();
+  } 
+  // En el caso de que la carrera no haya comenzado, escribe las instrucciones para empezar.
+  else { 
+    writeStart();
+  }
+
+  // Dibuja las orugas en la línea de empiezo.
+  drawCaterpillars();
+ 
+  // Verifica si hay un ganador.
+  checkWinner();
+}
+
+// Dibuja un mensaje al inicio de la carrera.
+function writeStart() {
+  // Estiliza el texto.
+  textSize(24);
+  textAlign(CENTER);
+  fill(255);
+  noStroke();
+
+  // Muestra el mensaje.
+  text("¡Clic para Empezar 🏁!", width / 2, height /2);
+}
+
+// Dibuja una oruga.
+function drawCaterpillar(x, y, segmentos) {
+  // Crea un bucle de círculos para formar el cuerpo.
+  for (let i = 0; i < segmentos; i += 1) {
+    fill(255, 0, 200);
+    stroke(0);
+    strokeWeight(1);
+    circle(x, y, 50);
+    x += espacio;
+  }
+
+  // Dibuja los ojos de la oruga.
+  fill(0);
+  stroke(255);
+  strokeWeight(3);
+  circle(x, y - tamañoOjo, tamañoOjo);
+  circle(x - tamañoOjo, y - tamañoOjo, tamañoOjo);
+}
+
+// Dibuja todas las orugas.
+function drawCaterpillars() {
+  let relleno = height / numOrugas;
+  for (let i = 0; i < numOrugas; i += 1) {
+    // Realiza la coordenada x de cada oruga
+    let y = (i + 0.5) * relleno;
+
+    // Realiza el largo del oruga usando un valor aleatorio para simular el gateo.
+    let gateo = random(3, 6);
+
+    // Dibuja las orugas.
+    drawCaterpillar(collasDeOrugas[i], y, gateo);
+  }
+}
+
+// Cuando el usuario presiona el mouse, empieza la carrera.
+function mousePressed() {
+  enCarrera = true;
+}
+
+// Mueve las orugas.
+function moveCaterpillars() {
+  for (let i = 0; i < numOrugas; i += 1) {
+    // Dale a cada oruga una velocidad aleatoria una vez que la carrera ha comenzado.
+    let mueve = round(random(5, 30));
+   
+    // Realice el coordenada x de cada oruga
+    collasDeOrugas[i] += mueve;
+  }
+}
+
+// Si hay un ganador, muestra un mensaje de ganador y detiene la carrera.
+function checkWinner() {
+  for (let i = 0; i < collasDeOrugas.length; i += 1) {
+    if (collasDeOrugas[i] >= líneaFin) {
+      // Estiliza el texto
+      textSize(24);
+      textAlign(CENTER);
+      fill(255);
+      noStroke();
+
+      // Muestra el mensaje.
+      text(\`¡Oruga \${i + 1} Gana!\`,width/2,height/2);
+
+      // Termina el carrera deteniendo draw() de ejecutarse
+      noLoop();
+    }
+  }
+}
+`} />
+
+## Conclusion
+
+¡Felicidades por completar este tutorial! Ahora has aprendido a usar bucles para generar múltiples formas en movimiento en p5.js. Visita la [Referencia de p5.js](/reference) o los tutoriales anteriores para aprender más sobre [declaraciones condicionales, interactividad,](/tutorials/conditionals-and-interactivity), [variables](/tutorials/variables-and-change) y [funciones](/tutorials/organizing-code-with-functions).
+
+
+## Proximos Pasos
+
+- Proximo tutorial: [Data Structure Garden](/tutorials/data-structure-garden)
+
+
+## Referencias
+
+- [Making decisions in your code - MDN](https://developer.mozilla.org/es/docs/Learn_web_development/Core/Scripting/Conditionals)
+- [Loops and iteration - MDN](https://developer.mozilla.org/es/docs/Web/JavaScript/Guide/Loops_and_iteration)
+- [Arrays - MDN](https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/Array)
+  - [`.push()`](https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/Array/push)

From ac3b3596acbb77a50225d2e8b883dcb94b607141 Mon Sep 17 00:00:00 2001
From: Octavio Herrera Contreras <156601957+Octavi00@users.noreply.github.com>
Date: Tue, 17 Feb 2026 03:38:54 +0000
Subject: [PATCH 2/4] Added spanish titles for both images, as well as fixed
 callouts titles to spanish. Code has been read, and only needs a secondhand
 review to ensure readability.

---
 .../tutorials/es/repeating-with-loops.mdx     | 288 +++++++++---------
 1 file changed, 144 insertions(+), 144 deletions(-)

diff --git a/src/content/tutorials/es/repeating-with-loops.mdx b/src/content/tutorials/es/repeating-with-loops.mdx
index 3ccd2517ac..3375494d79 100644
--- a/src/content/tutorials/es/repeating-with-loops.mdx
+++ b/src/content/tutorials/es/repeating-with-loops.mdx
@@ -1,6 +1,6 @@
 ---
 title: "Repitiendo con Bucles"
-description: "¡Creando una carrera con una oruga arrastrándose utilizando bucles y formaciones!"
+description: "¡Creando una carrera con una oruga gateando utilizando bucles y arreglos!"
 category: introduction
 categoryIndex: 5
 featuredImage: ../images/featured/loops.png
@@ -21,35 +21,37 @@ import Callout from "../../../components/Callout/index.astro";
 import AnnotatedLine from "../../../components/AnnotatedLine/index.astro";
 
 
-## Introducion
+## Introducción
 
-¿Un día has querido elevar tus proyectos dibujando formas con solamente pocas líneas de código? Imagínate dibujando una fila de árboles, una pila de libros, los arcos de un arcoíris o lo de adentro de un panal. Para crear imágenes que son hechas con versiones de la misma figura, iremos adelante creando figuras individuales y aventuraremos adentro del mundo lindo de bucles y formaciones. ¡Empezamos a aprender cómo crear diseños con solamente pocas líneas de código!
+¿Un día has querido mejorar tus proyectos dibujando formas con solamente pocas líneas de código? Imagínate dibujando una fila de árboles, una pila de libros, los arcos de un arcoíris o lo de adentro de un panal. Para crear imágenes que son hechas con versiones de la misma figura, iremos adelante creando figuras individuales y aventuraremos adentro del mundo lindo de bucles y arreglos. ¡Empezamos a aprender cómo crear diseños con solamente pocas líneas de código!
 
+<h2 style="text-align:center; font-weight:500; color:#FF1493;">Un solo objeto -> Objetos multiplicado</h2>
 ![An arch and hexagon shape are vertically aligned with the label that reads “single object.” Arrows point from these shapes to corresponding patterns that are vertically aligned under a label that reads “multiplied objects.”  The single arch points to five vertically stacked arches creating a rainbow shape. The hexagon points to many hexagon arranged in a honeycomb tessellation.](../images/introduction/loops-intro.png)
 
-Dibujar cada figura con una nueva línea de código sería muy fatigoso. En vez, podemos usar *bucles* que nos empoderan a repetir bloques de código las veces que ocupamos. En este tutorial, usaremos bucles y formaciones para crear [una oruga arrastrándose](https://editor.p5js.org/gbenedis@gmail.com/sketches/BrmtZ36ET).
+Dibujar cada figura con una nueva línea de código sería muy fatigoso. En vez, podemos usar *bucles* que nos empoderan a repetir bloques de código las veces que ocupamos. En este tutorial, usaremos bucles y arreglos para crear [una oruga gateando](https://editor.p5js.org/gbenedis@gmail.com/sketches/BrmtZ36ET).
 
-![Three pink caterpillars crawling to reach a green finish line at the right of the canvas.](../images/introduction/caterpillar-race-end.gif)
+<h2 style="text-align:center; font-weight:500; color:#555555;">Un ejemplo del código que crearás</h2>
+![Three pink caterpillars crawling to reach a green finish line at the right of the canvas](../images/introduction/caterpillar-race-end.gif).
 
-Un grupo de orugas empezarán a la línea de empiezo, y el primer oruga que pasa la línea de fin ganará la carrera. ¡La oruga que ganará variará cada vez que corramos el dibujo!
+Un grupo de orugas empezará a la línea de empiezo, y el primer oruga que pasa la línea de fin ganará la carrera. ¡La oruga que ganará variará cada vez que corramos el dibujo!
 
 En este tutorial, tú aprenderás:
 
-- Dibujar y actualizar tareas y figuras repetitivas usando *bucles*
+- Dibujar y actualizar tareas y figuras repetitivas usando *bucles*.
 - Usar funciones para actualizar variables y estados del programa y hacer cambios en el programa mientras el dibujo corre.
-- Usar [condicionales](/reference/p5/if) y `random()` para generar resultados diferentes
-- Correr y parar tus dibujos usando gatillos de mouse y [variables booleanas](/reference/p5/Boolean)
-- Guardar las posiciones del orugas en una formación
+- Usar [condicionales](/reference/p5/if) y `random()` para generar resultados diferentes.
+- Correr y parar tus dibujos usando gatillos de mouse y [variables booleanas](/reference/p5/Boolean).
+- Guardar las posiciones de lasf orugas en un arreglo.
 
 ### Lo que ocuparas
 
-- El [p5.js Web Editor](https://editor.p5js.org/)
-- Un comprensión del p5.js dibujando figuras básicas y texto usando coordenadas X y Y
-  - Podrás referir a nuestro tutorial anterior, [Empezando](/tutorials/get-started)
-- Un comprensión de variables y condicionales
-  - Podrás referir a nuestros tutoriales anteriores, [Variables y Cambio](/tutorials/variables-and-change/) y [Condicionales e Interactividad](/tutorials/conditionals-and-interactivity)
-- Un comprensión de funciones personalizadas y parámetros
-  - Podrás referir a nuestro tutorial anterior, [Organizando Código con Funciones](/tutorials/organizing-code-with-functions)
+- El [p5.js Web Editor](https://editor.p5js.org/).
+- Una comprensión del p5.js dibujando figuras básicas y texto usando coordenadas X y Y.
+  - Podrás referir a nuestro tutorial anterior, [Empezando](/tutorials/get-started).
+- Una comprensión de variables y condicionales.
+  - Podrás referir a nuestros tutoriales anteriores, [Variables y Cambio](/tutorials/variables-and-change/) y [Condicionales e Interactividad](/tutorials/conditionals-and-interactivity).
+- Una comprensión de funciones personalizadas y parámetros.
+  - Podrás referir a nuestro tutorial anterior, [Organizando Código con Funciones](/tutorials/organizing-code-with-functions).
 
 
 ## Paso 1 - Dibujando la pista de carreras
@@ -59,7 +61,7 @@ En este tutorial, tú aprenderás:
 - Declara dos nuevas variables globales arriba de `setup()` para definir las coordenadas x de tu línea de empiezo y la línea de fin. Llamaremos a las dos variables líneaInicio y líneaFin.
   - Asigna valores al eje X, dependiendo de dónde quieres colocar tus líneas de comienzo y fin. En este ejemplo, vamos a poner la líneaInicio a 30 y la líneaFin a 360.
 - En la función `draw()`:
-  - Pon un color de fondo. Por ejemplo, lo pondremos marrón utilizando `background(121, 96, 76)`;
+  - Pon un color de fondo. Por ejemplo, lo pondremos marrón utilizando `background(121, 96, 76);`.
   - Dibuja un rectángulo y pon su coordenada X como `líneaInicio`. Pon su altura a `height` para que se estire verticalmente a través del canvas.
   - Dibuja otro rectángulo en `líneaFin` y repite el mismo paso.
   - Rellena los dos rectángulos utilizando colores diferentes.
@@ -71,13 +73,14 @@ Por ejemplo tu código podría verse así:
 // Declara las variables para dibujar la pista de carreras.
 let líneaInicio = 30;
 let líneaFin = 400;
+
 function setup() {
   // Declara un canvas de 500x500 píxeles.
   createCanvas(500, 500); 
 }
 
 function draw() {
-  // Rellena el fondo con un color
+  // Rellena el fondo con un color.
   background(121, 96, 76);
 
   // Dibuja las líneas de comienzo y fin.
@@ -98,23 +101,23 @@ A continuación, dibujaremos un segmento de una oruga en el canvas y lo haremos
 - Declara una nueva variable global llamada 'circY' y asígnale el valor de 250 (o la mitad de la altura).
   - Esto será la coordenada Y del segmento de la oruga.
 - En `draw()`:
-  - Dibuja el segmento de la oruga utilizando la función `circle()`. Incluye `circX`, `circY`, y 50 como argumentos para especificar la coordenada x, coordenada y, y el diámetro: `circle(circX, circY, 50);`
+  - Dibuja el segmento de la oruga utilizando la función `circle()`. Incluye `circX`, `circY`, y 50 como argumentos para especificar la coordenada x, coordenada y, y el diámetro: `circle(circX, circY, 50);`.
   - También rellenaremos el círculo con un color blanco y una línea negra delgada.
-  - Bajo el comando del círculo, incrementa `circX` por 20 usando `circX += 20;`
+  - Bajo el comando del círculo, incrementa `circX` por 20 usando `circX += 20;`.
     - Esto significa que cada vez que la función `draw()` corre, la variable `circX` aumentará por 20 píxeles. Se dibujará un nuevo círculo a una coordenada X que está 20 píxeles a la derecha del círculo anterior creando la forma de una oruga.
 - Agrega la siguiente declaración condicional al final de `draw()`:
 
   ```js
-  // Si el variable circX es mayor que líneaFin
+  // Si el variable circX es mayor que líneaFin.
   if (circX > líneaFin) {
-    // Para el bucle de draw() usando noLoop()
+    // Para el bucle de draw() usando noLoop().
     noLoop();
   }
   ```
 
 La función `noLoop()` parará la función `draw()` de correr otra vez. La declaración `if`, para la función `draw()` usando `noLoop()` cuando la coordenada X del círculo pasa el valor de `líneaFin`. Visita la referencia de p5.js para más información sobre [`noLoop()`](/reference/p5/noLoop).
 
-En `setup()`, agrega: `frameRate(3);`
+En `setup()`, agrega: `frameRate(3);`.
 
 - Un [frame rate](/reference/p5/frameRate) es el número de veces que `draw()` corre en un segundo. Ponerlo a un número bajo hará los movimientos más notables y dramáticos para esta animación.
 
@@ -131,18 +134,17 @@ let circX = líneaInicio;
 let circY = 250;
 
 function setup() {
+  // Declara un canvas de 500x500 píxeles.
   createCanvas(500, 500); 
 
-  // Pon un frame rate lento.
+  // Establece un frame rate lento.
   frameRate(3);
   // Recuerda que el frame rate es el número de veces que draw() corre en un segundo.
 }
 
 function draw() {
-  // Dibuja el fondo.
+  // Dibuja el fondo, la línea de comienzo y de fin. 
   background(121, 96, 76);
-
-  // Dibuja las líneas de empiezo y fin.
   noStroke();
   fill(0);
   rect(líneaInicio, 0, 5, height);
@@ -157,9 +159,9 @@ function draw() {
   // Mueve la coordenada X a la derecha.
   circX += 20;
 
-  // Si el variable X llega al línea de fin
+  // Si el variable circX es mayor que líneaFin.
   if (circX > líneaFin) {
-    // Para el bucle de draw() usando noLoop()
+    // Para el bucle de draw() usando noLoop().
     noLoop();
   }
 }
@@ -201,11 +203,11 @@ Arriba de `setup()`:
 
 En `draw()`:
 
-- Después del código que dibuja la línea de fin, declara una nueva variable local `x` para posicionar los segmentos del cuerpo: `let x = circX;`
-- Agrega un bucle *for* usando: `for (let i = 0; i < segmentos; i += 1) { }`
+- Después del código que dibuja la línea de fin, declara una nueva variable local `x` para posicionar los segmentos del cuerpo: `let x = circX;`.
+- Agrega un bucle *for* usando: `for (let i = 0; i < segmentos; i += 1) { }`.
   - Un bucle *for* repetirá el código que escribamos dentro de las llaves múltiples veces. 
   - Mueve las líneas de código que dibujan el `circle()` dentro de las llaves del bucle *for*.
-- Después del bucle for, agrega: `circX += espacio` 
+- Después del bucle for, agrega: `circX += espacio` .
   - Esto mueve el cuerpo de la oruga a la derecha cada vez que `draw()` corre.
 
 Tu codigo podria verse así:
@@ -224,17 +226,16 @@ let segmentos = 6;
 let tamañoSegmento = 50;
 
 function setup() {
+  // Declara un canvas de 500x500 píxeles.
   createCanvas(500, 500);
 
-// Pon un frame rate lento.
+  // Establece un frame rate lento.
   frameRate(3);
 }
 
 function draw() {
-  // Dibuja el fondo.
+  // Dibuja el fondo, la línea de comienzo y de fin. 
   background(121, 96, 76);
-
-  // Dibuja las líneas de empiezo y fin.
   noStroke();
   fill(0);
   rect(líneaInicio, 0, 5, height);
@@ -246,7 +247,6 @@ function draw() {
 
   // Dibuja varios círculos para el cuerpo de la oruga usando un bucle de for.
   for (let i = 0; i < segmentos; i += 1) {
-    // Dibuja un círculo.
     fill(255);
     stroke(0);
     circle(x, circY, tamañoSegmento);
@@ -256,7 +256,7 @@ function draw() {
   // Mueva la oruga a la derecha.
   circX += espacio;
 
-  // Para la animación cuando x llega a la línea de fin.
+// Si la oruga ha llegado a la línea de fin, para la animación.
   if (circX > líneaFin) {
     noLoop();
   }
@@ -271,7 +271,7 @@ Un bucle for puede ejecutar una sección (o bloque) de código múltiples veces.
 
 ```js
 for (let i = 0; i < numero; i += 1) { 
-  // Código que quieres ejecutar número de veces
+  // Código que quieres ejecutar número de veces.
 }
 ```
 
@@ -279,7 +279,7 @@ Dentro de los brackets `{}` de un bucle for, escribimos el código que queremos
 
 Un bucle for está definido por tres declaraciones dentro de sus paréntesis, cada una separada por punto y coma. Ellas son:
 
-<AnnotatedLine code={({ bottom }) => `for (${bottom('init', ' let i = 0; ')} ${bottom('cond', 'i < number;')} ${bottom('instr', '  i += 1  ')}) { }`}>
+<AnnotatedLine code={({ bottom }) => `for (${bottom(`init`, `let i = 0;`)} ${bottom(`cond`, `i < number;`)} ${bottom(`instr`, `i += 1`)}) { }`}>
   <Fragment slot="init">Inicialización</Fragment>
   <Fragment slot="cond">Condición</Fragment>
   <Fragment slot="instr">Instrucción</Fragment>
@@ -333,19 +333,19 @@ Visite la [referencia de bucles for](/reference/p5/for) para aprender más.
 
 ### 3.3 - Agregando más detalles a la oruga
 
-- Ajuste el `fill()` color para el cuerpo de tu oruga si le quieres cambiar el color. En este ejemplo, le daremos un color rosita: `fill(255, 0, 200);`
+- Ajuste el `fill()` color para el cuerpo de tu oruga si le quieres cambiar el color. En este ejemplo, le daremos un color rosita: `fill(255, 0, 200);`.
 - Dibuja los ojos de la oruga. La posición de los ojos es la misma que las coordenadas X y Y del último círculo que se dibuja para el cuerpo. Esto significa que viene DESPUÉS de que el bucle for ya ha dibujado todos los círculos, así que agregaremos los ojos después del bucle for, pero antes de `noLoop()`. Esto asegura que los ojos se dibujen encima del último círculo en el cuerpo de la oruga.
   - Declare una variable global llamada `eyeSize` y asígnale el valor de 15.
     - Esta variable define el tamaño de los ojos de la oruga.
   - Dibuja dos círculos.
     - Rellene los de negro y un toque de blanco greusito.
-  - Agregue el primer ojo y establezca sus coordenadas y tamaño: `círculo(x, circY-tamañoOjo, tamañoOjo);`
+  - Agregue el primer ojo y establezca sus coordenadas y tamaño: `círculo(x, circY-tamañoOjo, tamañoOjo);`.
     - Esto posiciona el ojo aderiba del último círculo puesto.
-  - Agregue el segundo ojo y establezca sus coordenadas y tamaño: `círculo(x - tamañoOjo, circY-tamañoOjo, tamañoOjo);`
+  - Agregue el segundo ojo y establezca sus coordenadas y tamaño: `círculo(x - tamañoOjo, circY-tamañoOjo, tamañoOjo);`.
     - Aquí restamos el segundo ojo coordenado x de `tamañoOjo` para que entonces los dos ojos estén lados a lado sin tapar uno al otro.
 - Cuando completas tu oruga, organiza tu código dentro de una función personalizada y llámala `drawCaterpillar()`. ¡Siéntete libre de personalizar la oruga a tu gusto!
   - Define la función `drawCaterpillar()` afuera de la función `draw()`.
-  - La función debería incluir tu bucle for de círculos para el cuerpo del orugo y los dos círculos de ojitos
+  - La función debería incluir tu bucle for de círculos para el cuerpo del orugo y los dos círculos de ojitos.
   - Recuerda invocar `drawCaterpillar()` dentro de la función `draw()`. Escribe `drawCaterpillar();` dentro de `draw()` antes de la declaración if que acabe el bucle.
 
 
@@ -356,7 +356,7 @@ Esto es como tu código podría verse ahora:
 let líneaInicio = 30;
 let líneaFin = 400;
 
-//declara las variables para la oruga
+// Declara las variables para la oruga.
 let circX = líneaInicio;
 let circY = 250;
 let espacio = 20;
@@ -365,15 +365,14 @@ let tamañoSegmento = 50;
 let tamañoOjo = 15;
 
 function setup() {
+  // Declara un canvas de 500x500 píxeles.
   createCanvas(500, 500);
   frameRate(3);
 }
 
 function draw() {
-  // Dibuja el fondo.
+  // Dibuja el fondo, la línea de comienzo y de fin. 
   background(121, 96, 76);
-
-  // Dibuja las líneas de empiezo y fin.
   noStroke();
   fill(0);
   rect(líneaInicio, 0, 5, height);
@@ -383,7 +382,7 @@ function draw() {
 
   circX += espacio;
 
-  // Se termina el bucle cuando x llega a la línea de fin.
+  // Termina el bucle cuando la oruga llega a la línea de fin.
   if (circX > líneaFin) {
     noLoop();
   }
@@ -411,8 +410,8 @@ function drawCaterpillar() {
 }
 `} />
 
-<Callout>
-Juega con diferentes tamaños para el cuerpo del orugo y sus ojos ajustando las variables 'bodySize' y 'tamañoOjo'.
+<Callout title = "¡Intenta Esto!">
+Juega con diferentes tamaños para el cuerpo del orugo y sus ojos ajustando las variables `bodySize` y `tamañoOjo`.
 </Callout>
 
 
@@ -423,7 +422,7 @@ Cuando el dibujo corre por primera vez, queremos que cada oruga esté en la lín
 - Ve a la función `drawCaterpillar()` y haz los siguientes cambios:
   - Agrega `x` como el primer argumento en la: `function drawCaterpillar(x) { ...}`
     - Nota que ya habíamos declarado `x` como una variable local en la función `drawCaterpillar()`. Podemos eliminar esa declaración y usar el parámetro `x` en su lugar.
-  - Agrega `y` como el segundo argumento en la función: `drawCaterpillar(x, y) { ... }`
+  - Agrega `y` como el segundo argumento en la función: `drawCaterpillar(x, y) { ... }`.
     - Substituye `y` por `circY` en el cuerpo de la función.
 
 Podrás aprender más sobre funciones personalizadas, argumentos, y parámetros en nuestro tutorial anterior, [Organizando Código con Funciones](/tutorials/organizing-code-with-functions), y la referencia de p5.js para [funciones](/reference/p5/function).
@@ -442,7 +441,7 @@ function drawCaterpillar(x,y) {
     x += espacio;
   }
  
-  // Dibuja los ojos de la oruga usando la función circle(x, y) para dibujar un círculo
+  // Dibuja los ojos de la oruga usando la función circle(x, y) para dibujar un círculo.
   fill(0);
   stroke(255);
   strokeWeight(3);
@@ -457,7 +456,7 @@ Tu función `draw()` debería verse así:
 
 ```js
 function draw() {
-  // Dibuja el fondo
+  // Dibuja el fondo, la línea de comienzo y de fin. 
   background(121, 96, 76);
   // Dibuja las líneas de comienzo y fin.
   noStroke();
@@ -466,7 +465,7 @@ function draw() {
   fill(0, 255, 0);
   rect(líneaFin, 0, 20, height);
 
-  // Dibuja tres orugas
+  // Dibuja tres orugas.
   drawCaterpillar(circX, circY-150);
   drawCaterpillar(circX, circY);
   drawCaterpillar(circX, circY+150);
@@ -485,15 +484,15 @@ function draw() {
 
 Ya tenemos tres orugas viajando a través de la pantalla al mismo tiempo. Podemos usar un bucle para dibujar las tres orugas en vez de tres llamadas individuales a `drawCaterpillar()`.
 
-- Declara una nueva variable global arriba de `setup()` en tu sketch para el número de orugas que quieres en la carrera: `let numCaterpillars = 3;`
-- Crea una nueva función personalizada de afuera de `draw()` y nómbrala `drawCaterpillars()`
+- Declara una nueva variable global arriba de `setup()` en tu sketch para el número de orugas que quieres en la carrera: `let numCaterpillars = 3;`.
+- Crea una nueva función personalizada de afuera de `draw()` y nómbrala `drawCaterpillars()`.
   - Haz un nuevo bucle for dentro de la función `drawCaterpillars()`.
     - Inicializa y empieza la variable del bucle en 0 en la primera expresión del bucle.
     - Establece la condición a `i < numCaterpillars` en la segunda expresión del bucle.
     - Incrementa la variable del bucle en la tercera expresión.
   - Llama a `drawCaterpillar(circX, circY);` dentro de las llaves del bucle for.
 
-- Dentro de `draw()`, borra las tres llamadas a `drawCaterpillar()` y reemplázalas con una sola llamada a `drawCaterpillars();`
+- Dentro de `draw()`, borra las tres llamadas a `drawCaterpillar()` y reemplázalas con una sola llamada a `drawCaterpillars();`.
 
 Tu función `draw()` y `drawCaterpillars()` deberían verse así:
 
@@ -501,9 +500,8 @@ Tu función `draw()` y `drawCaterpillars()` deberían verse así:
 let numOrugas = 3;
 
 function draw() {
-  // Dibuja el fondo
+  // Dibuja el fondo, la línea de comienzo y de fin. 
   background(121, 96, 76);
-  // Dibuja la línea de comienzo y fin.
   noStroke();
   fill(0);
   rect(líneaInicio, 0, 5, height);
@@ -512,7 +510,7 @@ function draw() {
 
   circX += espacio;
 
-  // Dibuja las orugas
+  // Dibuja las orugas.
   drawCaterpillars();
 
   // Escapa del bucle de draw() cuando x llega a la línea de fin.
@@ -546,14 +544,14 @@ let tamañoSegmento = 50;
 let tamañoOjo = 15;
 
 function setup() {
+  // Declara un canvas de 500x500 píxeles.
   createCanvas(500, 500);
   frameRate(3);
 }
 
 function draw() {
-  // Dibuja el fondo
+  // Dibuja el fondo, la línea de comienzo y de fin. 
   background(121, 96, 76);
-  // Dibuja las líneas de comienzo y fin.
   noStroke();
   fill(0);
   rect(líneaInicio, 0, 5, height);
@@ -562,7 +560,7 @@ function draw() {
 
   circX += espacio;
 
-  // Dibuja las orugas
+  // Dibuja las orugas en la línea de empiezo.
   drawCaterpillars();
   
   // Escapa del bucle de draw() cuando x llega a la línea de fin.
@@ -571,12 +569,14 @@ function draw() {
   }
 }
 
+// Dibuja todas las orugas.
 function drawCaterpillars() {
   for (let i = 0; i < numOrugas; i += 1) {
     drawCaterpillar(circX, circY);
   }
 }
 
+// Dibuja una oruga.
 function drawCaterpillar(x, y) {
   // Crea un bucle de círculos para formar el cuerpo.
   for (let i = 0; i < segmentos; i += 1) {
@@ -602,17 +602,17 @@ function drawCaterpillar(x, y) {
 
 **¡Repaso!** De los pasos 3 y 4, tenemos dos funciones personalizadas en nuestro sketch.
 
-- 'drawCaterpillar()' dibuja una oruga usando los parámetros X y Y.
-- 'drawCaterpillars()' llama a la función 'drawCaterpillar()' y la coloca dentro de un bucle for para que podamos dibujar varias orugas.
+- `drawCaterpillar()` dibuja una oruga usando los parámetros X y Y.
+- `drawCaterpillars()` llama a la función `drawCaterpillar()` y la coloca dentro de un bucle for para que podamos dibujar varias orugas.
 
 Ahora, cada oruga está en las mismas coordenadas X y Y. Ajustaremos el código en el bucle for para separar las orugas con la coordenada Y.
 
 - Ve dentro de la función `drawCaterpillar()`.
- - Dentro del bucle for, agrega una nueva línea de código: `let relleno = height / numCaterpillars;`
+ - Dentro del bucle for, agrega una nueva línea de código: `let relleno = height / numCaterpillars;`.
    - Esto declara una nueva variable llamada `relleno` que determina el espacio vertical entre cada oruga.
-   - Le asignamos el valor de la `height` del canvas, dividido por el número de orugas que hay en el sketch. Esto divide el canvas verticalmente en filas (una para cada oruga). La altura de cada fila es el valor de `relleno`.
+   - Le asignamos el valor de la `height` (altura) del canvas, dividido por el número de orugas que hay en el sketch. Esto divide el canvas verticalmente en filas (una para cada oruga). La altura de cada fila es el valor de `relleno`.
   - Luego, inicializa la variable `y` asignándole este valor: `let y = (i + 0.5) * relleno`, donde `y` determina la coordenada y de cada oruga.
-    - Usando la variable `i`, cada iteración del bucle for posiciona una oruga en su propia fila 
+    - Usando la variable `i`, cada iteración del bucle for posiciona una oruga en su propia fila.
     - Agregar 0.5 a `i` centra la oruga en esa fila.
   - Similar al Paso 5, agrega `y` como un argumento en los paréntesis de la llamada a `drawCaterpillar()`. 
     - La línea de código ahora debería ser: `drawCaterpillar(circX, y);`
@@ -750,7 +750,7 @@ Tercera
 `drawCaterpillar()` y `drawCaterpillars()` ahora deberían verse así:
 
 ```js
-// ... declaraciones de variables, setup(), y draw()
+// ... declaraciones de variables, setup(), y draw().
 
 function drawCaterpillars() {
   for (let i = 0; i < numOrugas; i += 1) {
@@ -758,7 +758,7 @@ function drawCaterpillars() {
     let relleno = height / numOrugas;
     let y = (i + 0.5) * relleno;
 
-    // Dibuja la oruga
+    // Dibuja la oruga.
     drawCaterpillar(circX, y);
   }
 }
@@ -801,14 +801,14 @@ let tamañoSegmento = 50;
 let tamañoOjo = 15;
 
 function setup() {
+  // Declara un canvas de 500x500 píxeles.
   createCanvas(500, 500);
   frameRate(3);
 }
 
 function draw() {
-  // Dibuja el fondo
+  // Dibuja el fondo, la línea de comienzo y de fin. 
   background(121, 96, 76);
-  // Dibuja las líneas de comienzo y fin.
   noStroke();
   fill(0);
   rect(líneaInicio, 0, 5, height);
@@ -817,7 +817,7 @@ function draw() {
 
   circX += espacio;
 
-  // Dibuja las orugas en el canvas
+  // Dibuja las orugas en el canvas.
   drawCaterpillars();
   
   // Escape del bucle de draw() cuando x llega a la línea de fin.
@@ -826,17 +826,19 @@ function draw() {
   }
 }
 
+// Dibuja todas las orugas.
 function drawCaterpillars() {
   for (let i = 0; i < numOrugas; i += 1) {
     // El espacio entre cada oruga.
     let relleno = height / numOrugas;
     let y = (i + 0.5) * relleno;
 
-    // Dibuja la oruga
+    // Dibuja la oruga.
     drawCaterpillar(circX, y);
   }
 }
 
+// Dibuja una oruga.
 function drawCaterpillar(x, y) {
   // Crea un bucle de círculos para formar el cuerpo.
   for (let i = 0; i < segmentos; i += 1) {
@@ -857,41 +859,42 @@ function drawCaterpillar(x, y) {
 }
 `} />
 
-<Callout>
+<Callout title = "¡Intenta Esto!">
 Cambia el valor de la variable global `numOrugas` y observa cómo el bucle for en `drawCaterpillars()` las separa verticalmente en el canvas.
 </Callout>
 
 
-## Paso 7 - Crea un array para guardar la posición de cada oruga
+## Paso 7 - Crea un arreglo para guardar la posición de cada oruga
 
-Ahora que hemos posicionado las orugas verticalmente en el canvas, queremos darle a cada una una coordenada x única. Podemos hacer esto usando un array. El array contendrá las coordenadas x para cada oruga. Entonces podemos mover las orugas aleatoriamente a través de la pantalla, haciendo posible una carrera.
+Ahora que hemos posicionado las orugas verticalmente en el canvas, queremos darle a cada una una coordenada x única. Podemos hacer esto usando un array (arreglo). El arreglo contendrá las coordenadas x para cada oruga. Entonces podemos mover las orugas aleatoriamente a través de la pantalla, haciendo posible una carrera.
 
 
-### 7.1 - Crea un [array](https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/Array)
+### 7.1 - Crea un [arreglo](https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/Array)
 
--Declare una nueva variable global llamada `collasDeOrugas` justo después de `numOrugas`: `let collasDeOrugas = [];`
-  - Este array guardará la posición x del segmento más a la izquierda para cada oruga.
+-Declare una nueva variable global llamada `collasDeOrugas` justo después de `numOrugas`: `let collasDeOrugas = [];`.
+  - Este arreglo guardará la posición x del segmento más a la izquierda para cada oruga.
 
 
-Ocuparás aprender más sobre arrays en el siguiente tutorial, [Jardín de estructuras de datos](/tutorials/data-structure-garden). Visita la referencia de MDN para [arrays](https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/Array) para aprender más.
+Ocuparás aprender más sobre arreglos en el siguiente tutorial, [Jardín de estructuras de datos](/tutorials/data-structure-garden). Visita la referencia de MDN para [arreglos](https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/Array) para aprender más.
 
 - En `setup()`, agrega el coordenada x para cada oruga, colocándolas todas en la línea de empiezo.
-  - Haz un bucle for que se repita una vez por cada oruga: `for (let i=0; i < numOrugas; i++) { }`
-  - Dentro de las llaves, agrega la línea `collasDeOrugas.push(líneaInicio);`
-    - Esto agregará el valor `líneaInicio` al array `collasDeOrugas` una vez por cada oruga que necesita ser dibujada en el sketch.
-    - El método `.push()` se usa para agregar un nuevo valor al final de un array.
+  - Haz un bucle for que se repita una vez por cada oruga: `for (let i=0; i < numOrugas; i++) { }`.
+  - Dentro de las llaves, agrega la línea `collasDeOrugas.push(líneaInicio);`.
+    - Esto agregará el valor `líneaInicio` al arreglo `collasDeOrugas` una vez por cada oruga que necesita ser dibujada en el sketch.
+    - El método `.push()` se usa para agregar un nuevo valor al final de un arreglo.
 
 Ahora `setup()` debería verse así:
 
 ```js
 function setup() {
+  // Declara un canvas de 500x500 píxeles.
   createCanvas(500, 500);
 
   // Establece un frame rate lento.
   frameRate(6);
 
   for (let i=0; i < numOrguas; i++) {
-    //Agrega la posición del último segmento de cada oruga en un array
+    // Agrega la posición del último segmento de cada oruga en un arreglo.
     collasDeOrugas.push(líneaInicio);
   }
 }
@@ -899,9 +902,9 @@ function setup() {
 
 
 - En la función `drawCaterpillar()`, cambia la línea `drawCaterpillar(circX, y)`:
-  - En vez de usar `circX`, ahora usaremos los valores en el array `collasDeOrugas`.
-  - Ya que el índice `i` en el bucle for representa la posición correcta del índice en el array `collasDeOrugas`, podemos cambiar `circX` a `collasDeOrugas[i]`: `drawCaterpillar(collasDeOrugas[i], y);`
-- Remueve `circX` de la función
+  - En vez de usar `circX`, ahora usaremos los valores en el arreglo `collasDeOrugas`.
+  - Ya que el índice `i` en el bucle for representa la posición correcta del índice en el arreglo `collasDeOrugas`, podemos cambiar `circX` a `collasDeOrugas[i]`: `drawCaterpillar(collasDeOrugas[i], y);`.
+- Remueve `circX` de la función.
   - Nota: `circX` todavía se usa al final de `draw()`. Adelante y remuévelo y lo agregaremos de nuevo más tarde.
 
 Tu función `drawCaterpillars()` debería verse así:
@@ -913,7 +916,7 @@ function drawCaterpillars() {
     let relleno = height / numOrugas;
     let y = (i + 0.5) * relleno;
 
-    // Dibuja las orugas usando un array
+    // Dibuja las orugas usando un arreglo.
     drawCaterpillar(collasDeOrugas[i], y);
   }
 }
@@ -922,13 +925,13 @@ function drawCaterpillars() {
 
 ### 7.2 - Mueve las orugas aleatoriamente
 
-- Crea una nueva función personalizada afuera de `draw()` y nómbrala `moveCaterpillars()`
-- Define un nuevo bucle for que itere el mismo número de veces que hay orugas: `for (let i = 0; i < numOrugas; i += 1) { }`
+- Crea una nueva función personalizada afuera de `draw()` y nómbrala `moveCaterpillars()`.
+- Define un nuevo bucle for que itere el mismo número de veces que hay orugas: `for (let i = 0; i < numOrugas; i += 1) { }`.
   - Esto es lo mismo que el bucle for usado en la función `drawCaterpillars()` ya que te permite referirte individualmente a cada oruga.
-- Dentro del bucle for, usa la función random para asignar un valor aleatorio a `move`:
+- Dentro del bucle for, usa la función random para asignar un valor aleatorio a `mueve`:
 
   ```js
-  let move = random(5,30);
+  let mueve = random(5,30);
   ```
 
 - Cuando la carrera empieza, esto moverá aleatoriamente cada oruga entre 5 y 30 píxeles a la derecha cada vez que `draw()` se ejecute.
@@ -939,18 +942,18 @@ Tu function podría verse así:
 ```js
 function moveCaterpillars() {
   for (let i = 0; i < numOrugas; i += 1) {
-    // Asigna un valor aleatorio a move
-    let move = random(5, 30);
-    collasDeOrugas[i] += move;
+    // Asigna un valor aleatorio a mueve.
+    let mueve = random(5, 30);
+    collasDeOrugas[i] += mueve;
   }
 }
 ```
 
 En corto, el orden de eventos en la función de arriba es:
 
-- Por cada iteración del bucle, asignamos `move` a un número aleatorio entre 5 y 30.
-  - Esto indica que cada oruga se asigna un valor aleatorio a `move`.
-- Después podemos actualizar el valor en la posición `i`<sup>th</sup> del array `collasDeOrugas`, que es lo que la función `drawCaterpillar()` usa para mostrar la oruga.
+- Por cada iteración del bucle, asignamos `mueve` a un número aleatorio entre 5 y 30.
+  - Esto indica que cada oruga se asigna un valor aleatorio a `mueve`.
+- Después podemos actualizar el valor en la posición `i`<sup>th</sup> del arreglo `collasDeOrugas`, que es lo que la función `drawCaterpillar()` usa para mostrar la oruga.
 
 
 
@@ -969,7 +972,7 @@ let líneaFin = 400;
 // Declara las variables para la oruga.
 let espacio = 20;
 let tamañoSegmento = 30;
-let tamañnoOjo = 15;
+let tamañoOjo = 15;
 
 let segmentos = 6;
 
@@ -978,6 +981,7 @@ let numOrugas = 3;
 let collasDeOrugas = [];
 
 function setup() {
+  // Declara un canvas de 500x500 píxeles.
   createCanvas(500, 500);
   frameRate(3);
 
@@ -987,17 +991,15 @@ function setup() {
 }
 
 function draw() {
-  // Dibuja el fondo.
+  // Dibuja el fondo, la línea de comienzo y de fin. 
   background(121, 96, 76);
-
-  // Dibuja las líneas de comienzo y fin.
   noStroke();
   fill(0);
   rect(líneaInicio, 0, 5, height);
   fill(0, 255, 0);
   rect(líneaFin, 0, 20, height);
   
-  // Haz cambios a las posiciones de las orugas.
+  // Realiza las posiciones de las orugas.
   moveCaterpillars();
 
   // Dibuja las orugas en sus nuevas posiciones.
@@ -1006,11 +1008,11 @@ function draw() {
 
 function moveCaterpillars() {
   for (let i = 0; i < numOrugas; i += 1) {
-    // Dala a cada oruga una velocidad aleatoria.
-    let move = random(5, 30);
+    // Dale a cada oruga una velocidad aleatoria.
+    let mueve = random(5, 30);
 
-    // Realiza cambios a las coordenadas x de cada oruga usando el array collasDeOrugas.
-    collasDeOrugas[i] += move;
+    // Realiza cambios a las coordenadas x de cada oruga usando el arreglo collasDeOrugas.
+    collasDeOrugas[i] += mueve;
   }
 }
 
@@ -1031,29 +1033,29 @@ function drawCaterpillar(x, y) {
     stroke(0);
     strokeWeight(1);
     circle(x, y, 50);
-    x += espacio; // Change x for next circle.
+    x += espacio;
   }
 
-  // Draw the caterpillar's eyes.
+  // Dibuja los ojos de la oruga.
   fill(0);
   stroke(255);
   strokeWeight(3);
-  circle(x, y - tamañnoOjo, tamañnoOjo);
-  circle(x - tamañnoOjo, y - tamañnoOjo, tamañnoOjo);
+  circle(x, y - tamañoOjo, tamañoOjo);
+  circle(x - tamañoOjo, y - tamañoOjo, tamañoOjo);
 }
 `} />
 
 
 ## Paso 8 - Anadiendo un motion gateo al cuerpo de la oruga
 
-Para replicar un movimiento de 'gateo', randomizaremos el número de segmentos de cada oruga usando la función `random()`. Como recordatorio, la variable global `segmentos` determina el número de segmentos que se muestran para las orugas. Ahora cambiaremos eso para que sea un parámetro en la función `drawCaterpillar()`.
+Para replicar un movimiento de `gateo`, randomizaremos el número de segmentos de cada oruga usando la función `random()`. Como recordatorio, la variable global `segmentos` determina el número de segmentos que se muestran para las orugas. Ahora cambiaremos eso para que sea un parámetro en la función `drawCaterpillar()`.
 
 - Vaya a la función `drawCaterpillar()`.
-  - Agrega un nuevo parámetro llamado `segmentos` en la definición de la función: `function drawCaterpillar(x, y, segmentos) { ... }`
+  - Agrega un nuevo parámetro llamado `segmentos` en la definición de la función: `function drawCaterpillar(x, y, segmentos) { ... }`.
   - Remueve la variable global `segmentos` en la parte superior del sketch.
 - Vaya a la función `drawCaterpillars()`.
-  - Agrega `gateo` como el tercer argumento en los paréntesis donde se llama a la función `drawCaterpillar()`: `drawCaterpillar(x, y, gateo);`
-  - Encima de esta línea, asigna un nuevo valor aleatorio a la variable `gateo` escribiendo: `let gateo = round(random(3, 6));`
+  - Agrega `gateo` como el tercer argumento en los paréntesis donde se llama a la función `drawCaterpillar()`: `drawCaterpillar(x, y, gateo);`.
+  - Encima de esta línea, asigna un nuevo valor aleatorio a la variable `gateo` escribiendo: `let gateo = round(random(3, 6));`.
     - Esto significa que mientras el sketch está corriendo, el programa dibujará continuamente las orugas con longitudes aleatorias (entre 3 a 6 círculos) mientras se mueven de la línea de empiezo a la línea de fin.
     - Puedes modificar los valores en `random()` dependiendo de qué tan largas y cortas quieres que sean las orugas.
     - El valor aleatorio de la variable `gateo` llenará el parámetro `segmentos` en la definición de la función `drawCaterpillar()`, que determina cuántos círculos se dibujan.
@@ -1061,17 +1063,17 @@ Para replicar un movimiento de 'gateo', randomizaremos el número de segmentos d
 Tus funciones deberían verse así:
 
 ```js
-// ... declarationes de variables, setup(), draw(), moveCaterpillars()
+// ... declaraciones de variables, setup(), draw(), moveCaterpillars().
 function drawCaterpillars() {
   for (let i = 0; i < numOrugas; i += 1) {
-    // Realiza la coordenada x de cada oruga usando el array collasDeOrugas.
+    // Realiza la coordenada x de cada oruga usando el arreglo collasDeOrugas.
     let relleno = height / collasDeOrugas;
     let y = (i + 0.5) * relleno;
 
-    // Realiza el largo del oruga usando un valor aleatorio.
+    // Realiza el longitud de la oruga usando un valor aleatorio.
     let gateo = round(random(3, 6));
 
-    // Dibuja la oruga
+    // Dibuja la oruga.
     drawCaterpillar(x, y, gateo);
   }
 }
@@ -1097,7 +1099,7 @@ function drawCaterpillar(x, y, segments) {
 
 ## Paso 9 - Inicia la carrera con un trigger de mouse
 
-- Declare una nueva variable global booleana llamada `enCarrera` y asígnale el valor `false` (falso): `let enCarrera = false;`
+- Declare una nueva variable global booleana llamada `enCarrera` y asígnale el valor `false` (falso): `let enCarrera = false;`.
   - Esta variable se comportará como una variable de estado, almacenando información sobre si las orugas están en carrera o no, como un valor booleano (`true` o `false`).
 - Define una función `mousePressed()`.
   - En la función, asigna el valor `true` a la variable `enCarrera`.
@@ -1110,17 +1112,18 @@ function drawCaterpillar(x, y, segments) {
   }
   ```
 
-- En la función `draw()`, crea una nueva declaración if antes de la llamada a `drawCaterpillars()`: `if (enCarrera === true) { }`
+- En la función `draw()`, crea una nueva declaración if antes de la llamada a `drawCaterpillars()`: `if (enCarrera === true) { }`.
 - Mueve la llamada a la función `moveCaterpillars()` dentro de la declaración if.
   - Esto significa que las orugas solo comenzarán a moverse una vez que la carrera comience (después de que se presione el mouse).
 - Tu código debería verse así:
 
 ```js
-// ... define variables globales
+// ... define variables globales.
 
 let enCarrera = false;
 
 function setup() {
+  // Declara un canvas de 500x500 píxeles.
   createCanvas(500, 500);
   // Establece un frame rate lento.
   frameRate(3);
@@ -1131,10 +1134,8 @@ function setup() {
 }
 
 function draw() {
-  // Dibuja el fondo.
+  // Dibuja el fondo, la línea de comienzo y de fin. 
   background(121, 96, 76);
-
-  // Dibuja las líneas de comienzo y fin.
   noStroke();
   fill(0);
   rect(líneaInicio, 0, 5, height);
@@ -1187,7 +1188,7 @@ Ahora solo nos queda agregar instrucciones en el canvas sobre cómo usar el prog
   }
   ```
 
-- Regresa al función `draw()` y agrega una declaración else: `else { }`
+- Regresa al función `draw()` y agrega una declaración else: `else { }`.
   - Esta declaración se ejecutará si la carrera no ha comenzado.
 - Llama a la función `writeStart()` dentro de este bloque de código else.
 
@@ -1195,10 +1196,8 @@ La función `draw()` debería verse así:
 
 ```js
 function draw() {
-  // Dibuja el fondo.
+  // Dibuja el fondo, la línea de comienzo y de fin. 
   background(121, 96, 76);
-
-  // Dibuja las líneas de comienzo y fin.
   noStroke();
   fill(0);
   rect(líneaInicio, 0, 5, height);
@@ -1225,9 +1224,9 @@ function draw() {
 
 Necesitamos verificar si una de las orugas ha ganado. Si es así, necesitamos mostrar esa información y terminar la carrera.
 
-- Crea una nueva función debajo de `draw()` para verificar el ganador: `function checkWinner() {}`
-- Dentro de las llaves de la función, escribe un bucle for para revisar cada una de las coordenadas x de las orugas para ver si han ganado: `for (let i = 0; i < collasDeOrugas.length; i += 1) {}`
-- Dentro de las llaves del bucle for, incluye una declaración if para ver si cada oruga cruzó la línea de fin: `if (collasDeOrugas[i] >= líneaFin) {}`
+- Crea una nueva función debajo de `draw()` para verificar el ganador: `function checkWinner() {}`.
+- Dentro de las llaves de la función, escribe un bucle for para revisar cada una de las coordenadas x de las orugas para ver si han ganado: `for (let i = 0; i < collasDeOrugas.length; i += 1) {}`.
+- Dentro de las llaves del bucle for, incluye una declaración if para ver si cada oruga cruzó la línea de fin: `if (collasDeOrugas[i] >= líneaFin) {}`.
 - Dentro de esta declaración if, escribe el ganador en el texto dinámicamente usando un literal de texto:
 
   ```js
@@ -1244,7 +1243,7 @@ Tu función `checkWinner()` puede verse así:
 function checkWinner() {
   for (let i = 0; i < collasDeOruga.length; i += 1) {
     if (collasDeOruga[i] >= líneaFin) {
-      // Estiliza el texto  
+      // Estiliza el texto  .
       textSize(24);
       textAlign(CENTER);
       fill(255);
@@ -1253,7 +1252,7 @@ function checkWinner() {
       // Muestra el mensaje.
       text(`¡Oruga ${i + 1} Gana!`, width / 2, height / 2);
 
-      // Termina la carrera deteniendo draw() de ejecutarse
+      // Termina la carrera deteniendo draw() de ejecutarse.
       noLoop();
     }
   }
@@ -1280,6 +1279,7 @@ let collasDeOrugas = [];
 let enCarrera = false;
 
 function setup() {
+  // Declara un canvas de 500x500 píxeles.
   createCanvas(500, 500);
  
   // Establece un frame rate lento.
@@ -1291,7 +1291,7 @@ function setup() {
 }
 
 function draw() {
-  // Dibuja el fondo, las líneas de comienzo y fin. 
+  // Dibuja el fondo, la línea de comienzo y de fin. 
   background(121, 96, 76);
   noStroke();
   fill(0);
@@ -1350,10 +1350,10 @@ function drawCaterpillar(x, y, segmentos) {
 function drawCaterpillars() {
   let relleno = height / numOrugas;
   for (let i = 0; i < numOrugas; i += 1) {
-    // Realiza la coordenada x de cada oruga
+    // Realiza la coordenada x de cada oruga.
     let y = (i + 0.5) * relleno;
 
-    // Realiza el largo del oruga usando un valor aleatorio para simular el gateo.
+    // Realiza el longitud de la oruga usando un valor aleatorio para simular el gateo.
     let gateo = random(3, 6);
 
     // Dibuja las orugas.
@@ -1372,7 +1372,7 @@ function moveCaterpillars() {
     // Dale a cada oruga una velocidad aleatoria una vez que la carrera ha comenzado.
     let mueve = round(random(5, 30));
    
-    // Realice el coordenada x de cada oruga
+    // Realice el coordenada x de cada oruga.
     collasDeOrugas[i] += mueve;
   }
 }
@@ -1381,7 +1381,7 @@ function moveCaterpillars() {
 function checkWinner() {
   for (let i = 0; i < collasDeOrugas.length; i += 1) {
     if (collasDeOrugas[i] >= líneaFin) {
-      // Estiliza el texto
+      // Estiliza el texto.
       textSize(24);
       textAlign(CENTER);
       fill(255);
@@ -1390,7 +1390,7 @@ function checkWinner() {
       // Muestra el mensaje.
       text(\`¡Oruga \${i + 1} Gana!\`,width/2,height/2);
 
-      // Termina el carrera deteniendo draw() de ejecutarse
+      // Termina el carrera deteniendo draw() de ejecutarse.
       noLoop();
     }
   }

From 1ea9cb5339dd6dfc22fef5071fec1ad65e71d5af Mon Sep 17 00:00:00 2001
From: Octavio Herrera Contreras <156601957+Octavi00@users.noreply.github.com>
Date: Wed, 18 Feb 2026 20:49:48 +0000
Subject: [PATCH 3/4] I have reread and revised the text to help with clearity.
 Currently it is in a finished state, and ready for a PR.

---
 .../tutorials/es/repeating-with-loops.mdx     | 78 +++++++++----------
 1 file changed, 37 insertions(+), 41 deletions(-)

diff --git a/src/content/tutorials/es/repeating-with-loops.mdx b/src/content/tutorials/es/repeating-with-loops.mdx
index 3375494d79..d3f6edbd4e 100644
--- a/src/content/tutorials/es/repeating-with-loops.mdx
+++ b/src/content/tutorials/es/repeating-with-loops.mdx
@@ -41,7 +41,7 @@ En este tutorial, tú aprenderás:
 - Usar funciones para actualizar variables y estados del programa y hacer cambios en el programa mientras el dibujo corre.
 - Usar [condicionales](/reference/p5/if) y `random()` para generar resultados diferentes.
 - Correr y parar tus dibujos usando gatillos de mouse y [variables booleanas](/reference/p5/Boolean).
-- Guardar las posiciones de lasf orugas en un arreglo.
+- Guardar las posiciones de cada oruga en un arreglo.
 
 ### Lo que ocuparas
 
@@ -57,12 +57,12 @@ En este tutorial, tú aprenderás:
 ## Paso 1 - Dibujando la pista de carreras
 
 - Abre un nuevo proyecto en el [p5.js Web Editor](https://editor.p5js.org/), dale un nombre como “Carrera de Orugas” y guárdalo.
-- En `setup(),` crea un canvas de 500x500 píxeles.
+- En `setup()`, crea un canvas de 500x500 píxeles.
 - Declara dos nuevas variables globales arriba de `setup()` para definir las coordenadas x de tu línea de empiezo y la línea de fin. Llamaremos a las dos variables líneaInicio y líneaFin.
-  - Asigna valores al eje X, dependiendo de dónde quieres colocar tus líneas de comienzo y fin. En este ejemplo, vamos a poner la líneaInicio a 30 y la líneaFin a 360.
+  - Asigna valores al eje x, dependiendo de dónde quieres colocar tus líneas de comienzo y fin. En este ejemplo, vamos a poner la líneaInicio a 30 y la líneaFin a 360.
 - En la función `draw()`:
   - Pon un color de fondo. Por ejemplo, lo pondremos marrón utilizando `background(121, 96, 76);`.
-  - Dibuja un rectángulo y pon su coordenada X como `líneaInicio`. Pon su altura a `height` para que se estire verticalmente a través del canvas.
+  - Dibuja un rectángulo y pon su coordenada x como `líneaInicio`. Pon su altura a `height` para que se estire verticalmente a través del canvas.
   - Dibuja otro rectángulo en `líneaFin` y repite el mismo paso.
   - Rellena los dos rectángulos utilizando colores diferentes.
 - No olvides nombrar y guardar tu dibujo.
@@ -97,14 +97,14 @@ function draw() {
 A continuación, dibujaremos un segmento de una oruga en el canvas y lo haremos viajar desde la línea de empiezo hasta la línea de fin. Se parará al final de la carrera.
 
 - Declara una nueva variable global llamada 'circX' y asígnale el valor de 'líneaInicio'.
-  - Esto será la coordenada X del segmento de la oruga.
+  - Esto será la coordenada x del segmento de la oruga.
 - Declara una nueva variable global llamada 'circY' y asígnale el valor de 250 (o la mitad de la altura).
-  - Esto será la coordenada Y del segmento de la oruga.
+  - Esto será la coordenada y del segmento de la oruga.
 - En `draw()`:
   - Dibuja el segmento de la oruga utilizando la función `circle()`. Incluye `circX`, `circY`, y 50 como argumentos para especificar la coordenada x, coordenada y, y el diámetro: `circle(circX, circY, 50);`.
   - También rellenaremos el círculo con un color blanco y una línea negra delgada.
   - Bajo el comando del círculo, incrementa `circX` por 20 usando `circX += 20;`.
-    - Esto significa que cada vez que la función `draw()` corre, la variable `circX` aumentará por 20 píxeles. Se dibujará un nuevo círculo a una coordenada X que está 20 píxeles a la derecha del círculo anterior creando la forma de una oruga.
+    - Esto significa que cada vez que la función `draw()` corre, la variable `circX` aumentará por 20 píxeles. Se dibujará un nuevo círculo a una coordenada x que está 20 píxeles a la derecha del círculo anterior creando la forma de una oruga.
 - Agrega la siguiente declaración condicional al final de `draw()`:
 
   ```js
@@ -115,7 +115,7 @@ A continuación, dibujaremos un segmento de una oruga en el canvas y lo haremos
   }
   ```
 
-La función `noLoop()` parará la función `draw()` de correr otra vez. La declaración `if`, para la función `draw()` usando `noLoop()` cuando la coordenada X del círculo pasa el valor de `líneaFin`. Visita la referencia de p5.js para más información sobre [`noLoop()`](/reference/p5/noLoop).
+La función `noLoop()` parará la función `draw()` de correr otra vez. La declaración `if`, para a la función `draw()` usando `noLoop()` cuando la coordenada X del círculo pasa el valor de `líneaFin`. Visita la referencia de p5.js para más información sobre [`noLoop()`](/reference/p5/noLoop).
 
 En `setup()`, agrega: `frameRate(3);`.
 
@@ -177,7 +177,7 @@ if (<condición>) {
 }
 ```
 
-El condicional es especificado dentro de los paréntesis de la declaración if. Los brackets '{ }' marcan el inicio y el fin del bloque de código. En el paso 2, la condición `circX > líneaFin`, para la función `draw()` de seguir corriendo otra vez cuando la coordenada X del círculo es mayor que el valor de `líneaFin` usando `noLoop()`.
+El condicional es especificado dentro de los paréntesis de la declaración if. Los llaves '{ }' marcan el inicio y el fin del bloque de código. En el paso 2, la condición `circX > líneaFin`, para la función `draw()` de seguir corriendo otra vez cuando la coordenada x del círculo es mayor que el valor de `líneaFin` usando `noLoop()`.
 
 Visita la referencia de p5.js para [if](/reference/p5/if) para aprender más.
 
@@ -191,7 +191,7 @@ Repetiremos el segmento de la oruga del Paso 2 para hacer una fila de círculos
 
 Arriba de `setup()`:
 
-- Declara una nueva variable llamada `segmentos` y asigna un valor de 6.
+- Declara una nueva variable llamada `segmentos` y asignale un valor de 6.
   - Esta variable define cuántos círculos forman el cuerpo de la oruga.
 - Declara una nueva variable llamada `espacio` y asígnale un valor de 20.
   - Esta variable define el espacio en píxeles entre los segmentos del cuerpo de la oruga.
@@ -206,7 +206,7 @@ En `draw()`:
 - Después del código que dibuja la línea de fin, declara una nueva variable local `x` para posicionar los segmentos del cuerpo: `let x = circX;`.
 - Agrega un bucle *for* usando: `for (let i = 0; i < segmentos; i += 1) { }`.
   - Un bucle *for* repetirá el código que escribamos dentro de las llaves múltiples veces. 
-  - Mueve las líneas de código que dibujan el `circle()` dentro de las llaves del bucle *for*.
+  - Mueve las líneas de código que dibujan el `circle()` adentro de las llaves del bucle *for*.
 - Después del bucle for, agrega: `circX += espacio` .
   - Esto mueve el cuerpo de la oruga a la derecha cada vez que `draw()` corre.
 
@@ -275,11 +275,11 @@ for (let i = 0; i < numero; i += 1) {
 }
 ```
 
-Dentro de los brackets `{}` de un bucle for, escribimos el código que queremos ejecutar repetidamente. Podemos especificar el número de veces que queremos que el código se repita estableciendo la condición del bucle.
+Dentro de los llaves `{}` de un bucle for, escribimos el código que queremos ejecutar repetidamente. Podemos especificar el número de veces que queremos que el código se repita estableciendo la condición del bucle.
 
 Un bucle for está definido por tres declaraciones dentro de sus paréntesis, cada una separada por punto y coma. Ellas son:
 
-<AnnotatedLine code={({ bottom }) => `for (${bottom(`init`, `let i = 0;`)} ${bottom(`cond`, `i < number;`)} ${bottom(`instr`, `i += 1`)}) { }`}>
+<AnnotatedLine code={({ bottom }) => `for (${bottom(`init`, `let i = 0;`)} ${bottom(`cond`, `i < numero;`)} ${bottom(`instr`, `i += 1`)}) { }`}>
   <Fragment slot="init">Inicialización</Fragment>
   <Fragment slot="cond">Condición</Fragment>
   <Fragment slot="instr">Instrucción</Fragment>
@@ -306,15 +306,15 @@ Un bucle for está definido por tres declaraciones dentro de sus paréntesis, ca
 
 La primera expresión, `let i = 0`, inicializa o empieza el bucle for.
 
-- i es la variable que define el estado inicial del bucle for. También se conoce como la variable de *índice*. Comúnmente, el índice empieza en un valor de 0 y aumenta cada vez que el bucle corre. El nombre de esta variable puede ser cualquier cosa que te guste. Generalmente, se usan variables de una sola letra como `i`, `j` y `k`, pero siéntete libre de usar algo más descriptivo.
+- `i` es la variable que define el estado inicial del bucle for. También se conoce como la variable de *índice*. Comúnmente, el índice empieza en un valor de 0 y aumenta cada vez que el bucle corre. El nombre de esta variable puede ser cualquier cosa que te guste. Generalmente, se usan variables de una sola letra como `i`, `j` y `k`, pero siéntete libre de usar algo más descriptivo.
 
-La segunda expresión, `i < number`, es la condición para que el bucle siga corriendo. Se conoce como una expresión booleana, ya que esta expresión puede devolver `true` (cierto) o `false` (falso). Mientras esta expresión sea `true` (cierto), el bucle for continuará ejecutándose, y en este caso la variable de índice (`i`) seguirá aumentando.
+La segunda expresión, `i < numero`, es la condición para que el bucle siga corriendo. Se conoce como una expresión booleana, ya que esta expresión puede devolver `true` (cierto) o `false` (falso). Mientras esta expresión sea `true` (cierto), el bucle for continuará ejecutándose, y en este caso la variable de índice (`i`) seguirá aumentando.
 
-- El `número` puede ser cualquier valor numérico o variable que guarde un valor numérico. Para contar, a menudo se usan enteros.
+- El `número` puede ser cualquier valor numérico o variable que guarde un valor numérico. Para contar, es común que se usen números enteros.
   - Ejemplo: `i < 5;` o `i < segmentos;`
 - En este caso, `numero` determina el número de veces que el bucle for se ejecutará porque el valor inicial `i` comienza en 0.
 - En la oruga de arriba, establecemos este valor en la variable `segmentos`, que especifica el número de círculos que forman el cuerpo de la oruga. Mientras el índice no haya alcanzado el número almacenado en `segmentos`, el bucle continuará dibujando círculos.
-  - Una vez que el número de círculos dibujados ya no es menor que segmentos, el programa se escapa del bucle for y continúa a la siguiente línea de código.
+  - Una vez que el número de círculos dibujados ya no es menor que segmentos, el programa se escapa del bucle for, y continúa a la siguiente línea de código.
 
 La tercera expresión, `i += 1`, es cómo el índice cambiará al final de cada iteración del bucle.
 
@@ -324,9 +324,9 @@ La tercera expresión, `i += 1`, es cómo el índice cambiará al final de cada
 En corto:
 
 1. Cuando un programa ejecuta un bucle for, primero declara la variable de índice del bucle en la primera expresión.
-2. Luego, el programa verifica la condición en la segunda expresión. Si la condición es `true` (cierto), el programa ejecuta el código dentro de las llaves `{}`. En el caso de que sea falso desde el principio, brinca al paso cuatro.
+2. Luego, el programa verifica la condición en la segunda expresión. Si la condición es `true` (cierto), el programa ejecuta el código dentro de las llaves `{}`. En el caso de que sea falso desde el principio, brinca al cuarto paso.
 3. Al final de cada iteración del bucle, el programa ejecuta la tercera expresión para aumentar el valor de la variable de índice.
-4. El bucle repite este proceso hasta que la condición en la segunda expresión es `false` (falso). Cuando la condición es `false` (falso), el programa sale del bucle for y continúa en las siguientes líneas de código en el sketch.
+4. El bucle repite este proceso hasta que la condición en la segunda expresión sea `false` (falso). Cuando la condición es `false` (falso), el programa sale del bucle for y continúa a las siguientes líneas de código en el sketch.
 
 Visite la [referencia de bucles for](/reference/p5/for) para aprender más.
 
@@ -342,7 +342,7 @@ Visite la [referencia de bucles for](/reference/p5/for) para aprender más.
   - Agregue el primer ojo y establezca sus coordenadas y tamaño: `círculo(x, circY-tamañoOjo, tamañoOjo);`.
     - Esto posiciona el ojo aderiba del último círculo puesto.
   - Agregue el segundo ojo y establezca sus coordenadas y tamaño: `círculo(x - tamañoOjo, circY-tamañoOjo, tamañoOjo);`.
-    - Aquí restamos el segundo ojo coordenado x de `tamañoOjo` para que entonces los dos ojos estén lados a lado sin tapar uno al otro.
+    - Aquí restamos el segundo ojo coordenado x de `tamañoOjo` para que entonces los dos ojos estén lado a lado sin tapar uno al otro.
 - Cuando completas tu oruga, organiza tu código dentro de una función personalizada y llámala `drawCaterpillar()`. ¡Siéntete libre de personalizar la oruga a tu gusto!
   - Define la función `drawCaterpillar()` afuera de la función `draw()`.
   - La función debería incluir tu bucle for de círculos para el cuerpo del orugo y los dos círculos de ojitos.
@@ -484,11 +484,11 @@ function draw() {
 
 Ya tenemos tres orugas viajando a través de la pantalla al mismo tiempo. Podemos usar un bucle para dibujar las tres orugas en vez de tres llamadas individuales a `drawCaterpillar()`.
 
-- Declara una nueva variable global arriba de `setup()` en tu sketch para el número de orugas que quieres en la carrera: `let numCaterpillars = 3;`.
+- Declara una nueva variable global arriba de `setup()` en tu sketch para el número de orugas que quieres en la carrera: `let numOrugas = 3;`.
 - Crea una nueva función personalizada de afuera de `draw()` y nómbrala `drawCaterpillars()`.
   - Haz un nuevo bucle for dentro de la función `drawCaterpillars()`.
     - Inicializa y empieza la variable del bucle en 0 en la primera expresión del bucle.
-    - Establece la condición a `i < numCaterpillars` en la segunda expresión del bucle.
+    - Establece la condición a `i < numOrugas` en la segunda expresión del bucle.
     - Incrementa la variable del bucle en la tercera expresión.
   - Llama a `drawCaterpillar(circX, circY);` dentro de las llaves del bucle for.
 
@@ -605,10 +605,10 @@ function drawCaterpillar(x, y) {
 - `drawCaterpillar()` dibuja una oruga usando los parámetros X y Y.
 - `drawCaterpillars()` llama a la función `drawCaterpillar()` y la coloca dentro de un bucle for para que podamos dibujar varias orugas.
 
-Ahora, cada oruga está en las mismas coordenadas X y Y. Ajustaremos el código en el bucle for para separar las orugas con la coordenada Y.
+Ahora, cada oruga está en las mismas coordenadas X y Y. Ajustaremos el código en el bucle for para separar las orugas con la coordenada y.
 
 - Ve dentro de la función `drawCaterpillar()`.
- - Dentro del bucle for, agrega una nueva línea de código: `let relleno = height / numCaterpillars;`.
+ - Dentro del bucle for, agrega una nueva línea de código: `let relleno = height / numOrugas;`.
    - Esto declara una nueva variable llamada `relleno` que determina el espacio vertical entre cada oruga.
    - Le asignamos el valor de la `height` (altura) del canvas, dividido por el número de orugas que hay en el sketch. Esto divide el canvas verticalmente en filas (una para cada oruga). La altura de cada fila es el valor de `relleno`.
   - Luego, inicializa la variable `y` asignándole este valor: `let y = (i + 0.5) * relleno`, donde `y` determina la coordenada y de cada oruga.
@@ -647,10 +647,6 @@ Podemos usar la variable de índice en nuestros dibujos para sumar, restar, mult
 
 En este ejemplo, usamos `i` para calcular un espacio consistente entre cada oruga (ver tabla abajo):
 
-- During the first iteration `i` is 0 and `y` is `0.5 * padding`. The first caterpillar is drawn with that y value.
-- During the second iteration, `i` is 1 and `y` becomes `1.5 * padding`. The second caterpillar is drawn at the new y value.
-- During the third iteration, `i` is 2 and `y` becomes `2.5 * padding`. The third caterpillar is drawn at the new y value.
-
 - Durante la primera iteración `i` es 0 y `y` es `0.5 * relleno`. La primera oruga se dibuja con ese valor de y.
 - Durante la segunda iteración, `i` es 1 y `y` se vuelve `1.5 * relleno`. La segunda oruga se dibuja con ese nuevo valor de y.
 - Durante la tercera iteración, `i` es 2 y `y` se vuelve `2.5 * relleno`. La tercera oruga se dibuja con ese nuevo valor de y.
@@ -750,7 +746,7 @@ Tercera
 `drawCaterpillar()` y `drawCaterpillars()` ahora deberían verse así:
 
 ```js
-// ... declaraciones de variables, setup(), y draw().
+// ... declaraciones de variables, setup() y draw().
 
 function drawCaterpillars() {
   for (let i = 0; i < numOrugas; i += 1) {
@@ -864,15 +860,15 @@ Cambia el valor de la variable global `numOrugas` y observa cómo el bucle for e
 </Callout>
 
 
-## Paso 7 - Crea un arreglo para guardar la posición de cada oruga
+## Paso 7 - Crea un Array (arreglo) para guardar la posición de cada oruga
 
-Ahora que hemos posicionado las orugas verticalmente en el canvas, queremos darle a cada una una coordenada x única. Podemos hacer esto usando un array (arreglo). El arreglo contendrá las coordenadas x para cada oruga. Entonces podemos mover las orugas aleatoriamente a través de la pantalla, haciendo posible una carrera.
+Ahora que hemos posicionado las orugas verticalmente en el canvas, queremos darle a cada una una coordenada x única. Podemos hacer esto utilizando un arreglo. El arreglo contendrá las coordenadas x para cada oruga. Entonces podemos mover las orugas aleatoriamente a través de la pantalla, haciendo posible una carrera.
 
 
 ### 7.1 - Crea un [arreglo](https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/Array)
 
--Declare una nueva variable global llamada `collasDeOrugas` justo después de `numOrugas`: `let collasDeOrugas = [];`.
-  - Este arreglo guardará la posición x del segmento más a la izquierda para cada oruga.
+- Declare una nueva variable global llamada `collasDeOrugas` justo después de `numOrugas`: `let collasDeOrugas = [];`.
+  - Este arreglo guardará la posición x del segmento al izquierda de cada oruga.
 
 
 Ocuparás aprender más sobre arreglos en el siguiente tutorial, [Jardín de estructuras de datos](/tutorials/data-structure-garden). Visita la referencia de MDN para [arreglos](https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/Array) para aprender más.
@@ -928,7 +924,7 @@ function drawCaterpillars() {
 - Crea una nueva función personalizada afuera de `draw()` y nómbrala `moveCaterpillars()`.
 - Define un nuevo bucle for que itere el mismo número de veces que hay orugas: `for (let i = 0; i < numOrugas; i += 1) { }`.
   - Esto es lo mismo que el bucle for usado en la función `drawCaterpillars()` ya que te permite referirte individualmente a cada oruga.
-- Dentro del bucle for, usa la función random para asignar un valor aleatorio a `mueve`:
+- Dentro del bucle for, usa la función `random()` para asignar un valor aleatorio a `mueve`:
 
   ```js
   let mueve = random(5,30);
@@ -1063,7 +1059,7 @@ Para replicar un movimiento de `gateo`, randomizaremos el número de segmentos d
 Tus funciones deberían verse así:
 
 ```js
-// ... declaraciones de variables, setup(), draw(), moveCaterpillars().
+// ... declaraciones de variables, setup(), draw() y moveCaterpillars().
 function drawCaterpillars() {
   for (let i = 0; i < numOrugas; i += 1) {
     // Realiza la coordenada x de cada oruga usando el arreglo collasDeOrugas.
@@ -1097,7 +1093,7 @@ function drawCaterpillar(x, y, segments) {
 }
 ```
 
-## Paso 9 - Inicia la carrera con un trigger de mouse
+## Paso 9 - Inicia la carrera con un gatillo de mouse
 
 - Declare una nueva variable global booleana llamada `enCarrera` y asígnale el valor `false` (falso): `let enCarrera = false;`.
   - Esta variable se comportará como una variable de estado, almacenando información sobre si las orugas están en carrera o no, como un valor booleano (`true` o `false`).
@@ -1233,7 +1229,7 @@ Necesitamos verificar si una de las orugas ha ganado. Si es así, necesitamos mo
   text(`¡Oruga ${i + 1} Gana!`, width / 2, height / 2);
   ```
 
-  - Esto dinámicamente escribe el texto mostrando el índice de la oruga que ganó. Dado que los índices comienzan en 0 y normalmente contamos las orugas comenzando en 1, agregamos 1 al valor de `i`.
+  - Esto dinámicamente escribe el texto mostrando el índice de la oruga que ganó. Escribimos `${i+1}` porque los índices comienzan en 0 y normalmente contamos las orugas comenzando en 1, agregamos 1 al valor de `i`.
   - Similar al Paso 9.1, alinea el texto al centro agregando: `textAlign(CENTER);` y agrega estilos al texto.
 - Dentro de la declaración if también incluye la función `noLoop()` para hacer que `draw()` deje de ejecutarse. Esto detendrá la carrera una vez que se declare un ganador.
 
@@ -1404,12 +1400,12 @@ function checkWinner() {
 
 ## Proximos Pasos
 
-- Proximo tutorial: [Data Structure Garden](/tutorials/data-structure-garden)
+- Proximo tutorial: [Jardín de estructuras de datos](/tutorials/data-structure-garden)
 
 
 ## Referencias
 
-- [Making decisions in your code - MDN](https://developer.mozilla.org/es/docs/Learn_web_development/Core/Scripting/Conditionals)
-- [Loops and iteration - MDN](https://developer.mozilla.org/es/docs/Web/JavaScript/Guide/Loops_and_iteration)
-- [Arrays - MDN](https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/Array)
+- [Tomando decisiones en tu código — MDN](https://developer.mozilla.org/es/docs/Learn_web_development/Core/Scripting/Conditionals)
+- [Bucles e iteración - MDN](https://developer.mozilla.org/es/docs/Web/JavaScript/Guide/Loops_and_iteration)
+- [Arrays (arreglos) - MDN](https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/Array)
   - [`.push()`](https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/Array/push)

From b442637efc26694c5631ae222cb01827a5a0d925 Mon Sep 17 00:00:00 2001
From: Octavio Herrera Contreras <156601957+Octavi00@users.noreply.github.com>
Date: Wed, 18 Feb 2026 21:31:07 +0000
Subject: [PATCH 4/4] Fixed a few typos, but most importantly added the
 `break;` statement to exit the loop after a winner is declared, preventing
 multiple winners from being announced if several caterpillars cross the
 finish line simultaneously. Currently it is still an issue in the English
 file.

---
 .../tutorials/es/repeating-with-loops.mdx     | 64 ++++++++++---------
 1 file changed, 34 insertions(+), 30 deletions(-)

diff --git a/src/content/tutorials/es/repeating-with-loops.mdx b/src/content/tutorials/es/repeating-with-loops.mdx
index d3f6edbd4e..c9b558ad06 100644
--- a/src/content/tutorials/es/repeating-with-loops.mdx
+++ b/src/content/tutorials/es/repeating-with-loops.mdx
@@ -23,17 +23,17 @@ import AnnotatedLine from "../../../components/AnnotatedLine/index.astro";
 
 ## Introducción
 
-¿Un día has querido mejorar tus proyectos dibujando formas con solamente pocas líneas de código? Imagínate dibujando una fila de árboles, una pila de libros, los arcos de un arcoíris o lo de adentro de un panal. Para crear imágenes que son hechas con versiones de la misma figura, iremos adelante creando figuras individuales y aventuraremos adentro del mundo lindo de bucles y arreglos. ¡Empezamos a aprender cómo crear diseños con solamente pocas líneas de código!
+¿Un día has querido mejorar tus proyectos dibujando formas con solamente pocas líneas de código? Imagínate dibujando una fila de árboles, una pila de libros, los arcos de un arcoíris o el interior de un panal. Para crear imágenes que son hechas con versiones de la misma figura, iremos adelante creando figuras individuales y aventuraremos adentro del mundo lindo de bucles y arreglos. ¡Empezamos a aprender cómo crear diseños con solamente pocas líneas de código!
 
-<h2 style="text-align:center; font-weight:500; color:#FF1493;">Un solo objeto -> Objetos multiplicado</h2>
+<h2 style="text-align:center; font-weight:500; color:#FF1493;">Un solo objeto -> Objetos multiplicados</h2>
 ![An arch and hexagon shape are vertically aligned with the label that reads “single object.” Arrows point from these shapes to corresponding patterns that are vertically aligned under a label that reads “multiplied objects.”  The single arch points to five vertically stacked arches creating a rainbow shape. The hexagon points to many hexagon arranged in a honeycomb tessellation.](../images/introduction/loops-intro.png)
 
-Dibujar cada figura con una nueva línea de código sería muy fatigoso. En vez, podemos usar *bucles* que nos empoderan a repetir bloques de código las veces que ocupamos. En este tutorial, usaremos bucles y arreglos para crear [una oruga gateando](https://editor.p5js.org/gbenedis@gmail.com/sketches/BrmtZ36ET).
+Dibujar cada figura con una nueva línea de código sería muy fatigoso. En cambio, podemos usar *bucles* que nos permiten repetir bloques de código las veces que queremos. En este tutorial, usaremos bucles y arreglos para crear [una oruga gateando](https://editor.p5js.org/gbenedis@gmail.com/sketches/BrmtZ36ET).
 
 <h2 style="text-align:center; font-weight:500; color:#555555;">Un ejemplo del código que crearás</h2>
 ![Three pink caterpillars crawling to reach a green finish line at the right of the canvas](../images/introduction/caterpillar-race-end.gif).
 
-Un grupo de orugas empezará a la línea de empiezo, y el primer oruga que pasa la línea de fin ganará la carrera. ¡La oruga que ganará variará cada vez que corramos el dibujo!
+Un grupo de orugas empezará a la línea de empiezo, y la primera oruga que pasa la línea de fin ganará la carrera. ¡La oruga que ganará variará cada vez que corramos el dibujo!
 
 En este tutorial, tú aprenderás:
 
@@ -43,7 +43,7 @@ En este tutorial, tú aprenderás:
 - Correr y parar tus dibujos usando gatillos de mouse y [variables booleanas](/reference/p5/Boolean).
 - Guardar las posiciones de cada oruga en un arreglo.
 
-### Lo que ocuparas
+### Lo que necesitarás
 
 - El [p5.js Web Editor](https://editor.p5js.org/).
 - Una comprensión del p5.js dibujando figuras básicas y texto usando coordenadas X y Y.
@@ -115,13 +115,13 @@ A continuación, dibujaremos un segmento de una oruga en el canvas y lo haremos
   }
   ```
 
-La función `noLoop()` parará la función `draw()` de correr otra vez. La declaración `if`, para a la función `draw()` usando `noLoop()` cuando la coordenada X del círculo pasa el valor de `líneaFin`. Visita la referencia de p5.js para más información sobre [`noLoop()`](/reference/p5/noLoop).
+La función `noLoop()` detendrá la función `draw()` de ejecutarse nuevamente. La declaración `if`, detiene la función `draw()` usando `noLoop()` cuando la coordenada X del círculo pasa el valor de `líneaFin`. Visita la referencia de p5.js para más información sobre [`noLoop()`](/reference/p5/noLoop).
 
 En `setup()`, agrega: `frameRate(3);`.
 
 - Un [frame rate](/reference/p5/frameRate) es el número de veces que `draw()` corre en un segundo. Ponerlo a un número bajo hará los movimientos más notables y dramáticos para esta animación.
 
-Tu codigo podría verse así:
+Tu código podría verse así:
 
 <EditableSketch code={`
 // Declara las variables para dibujar la pista de carreras.
@@ -159,9 +159,9 @@ function draw() {
   // Mueve la coordenada X a la derecha.
   circX += 20;
 
-  // Si el variable circX es mayor que líneaFin.
+  // Si la variable circX es mayor que líneaFin.
   if (circX > líneaFin) {
-    // Para el bucle de draw() usando noLoop().
+    // Detiene el bucle de draw() usando noLoop().
     noLoop();
   }
 }
@@ -210,7 +210,7 @@ En `draw()`:
 - Después del bucle for, agrega: `circX += espacio` .
   - Esto mueve el cuerpo de la oruga a la derecha cada vez que `draw()` corre.
 
-Tu codigo podria verse así:
+Tu código podría verse así:
 
 <EditableSketch code={`
 
@@ -318,7 +318,7 @@ La segunda expresión, `i < numero`, es la condición para que el bucle siga cor
 
 La tercera expresión, `i += 1`, es cómo el índice cambiará al final de cada iteración del bucle.
 
-- Un [**iteración de bucle**](https://developer.mozilla.org/es/docs/Web/JavaScript/Guide/Loops_and_iteration) se refiere a una sola vez que un bucle corre. Por ejemplo, si un bucle for corre 3 veces, tiene 3 iteraciones.
+- Una [**iteración de bucle**](https://developer.mozilla.org/es/docs/Web/JavaScript/Guide/Loops_and_iteration) se refiere a una sola vez que un bucle corre. Por ejemplo, si un bucle for corre 3 veces, tiene 3 iteraciones.
 - En este ejemplo, el índice `i` se usa para aumentar la posición por 1 cada círculo en el cuerpo de la oruga. En la primera iteración, `i` es 0 y el primer círculo se dibuja en `x`. En la segunda iteración, `i` es 1 y el segundo círculo se dibuja en `x + espacio`. En la tercera iteración, `i` es 2 y el tercer círculo se dibuja en `x + espacio + espacio`, y así sucesivamente.
 
 En corto:
@@ -339,9 +339,9 @@ Visite la [referencia de bucles for](/reference/p5/for) para aprender más.
     - Esta variable define el tamaño de los ojos de la oruga.
   - Dibuja dos círculos.
     - Rellene los de negro y un toque de blanco greusito.
-  - Agregue el primer ojo y establezca sus coordenadas y tamaño: `círculo(x, circY-tamañoOjo, tamañoOjo);`.
+  - Agregue el primer ojo y establezca sus coordenadas y tamaño: `circle(x, circY-tamañoOjo, tamañoOjo);`.
     - Esto posiciona el ojo aderiba del último círculo puesto.
-  - Agregue el segundo ojo y establezca sus coordenadas y tamaño: `círculo(x - tamañoOjo, circY-tamañoOjo, tamañoOjo);`.
+  - Agregue el segundo ojo y establezca sus coordenadas y tamaño: `circle(x - tamañoOjo, circY-tamañoOjo, tamañoOjo);`.
     - Aquí restamos el segundo ojo coordenado x de `tamañoOjo` para que entonces los dos ojos estén lado a lado sin tapar uno al otro.
 - Cuando completas tu oruga, organiza tu código dentro de una función personalizada y llámala `drawCaterpillar()`. ¡Siéntete libre de personalizar la oruga a tu gusto!
   - Define la función `drawCaterpillar()` afuera de la función `draw()`.
@@ -411,7 +411,7 @@ function drawCaterpillar() {
 `} />
 
 <Callout title = "¡Intenta Esto!">
-Juega con diferentes tamaños para el cuerpo del orugo y sus ojos ajustando las variables `bodySize` y `tamañoOjo`.
+Juega con diferentes tamaños para el cuerpo del orugo y sus ojos ajustando las variables `tamañoSegmento` y `tamañoOjo`.
 </Callout>
 
 
@@ -420,10 +420,10 @@ Juega con diferentes tamaños para el cuerpo del orugo y sus ojos ajustando las
 Cuando el dibujo corre por primera vez, queremos que cada oruga esté en la línea de empiezo. Esto significa que necesitaremos agregar parámetros a nuestra función para que podamos modificarlos y especificar dónde se dibujan las orugas.
 
 - Ve a la función `drawCaterpillar()` y haz los siguientes cambios:
-  - Agrega `x` como el primer argumento en la: `function drawCaterpillar(x) { ...}`
+  - Agrega `x` como el primer argumento en la función: `function drawCaterpillar(x) { ...}`
     - Nota que ya habíamos declarado `x` como una variable local en la función `drawCaterpillar()`. Podemos eliminar esa declaración y usar el parámetro `x` en su lugar.
   - Agrega `y` como el segundo argumento en la función: `drawCaterpillar(x, y) { ... }`.
-    - Substituye `y` por `circY` en el cuerpo de la función.
+    - Sustituye `y` por `circY` en el cuerpo de la función.
 
 Podrás aprender más sobre funciones personalizadas, argumentos, y parámetros en nuestro tutorial anterior, [Organizando Código con Funciones](/tutorials/organizing-code-with-functions), y la referencia de p5.js para [funciones](/reference/p5/function).
 
@@ -436,7 +436,7 @@ function drawCaterpillar(x,y) {
     fill(255, 0, 200);
     stroke(0);
     strokeWeight(1);
-    circulo(x, y, 50);
+    circle(x, y, 50);
 
     x += espacio;
   }
@@ -485,7 +485,7 @@ function draw() {
 Ya tenemos tres orugas viajando a través de la pantalla al mismo tiempo. Podemos usar un bucle para dibujar las tres orugas en vez de tres llamadas individuales a `drawCaterpillar()`.
 
 - Declara una nueva variable global arriba de `setup()` en tu sketch para el número de orugas que quieres en la carrera: `let numOrugas = 3;`.
-- Crea una nueva función personalizada de afuera de `draw()` y nómbrala `drawCaterpillars()`.
+- Crea una nueva función personalizada fuera de `draw()` y nómbrala `drawCaterpillars()`.
   - Haz un nuevo bucle for dentro de la función `drawCaterpillars()`.
     - Inicializa y empieza la variable del bucle en 0 en la primera expresión del bucle.
     - Establece la condición a `i < numOrugas` en la segunda expresión del bucle.
@@ -607,7 +607,7 @@ function drawCaterpillar(x, y) {
 
 Ahora, cada oruga está en las mismas coordenadas X y Y. Ajustaremos el código en el bucle for para separar las orugas con la coordenada y.
 
-- Ve dentro de la función `drawCaterpillar()`.
+- Ve dentro de la función `drawCaterpillars()`.
  - Dentro del bucle for, agrega una nueva línea de código: `let relleno = height / numOrugas;`.
    - Esto declara una nueva variable llamada `relleno` que determina el espacio vertical entre cada oruga.
    - Le asignamos el valor de la `height` (altura) del canvas, dividido por el número de orugas que hay en el sketch. Esto divide el canvas verticalmente en filas (una para cada oruga). La altura de cada fila es el valor de `relleno`.
@@ -639,7 +639,7 @@ function drawCaterpillars() {
 
 La variable de índice de un bucle for (`i`) puede aumentar o disminuir incrementalmente con cada iteración del bucle. En este tutorial, la variable `i` comienza en 0 y aumenta por 1 cada vez que el *bucle for* se ejecuta.
 
-- El primer vez que este bucle for corre, `i` es 0.
+- La primera vez que este bucle for corre, `i` es 0.
 - La segunda vez que el bucle corre, `i` es 1.
 - La tercera vez que corre, `i` es 2, y así sucesivamente.
 
@@ -871,7 +871,7 @@ Ahora que hemos posicionado las orugas verticalmente en el canvas, queremos darl
   - Este arreglo guardará la posición x del segmento al izquierda de cada oruga.
 
 
-Ocuparás aprender más sobre arreglos en el siguiente tutorial, [Jardín de estructuras de datos](/tutorials/data-structure-garden). Visita la referencia de MDN para [arreglos](https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/Array) para aprender más.
+Podrás aprender más sobre arreglos en el siguiente tutorial, [Jardín de estructuras de datos](/tutorials/data-structure-garden). Visita la referencia de MDN para [arreglos](https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/Array) para aprender más.
 
 - En `setup()`, agrega el coordenada x para cada oruga, colocándolas todas en la línea de empiezo.
   - Haz un bucle for que se repita una vez por cada oruga: `for (let i=0; i < numOrugas; i++) { }`.
@@ -889,7 +889,7 @@ function setup() {
   // Establece un frame rate lento.
   frameRate(6);
 
-  for (let i=0; i < numOrguas; i++) {
+  for (let i=0; i < numOrugas; i++) {
     // Agrega la posición del último segmento de cada oruga en un arreglo.
     collasDeOrugas.push(líneaInicio);
   }
@@ -958,7 +958,7 @@ En corto, el orden de eventos en la función de arriba es:
 - Al fin llamaremos la función `moveCaterpillars()` en `draw()` antes de la llamada a `drawCaterpillars()`.
 
 
-Tu codigo debería verse así:
+Tu código debería verse así:
 
 <EditableSketch code={`
 // Declara variables para dibujar la pista de carreras.
@@ -1063,18 +1063,18 @@ Tus funciones deberían verse así:
 function drawCaterpillars() {
   for (let i = 0; i < numOrugas; i += 1) {
     // Realiza la coordenada x de cada oruga usando el arreglo collasDeOrugas.
-    let relleno = height / collasDeOrugas;
+    let relleno = height / numOrugas;
     let y = (i + 0.5) * relleno;
 
     // Realiza el longitud de la oruga usando un valor aleatorio.
     let gateo = round(random(3, 6));
 
     // Dibuja la oruga.
-    drawCaterpillar(x, y, gateo);
+    drawCaterpillar(collasDeOrugas[i], y, gateo);
   }
 }
 
-function drawCaterpillar(x, y, segments) {
+function drawCaterpillar(x, y, segmentos) {
   // Crea un bucle de círculos para formar el cuerpo.
   for (let i = 0; i < segmentos; i += 1) {
     fill(255, 0, 200);
@@ -1232,13 +1232,15 @@ Necesitamos verificar si una de las orugas ha ganado. Si es así, necesitamos mo
   - Esto dinámicamente escribe el texto mostrando el índice de la oruga que ganó. Escribimos `${i+1}` porque los índices comienzan en 0 y normalmente contamos las orugas comenzando en 1, agregamos 1 al valor de `i`.
   - Similar al Paso 9.1, alinea el texto al centro agregando: `textAlign(CENTER);` y agrega estilos al texto.
 - Dentro de la declaración if también incluye la función `noLoop()` para hacer que `draw()` deje de ejecutarse. Esto detendrá la carrera una vez que se declare un ganador.
+- Al final de la declaración if, incluye el comando `break;` para salir del bucle for una vez que se declare un ganador. 
+  - Esto es importante porque el programa seguirá revisando las otras orugas incluso después de que se declare un ganador. Podría resultar en múltiples mensajes de ganador si varias orugas cruzan la línea de fin al mismo tiempo.
 
 Tu función `checkWinner()` puede verse así:
 
 ```js
 function checkWinner() {
-  for (let i = 0; i < collasDeOruga.length; i += 1) {
-    if (collasDeOruga[i] >= líneaFin) {
+  for (let i = 0; i < collasDeOrugas.length; i += 1) {
+    if (collasDeOrugas[i] >= líneaFin) {
       // Estiliza el texto  .
       textSize(24);
       textAlign(CENTER);
@@ -1349,7 +1351,7 @@ function drawCaterpillars() {
     // Realiza la coordenada x de cada oruga.
     let y = (i + 0.5) * relleno;
 
-    // Realiza el longitud de la oruga usando un valor aleatorio para simular el gateo.
+    // Define la longitud de la oruga usando un valor aleatorio para simular el gateo.
     let gateo = random(3, 6);
 
     // Dibuja las orugas.
@@ -1386,8 +1388,10 @@ function checkWinner() {
       // Muestra el mensaje.
       text(\`¡Oruga \${i + 1} Gana!\`,width/2,height/2);
 
-      // Termina el carrera deteniendo draw() de ejecutarse.
+      // Termina la carrera deteniendo draw() de ejecutarse usando noLoop()
       noLoop();
+      // Escapa del bucle for utilizando break.
+      break;
     }
   }
 }