[Script Info]
Title: 
[Events]
Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text
Dialogue: 0,0:00:01.69,0:00:04.24,Default,,0000,0000,0000,,A gem, a pretty sweet gem!
Dialogue: 0,0:00:04.24,0:00:06.04,Default,,0000,0000,0000,,But you know what's better\Nthan a single gem?
Dialogue: 0,0:00:06.04,0:00:08.28,Default,,0000,0000,0000,,Would be a whole row of gems!
Dialogue: 0,0:00:08.28,0:00:09.56,Default,,0000,0000,0000,,And of course, now we know
Dialogue: 0,0:00:09.56,0:00:12.56,Default,,0000,0000,0000,,the best way to make a row of gems \Nwould be with a loop.
Dialogue: 0,0:00:12.56,0:00:16.16,Default,,0000,0000,0000,,So let's use a for loop \Nto draw 12 gems in a row.
Dialogue: 0,0:00:16.16,0:00:19.52,Default,,0000,0000,0000,,Going from left to right\Nacross the screen.
Dialogue: 0,0:00:19.52,0:00:21.62,Default,,0000,0000,0000,,Ohh like that.
Dialogue: 0,0:00:21.62,0:00:26.01,Default,,0000,0000,0000,,So that is a {\i1}for (var i equal 0{\i0}
Dialogue: 0,0:00:26.01,0:00:31.19,Default,,0000,0000,0000,,{\i1}i is less than 12; i plus plus).{\i0}
Dialogue: 0,0:00:31.19,0:00:34.94,Default,,0000,0000,0000,,And then we will take this line\Nand move it inside here.
Dialogue: 0,0:00:36.43,0:00:37.98,Default,,0000,0000,0000,,So now we have 12 gems,
Dialogue: 0,0:00:37.98,0:00:40.30,Default,,0000,0000,0000,,but they're actually all piled \Nright on top on each other.
Dialogue: 0,0:00:40.30,0:00:43.40,Default,,0000,0000,0000,,Remember, we want them \Ngoing across the screen.
Dialogue: 0,0:00:43.40,0:00:45.94,Default,,0000,0000,0000,,That means we want \Nto be changing the {\i1}x{\i0}.
Dialogue: 0,0:00:45.94,0:00:49.52,Default,,0000,0000,0000,,And 36 is the {\i1}x{\i0} right now, \Nbut we want it to be different each time.
Dialogue: 0,0:00:49.52,0:00:51.86,Default,,0000,0000,0000,,That means we want it \Nto be dependent on {\i1}i{\i0}.
Dialogue: 0,0:00:51.86,0:00:56.33,Default,,0000,0000,0000,,So what we can do \Nis simply say; {\i1}i{\i0} times 36.
Dialogue: 0,0:00:56.33,0:01:01.63,Default,,0000,0000,0000,,So the first one is at 0, \Nand then 36, then 72, and etc., etc.
Dialogue: 0,0:01:02.69,0:01:04.58,Default,,0000,0000,0000,,Cool! Now we have a row of gems.
Dialogue: 0,0:01:04.58,0:01:05.76,Default,,0000,0000,0000,,And this kind of reminds me
Dialogue: 0,0:01:05.76,0:01:07.100,Default,,0000,0000,0000,,of those those scenes\Nin Indiana Jones or Aladdin,
Dialogue: 0,0:01:07.100,0:01:11.31,Default,,0000,0000,0000,,where the hero discovers \Nthat underground treasure trove of gems,
Dialogue: 0,0:01:11.31,0:01:13.73,Default,,0000,0000,0000,,but they usually find \Nway more gems than this.
Dialogue: 0,0:01:13.73,0:01:17.31,Default,,0000,0000,0000,,Not just a row of gems\Nbut a pile of gems.
Dialogue: 0,0:01:17.31,0:01:20.40,Default,,0000,0000,0000,,So how could we actually make gems
Dialogue: 0,0:01:20.40,0:01:23.68,Default,,0000,0000,0000,,going all the way down the screen too?
Dialogue: 0,0:01:24.81,0:01:29.54,Default,,0000,0000,0000,,Well, we could start by just repeating\Nthe for loop, and copy pasting it,
Dialogue: 0,0:01:30.64,0:01:32.80,Default,,0000,0000,0000,,and then changing this {\i1}y{\i0} each time.
Dialogue: 0,0:01:34.56,0:01:37.69,Default,,0000,0000,0000,,And, so we'll change it \Nto 60 and then 90.
Dialogue: 0,0:01:37.69,0:01:42.31,Default,,0000,0000,0000,,So now we have three rows of gems\N--and that's cool--
Dialogue: 0,0:01:42.31,0:01:44.42,Default,,0000,0000,0000,,but this is also getting really boring
Dialogue: 0,0:01:44.42,0:01:49.19,Default,,0000,0000,0000,,because all I'm doing is copying \Nand pasting and changing this one little thing.
Dialogue: 0,0:01:49.19,0:01:52.86,Default,,0000,0000,0000,,And normally, in the past, when we found \Nourselves writing repetitive code like that
Dialogue: 0,0:01:52.86,0:01:56.22,Default,,0000,0000,0000,,we would be like, "Oh, maybe\Nwe should just use a loop instead,"
Dialogue: 0,0:01:57.02,0:01:58.61,Default,,0000,0000,0000,,but we are already using a loop;
Dialogue: 0,0:01:58.61,0:02:01.01,Default,,0000,0000,0000,,so what's the solution \Nto avoid writing this,
Dialogue: 0,0:02:01.01,0:02:03.85,Default,,0000,0000,0000,,you know, doing \Nthis repetitive copy-paste?
Dialogue: 0,0:02:03.85,0:02:09.52,Default,,0000,0000,0000,,Well, it is something we call \N"nested for loops": loop within a loop.
Dialogue: 0,0:02:09.52,0:02:12.13,Default,,0000,0000,0000,,So what we are going to do \Nis make an outer loop,
Dialogue: 0,0:02:12.13,0:02:14.85,Default,,0000,0000,0000,,and that's what's going to take care\Nof going down the screen,
Dialogue: 0,0:02:14.85,0:02:19.23,Default,,0000,0000,0000,,and then our inner loop is going \Nto keep taking care of what it's doing now
Dialogue: 0,0:02:19.23,0:02:20.100,Default,,0000,0000,0000,,which is going from left to right.
Dialogue: 0,0:02:21.98,0:02:23.41,Default,,0000,0000,0000,,Let me show you what I mean.
Dialogue: 0,0:02:24.01,0:02:29.85,Default,,0000,0000,0000,,So {\i1}for{\i0} - and we use a different \Nvariable {\i1}j{\i0} since we're already using {\i1}i{\i0}
Dialogue: 0,0:02:29.85,0:02:35.97,Default,,0000,0000,0000,,so {\i1}for(var j equals 0{\i0}, and we'll say\N{\i1}j less than 13{\i0} and {\i1} j plus plus){\i0}.
Dialogue: 0,0:02:37.27,0:02:41.36,Default,,0000,0000,0000,,So that is going to be our outer loop,\Nin charge of going top to bottom.
Dialogue: 0,0:02:41.100,0:02:45.04,Default,,0000,0000,0000,,And then we're just going to take \None of our previous for loops,
Dialogue: 0,0:02:45.04,0:02:49.44,Default,,0000,0000,0000,,and put it inside there\Nand fix the indenting,
Dialogue: 0,0:02:50.27,0:02:52.16,Default,,0000,0000,0000,,and we'll delete these old ones.
Dialogue: 0,0:02:53.27,0:02:55.45,Default,,0000,0000,0000,,So now what we have
Dialogue: 0,0:02:55.45,0:02:58.45,Default,,0000,0000,0000,,is we've got them all piled\Non top on the same row.
Dialogue: 0,0:02:59.11,0:03:01.97,Default,,0000,0000,0000,,So the thing is that we want \Nto change the {\i1}y{\i0}, right?
Dialogue: 0,0:03:01.97,0:03:03.100,Default,,0000,0000,0000,,That's what we were changing before \Nwhen we were copying pasting,
Dialogue: 0,0:03:03.100,0:03:06.11,Default,,0000,0000,0000,,and right now, the {\i1}y{\i0} is always 90.
Dialogue: 0,0:03:06.11,0:03:08.71,Default,,0000,0000,0000,,We want to y to change for each row.
Dialogue: 0,0:03:09.44,0:03:15.31,Default,,0000,0000,0000,,So just the way {\i1}x{\i0} is dependent on {\i1}i{\i0}, \Nwe want the {\i1}y{\i0} to be dependent on {\i1}j{\i0}.
Dialogue: 0,0:03:16.19,0:03:19.17,Default,,0000,0000,0000,,So we can go ahead and change this
Dialogue: 0,0:03:19.17,0:03:23.80,Default,,0000,0000,0000,,to something like, maybe {\i1}j times 30{\i0}.
Dialogue: 0,0:03:24.66,0:03:29.24,Default,,0000,0000,0000,,Tada! Yeahh! So many gems! Allright!
Dialogue: 0,0:03:29.93,0:03:32.34,Default,,0000,0000,0000,,Lets walk through what this does again.
Dialogue: 0,0:03:32.34,0:03:37.06,Default,,0000,0000,0000,,The outer loop creates this variable {\i1}j{\i0} \Nand increments it up to 13.
Dialogue: 0,0:03:38.34,0:03:42.82,Default,,0000,0000,0000,,In each execution of that outer loop, \Nit runs this inner loop.
Dialogue: 0,0:03:44.34,0:03:48.07,Default,,0000,0000,0000,,The inner loop creates \Nthe variable {\i1}i{\i0} which goes up to 12.
Dialogue: 0,0:03:48.51,0:03:50.06,Default,,0000,0000,0000,,And for each execution of the inner loop,
Dialogue: 0,0:03:50.06,0:03:54.15,Default,,0000,0000,0000,,it draws an image on the {\i1}x{\i0} and {\i1}y{\i0} \Nwhich are based off of {\i1}i{\i0} and {\i1}j{\i0}.
Dialogue: 0,0:03:55.36,0:03:58.71,Default,,0000,0000,0000,,And this {\i1}i{\i0} changes a lot more\Nfrequently than the {\i1}j{\i0} because of that.
Dialogue: 0,0:03:59.61,0:04:01.23,Default,,0000,0000,0000,,To try and understand this even better,
Dialogue: 0,0:04:01.23,0:04:04.44,Default,,0000,0000,0000,,let's try and actually visualize \Nthe {\i1}i{\i0} and {\i1}j{\i0} values.
Dialogue: 0,0:04:05.24,0:04:09.06,Default,,0000,0000,0000,,So what I will do is comment out image,
Dialogue: 0,0:04:09.06,0:04:12.03,Default,,0000,0000,0000,,and then set a fill color,
Dialogue: 0,0:04:12.03,0:04:14.98,Default,,0000,0000,0000,,and I'm going to use a text command \Nto show the value of {\i1}j{\i0}.
Dialogue: 0,0:04:14.98,0:04:20.04,Default,,0000,0000,0000,,So text {\i1}j{\i0} and then I will put it \Nat the appropriate spot here.
Dialogue: 0,0:04:22.02,0:04:26.01,Default,,0000,0000,0000,,Now we can see {\i1}j{\i0} going from 0 to 12.
Dialogue: 0,0:04:26.01,0:04:29.74,Default,,0000,0000,0000,,This is basically where our rows of gems \Nwere positioned as well.
Dialogue: 0,0:04:32.02,0:04:34.93,Default,,0000,0000,0000,,And now we will visualize "{\i1}i{\i0}, \Nand see how that changes.
Dialogue: 0,0:04:35.44,0:04:38.89,Default,,0000,0000,0000,,So for {\i1}i{\i0}, let's make it a different color.
Dialogue: 0,0:04:43.07,0:04:45.64,Default,,0000,0000,0000,,Then we will go put the {\i1}i{\i0} somewhere.
Dialogue: 0,0:04:46.48,0:04:49.48,Default,,0000,0000,0000,,And we will change its {\i1}x{\i0} \Nso that it goes across the screen.
Dialogue: 0,0:04:49.48,0:04:53.34,Default,,0000,0000,0000,,We will do the same thing for the {\i1}y{\i0}.
Dialogue: 0,0:04:54.69,0:04:59.56,Default,,0000,0000,0000,,Now we can see that the {\i1}i{\i0}\Nis going from 0 to 11.
Dialogue: 0,0:04:59.56,0:05:04.33,Default,,0000,0000,0000,,And the {\i1}i{\i0}, as I was saying, \Nchanges a lot more frequently.
Dialogue: 0,0:05:04.33,0:05:08.78,Default,,0000,0000,0000,,And this line of code gets executed \Na lot more times than this line of code,
Dialogue: 0,0:05:08.78,0:05:13.86,Default,,0000,0000,0000,,because this line of code is executed \Nfor every execution of this inner for loop
Dialogue: 0,0:05:13.86,0:05:16.39,Default,,0000,0000,0000,,whereas this line of code \Nonly gets executed
Dialogue: 0,0:05:16.39,0:05:18.31,Default,,0000,0000,0000,,for every execution of the outer loop.
Dialogue: 0,0:05:19.53,0:05:22.14,Default,,0000,0000,0000,,So this visualizing of the {\i1}i{\i0} and {\i1}j{\i0},
Dialogue: 0,0:05:22.14,0:05:23.73,Default,,0000,0000,0000,,hopefully helps you understand
Dialogue: 0,0:05:23.73,0:05:26.23,Default,,0000,0000,0000,,what's going on with \Nthese nested for loops better.
Dialogue: 0,0:05:26.97,0:05:29.56,Default,,0000,0000,0000,,Now let's bring back our gems, \Nbecause they are kind of cooler!
Dialogue: 0,0:05:30.48,0:05:34.07,Default,,0000,0000,0000,,So there's a lot you can do \Nwith nested for loops
Dialogue: 0,0:05:34.07,0:05:36.65,Default,,0000,0000,0000,,If you just think about \Neverything in the world
Dialogue: 0,0:05:36.65,0:05:39.60,Default,,0000,0000,0000,,that looks like a two-dimensional grid, \Nlike a chess board, a quilt,
Dialogue: 0,0:05:39.60,0:05:43.82,Default,,0000,0000,0000,,the stars on the US flag, \Ncool patterns and wallpapers;
Dialogue: 0,0:05:44.56,0:05:47.69,Default,,0000,0000,0000,,to start off your imagination,\Njust play around with this code,
Dialogue: 0,0:05:47.69,0:05:49.81,Default,,0000,0000,0000,,like by changing the image.
Dialogue: 0,0:05:49.81,0:05:53.17,Default,,0000,0000,0000,,I will start off \Nby changing it to a heart!
Dialogue: 0,0:05:53.80,0:05:58.26,Default,,0000,0000,0000,,To show you how much \NI love nested for loops! Aww!