Programación con funciones, clases y arreglos para artistas

Acceso sin índices

En esta pequeña sección vamos a ver otra forma de acceder a los elementos de un objeto sin necesidad de utilizar índice, sólo una variante del for llamada for .. of:

var numeros = [100, 150, 300, 500]

function setup() {
  createCanvas(400, 400);
  for (var numero of numeros){
    print(numero); 
  }
}

function draw() {
  background(220);
}

La gracia de este método es que se recorren los elementos automáticamente mientras se almacenan en la variable que definimos, en nuestro caso numero.

Esta forma hace que trabajar con arreglos de objetos sea muy cómodo, por ejemplo podemos crear nuestra propia clase Circulo y crear varias instancias en un arreglo para dibujarlas todas en cada fotograma:

class Circulo {
  constructor(r,g,b,d){
    this.r = r;
    this.g = g;
    this.b = b;
    this.d = d;
  }
  
  fill () {
    fill(this.r, this.g, this.b);
  }
  
  draw () {
    this.fill();
    ellipse(random(0,400), random(0,400), this.d, this.d);
  }
}

var circulos = [
  new Circulo(235, 0, 0, 50),
  new Circulo(0, 235, 0, 50),
  new Circulo(0, 0, 235, 50)
]

function setup() {
  createCanvas(400, 400);
  frameRate(1);  // Importante que sea bajo
}

function draw() {
  background(220);
  for (var circulo of circulos){
    circulo.draw();
  }
}

En la última lección modificaremos un poco este ejemplo para explicar algunas cosas más.