train

9.15: 2D Arrays in JavaScript - p5.js Tutorial



Sharing buttons:

welcome to another p5.js JavaScript

video tutorials thingamabob that I'm

making I you might be wondering oh my

goodness that's the processing website I

thought this was a p5.js video well the

reason why I'm referencing in this is

that there is a nice tutorial on the

processing website I say it's nice but

maybe it's not whatever it's a tutorial

and it's about two-dimensional arrays

and you can sort of see if you're

working in a programming language like

Java that there's a very specific way to

define an array as two dimensions

because I say I want to have integers

and I'm gonna have not just one set of

square brackets meaning it's an array a

list of things I'm gonna have two sets

of square brackets meaning it's a

two-dimensional array but in JavaScript

there's it's a little bit weird and funk

funny and I don't really know how to do

it I mean I've kind of done it before

I'm gonna see what happens with this

video to talk about two-dimensional

arrays in JavaScript but I might

reference you this tutorial to look at

just sort of to get some context if you

want to take a look at it so first

though before I start looking at code

let's think about what what we mean what

do I mean when I'm talking about a

two-dimensional array so this is kind of

like a visualization of an array this

array has four spots in it it might have

numbers like four negative three seven

eight and each one of those spots has an

index zero one two three so I can

reference I could say give me you know

array index two and what will I get I

will get the value seven because that's

what's in array index two now in a lot

of programming scenarios your data

appears to you in your mind or in your

on your pencil a napkin sketch more like

this you know pixels look like this if

you're programming any kind of board

game that's a grid base type thing a

southern automata lots of things kind of

work like this in which case you kind of

want to think of columns and rows and

let's just to make them not the same

right so I might want to think of a spot

like this as three comma one and if this

were an array this would be array index

three index one so instead of a single

index into a linear one dimension

list I have to into indices one being

the columns and one being the rows and

they're the first one followed by the

second one but what is this really in

the computer's memory the thing that you

have to realize and be aware of is this

structure doesn't really exist like so

this is a nice way of us to draw B my

drawing skills are terrible but that

aside visualizing the grid is helpful

for our human brains to be understand it

but really what this actually is if I

were to do this is to say let's take

this array which has you know five

things in it and let's put it in another

array that has two things in it right

this is an array of two things and each

one of those things has five things in

it so a two dimensional array really in

the computer's memory is simply an array

of arrays and if I were to come back to

this particular oh I left that tutorial

two dimensional array shoot why do I

close that window if I come back to this

tutorial you can see the idea here that

this is a one dimensional array and

here's a two dimensional array which is

just really an array of a bunch of

arrays but you can kind of look at it

like this to think of it as a grid which

is very useful so how might you make

this work in JavaScript now let's go and

actually look at the code some

JavaScript code so I have a JavaScript

sketch which is doing really nothing

here and let's say what I want to do is

I want to have some amount of columns

like 10 and some amount of rows like 10

and I want to be able to say look

through all of the columns and all of

the rows and what I want to do is I want

to draw a rectangle I'm using some

hard-coded numbers here

but I want to draw a rectangle and I'm

going to say stroke zero fill 255 okay

so I don't have any array or

two-dimensional array at all whoa what

did I do wrong here look at that so

first I've got a problem here that I did

something wrong oh this has to be j j is

not defined this would also have to be j

thank you very much

i'm trying to get a nice nested loop so

i can see just the grid pattern so now

what i want to do is i want to have a

two-dimensional array which is a lookup

table which has a color for every single

one of these cells in this grid so i

want to be able to what i want to be

able to say is something like this fill

colors i j right i want to be able to

say there's some 2-dimensional array

structure that looks like this and you

know in the array red is here pink is

here purple is here right those colors

are stored in that two-dimensional array

so how do i create this structure well

the way that you create an array is like

this this is now that's creating an

empty array of javascript and you might

think okay well this is what i do this

does not work that does i don't even

know what let's see what sort of weird

error we get unexpected token so it's

just like that's just totally a syntax

error so that doesn't work what i can do

however this is a little bit crazy and

let me um comment this out for a second

and actually i'm just going to use the

console here to show you some

possibilities so i'm going to make a

variable called r which is an array okay

so that's now if i go here and just type

r we have an empty array now if I were

to say our index 0 equals 5 now you can

see that's the array it has one thing in

it if I were to say our index 1 is 15

now I can see the array has 5 and 15 in

it now let me make an array again now

look at this what if I say our index 0

equals an array

and our index one equals an array and

now what do I have I have a

two-dimensional array I have an array of

two arrays now those two arrays are

empty so they don't have anything in it

but if I had done our index 0 equals 1

comma 5 comma 9 and our index 1 equals

you know negative 3 comma 9 comma 15 now

I have to I have an array of two arrays

in it so this is now the data structure

it's really about creating an array and

each spot in that array or multiple

arrays this sort of explains the idea

but what's a nice elegant way of doing

that in code well there's a few

different approaches we could take

number one I could say in setup right I

I want to have this loop where I go

through all the columns in the rows oops

sorry I've got to comment this stuff

back in everything's gone out of crazy

whack okay so I now have this loop what

I could do is I could say for every

column colors index I is an empty array

right now let's look again I want to

keep that let's go to the sketch and

let's look at what colors is it's now an

array of a race but all those arrays are

empty so what can I do here in here I

could say colors index I which is that

array index J is random 255 so now if we

do this again and I look at what colors

is you can see I now have an array of an

array so and they all have a number in

it so this is now a two-dimensional

array an array of an array it's hard for

me to visualize it in the console the

way I want to sort of like think of it

as a matrix but we can use it as such

because now I could put this code back

and instead of having fill 255 I could

actually get those get those values from

the array and here we go and you can see

now every single one is pulling a color

from the array randomly so that's one

way of doing it let's think about

another

way of doing it another thing I could do

is if I know in advance I could say new

array calls and then I could also say

new array

oh and then I don't have to say this

here right because well hold on a sec I

lost my train of thought this gets

confusing right

I couldn't advance specify the size in

that case I know there's an array with a

number of columns and then I could say

here yeah yeah sorry and then I could

say colors index I is a new array with

the number of rows in that case I

wouldn't actually even have to put

anything in it in a way we could refresh

it I'm going to get some errors because

there's nothing in it

but you can see now the array is already

filled it's already sort of there has no

default values but I can use the I can

use the new array function to to kind of

specify the size in advance which is

just something to sort of see the other

thing that I might consider doing I kind

of like the way I had it before better

was sort of somehow less confusing to me

but there's another thing that I might

consider doing is I might consider

writing a function called something like

make 2d array and and give it the

arguments column and rows and then I

could say var a row R equals new array

columns and then for VAR I equals 0 is

less than R dot length I plus plus R

index I equals new array rows so this

would be kind of like a generic function

I think this is kind of a nice thing to

maybe have in your code which you could

just write a function that you give it a

width and a height essentially and it

just makes an array makes it array with

the right number of columns and then for

every single column it makes an array

with the right number of rows and so

then if I were to run this code and I

were to say things like make make 2d

array you know 10 comma 3 you can see oh

I didn't return it I got a

they returned that array you can see

that I'm automatically getting a

two-dimensional array I could say make

it you know 2 , you know 100 and you can

see I've got an array of 2 arrays with

100 so that's kind of useful to that

anywhere in your code then suddenly you

need um you need a particular two

dimensional rain I think this I just see

in the chat this this this particular

suggestion is coming up so ok so these

are some more about two-dimensional

arrays in JavaScript it's probably going

to be the thing that I would say if you

were looking for an exercise to try at

the end of this is fill your array and

and let's actually let's actually let's

actually do this sorry I'm going to I'm

going to do this I'm going to say now

colors equals make 2d array calls rows

and just make sure this still works so

that still works so now I've kind of

like made this generic function that I

can use I think that's pretty useful and

I was going to say for you what I might

think about doing is instead of just

saying random 255 here how could you

make a cell object or an optic what

would you do if you have a

two-dimensional array of objects what

might you store in those objects that

might be an interesting thing to think

of yes and there's some other

suggestions in the chat of how you could

use different data types for the array

and it can get filled automatically with

zeros and stuff like that but there you

know those are sort of a side comment so

hopefully this helps you and that you'll

be able to use this function to make a

2d array in your p5 GS or other

JavaScript project thanks for watching

see you soon