WEBVTT
00:00:01.320 --> 00:00:04.813
So far, we've seen how to create
an array and access it.
00:00:04.813 --> 00:00:08.727
Just like other variables, however,
one of the really cool things about arrays
00:00:08.727 --> 00:00:12.560
is the way we can change them dynamically
while a program is running.
00:00:13.206 --> 00:00:16.124
OK, let me just show you
what I mean by this.
00:00:16.124 --> 00:00:17.916
So here we have this program
00:00:17.916 --> 00:00:21.563
that displays Hopper
holding some balloons; super cute.
00:00:21.563 --> 00:00:25.407
And so how it works is that we have
this xPositions array
00:00:25.407 --> 00:00:30.010
that has two numbers in it that say
where we want the balloons at.
00:00:30.010 --> 00:00:32.331
And then down here we have this loop,
00:00:32.331 --> 00:00:35.688
and this loop goes through
every element in that array.
00:00:35.688 --> 00:00:40.473
And for each of them, it draws a line
from the "x" down to Hopper's hand,
00:00:40.473 --> 00:00:45.651
and then draws an ellipse at the "x"
that's 30x40 pixels,
00:00:45.651 --> 00:00:47.738
and that's our balloon.
00:00:47.738 --> 00:00:51.418
Okay, cool.
So now that we see how it works,
00:00:51.418 --> 00:00:54.242
we know that if we want
to have another balloon show up,
00:00:54.242 --> 00:00:58.807
we can just add a number
to this array, right? Like 300.
00:00:58.807 --> 00:01:03.117
Beautiful. Now we've got three balloons
for a happy Hopper.
00:01:03.117 --> 00:01:08.880
But let's say we wanted to give a user
that doesn't know how to code
00:01:08.880 --> 00:01:10.889
the ability to add new balloons.
00:01:10.889 --> 00:01:13.387
So we wanted to give the program to a user
00:01:13.387 --> 00:01:16.639
and say, "Hey, you can click
wherever you want the balloon,
00:01:16.639 --> 00:01:20.674
and it will show up."
Wouldn't that be cool? I think so.
00:01:20.674 --> 00:01:23.927
So, how should we do this?
00:01:23.927 --> 00:01:26.325
So we want our program
to be changing over time, right?
00:01:26.325 --> 00:01:30.605
Every time the user clicks,
a balloon is going to show up there.
00:01:30.605 --> 00:01:35.097
So let's start off by moving everything
into a draw function
00:01:35.097 --> 00:01:37.244
so that it's easy to change over time.
00:01:37.244 --> 00:01:42.620
So we'll just move this down here
and indent this here. OK, great.
00:01:43.341 --> 00:01:48.620
So now we want to check and see
is the user pressing the mouse right now?
00:01:48.620 --> 00:01:53.190
Well we can do that with our "if".
So if mouse if pressed,
00:01:53.828 --> 00:01:56.881
and then we're going to do something.
So what are we going to do?
00:01:56.881 --> 00:02:01.686
If the mouse is pressed, then we want
to somehow add a number to this array.
00:02:01.686 --> 00:02:04.521
And let's make this
just two elements again. Ok.
00:02:04.521 --> 00:02:08.263
So we want to add a number
to this array somehow.
00:02:08.263 --> 00:02:10.958
Well I'll show you one way
we could do this.
00:02:10.958 --> 00:02:17.610
So we can say xPositions[2] = mouseX;
00:02:18.614 --> 00:02:21.623
Alright, and let me just
show you that this works.
00:02:22.430 --> 00:02:26.740
I clicked, and ta-da! I got a balloon!
So what did this do?
00:02:26.740 --> 00:02:31.582
This said, xPositions[2] said
find this array,
00:02:31.582 --> 00:02:34.539
and find the element in the 2 spot,
00:02:34.539 --> 00:02:38.214
and remember that's the third element
because our arrays are zero-based.
00:02:38.214 --> 00:02:40.503
And if you look,
there's no third element, right?
00:02:40.503 --> 00:02:42.449
There's nothing in that spot.
00:02:42.449 --> 00:02:45.739
So it says find that,
and then put mouseX in it.
00:02:45.739 --> 00:02:49.539
Well since there was nothing there,
then it goes from being nothing
00:02:49.539 --> 00:02:51.292
to being mouseX.
00:02:51.292 --> 00:02:54.664
And so now our array is three items long,
00:02:54.664 --> 00:02:57.026
and this for loop down here
that goes through it,
00:02:57.026 --> 00:02:59.774
it will end up drawing that third balloon.
00:03:00.482 --> 00:03:03.132
So that's pretty cool,
and let me just click some more
00:03:03.132 --> 00:03:06.621
to show you how this works.
So you see every time I click,
00:03:06.621 --> 00:03:10.993
it keeps on drawing the third balloon
wherever I clicked my mouse.
00:03:11.470 --> 00:03:16.173
And that's because we're constantly
overriding the 2 spot,
00:03:16.173 --> 00:03:18.758
the thing with the 2 index.
00:03:18.758 --> 00:03:23.391
We're constantly overriding that
with the current mouseX.
00:03:23.391 --> 00:03:26.090
So we're only ever
going to have three balloons
00:03:26.090 --> 00:03:29.753
because we've got this one in the 0 spot,
this one in the 1 spot,
00:03:29.753 --> 00:03:34.844
and we're constantly changing
the 2 spot. Ok?
00:03:34.844 --> 00:03:37.137
So that's cool, but what we really want
00:03:37.137 --> 00:03:40.344
is we want to let the user make
tons of balloons, right?
00:03:40.344 --> 00:03:43.567
So every time the user clicks,
there's a new balloon.
00:03:43.567 --> 00:03:46.312
So that means that we need
to be constantly incrementing
00:03:46.312 --> 00:03:50.687
the index of the array element
that we're storing it in.
00:03:50.687 --> 00:03:53.511
So we don't want it to be 2 every time,
we want it to be 2, and then 3,
00:03:53.511 --> 00:03:56.340
and then 4, and then 5, and then 6, etc.
00:03:56.340 --> 00:03:59.194
So we could do this by having
a little counter variable.
00:03:59.194 --> 00:04:00.941
So we say newInd = 2;
00:04:00.941 --> 00:04:02.746
That's what it will start out with,
00:04:02.746 --> 00:04:05.711
and then here we'll say
newInd instead of 2.
00:04:05.711 --> 00:04:09.563
And then what we really want to do
is say newInd ++
00:04:09.563 --> 00:04:11.777
so every time we add 1 to this.
00:04:11.777 --> 00:04:15.299
So it'll start off as 2,
then become 3, and then become 4.
00:04:15.299 --> 00:04:18.430
So every time they press,
it will become more. So let's try this.
00:04:18.430 --> 00:04:22.227
Ta-da! Tons of balloons.
Balloon party. Woo!
00:04:22.227 --> 00:04:24.760
So that's cool, right?
00:04:24.760 --> 00:04:27.368
But that's not the best way of doing this
00:04:27.368 --> 00:04:29.951
because it turns out
adding items to an array
00:04:29.951 --> 00:04:32.232
is something we want to do a lot.
00:04:32.232 --> 00:04:35.398
So we have a much easier way
of doing it than this.
00:04:35.398 --> 00:04:39.445
So let me just delete the stuff we did.
Alright, so we don't need that,
00:04:39.445 --> 00:04:42.936
and we don't need that anymore.
We'll just comment that out.
00:04:42.936 --> 00:04:48.303
Ok, so how we do it is
we say xPositions.push
00:04:48.303 --> 00:04:51.039
and then mouseX.
00:04:51.039 --> 00:04:54.780
So what we're doing here is
we're calling this method
00:04:54.780 --> 00:04:56.324
on the xPositions array.
00:04:56.324 --> 00:04:58.365
So we're calling a command on the array.
00:04:58.365 --> 00:05:02.467
We're telling the array,
"Hey, push this new value,
00:05:02.467 --> 00:05:05.487
which is mouseX,
push it on the the end of your array."
00:05:05.487 --> 00:05:09.200
So every time this gets called,
so every time they press the mouse,
00:05:09.200 --> 00:05:12.542
it's going to look at the mouseX
and push it onto the end of the array.
00:05:12.542 --> 00:05:15.329
So that the array should get bigger
and bigger and bigger.
00:05:15.329 --> 00:05:17.384
So let's restart and try this.
00:05:17.654 --> 00:05:19.392
Ta-da, it worked!
00:05:19.392 --> 00:05:22.722
And it's way less code
than what we had before. Alright?
00:05:22.982 --> 00:05:25.067
So most of the time,
you're going to want to use push
00:05:25.067 --> 00:05:27.143
if you're going to add stuff
to your array like this.
00:05:27.143 --> 00:05:29.660
And it's pretty neat because
then you can just have these arrays
00:05:29.660 --> 00:05:31.905
that get bigger and bigger
and bigger during the program.
00:05:31.905 --> 00:05:34.544
Like when you have an animation
or when you have users doing stuff,
00:05:34.544 --> 00:05:36.434
and then you can do a lot more.
00:05:36.434 --> 00:05:40.073
So now you seen 90% of what
you'll probably use arrays for
00:05:40.073 --> 00:05:41.647
and the ways you'll use them.
00:05:41.647 --> 00:05:43.852
But there's also a lot more
that you can do with arrays.
00:05:43.852 --> 00:05:47.166
So if you have questions,
just ask them in the discussion.
00:05:47.166 --> 00:05:49.876
But make sure
that you master these basics first.