Para repetir el dibujo de una forma en varias posiciones usamos bucles:

for (int i=0; i<10; i++) {     // para un i con valor inicial de 0, se incrementa en 1 (i++) mientras i sea menor de 10: de 0 a 9
rect( i *20,100,18,18);  // usamos el valor de la variable para dibujar un cuadrado
}

Solemos usar bucles que empiezan en 0 y cuentan el número de veces necesarias.

Puede se útil añadir un desplazamiento inicial a la posición del dibujo: i *20 es 0 cuando i=0. Podemos posicionarlo añadiendo ese offset:

rect( 150 + i *20,100,18,18); // el primer cuadrado se dibuja en 150

El bucle puede saltar de 2 en 2, en vez de incrementarse en uno cada vez (o en cualquier cantidad):

for (int i=0; i<10; i=i+2) {
    // haz algo aquí
}


Bucles anidados
Un bucle dentro de otro nos permite crear estructuras bi-dimensionales, como tramas o tableros de ajedrez:

for (int i=0; i<10; i++) {     // primer bucle, con i
  for (int i=0; i<10; i++) {     // segundo bucle, con j
    rect( 150 + i *20,100 + i *20,18,18); // dibuja usan i como columna y j como fila
  } // fin segundo bucle
} // fin primer bucle

 

 

Usando el contador

La variable que funciona como contador (i, j...) puede utilizarse como parámetro para controlar distintos elementos de nuestro dibujo: puede usarse para controlar la posición, el tamaño, el color, la progresión de cambio de esos parámetros... Es un simple número que empieza a contar desde cero, y podemos utilizarlo para cualquier cosa. El hecho de que empiece a contar desde cero result útil, ya que cualquier número multiplicado por cero es igual a cero, y así siempre empezamos desde cero. Si queremos situar un cuadrado cad 50 píxeles, multiplicaremos el contador por 50 ( i*50 ) y tendremos así la secuencia:

0 (0x50), 50 (1x50), 100 (2x50), 150 (3x50), ....

Para situar un cuadrado utilizando esta secuencia, podemos añadirle un valor constante de desplazamiento (offset), que indique el lugar del primer elemento, en la forma: 125+i*50

Así la secuencia se convierte en 125, 175, 225, 275, ... De este modo empezamos a dibujar cuadrados alejados del borde a 125 pix, de 50 en 50 pix.

 

Podemos utilizarla para cambiar el color de relleno:

 

fill (i*20);

 

o incluso varios componentes RGB a la vez:

 

fill (i*20,0,255-i*30);

 

Tenemos que considerar que estas variables que utilizamos como contador son un simple número que se incrementa, y podemos utilizarlas para varias cosas a la vez, simplificando algunos procesos.