9. Objetos y arrays

9.4. Arrays y objetos

Ahora que sabemos utilizar los arrays, podemos hacer frente a las dificultades que se nos planteaban a la hora de crear múltiples objetos, ya que podemos también crear arrays de objetos. Creemos una clase Car con propiedades para su posición (un array para las coordenadas x e y), velocidad y tamaño. También añadiremos métodos para que se muevan, se paren y el método que los dibuje.

class Car {
  constructor(position, speed) {
    this.position = position;
    this.speed = speed;
    this.color = random(["lightblue", "pink"]);
    this.size = 50;
  }
  display() {
    rectMode(CENTER);
    fill(this.color);
    rect(this.position[0], this.position[1], this.size);
    fill(255);
  }
  move() {
    this.position[0] += speed;
  }
  checkBorder(){
    if(this.position[0] > width + this.size * 0.5){
      this.position[0] = -this.size * 0.5;
      this.position[1] = random(height);
    }
  }
  stop() {
   this.speed = 0;
  }
}

Ahora en otra pestaña podemos escribir el código de nuestro sketch principal, donde crearemos los distintos objetos de la clase Car.

En el setup() creamos mediante un bucle un total de diez coches con posiciones en (x, y) aleatorias y velocidad variable entre 1 y 3. En el draw() iteramos por el array de coches para llamar a los métodos display(), move() y checkBorders() de cada uno de los objetos y, por último, en keyPressed() volvemos a iterar por el array para llamar al método stop() de cada uno.

Otra manera en la que podríamos añadir objetos al array es mediante el método push(). Este método añade un nuevo elemento al final del array al que lo apliquemos. En el ejemplo anterior, podríamos querer que además de los objetos que aparecen al iniciarse el sketch pudiéramos añadir nuevos objetos al hacer clic con el ratón:

function mousePressed() {
   let mouseCar = new Car([mouseX, mouseY], random(1, 3));
   cars.push(mouseCar);
}

Añadiendo esta función a nuestro código principal, cada vez que hagamos clic con el ratón estaremos creando un nuevo objeto Car (en este caso, con las coordenadas del ratón) y añadiéndolo al array preexistente. Además de push() también podemos usar pop() para eliminar el último elemento de un array dado:

let names = ["John", "Mary"];
names.push("Tom");
console.log(names);  //Imprime ["John", "Mary", "Tom"];

let values = [3, 10, 20];
values.pop();
console.log(values);  //Imprime [3, 10];