Programación con funciones, clases y arreglos para artistas

Acceso con índices

Durante la lección anterior aprendimos a trabajar con arreglos utilizando índices y creamos una variablepara ir accediendo a sus valores mientras la increntábamos.

Ese concepto de crear una variable e incrementarla es la forma como se suele recorrer un arreglo de forma automática. ¿Y sabéis qué? Los bucles for son perfectos para ello, sólo tenemos que asumir que el contador del for es el índice del arreglo.

Haciendo eso podemos recorrer todos los elementos de un bucle de una vez.

Vamos a trabajar este concepto con un genial ejemplo donde partiremos de un arreglo con los diámetros de varios círculos:

var diametros = [4, 18, 2, 11, 9, 3, 16, 12, 1, 7];

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

function draw() {
  background(220);
}

Para dibujar el primer círculo accederíamos con el índice 0 al primer valor del arreglo:

function draw() {
  background(220);
  ellipse(200, 200, diametros[0], diametros[0]);
}

Ahora vamos a aplicar la técnica del for para recorrer todos los diámetros de arreglo y dibujar un círculo para cada uno:

function draw() {
  background(220);
  noFill();  // Desactivamos el relleno para que se vean todos
  for(var i=0;i<diametros.length;i++){
    ellipse(200, 200, diametros[i], diametros[i]);
  }
}

No se ve mucho el dibujo porque los diámetros son muy pequeños, pero se están dibujando todos los círculos de una vez.

Ahora viene la parte chula, vamos a crear una variables llamada factor que por defecto valdrá 1 y la multiplicaremos por los diámetros:

var diametros = [4, 18, 2, 11, 9, 3, 16, 12, 1, 7];
var factor = 1;

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

function draw() {
  background(220);
  noFill();
  for(var i=0;i<diametros.length;i++){
    ellipse(200, 200, diametros[i]*factor, diametros[i]*factor);
  }
}

Y ahora viene la magia, vamos a incrementar ese factor al hacer clic en el lienzo:

function mousePressed(){
  factor *= 2;
}

¿Habéis visto que efecto más chulo? Si en lugar de presionar nosotros el ratón incrementamos el factor automáticamente al final del draw...

function draw() {
  background(220);
  noFill();
  for(var i=0;i<diametros.length;i++){
    ellipse(200, 200, diametros[i]*factor, diametros[i]*factor);
  }
  factor *= 2;
}

Buenooo todo ocurre muy rápido, pero si modificamos el incremento del factor por un número muy muy pequeño ya veréis:

function draw() {
  background(220);
  noFill();
  for(var i=0;i<diametros.length;i++){
    ellipse(200, 200, diametros[i]*factor, diametros[i]*factor);
  }
  factor *= 1.01;
}

Si tenemos en cuenta que dentro del arreglo tenemos un diametro que vale 1 píxel, en el momento que el factor sea 400 es cuando ese círculo cerá tan grande como el lienzo. Si aprovechamos y en ese momento reiniciamos el factor a 1 tendremos un bucle infinito muy interesante:

var diametros = [4, 18, 2, 11, 9, 3, 16, 12, 1, 7];
var factor = 1;

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

function draw() {
  background(220);
  noFill();
  for(var i=0;i<diametros.length;i++){
    ellipse(200, 200, diametros[i]*factor, diametros[i]*factor);
  }
  factor *= 1.01;
  if (factor > 400) factor = 1;
}

Hipnotizante...