Array

Array, [] (array access), new, Array.length
append(), shorten(), expand(), arraycopy()

En programación un array es un conjunto de elementos almacenados bajo el mismo nombre. Un array puede ser creado de cualquier tipo de datos, y cada elemento puede ser individualmente asignado y leído. Los arrays pueden ser de números, caracteres, valores booleanos, frases…

Un array puede almacenar: los vertices de de una superficie compleja, las últimas teclas pulsadas en el teclado o valores que se leen de un fichero externo.

Tenemos 5 variables almacenadas en un array de numeros enteros int (1919, 1940, 1975, 1976, 1990) en lugar de definir 5 variables independientes. Por ejemplo el array “dates” que almacena la siguiente secuencia:

dates	1919	1940	1975	1976	1990
	[0]	[1]	[2]	[3]	[4]

Los elementos del array se comiezan a numerar con 0, lo cual puede ser confuso al principio, el primer elemento del array ocupa la posición 0 y el segundo la posición 1, la última posición del array se calcula restando 1 a la longitud del array length. En el ejemplo el ultimo elemento es la posición [4] porque hay 5 elementos en el array.

El array hace más fácil el trabajo, en nuestro caso vamos a dibujar una estrella y demostrar los beneficios de usar arrays.

Construimos los array de diferente forma, creando uno para cada punto o sólo dos array, uno para cada tipo de coordenadas del punto, las x y las y:

int[] x = { 50, 61, 83, 69, 71, 50, 29, 31, 17, 39 }

int[] y = { 18, 37, 43, 60, 82, 73, 82, 60, 43, 37 }

el dibujo de la estrella sería:

int[] x = { 50, 61, 83, 69, 71, 50, 29, 31, 17, 39 };
int[] y = { 18, 37, 43, 60, 82, 73, 82, 60, 43, 37 };
beginShape();
// leemos el array con un for() para dibujar los puntos
for (int i = 0; i < x.length; i++) {
vertex(x[i], y[i]);
}
endShape(CLOSE);

El uso de los arrays

Los array se declaran como cualquier otro dato pero se distinguen por usar corchetes cuando se declara el array. El tipo de dato almacenado debe ser especificado

Despues de declararse el array debe ser creado con la palabra “new.” Esto sirve para que la memoria se alojada en un espacio de la memoria. Después de crearlo, el array puede ser asignado. Hay diferentes maneras de declarar, crear y asignar un array, en los siguientes ejemplos veremos esas diferencias.

int[] data; // Declara
void setup() {
size(100, 100);
data = new int[5]; // Crea
data[0] = 19; // Asigna
data[1] = 40;
data[2] = 75;
data[3] = 76;
data[4] = 90;
}

int[] data = new int[5]; // Declara, crea
void setup() {
size(100, 100);
data[0] = 19; // Asigna
data[1] = 40;
data[2] = 75;
data[3] = 76;
data[4] = 90;
}

int[] data = { 19, 40, 75, 76, 90 }; // Declara, crea, asigna
void setup() {
size(100, 100);
}

El element de un array es asignado usando el nombre de la variable seguido entre corchetes el numero de la posición.

int[] data = { 19, 40, 75, 76, 90 };
line(data[0], 0, data[0], 100);
line(data[1], 0, data[1], 100);
line(data[2], 0, data[2], 100);
line(data[3], 0, data[3], 100);
line(data[4], 0, data[4], 100);

La longitud del array “length” es el número de elementos de un array, el mismo ejemplo anterior con un for() quedaría.

int[] data = { 19, 40, 75, 76, 90 };
for (int i = 0; i < data.length; i++) {
line(data[i], 0, data[i], 100);
}

Una estructura for tambien se puede usar para poner datos dentro de un array. Calculas una serie de números y asignas cada valor en un elemento del array. En el siguiente ejemplo se almacenan valores con una fución del seno con sin() en un array y los recuperamos para dibujar líneas.

float[] sineWave = new float[width];
for (int i = 0; i < width; i++) {
// crea un array con valores del seno sin()
float r = map(i, 0, width, 0, TWO_PI);
sineWave[i] = abs(sin(r));
}
for (int i = 0; i < sineWave.length; i++) {
// dibuja líneas con el color leido del array
stroke(sineWave[i] * 255);
line(i, 0, i, height);
}

Almacenar las coordenadas de muchos elementos es otra forma de usar arrays.

En el ejemplo siguiente el array  x[] almacena las coordenadas x para cada uno de los 12 elementos del array, y el array speed[] almacena un valor de velocidad correspondiente a cada uno. Modificando el numero de líneas variamos el número de elementos que mostramos en la pantalla.

int numLines = 12;
float[] x = new float[numLines];
float[] speed = new float[numLines];
float offset = 8; // espacio entre líneas
void setup() {
smooth();
strokeWeight(10);
for (int i = 0; i < numLines; i++) {
x[i] = i; // posición de inicio
speed[i] = 0.1 + (i / offset); // Velocidad de inicio
}
}
void draw() {
background(204);
for (int i = 0; i < x.length; i++) {
x[i] += speed[i]; // guarda la posicion de la línea
if (x[i] > (width + offset)) {
x[i] = -offset * 2;
}
float y = i * offset; // calcula la coordenada y
line(x[i], y, x[i]+offset, y+offset); // Dibuja la línea
}
}

Almacenando datos del ratón

Un array puede usarse para guarder datos del ratón. Las variables pmouseX y pmouseY, guardan las coordenadas del cursor en el frame anterior, en cada frame estas variables son remplazadas por los nuevos valores y se pierden los valores anteriores, Crear un array es la manera más rápida de almacenar la historia de esos valores.

En el siguiente ejemplo se almacenan los últimos 100 valores (el ancho de la ventana) y mostrados en la ventana como una línea.

int[] y;
void setup() {
size(100, 100);
y = new int[width];
}
void draw() {
background(204);
// Desplaza los valores a la derecha
for (int i = y.length-1; i > 0; i--) {
y[i] = y[i-1];
}
// Añade un nuevo valor al principio del array
y[0] = constrain(mouseY, 0, height-1);
// Muestra cada par de valores como una línea
for (int i = 1; i < y.length; i++) {
line(i, y[i], i-1, y[i-1]);
}
}

Aplica el mismo código simultaneamente a mouseX y mouseY y se almacena la posición del cursor. Mostrando esos valores creamos una estela detrás del cusor.

int num = 50;
int[] x = new int[num];
int[] y = new int[num];
void setup() {
size(100, 100);
noStroke();
smooth();
fill(255, 102);
}
void draw() {
background(0);
// Desplaza los valores a la derecha
for (int i = num-1; i > 0; i--) {
x[i] = x[i-1];
y[i] = y[i-1];
}
// Añade un nuevo valor al principio del array
x[0] = mouseX;
y[0] = mouseY;
// Dibuja los círculos
for (int i = 0; i < num; i++) {
ellipse(x[i], y[i], i/2.0, i/2.0);
}
}

El siguiente ejemplo, es igual que el anterior pero se usa una técnica mas eficiente con el operador módulo %, es aconsejable su uso con arrays especialmente largos que podrían relentizar el programa.

int num = 50;
int[] x = new int[num];
int[] y = new int[num];
int indexPosition = 0;
void setup() {
size(100, 100);
noStroke();
smooth();
fill(255, 102);
}
void draw() {
background(0);
x[indexPosition] = mouseX;
y[indexPosition] = mouseY;
indexPosition = (indexPosition + 1) % num;
for (int i = 0; i < num; i++) {
int pos = (indexPosition + i) % num;
float radius = (num-i) / 2.0;
ellipse(x[pos], y[pos], radius, radius);
}
}

Funciones de los Array

Processing provee de un conjunto de funciones que facilita la gestion de los datos de un array. Como es la función append() para poder añadir nuevos datos y devolver un nuevo array

String[] trees = { "ash", "oak" };
trees = append(trees, "maple"); // Añade "maple" al final
print(trees); // escribe en la consola "ash oak maple"
println();
// Añade "beech"al final del array trees y crea un nuevo array que almacena este cambio
String[] moretrees = append(trees, "beech");
print(moretrees); // escribe en la consola "ash oak maple beech"

La función shorten() borra el último elemento del array:

String[] trees = { "lychee", "coconut", "fig"};
trees = shorten(trees); // Borra el último elemento del array
print(trees); // Escribe en la consola "lychee coconut"
println();
trees = shorten(trees); // Borra el último elemento del array
print(trees); // Escribe en la consola "lychee"

La función expand() incrementa el tamaño de un array, doblando su tamaño.

En el siguiente ejemplo salvamos una nueva posición del valor mouseX en cada frame, cuando el array se llena se duplica automáticamente.

int[] x = new int[100]; // Array para almacenar las coordenadas x del ratón
int count; // Almacena el número de posiciones del array
void setup() {
size(100, 100);
}
void draw() {
x[count] = mouseX; // Asigna una nueva coordenada x al array
count++; // Incrementa el número de posiciones
if (count == x.length) { // si el array esta lleno,
x = expand(x); // duplica el tamaño de valores
println(x.length); // Escribe en la consola el nuevo tamaño
}
}

Para copiar elementos de una array a otro, se usa una función especial o se puede copiar cada elemento individualmente. La función arraycopy() function es la mas manera más eficiente de copier el contenido entero de de un array a otro.

El primer valor es el nombre del array que pretende copiarse y el Segundo el nombre del array donde se va a copiar. Ambos arrays deben ser del mismo tamaño.

String[] norte = { "Asturias", "Cantabria", "Galicia" };
String[] sur = { "Andalucía", "Murcia", "Extremadura" };
arraycopy(norte, sur); // Copia los valores desde el array norte a sur
println (sur); // Escribe en a consola "Asturias Cantabria Galicia"

a