Hello. I am back and I am ready to
start another little series of videos inside a
larger series of videos, and the topic here is arrays-- an array in JavaScript. What is an array? Why do you want to use one? What's the syntax for an array? What kind of things can
you do with an array? And ultimately, I
have a goal with this. So if you remember recently,
in a previous video-- it was actually a couple
weeks ago when I recorded it, but who knows how
you're watching these-- I recorded a video where we
looked at making an object-- an object as this
collection of properties. This thing that maybe has an x
and a y and a color and a size, and then this idea
that you could put a function inside the object. So that thing that has a bunch
of properties could also-- you could issue
commands to it like move or draw yourself
or change color. And so if you can
get one object-- like this object,
which I'm now telling it to move and balance and
display itself as a circle-- if I could take
that single object, how could I easily duplicate
that object every time I, say, click the mouse? Click, click,
click, click, click. The idea here, and I
have this list of videos that I'd like to
make all the way up to number four
which will really go through all the pieces of this. So how does an array
even work to have a list of these objects? How do you then have
the object in the array? How do you deal with
making multiple copies of that object in the array? How do you deal with
adding the objects to the array one at a time? These are all the pieces
that I would like to get to, and then I have a few
other topics like clicking, how to interact with an
object by clicking or moving the mouse, or how to
have two objects interact with each other. So this is the full scope of
the videos I'd like to make. There are six of them. I'm hoping they'll each
be about 10 minutes. And I'm going to
get right started right now with the first
one-- what is an array? So let's move this
out of here, and I'm going to come over here
to my trusty whiteboard. It's very friendly to me. It talks to me because nobody-- I talk to a whiteboard now. That's what I do. I used to talk to the camera. Now I talk to the whiteboard. OK. So what is an array? Why do you want to use one? Well, let's dial ourselves
back to a happy, warm, and comfortable place. I could say something
like var num equals five. It's very high on
this whiteboard, but I think you can read it. This is comfortable. I have a variable, the name
I made up for it is num, and its value is five. So if I wanted to
have a second one, I could add a second
variable, but here's another way I could have a
second number that I'm storing. var nums equals square
bracket 5 comma 3 end square bracket semicolon. So an array is a list of
values, separated by commas, embedded inside of open
and closed square brackets. This is not that dissimilar,
strangely enough, to this idea we
have an object which is a collection of name
value pairs, right, inside curly brackets. So both of these
are collections-- lists in a way. Lists of name value pairs,
lists of just values. And that distinction,
I think, will become more and more clear. Even though it seems a
little confusing right now-- why would I use
one or the other-- as I start to show
you more and more uses of them in
different examples, you'll see what
that distinction is. But the key distinction right
now that's super important is that the order of this list-- the order of the
array-- is what matters. Elements in array have an index. They're the first element
or the third element or the last element or
the element in the middle. That ability to have
the elements in an order is the sort of crucial
key aspect of an array. So for example,
this is element-- well, it looks like it's
the first element, right, because it's the first
thing in the array and that's the second thing. But in programming, often
you have to start counting-- I'm stuttering here because I'm
afraid to tell you this news-- but you have to start
counting from zero. And actually, it's a wonderful
thing to count from zero. Everyone in lots of-- we should all just
count from zero. It brings joy to the
world, but it also brings a little
bit of confusion. So this is index zero, and
this is index number one. It's kind of not that
great of an example. Let's make a bigger array. 50, 71, 12-- I could put a negative number
in there-- negative 22. This element, now, has how
many-- this array, sorry, has how many elements? Four elements. What are its index values? Zero, one, two, three. So this is important-- an array
might have four elements in it, but the index values
go from zero to three. So the total number of elements
might be four, 10, 20, 100. If there's 100 elements,
the index values go from zero to 99. Let's practice that. So I have an array
with 10 things in it-- zero, one, two, three, four,
five, six, seven, eight, nine. If you count from zero,
you end with nine, you've got 10 things total. It seems silly to
keep saying that, but it's something
that you-- it's a mantra you repeat
to yourself to get used to this idea of counting
from zero with an array. So this is this index. Now, let's go and
put this syntax into an actual p5 example and
see what we might do with that. OK. I'm back over here now
and I'm at five minutes. That's good. Let's see how far I can get. So ignore this example. I'm making a new project. I'm going to move it
over here, and I'm going to save it as arrays one. OK. So at the top, I'm going to say
var nums equals 100, 25, 12, 72. So there are four values
in my array up there. And I'm going to make a canvas. That's 400, 400. And just for
comparison's sake, I'm going to add a
regular variable now that has the number 23 in it. And something that I might
do with a regular variable is just say ellipse at
100, 200, and I might use that variable for its size. So you can see here, I now have
this variable with the value 23. That variable is being used
for the width and height of the ellipse, and that
ellipse is drawn there with a width and
height of 23 pixels. So the next job that I
would like to do here is how do I get one of
the numbers from the array and use one of the numbers
from the array in something like the size of an ellipse,
location of the ellipse, the color of the ellipse? How do I pull values
out of an array. So that comes back over
here to the indices-- the index values. So if, for example,
this is the array-- var nums equals this. If in my code I ever
say nums, then I'm referring to the entire array. But it's not that often that you
refer to the array as a whole. More likely, you'd refer
to the individual elements of the array one at a time. So the way to do that is,
again, with square brackets. So if I say nums
index two, that means I'm referring to this
value, 12, and this evaluates to the number
12, just like num evaluates to the number five. So again, this is a
list of variables. Each one of these you refer to
the array name and its index. OK. Now, back over here,
we can now do that. So I can say let's draw a second
ellipse a little bit over, and let's draw it
at nums index two. Now, which one is index two? It's not the second
one in the list. It's zero, one, two. It's 12. Let's make it a little bigger. Let's make that one 46. That's a nice number. It's an age I will be someday-- some day kind of soon. Not that soon, but soon. Whatever. It doesn't matter. OK. So you can see this now I have
a second circle with a width and height of 46
pixels as opposed to the first circle with
a width and height of 23. Wonderful. Wonderful, wonderful, wonderful. OK. Oh, I forgot a
whole video which is I've got to look at how to
do this with a for loop, but that'll be the next video. So this is one example. And I think I'm going to make
another example right now and then we'll come back to
this one in the next video. So one of the things to
realize here that I think is exciting and
interesting about arrays is that this number
does not have to be the index value that
I'm using into the array. It doesn't have to be
a hard coded value. It could be a dynamic value-- something that's picked randomly
or through some algorithm. So let's take a look at that. And I'm going to say to
save this as arrays two, and I'm going to
change this to words. And I'm going to make some words
like rainbow and heart and-- what are some other nice words? Purple, I like, and friendship. And this is all I can think of. So I have an array. So first of all, the thing
that I'm emphasizing here is you can put
anything into an array. You can put text into an array,
numbers into array, objects into an array-- that's what
I'm getting at soon enough. So what might I do
with this array? Well, I might say,
all right, fill 255. Use the p5 text function. I want to draw some
text onto the screen. And I'm going to say draw-- for example, if I
just say draw rainbow onto the screen at 212-- and maybe I make it a little
bit bigger so we see it. 32 pixels the font size. You can see-- oops. I don't know where I put that. 200 pixels over. I meant to put it like 12
pixels over and 200 pixels down because-- there's the
word rainbow appearing in the sketch. Wonderful. Oh, look at this. I made a blue mass there. Oh, magic. So I hard coded rainbow here. Now, I want to pull
something from the array. So what I want to say is ah-ha. What I want is words index zero. I want that first
index into the array. There we go. I have rainbow. Now, if I change this to
two, I see the word purple. So the point that I'm
making is this number could be a variable. What if I say var x equals
zero and put index here? And now what if I say
function mousePressed index equals index plus one? Camera just went off, so
hopefully this one is not going to go off in a second. So what's happening now? The value of index is zero, so
I'm seeing words, index zero, I'm seeing rainbow. But as soon as I click the
mouse, index will become one and I should see heart. And then I should see
purple, and then I should see friendship,
and then I should see-- oh, an error message, right? So this is a key thing. No one's going to
save you if you try to access an element into
an array that doesn't exist. If I say words index
27, it doesn't exist. It's null or undefined or
some sort of JavaScript thing that doesn't exist
yet, and you won't be able to draw that onto the
screen and you'll get an error. So it's up to you to
build logic into your code to protect yourself. For example, I could
say, hey, you know what, if index equals four, maybe
I should reset index back to zero. And it's not four, right? Oh, yes it is four, right,
because zero exists, one exists, two exists-- zero exists, one
exists, two exists, three exists, but not four. So now if I run that, you'll
see it cycles back to zero every time I get to four. But what if I go up here and
add love into this array? So I don't ever see love because
I stopped myself at four, and now there are actually
five elements in the array. So how do I deal
with that problem? Well, one way to deal
with that problem would be to just change this
number four to the number five. But an interesting thing that
will come up again and again is that arrays also store
properties about themselves. So in addition to
be able to access individual elements
of the array, we can access other information
about the array itself, such as the current
length of the array. So if the length
actually can change as the program's running-- for example, what
if we got user input and started filling that array
with words from the user? So one thing I can do here
is actually dynamically check if the index equals the
length of the array, right? Remember, we're going up
by one, so if there's four, the valid indices are
zero, one, two, and three, but the invalid index is four. There are four elements,
but zero through three are the right index values. I have to repeat this to myself
because it hurts a little bit to have this little
minor point of confusion. OK. So let's test this
and see if this works. One, two, three. So what I might suggest to
you is, do this same thing. Make a list of words. What if you have them
picked randomly each time you run the sketch or each
time you click the mouse? Try to use an array of colors. Could you pick a random color
for a bunch of different shapes your drawing on the screen? So what's a kind of
list of information that you might use for an
element that you're drawing, and what's a way
that you might pick from that list-- either
one at a time or randomly or two at a time? Come up with a little
exercise for yourself. And in the next video,
what I will show you is how to march through
every element in the list. How would you display
all of the words? How would you use
all of the values for the size of the ellipse? OK. So this marks the end of this
first video about arrays, and there will be
more like the next one I'll record in just a minute. OK.
