Using Arrays to Store Data
Data For Designers
Data with Designers - Overview
The Basics Of Arrays
Understanding how to create and navigate in an array
-
Using Arrays with Functions
Use arrays to create stored states of values
-
Using Arrrays Built-in Methods
Tie all this knowledge together with built in array methods
Arrays
An array is a way to store multiple items of data in memory so that they are accessed using a single variable. Each item of data in an array is given an index that can be used to refer to it. Arrays can be used whenever a program needs to store multiple copies of the same type of data in one place. For this class, we often use them to store x and y coordinates for a series of shapes on the screen. It allows us to animate large numbers of shapes using the same algorithms.
put array analolgy here
Creating Arrays
Declaring an array is a similar process to what we have done with our other varaibles. The name of the variable only needs to equal square brackets, indicating to javascript that this is an array.
In this example array1 is an empty list and array2 has 5 numbers saved into it. Arrays can be expanded at will in javascript, so if your list of numbers gets bigger you can add it to the list.
// Declare an empty array like this
let array1 = [];
// It is possible to assign the values directly in an array when declaring it
let array2 = [1, 2, 3, 5, 7];
After saving these numbers we can access them using a slightly different syntax that we are used to. For instance if I wanted to access the first number in array2 the syntax would look like this.
// This accesses the first position in our array which is 1
array2[0];
// This gives us the last position in our array which is 7
array2[4];
Understanding the Boundaries of Arrays
If you try to access a member of an array that lies outside the array boundaries, you will most likely get an ArrayIndexOutOfBoundsException error. This just means that you are tyring to access a position of an array that doesn't exist currently. Javascript is fairly forgiving with these errors which makes them harder to spot.
// Here we decare an array with five values
let data = [19, 40, 75, 76, 90];
// We access positions in our array using this data[index]
console.log(data[0]); // Prints 19 to the console
console.log(data[2]); // Prints 75 to the console
console.log(data[5]); // ERROR! The last position of this array is 4
//Remember that the array index starts from 0
Initialising Arrays With Loops
We can use us for loops to fill our array with values efficiently if we want to run a constant algorithm to fill our array this is the best method.
// Declare an empty array
let data = [];
function setup() {
createCanvas(windowWidth, windowHeight);
strokeWeight(5);
// We can use our for loop to save 20 random numbers in our array
for(let i = 0; i < 20; i++) {
// Gve our array random numbers between 0 and width
data[i]=random(width);
}
}
function draw() {
background(230);
for (let i=0; i < data.length; i++) {
// The for loop starts at 0 so we can loop through
// all of the indexes of the array
line(data[i], 0, data[i], height);
}
}
Array Length
The length attriubute returns the number of elements in an array. This is partically helpful when working with an array that is changing size and your algorithm needs to know the size of that array at all times. For loops are the most common use cases for checking the length of an array.
Example Syntax
let data1 = [19, 40, 75, 76, 90];
let data2 = [19, 40];
let data3 = [19, 40, 75, 76, 90, 25, 59];
console.log(data1.length); // Prints "5" to the console
console.log(data2.length); // Prints "2" to the console
console.log(data3.length); // Prints "7" to the console
Use Case
let myArray = [100,200,300];
// Loop will only run as many times as
// The length of the array
for(let i = 0; i < myArray.length; i++) {
ellipse(myArray[i], height/2, 50);
}
Array Push
The
push() function expands an array by adding another
position to the very end of the array.
Here is an example of the syntax
let nums = [5, 6];
nums.push(7); // Add "7" to the end
console.log(nums); // Prints "5, 6, 7"
// 7 is added to the end of the array
Array Push Example
// Declare and fill the array with values
let xPos = [];
let yPos = [];
let colors = [];
function setup() {
createCanvas(windowWidth, windowHeight);
background(230);
// Here we fill our array with our inital values
xPos = [width/2-200, width/2, width/2+200];
yPos = [height / 2, height / 2, height / 2];
colors = [color(255, 0, 0, 200), color(0, 255, 0, 200), color(0, 0, 255, 200)];
noStroke();
}
function draw() {
background(230);
for (let i = 0; i < xPos.length; i++) {
fill(colors[i]);
ellipse(xPos[i], yPos[i], 50);
}
}
function mousePressed() {
// When the mouse is pressed the array is filled with new random values
xPos.push(random(100, width-100));
yPos.push(random(100, height-100));
colors.push(color(random(255), random(255), random(255)));
}
Array Splice
The
splice() function allows us to make edits to an array.
We can chose a position to insert new data into the array or we can
delete data. If numbers are deleted or replaced then the replaced
numbers are returned by the funciton which can be saved into a
variable.
This is a javascript method and is not in the p5 reference. More Info
array.splice(positionToEdit, positions to overwrite, new value);
let numbers = [25, 40, 10, 5];
numbers.splice(1, 0, 200); // inserts at 1st index position
console.log(numbers);
// expected output: Array[25, 200, 40, 10, 5]
numbers.splice(4, 1, 20);
// replaces 1 element at 4th index
console.log(numbers);
// expected output: Array[25, 200, 40, 10, 20]
Array Splice Example
In this example we are using splice to delete the last position in the array. When we delete the last value in the xPos array it directly affect how many times the for loop is run and therefore how many ellipses are drawn to screen. This is because the for loop which runs in the draw loop is based off the length of the xPos array.
// Declare and fill the array with values
let xPos = [];
let yPos = [];
let colors = [];
function setup() {
createCanvas(windowWidth, windowHeight);
background(230);
// Here we fill our array with our inital values
for(let i = 0; i < 20; i++) {
xPos[i]=random(100, width - 100);
yPos[i]=random(100, height - 100);
colors[i]=color(random(255), random(255), random(255));
}
noStroke();
}
function draw() {
background(230);
for (let i=0; i < xPos.length; i++) {
fill(colors[i]);
ellipse(xPos[i], yPos[i], 50);
}
}
function mousePressed() {
// Here we are splicing at the last position of the array
// Remember that this is always one less than the acutal length of the
// array because arrays start from zero
xPos.splice(xPos.length-1, 1);
yPos.splice(yPos.length - 1, 1);
colors.splice(colors.length - 1, 1);
}
Movement Use Cases for Arrays
A common use case for an array is when we want to save multiple variables that are all related to the same thing. This could be x and y values for ellipses on the screen. This is particularly helpful when we want to update all of these values over time using the same method. For example, having ellipses that all start at a different point but get updated in the same way.
// Declare an empty array
let xPos = [];
let yPos = [];
function setup() {
createCanvas(windowWidth, windowHeight);
// We can use our for loop to save 20 random numbers in our array
for(let i = 0; i < 20; i++) {
// Initalise our positions with random numbers
xPos[i]=random(width);
yPos[i]=random(50,height-50);
}
}
function draw() {
background(230);
for(let i=0; i < xPos.length; i++) {
// We use our new array with our ellipses
ellipse(xPos[i], yPos[i], 50);
// We can run a test for all of the numbers in an array
if(xPos[i] < width + 25) xPos[i]+=2;
else xPos[i]=-25;
}
}