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.