1
00:00:01,320 --> 00:00:04,813
So far, we've seen how to create
an array and access it.
2
00:00:04,813 --> 00:00:08,727
Just like other variables, however,
one of the really cool things about arrays
3
00:00:08,727 --> 00:00:12,560
is the way we can change them dynamically
while a program is running.
4
00:00:13,206 --> 00:00:16,124
OK, let me just show you
what I mean by this.
5
00:00:16,124 --> 00:00:17,916
So here we have this program
6
00:00:17,916 --> 00:00:21,563
that displays Hopper
holding some balloons; super cute.
7
00:00:21,563 --> 00:00:25,407
And so how it works is that we have
this xPositions array
8
00:00:25,407 --> 00:00:30,010
that has two numbers in it that say
where we want the balloons at.
9
00:00:30,010 --> 00:00:32,331
And then down here we have this loop,
10
00:00:32,331 --> 00:00:35,688
and this loop goes through
every element in that array.
11
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,
12
00:00:40,473 --> 00:00:45,651
and then draws an ellipse at the "x"
that's 30x40 pixels,
13
00:00:45,651 --> 00:00:47,738
and that's our balloon.
14
00:00:47,738 --> 00:00:51,418
Okay, cool.
So now that we see how it works,
15
00:00:51,418 --> 00:00:54,242
we know that if we want
to have another balloon show up,
16
00:00:54,242 --> 00:00:58,807
we can just add a number
to this array, right? Like 300.
17
00:00:58,807 --> 00:01:03,117
Beautiful. Now we've got three balloons
for a happy Hopper.
18
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
19
00:01:08,880 --> 00:01:10,889
the ability to add new balloons.
20
00:01:10,889 --> 00:01:13,387
So we wanted to give the program to a user
21
00:01:13,387 --> 00:01:16,639
and say, "Hey, you can click
wherever you want the balloon,
22
00:01:16,639 --> 00:01:20,674
and it will show up."
Wouldn't that be cool? I think so.
23
00:01:20,674 --> 00:01:23,927
So, how should we do this?
24
00:01:23,927 --> 00:01:26,325
So we want our program
to be changing over time, right?
25
00:01:26,325 --> 00:01:30,605
Every time the user clicks,
a balloon is going to show up there.
26
00:01:30,605 --> 00:01:35,097
So let's start off by moving everything
into a draw function
27
00:01:35,097 --> 00:01:37,244
so that it's easy to change over time.
28
00:01:37,244 --> 00:01:42,620
So we'll just move this down here
and indent this here. OK, great.
29
00:01:43,341 --> 00:01:48,620
So now we want to check and see
is the user pressing the mouse right now?
30
00:01:48,620 --> 00:01:53,190
Well we can do that with our "if".
So if mouse if pressed,
31
00:01:53,828 --> 00:01:56,881
and then we're going to do something.
So what are we going to do?
32
00:01:56,881 --> 00:02:01,686
If the mouse is pressed, then we want
to somehow add a number to this array.
33
00:02:01,686 --> 00:02:04,521
And let's make this
just two elements again. Ok.
34
00:02:04,521 --> 00:02:08,263
So we want to add a number
to this array somehow.
35
00:02:08,263 --> 00:02:10,958
Well I'll show you one way
we could do this.
36
00:02:10,958 --> 00:02:17,610
So we can say xPositions[2] = mouseX;
37
00:02:18,614 --> 00:02:21,623
Alright, and let me just
show you that this works.
38
00:02:22,430 --> 00:02:26,740
I clicked, and ta-da! I got a balloon!
So what did this do?
39
00:02:26,740 --> 00:02:31,582
This said, xPositions[2] said
find this array,
40
00:02:31,582 --> 00:02:34,539
and find the element in the 2 spot,
41
00:02:34,539 --> 00:02:38,214
and remember that's the third element
because our arrays are zero-based.
42
00:02:38,214 --> 00:02:40,503
And if you look,
there's no third element, right?
43
00:02:40,503 --> 00:02:42,449
There's nothing in that spot.
44
00:02:42,449 --> 00:02:45,739
So it says find that,
and then put mouseX in it.
45
00:02:45,739 --> 00:02:49,539
Well since there was nothing there,
then it goes from being nothing
46
00:02:49,539 --> 00:02:51,292
to being mouseX.
47
00:02:51,292 --> 00:02:54,664
And so now our array is three items long,
48
00:02:54,664 --> 00:02:57,026
and this for loop down here
that goes through it,
49
00:02:57,026 --> 00:02:59,774
it will end up drawing that third balloon.
50
00:03:00,482 --> 00:03:03,132
So that's pretty cool,
and let me just click some more
51
00:03:03,132 --> 00:03:06,621
to show you how this works.
So you see every time I click,
52
00:03:06,621 --> 00:03:10,993
it keeps on drawing the third balloon
wherever I clicked my mouse.
53
00:03:11,470 --> 00:03:16,173
And that's because we're constantly
overriding the 2 spot,
54
00:03:16,173 --> 00:03:18,758
the thing with the 2 index.
55
00:03:18,758 --> 00:03:23,391
We're constantly overriding that
with the current mouseX.
56
00:03:23,391 --> 00:03:26,090
So we're only ever
going to have three balloons
57
00:03:26,090 --> 00:03:29,753
because we've got this one in the 0 spot,
this one in the 1 spot,
58
00:03:29,753 --> 00:03:34,844
and we're constantly changing
the 2 spot. Ok?
59
00:03:34,844 --> 00:03:37,137
So that's cool, but what we really want
60
00:03:37,137 --> 00:03:40,344
is we want to let the user make
tons of balloons, right?
61
00:03:40,344 --> 00:03:43,567
So every time the user clicks,
there's a new balloon.
62
00:03:43,567 --> 00:03:46,312
So that means that we need
to be constantly incrementing
63
00:03:46,312 --> 00:03:50,687
the index of the array element
that we're storing it in.
64
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,
65
00:03:53,511 --> 00:03:56,340
and then 4, and then 5, and then 6, etc.
66
00:03:56,340 --> 00:03:59,194
So we could do this by having
a little counter variable.
67
00:03:59,194 --> 00:04:00,941
So we say newInd = 2;
68
00:04:00,941 --> 00:04:02,746
That's what it will start out with,
69
00:04:02,746 --> 00:04:05,711
and then here we'll say
newInd instead of 2.
70
00:04:05,711 --> 00:04:09,563
And then what we really want to do
is say newInd ++
71
00:04:09,563 --> 00:04:11,777
so every time we add 1 to this.
72
00:04:11,777 --> 00:04:15,299
So it'll start off as 2,
then become 3, and then become 4.
73
00:04:15,299 --> 00:04:18,430
So every time they press,
it will become more. So let's try this.
74
00:04:18,430 --> 00:04:22,227
Ta-da! Tons of balloons.
Balloon party. Woo!
75
00:04:22,227 --> 00:04:24,760
So that's cool, right?
76
00:04:24,760 --> 00:04:27,368
But that's not the best way of doing this
77
00:04:27,368 --> 00:04:29,951
because it turns out
adding items to an array
78
00:04:29,951 --> 00:04:32,232
is something we want to do a lot.
79
00:04:32,232 --> 00:04:35,398
So we have a much easier way
of doing it than this.
80
00:04:35,398 --> 00:04:39,445
So let me just delete the stuff we did.
Alright, so we don't need that,
81
00:04:39,445 --> 00:04:42,936
and we don't need that anymore.
We'll just comment that out.
82
00:04:42,936 --> 00:04:48,303
Ok, so how we do it is
we say xPositions.push
83
00:04:48,303 --> 00:04:51,039
and then mouseX.
84
00:04:51,039 --> 00:04:54,780
So what we're doing here is
we're calling this method
85
00:04:54,780 --> 00:04:56,324
on the xPositions array.
86
00:04:56,324 --> 00:04:58,365
So we're calling a command on the array.
87
00:04:58,365 --> 00:05:02,467
We're telling the array,
"Hey, push this new value,
88
00:05:02,467 --> 00:05:05,487
which is mouseX,
push it on the the end of your array."
89
00:05:05,487 --> 00:05:09,200
So every time this gets called,
so every time they press the mouse,
90
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.
91
00:05:12,542 --> 00:05:15,329
So that the array should get bigger
and bigger and bigger.
92
00:05:15,329 --> 00:05:17,384
So let's restart and try this.
93
00:05:17,654 --> 00:05:19,392
Ta-da, it worked!
94
00:05:19,392 --> 00:05:22,722
And it's way less code
than what we had before. Alright?
95
00:05:22,982 --> 00:05:25,067
So most of the time,
you're going to want to use push
96
00:05:25,067 --> 00:05:27,143
if you're going to add stuff
to your array like this.
97
00:05:27,143 --> 00:05:29,660
And it's pretty neat because
then you can just have these arrays
98
00:05:29,660 --> 00:05:31,905
that get bigger and bigger
and bigger during the program.
99
00:05:31,905 --> 00:05:34,544
Like when you have an animation
or when you have users doing stuff,
100
00:05:34,544 --> 00:05:36,434
and then you can do a lot more.
101
00:05:36,434 --> 00:05:40,073
So now you seen 90% of what
you'll probably use arrays for
102
00:05:40,073 --> 00:05:41,647
and the ways you'll use them.
103
00:05:41,647 --> 00:05:43,852
But there's also a lot more
that you can do with arrays.
104
00:05:43,852 --> 00:05:47,166
So if you have questions,
just ask them in the discussion.
105
00:05:47,166 --> 00:05:49,876
But make sure
that you master these basics first.