[Script Info]
Title: 
[Events]
Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text
Dialogue: 0,0:00:01.32,0:00:04.81,Default,,0000,0000,0000,,So far, we've seen how to create\Nan array and access it.
Dialogue: 0,0:00:04.81,0:00:08.73,Default,,0000,0000,0000,,Just like other variables, however,\None of the really cool things about arrays
Dialogue: 0,0:00:08.73,0:00:12.56,Default,,0000,0000,0000,,is the way we can change them dynamically\Nwhile a program is running.
Dialogue: 0,0:00:13.21,0:00:16.12,Default,,0000,0000,0000,,OK, let me just show you\Nwhat I mean by this.
Dialogue: 0,0:00:16.12,0:00:17.92,Default,,0000,0000,0000,,So here we have this program
Dialogue: 0,0:00:17.92,0:00:21.56,Default,,0000,0000,0000,,that displays Hopper\Nholding some balloons; super cute.
Dialogue: 0,0:00:21.56,0:00:25.41,Default,,0000,0000,0000,,And so how it works is that we have\Nthis xPositions array
Dialogue: 0,0:00:25.41,0:00:30.01,Default,,0000,0000,0000,,that has two numbers in it that say\Nwhere we want the balloons at.
Dialogue: 0,0:00:30.01,0:00:32.33,Default,,0000,0000,0000,,And then down here we have this loop,
Dialogue: 0,0:00:32.33,0:00:35.69,Default,,0000,0000,0000,,and this loop goes through\Nevery element in that array.
Dialogue: 0,0:00:35.69,0:00:40.47,Default,,0000,0000,0000,,And for each of them, it draws a line\Nfrom the "x" down to Hopper's hand,
Dialogue: 0,0:00:40.47,0:00:45.65,Default,,0000,0000,0000,,and then draws an ellipse at the "x"\Nthat's 30x40 pixels,
Dialogue: 0,0:00:45.65,0:00:47.74,Default,,0000,0000,0000,,and that's our balloon.
Dialogue: 0,0:00:47.74,0:00:51.42,Default,,0000,0000,0000,,Okay, cool.\NSo now that we see how it works,
Dialogue: 0,0:00:51.42,0:00:54.24,Default,,0000,0000,0000,,we know that if we want\Nto have another balloon show up,
Dialogue: 0,0:00:54.24,0:00:58.81,Default,,0000,0000,0000,,we can just add a number\Nto this array, right? Like 300.
Dialogue: 0,0:00:58.81,0:01:03.12,Default,,0000,0000,0000,,Beautiful. Now we've got three balloons\Nfor a happy Hopper.
Dialogue: 0,0:01:03.12,0:01:08.88,Default,,0000,0000,0000,,But let's say we wanted to give a user\Nthat doesn't know how to code
Dialogue: 0,0:01:08.88,0:01:10.89,Default,,0000,0000,0000,,the ability to add new balloons.
Dialogue: 0,0:01:10.89,0:01:13.39,Default,,0000,0000,0000,,So we wanted to give the program to a user
Dialogue: 0,0:01:13.39,0:01:16.64,Default,,0000,0000,0000,,and say, "Hey, you can click\Nwherever you want the balloon,
Dialogue: 0,0:01:16.64,0:01:20.67,Default,,0000,0000,0000,,and it will show up."\NWouldn't that be cool? I think so.
Dialogue: 0,0:01:20.67,0:01:23.93,Default,,0000,0000,0000,,So, how should we do this?
Dialogue: 0,0:01:23.93,0:01:26.32,Default,,0000,0000,0000,,So we want our program\Nto be changing over time, right?
Dialogue: 0,0:01:26.32,0:01:30.60,Default,,0000,0000,0000,,Every time the user clicks,\Na balloon is going to show up there.
Dialogue: 0,0:01:30.60,0:01:35.10,Default,,0000,0000,0000,,So let's start off by moving everything\Ninto a draw function
Dialogue: 0,0:01:35.10,0:01:37.24,Default,,0000,0000,0000,,so that it's easy to change over time.
Dialogue: 0,0:01:37.24,0:01:42.62,Default,,0000,0000,0000,,So we'll just move this down here\Nand indent this here. OK, great.
Dialogue: 0,0:01:43.34,0:01:48.62,Default,,0000,0000,0000,,So now we want to check and see\Nis the user pressing the mouse right now?
Dialogue: 0,0:01:48.62,0:01:53.19,Default,,0000,0000,0000,,Well we can do that with our "if".\NSo if mouse if pressed,
Dialogue: 0,0:01:53.83,0:01:56.88,Default,,0000,0000,0000,,and then we're going to do something.\NSo what are we going to do?
Dialogue: 0,0:01:56.88,0:02:01.69,Default,,0000,0000,0000,,If the mouse is pressed, then we want\Nto somehow add a number to this array.
Dialogue: 0,0:02:01.69,0:02:04.52,Default,,0000,0000,0000,,And let's make this\Njust two elements again. Ok.
Dialogue: 0,0:02:04.52,0:02:08.26,Default,,0000,0000,0000,,So we want to add a number\Nto this array somehow.
Dialogue: 0,0:02:08.26,0:02:10.96,Default,,0000,0000,0000,,Well I'll show you one way\Nwe could do this.
Dialogue: 0,0:02:10.96,0:02:17.61,Default,,0000,0000,0000,,So we can say {\i1}xPositions[2] = mouseX;{\i0}
Dialogue: 0,0:02:18.61,0:02:21.62,Default,,0000,0000,0000,,Alright, and let me just\Nshow you that this works.
Dialogue: 0,0:02:22.43,0:02:26.74,Default,,0000,0000,0000,,I clicked, and ta-da! I got a balloon!\NSo what did this do?
Dialogue: 0,0:02:26.74,0:02:31.58,Default,,0000,0000,0000,,This said, {\i1}xPositions[2]{\i0} said\Nfind this array,
Dialogue: 0,0:02:31.58,0:02:34.54,Default,,0000,0000,0000,,and find the element in the 2 spot,
Dialogue: 0,0:02:34.54,0:02:38.21,Default,,0000,0000,0000,,and remember that's the third element\Nbecause our arrays are zero-based.
Dialogue: 0,0:02:38.21,0:02:40.50,Default,,0000,0000,0000,,And if you look,\Nthere's no third element, right?
Dialogue: 0,0:02:40.50,0:02:42.45,Default,,0000,0000,0000,,There's nothing in that spot.
Dialogue: 0,0:02:42.45,0:02:45.74,Default,,0000,0000,0000,,So it says find that,\Nand then put {\i1}mouseX{\i0} in it.
Dialogue: 0,0:02:45.74,0:02:49.54,Default,,0000,0000,0000,,Well since there was nothing there,\Nthen it goes from being nothing
Dialogue: 0,0:02:49.54,0:02:51.29,Default,,0000,0000,0000,,to being {\i1}mouseX.{\i0}
Dialogue: 0,0:02:51.29,0:02:54.66,Default,,0000,0000,0000,,And so now our array is three items long,
Dialogue: 0,0:02:54.66,0:02:57.03,Default,,0000,0000,0000,,and this {\i1}for{\i0} loop down here\Nthat goes through it,
Dialogue: 0,0:02:57.03,0:02:59.77,Default,,0000,0000,0000,,it will end up drawing that third balloon.
Dialogue: 0,0:03:00.48,0:03:03.13,Default,,0000,0000,0000,,So that's pretty cool,\Nand let me just click some more
Dialogue: 0,0:03:03.13,0:03:06.62,Default,,0000,0000,0000,,to show you how this works.\NSo you see every time I click,
Dialogue: 0,0:03:06.62,0:03:10.99,Default,,0000,0000,0000,,it keeps on drawing the third balloon\Nwherever I clicked my mouse.
Dialogue: 0,0:03:11.47,0:03:16.17,Default,,0000,0000,0000,,And that's because we're constantly\Noverriding the 2 spot,
Dialogue: 0,0:03:16.17,0:03:18.76,Default,,0000,0000,0000,,the thing with the 2 index.
Dialogue: 0,0:03:18.76,0:03:23.39,Default,,0000,0000,0000,,We're constantly overriding that\Nwith the current {\i1}mouseX.{\i0}
Dialogue: 0,0:03:23.39,0:03:26.09,Default,,0000,0000,0000,,So we're only ever\Ngoing to have three balloons
Dialogue: 0,0:03:26.09,0:03:29.75,Default,,0000,0000,0000,,because we've got this one in the 0 spot,\Nthis one in the 1 spot,
Dialogue: 0,0:03:29.75,0:03:34.84,Default,,0000,0000,0000,,and we're constantly changing\Nthe 2 spot. Ok?
Dialogue: 0,0:03:34.84,0:03:37.14,Default,,0000,0000,0000,,So that's cool, but what we really want
Dialogue: 0,0:03:37.14,0:03:40.34,Default,,0000,0000,0000,,is we want to let the user make\N{\i1}tons{\i0} of balloons, right?
Dialogue: 0,0:03:40.34,0:03:43.57,Default,,0000,0000,0000,,So every time the user clicks,\Nthere's a new balloon.
Dialogue: 0,0:03:43.57,0:03:46.31,Default,,0000,0000,0000,,So that means that we need\Nto be constantly incrementing
Dialogue: 0,0:03:46.31,0:03:50.69,Default,,0000,0000,0000,,the index of the array element\Nthat we're storing it in.
Dialogue: 0,0:03:50.69,0:03:53.51,Default,,0000,0000,0000,,So we don't want it to be 2 every time,\Nwe want it to be 2, and then 3,
Dialogue: 0,0:03:53.51,0:03:56.34,Default,,0000,0000,0000,,and then 4, and then 5, and then 6, etc.
Dialogue: 0,0:03:56.34,0:03:59.19,Default,,0000,0000,0000,,So we could do this by having\Na little counter variable.
Dialogue: 0,0:03:59.19,0:04:00.94,Default,,0000,0000,0000,,So we say {\i1}newInd = 2;{\i0}
Dialogue: 0,0:04:00.94,0:04:02.75,Default,,0000,0000,0000,,That's what it will start out with,
Dialogue: 0,0:04:02.75,0:04:05.71,Default,,0000,0000,0000,,and then here we'll say\N{\i1}newInd{\i0} instead of 2.
Dialogue: 0,0:04:05.71,0:04:09.56,Default,,0000,0000,0000,,And then what we really want to do\Nis say {\i1}newInd ++{\i0}
Dialogue: 0,0:04:09.56,0:04:11.78,Default,,0000,0000,0000,,so every time we add 1 to this.
Dialogue: 0,0:04:11.78,0:04:15.30,Default,,0000,0000,0000,,So it'll start off as 2,\Nthen become 3, and then become 4.
Dialogue: 0,0:04:15.30,0:04:18.43,Default,,0000,0000,0000,,So every time they press,\Nit will become more. So let's try this.
Dialogue: 0,0:04:18.43,0:04:22.23,Default,,0000,0000,0000,,Ta-da! Tons of balloons.\NBalloon party. Woo!
Dialogue: 0,0:04:22.23,0:04:24.76,Default,,0000,0000,0000,,So that's cool, right?
Dialogue: 0,0:04:24.76,0:04:27.37,Default,,0000,0000,0000,,But that's not the best way of doing this
Dialogue: 0,0:04:27.37,0:04:29.95,Default,,0000,0000,0000,,because it turns out\Nadding items to an array
Dialogue: 0,0:04:29.95,0:04:32.23,Default,,0000,0000,0000,,is something we want to do a lot.
Dialogue: 0,0:04:32.23,0:04:35.40,Default,,0000,0000,0000,,So we have a much easier way\Nof doing it than this.
Dialogue: 0,0:04:35.40,0:04:39.44,Default,,0000,0000,0000,,So let me just delete the stuff we did.\NAlright, so we don't need that,
Dialogue: 0,0:04:39.44,0:04:42.94,Default,,0000,0000,0000,,and we don't need that anymore.\NWe'll just comment that out.
Dialogue: 0,0:04:42.94,0:04:48.30,Default,,0000,0000,0000,,Ok, so how we do it is\Nwe say {\i1}xPositions.push{\i0}
Dialogue: 0,0:04:48.30,0:04:51.04,Default,,0000,0000,0000,,and then {\i1}mouseX.{\i0}
Dialogue: 0,0:04:51.04,0:04:54.78,Default,,0000,0000,0000,,So what we're doing here is\Nwe're calling this method
Dialogue: 0,0:04:54.78,0:04:56.32,Default,,0000,0000,0000,,on the {\i1}xPositions{\i0} array.
Dialogue: 0,0:04:56.32,0:04:58.36,Default,,0000,0000,0000,,So we're calling a command on the array.
Dialogue: 0,0:04:58.36,0:05:02.47,Default,,0000,0000,0000,,We're telling the array,\N"Hey, push this new value,
Dialogue: 0,0:05:02.47,0:05:05.49,Default,,0000,0000,0000,,which is {\i1}mouseX,{\i0}\Npush it on the the end of your array."
Dialogue: 0,0:05:05.49,0:05:09.20,Default,,0000,0000,0000,,So every time this gets called,\Nso every time they press the mouse,
Dialogue: 0,0:05:09.20,0:05:12.54,Default,,0000,0000,0000,,it's going to look at the {\i1}mouseX{\i0}\Nand push it onto the end of the array.
Dialogue: 0,0:05:12.54,0:05:15.33,Default,,0000,0000,0000,,So that the array should get bigger\Nand bigger and bigger.
Dialogue: 0,0:05:15.33,0:05:17.38,Default,,0000,0000,0000,,So let's restart and try this.
Dialogue: 0,0:05:17.65,0:05:19.39,Default,,0000,0000,0000,,Ta-da, it worked!
Dialogue: 0,0:05:19.39,0:05:22.72,Default,,0000,0000,0000,,And it's way less code\Nthan what we had before. Alright?
Dialogue: 0,0:05:22.98,0:05:25.07,Default,,0000,0000,0000,,So most of the time,\Nyou're going to want to use {\i1}push{\i0}
Dialogue: 0,0:05:25.07,0:05:27.14,Default,,0000,0000,0000,,if you're going to add stuff\Nto your array like this.
Dialogue: 0,0:05:27.14,0:05:29.66,Default,,0000,0000,0000,,And it's pretty neat because\Nthen you can just have these arrays
Dialogue: 0,0:05:29.66,0:05:31.90,Default,,0000,0000,0000,,that get bigger and bigger\Nand bigger during the program.
Dialogue: 0,0:05:31.90,0:05:34.54,Default,,0000,0000,0000,,Like when you have an animation\Nor when you have users doing stuff,
Dialogue: 0,0:05:34.54,0:05:36.43,Default,,0000,0000,0000,,and then you can do a lot more.
Dialogue: 0,0:05:36.43,0:05:40.07,Default,,0000,0000,0000,,So now you seen 90% of what\Nyou'll probably use arrays for
Dialogue: 0,0:05:40.07,0:05:41.65,Default,,0000,0000,0000,,and the ways you'll use them.
Dialogue: 0,0:05:41.65,0:05:43.85,Default,,0000,0000,0000,,But there's also a lot more\Nthat you can do with arrays.
Dialogue: 0,0:05:43.85,0:05:47.17,Default,,0000,0000,0000,,So if you have questions,\Njust ask them in the discussion.
Dialogue: 0,0:05:47.17,0:05:49.88,Default,,0000,0000,0000,,But make sure\Nthat you master these basics first.