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