p5: Arrays

An array is a set of data stored under the same name. They are like variables with multiple compartments.
-the array elements are ordered and you can access them through an index, their numerical position, e.g. assignment arrayName[4] = 2;
-each element of the array behaves exactly like a variable, it can be read, written etc.
-the indices start from 0 so the first element is arrayName[0]. In an array with 9 elements the last element will be arrayName[8].
-the elements of an array belong to the same type (numbers, strings)
-arrays can have many dimensions, a 2d array is akin to a table/spreadsheet. We won’t really cover these for now.

Let’s see when it makes sense to use arrays.
We already know how to “move” a shape by storing the coordinates in a global variable:


var xpos;
var ypos;

function setup() {
createCanvas(400, 400);
xpos = width / 2;
}

function draw() {
background(50);
noStroke();
rectMode(CENTER);
fill(255);

rect(xpos, ypos, 50, 25);
ypos += 1;

}

function mousePressed() {
xpos = mouseX;
ypos = mouseY;
}

If you wanted to move multiple rectangles you could create multiple variable but it get unwieldy pretty quickly. So we use arrays in combination with for loops to store and update all these y coordinates:


var rectY = [0, 15, 30];

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

function draw() {
background(50);
noStroke();
rectMode(CENTER);
fill(255);
for (var i = 0; i < rectY.length; i++) {
rect((i + 1) * 100, rectY[i], 50, 25);
rectY[i] += 1;
}
}

This is the declaration of the array. You are creating and assigning values to each slot:

var rectY = [0, 15, 30];

All arrays have a length attribute that tells you how many items there are in the array. You can use it to cycle through the array in a for the loop:

for (var i = 0; i < rectY.length; i++) 

When drawing each rectangle I arrange their x position based on the i variable and access their y position from the array:

rect((i+1)*100, rectY[i], 50, 25);

Like variables I can modify the value of each element, in this case I’m increasing them by one unit

rectY[i] += 1;

Make sure you don’t try to access an element beyond an array’s length, most programming languages really hate it.

Now try to create an array for the x coordinates and move the rectangles sideways as well.

Adding elements 

In many cases you won’t know exactly how many object you’ll need to move (imagine bullets or raindrops). In javascript the elements of an array can be added dynamically, that is when the program is running. Below is rectY.push(0);.
You can even start with an empty array:


var rectY = [];
function setup() {
createCanvas(400, 400);
}
function draw() {
background(50);
noStroke();
rectMode(CENTER);
fill(255);
for (var i = 0; i < rectY.length; i++) {
rect(200, rectY[i], 50, 25);
rectY[i] += 1;
}
}
function mousePressed() {
rectY.push(0);
}

The problem here is that I keep adding elements without ever getting rid of them. This eventually will make the program run slower, it’s considered a “memory leak”.

You can dynamically delete elements with arrayName.pop() (deletes the last element) or with  arrayName.splice(position, 1) (more info here).
We’ll introduce objects and array like structures later that deal with these issues.

Examples from Allison Parish excellent tutorial

Array of strings and randomization
This example picks a random string among the ones in the array and visualizes it with text.


var strings = ["rock", "paper", "scissor"];

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

}

function draw() {

}

function mousePressed() {
textAlign(CENTER, CENTER);
textSize(50);

background(245);
var rnd = floor(random(0, strings.length));
text(strings[rnd], width/2, height/2);
}

Array of images
Arrays come handy when you need to store a large number of assets

Assets here creatures.zip
full example here


var creatures = [];

function preload() {

creatures.push(loadImage("assets/asterisk.png"));
creatures.push(loadImage("assets/circle.png"));
creatures.push(loadImage("assets/cloud.png"));
creatures.push(loadImage("assets/ghost.png"));
creatures.push(loadImage("assets/rectangle.png"));

}

function setup() {
createCanvas(400, 400);
imageMode(CENTER);
mousePressed();
}

function draw() {

}

function mousePressed() {
background(245);
var rnd = floor(random(0, creatures.length));
image(creatures[rnd], width/2, height/2);
}