How to train
2d Array In Function
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
