Programación con funciones, clases y arreglos para artistas

Definición y uso

Hasta ahora hemos utilizado datos como números, textos y objetos, pero siempre individualmente. Lo que vamos a ver en esta última sección del curso es una cómo crear unas estructuras para almacenar múltiples datos llamadas arreglos, o en inglés arrays..

Un arreglo consiste en un listado que contiene datos separados por comas, como números, textos u objetos.

En la práctica este concepto se ve muy bien con un sencillo ejemplo:

var colores = ["negro", "azul", "verde", "amarillo", "rojo"]

function setup() {
  createCanvas(400, 400);
  print(colores);  // mostramos los valores
}

function draw() {
  background(220);
}

Como véis los arreglos se definen entre corchetes y contienen los datos separados por comas, en nuestro caso es un arreglo con cadenas de texto.

Muy bien tenemos una lista de colores, ¿qué utilidad tiene? Pues por ejemplo que podemos acceder a un elemento en concreto utilizando índices.

Utilizando índices

Un índice hace referencia a una posición del arreglo, siendo 0 la primera posición:

  • 0 => "negro"
  • 1 => "azul"
  • 2 => "verde"
  • 3 => "amarillo"
  • 4 => "rojo"

Podemos acceder al dato almacenando en una posición concreta haciendo referencia al índice entre corchetes:

var colores = ["negro", "azul", "verde", "amarillo", "rojo"]

function setup() {
  createCanvas(400, 400);
  print(colores[0]);
  print(colores[1]);
  print(colores[4);
}

function draw() {
  background(220);
}

Vamos a dibujar con la función text de p5 el primer color de nuestro arreglo:

var colores = ["negro", "azul", "verde", "amarillo", "rojo"]

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

function draw() {
  background(220);
  textSize(24);
  text(colores[0], 100, 100);
}

¿Cuál es la gracia de todo esto? Pues que ese índice no tiene porqué ser un valor literal, pueed ser una variable:

var colores = ["negro", "azul", "verde", "amarillo", "rojo"]

var indice = 0;  // creamos un índice

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

function draw() {
  background(220);
  textSize(24);
  text(colores[indice], 100, 100);
}

Si ahora definimos un evento de clic y aumentamos ese índice deberíamos ser capaces de ir dibujando los diferentes valores, pues estaremos haciendo referencia a posiciones diferentes dentro del arreglo:

var colores = ["negro", "azul", "verde", "amarillo", "rojo"]

var indice = 0;  // creamos un índice

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

function draw() {
  background(220);
  textSize(24);
  text(colores[indice], 100, 100);
}

function mousePressed(){
  indice++;
}

¿Qué os parece?

Evidentemente el último elemento del arreglo es el color "rojo", así que una vez nuestro índice supera esa posición ya no dibuja nada.

Sin embargo nosotros podríamos añadir una condición para reiniciar el indice a 0 en caso de que se supere el número de elementos del arreglo:

var colores = ["negro", "azul", "verde", "amarillo", "rojo"]

var indice = 0;  // creamos un índice

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

function draw() {
  background(220);
  textSize(24);
  text(colores[indice], 100, 100)
}

function mousePressed(){
  indice++;

  // Como empezamos a contar por 0 el último índice es 1 menos que el número de elementos
  if (indice > 5 - 1){
  	indice = 0;
  }
}

Ahora al llegar al final reiniciamos el índice así que vuelve a empezar desde el principio.

Por cierto, existe una forma de conseguir la longitud de un arreglo automáticamente para no tener que contar los elementos a mano:

function mousePressed(){
  indice++;

  // Como empezamos a contar por 0 el último índice es 1 menos que el número de elementos
  if (indice > colores.length - 1){
  	indice = 0;
  }
}