5:0 Arrays

Arrays are a list, lets explore them.

What is an array

An array is a list of things. Its a type of variable that contains an ordered list of strings (text), numbers, variables, objects, other arrays... anything that you might want to store in code in an ordered list.

let myArray = ["first thing", 2, "an other thing", 3];

Why use arrays

Any time we want to have a list of things arrays are perfect. You might want a list of words that you randomly choose. Perhaps you want to store positions of particles.

Lets look at a simple list of words:

// Richard Serra's verbs
let verbs = ["to roll", "to crease", "to fold", "to store", "to bend", "to shorten", "to twist"];

// p5 can select a random item from an array like this
let verb = random(verbs);

In the above example we've used the artist Richard Serra's verbs. The p5 random() function can easily select a random verb for us.

How can we use arrays

Once you make an array JavaScript give us lots of built in functions that we use. Here's a couple of different help pages you might find useful:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array

https://www.w3schools.com/js/js_array_methods.asp

To use functions built into an array you put a dot between your array variable name and the function. For instance to see how many things you have in an array you use length:

let myArray = ["first", "second", "third"];

console.log(myArray.length);
// this will output 3

Accessing items in arrays

To access an item in its array you do the following:
myArray[0]

This would get the first item in an array. You use square brackets [ ] and pass in the index of the array item. The index is simply the number of that item in the array, the first item is 0, the second item 1 and so on.

let myArray = ["banana", "apple", "grape"];

console.log(myArray[0]); // banana

You can put arrays in arrays, this is useful for positions for instance. To access an item in an array, within another array you simply chain the square brackets like so:
myArray[0][1]

This would get the first item in myArray, then the second item in the array within that array. Lets look at the code:

// imagine we are storing x, y positions of things
let myPositions = [[100,200],[50, 60], [300, 600]];

// get the x and y positions of the first item
let x = myPositions[0][0]; // 100
let y = myPositions[0][1]; // 200

Example - using arrays to store positions

Lets say we want to make some circles in a loop and store all of those positions in order to do something with them.

First of all lets make an empty array:

let circles = []

Now lets make a bunch of randomly placed circles and store their positions. We use push() to add something to the end of an array like so:

let circles = [];

function setup(){
  for(let i = 0; i < 10; i++){
    // make some random x, y points and put them in an array
    let x = random(100);
    let y = random(100);

    // each iteration store x and y in an array within circles
    circles.push([x,y])
  }
}

Now we can draw the circles by iterating through the array. We can use length to see how many things are in the array:

function draw() {
  for(let i = 0; i < circles.length; i++){
    circle(circles[i][0], circles[i][1], 10)
  }
}

https://editor.p5js.org/amcc/full/4N3l4wpaw