Programación con funciones, clases y arreglos para artistas

Manipulando arreglos

Por último las tres acciones básicas que se pueden realizar sobre un arreglo son:

  • Añadir elementos.
  • Borrar elementos.
  • Modificar elementos.

Vamos a modificar el ejemplo de la lección anterior para ilustrar como funcionan estas acciones:

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.5);  // Importante que sea pequeño
}

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

Añadir elementos

Podemos añadir nuevos elementos al arreglo en cualquier momento haciendo uso de su método push.

Por ejemplo podemos generar un nuevo círculo y añadirlo al arreglo si presionamos presionar la tecla con la flecha arriba del teclado tal y como explican en la documentación de la función keyPressed:

function keyPressed() {
  if(keyCode == UP_ARROW) {
    print("Flecha arriba presionada")
  }
}

Esto tiene un inconveniente y es que las teclas sólo se detectan si préviamente hemos hecho clic en el lienzo. Sin embargo podemos forzar ese estado al empezar el sketch automáticamente:

// Esto simula que hacemos clic en el canvas
this.focus();

Con esto ya podemos crear nuestro círculo y agregarlo al arreglo sin presionar antes el lienzo:

function keyPressed() {
  if(keyCode == UP_ARROW) {  
    // Generamos un círculo
    var circulo = new Circulo(
      random(0,255), random(0,255), random(0,255), 50
    )
    // Lo añadimos al arreglo con push
    circulos.push(circulo);
  }
}

Por defecto se añadirá al final de arreglo y se irá dibujando automáticamente.

Por cierto sería útil dibujar un texto con el número de círculos:

function draw() {
  background(220);
  for (var circulo of circulos){
    circulo.draw();
  }
  // Dibujamos el número de círculos
  fill(0)
  textSize(25)
  text(circulos.length, 15, 35)
}

Borrar elementos

El borrado de elementos de un arreglo consiste en sacar esos elementos de arreglo. Existen diferentes métodos para hacerlo y los más básicos son:

  • pop(): Para extraer del arreglo su último elemento.
  • shift(): Para extraer del arreglo su primer elemento.
  • splice(indice, cantidad): Para extraer del arreglo una cantidad de elementos a partir de una posicion determinada.

Podéis elegir el que queráis dependiendo de vuestras necesidades, en nuestro caso simplemente borarremos el primer círculo del arreglo con shift al presionar la flecha abajo:

function keyPressed() {
  if(keyCode == UP_ARROW) {  
    // Generamos un círculo
    var circulo = new Circulo(
      random(0,255), random(0,255), random(0,255), 50
    )
    // Lo añadimos al arreglo con push
    circulos.push(circulo);
  } 

  else if (keyCode == DOWN_ARROW) {  
    // Borramos el primer círculo
    circulos.shift();
  }
}

Modificar elementos

Por último veamos como modificar algún valor de nuestros círculso dinámicamente, por ejemplo podríamos darles un tamaño aleatorio al hacer clic con el ratón.

Sólo tenemos que recorrer los objetos y modificar su diámetro:

function mousePressed(){
  var diametro = random(1, 100);
  for (var circulo of circulos){
    circulo.d = diametro;
  }
}

Este es el código final del ejemplo:

this.focus();

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);
}

function draw() {
  background(220);
  for (var circulo of circulos){
    circulo.draw();
  }
  // Dibujamos el número de círculos
  fill(0)
  textSize(25)
  text(circulos.length, 15, 35)
}


function keyPressed() {
  
  if(keyCode == UP_ARROW) {  
    // Generamos un círculo
    var circulo = new Circulo(
      random(0,255), random(0,255), random(0,255), 50
    )
    // Lo añadimos al arreglo con push
    circulos.push(circulo);
  } 
  
  else if (keyCode == DOWN_ARROW) {  
    // Borramos el primer círculo
    circulos.shift();
  } 
}
  
function mousePressed(){
  var diametro = random(1, 100);
  for (var circulo of circulos){
    circulo.d = diametro;
  }
}

Con esto llegamos al final de esta primera serie de programación para artistas utilizando la biblioteca p5.

No dudéis en acceder a mi servidor Discord y compartir conmigo y otros alumnos vuestros experimentos, me haría muy feliz saber que el curso os ha servido y lo estáis aprovechando para dar forma a vuestra imaginación.

Felicidades por haber llegado hasta aquí, un saludo y nos vemos por la academia.