0:00:01.686,0:00:04.237
A gem, a pretty sweet gem!

0:00:04.237,0:00:06.035
But you know what's better[br]than a single gem?

0:00:06.035,0:00:08.275
Would be a whole row of gems!

0:00:08.275,0:00:09.562
And of course, now we know

0:00:09.562,0:00:12.562
the best way to make a row of gems [br]would be with a loop.

0:00:12.562,0:00:16.162
So let's use a for loop [br]to draw 12 gems in a row.

0:00:16.162,0:00:19.523
Going from left to right[br]across the screen.

0:00:19.523,0:00:21.624
Ohh like that.

0:00:21.624,0:00:26.006
So that is a <i>for (var i equal 0</i>

0:00:26.006,0:00:31.186
<i>i is less than 12; i plus plus).</i>

0:00:31.186,0:00:34.939
And then we will take this line[br]and move it inside here.

0:00:36.429,0:00:37.979
So now we have 12 gems,

0:00:37.979,0:00:40.305
but they're actually all piled [br]right on top on each other.

0:00:40.305,0:00:43.401
Remember, we want them [br]going across the screen.

0:00:43.401,0:00:45.941
That means we want [br]to be changing the <i>x</i>.

0:00:45.941,0:00:49.524
And 36 is the <i>x</i> right now, [br]but we want it to be different each time.

0:00:49.524,0:00:51.859
That means we want it [br]to be dependent on <i>i</i>.

0:00:51.859,0:00:56.329
So what we can do [br]is simply say; <i>i</i> times 36.

0:00:56.329,0:01:01.627
So the first one is at 0, [br]and then 36, then 72, and etc., etc.

0:01:02.687,0:01:04.575
Cool! Now we have a row of gems.

0:01:04.575,0:01:05.755
And this kind of reminds me

0:01:05.755,0:01:07.997
of those those scenes[br]in Indiana Jones or Aladdin,

0:01:07.997,0:01:11.306
where the hero discovers [br]that underground treasure trove of gems,

0:01:11.306,0:01:13.732
but they usually find [br]way more gems than this.

0:01:13.732,0:01:17.306
Not just a row of gems[br]but a pile of gems.

0:01:17.306,0:01:20.399
So how could we actually make gems

0:01:20.399,0:01:23.676
going all the way down the screen too?

0:01:24.806,0:01:29.539
Well, we could start by just repeating[br]the for loop, and copy pasting it,

0:01:30.639,0:01:32.795
and then changing this <i>y</i> each time.

0:01:34.565,0:01:37.688
And, so we'll change it [br]to 60 and then 90.

0:01:37.688,0:01:42.308
So now we have three rows of gems[br]--and that's cool--

0:01:42.308,0:01:44.425
but this is also getting really boring

0:01:44.425,0:01:49.193
because all I'm doing is copying [br]and pasting and changing this one little thing.

0:01:49.193,0:01:52.859
And normally, in the past, when we found [br]ourselves writing repetitive code like that

0:01:52.859,0:01:56.215
we would be like, "Oh, maybe[br]we should just use a loop instead,"

0:01:57.025,0:01:58.607
but we are already using a loop;

0:01:58.607,0:02:01.014
so what's the solution [br]to avoid writing this,

0:02:01.014,0:02:03.854
you know, doing [br]this repetitive copy-paste?

0:02:03.854,0:02:09.518
Well, it is something we call [br]"nested for loops": loop within a loop.

0:02:09.518,0:02:12.132
So what we are going to do [br]is make an outer loop,

0:02:12.132,0:02:14.851
and that's what's going to take care[br]of going down the screen,

0:02:14.851,0:02:19.234
and then our inner loop is going [br]to keep taking care of what it's doing now

0:02:19.234,0:02:20.997
which is going from left to right.

0:02:21.977,0:02:23.406
Let me show you what I mean.

0:02:24.006,0:02:29.851
So <i>for</i> - and we use a different [br]variable <i>j</i> since we're already using <i>i</i>

0:02:29.851,0:02:35.974
so <i>for(var j equals 0</i>, and we'll say[br]<i>j less than 13</i> and <i> j plus plus)</i>.

0:02:37.274,0:02:41.359
So that is going to be our outer loop,[br]in charge of going top to bottom.

0:02:41.999,0:02:45.037
And then we're just going to take [br]one of our previous for loops,

0:02:45.037,0:02:49.444
and put it inside there[br]and fix the indenting,

0:02:50.274,0:02:52.164
and we'll delete these old ones.

0:02:53.274,0:02:55.449
So now what we have

0:02:55.449,0:02:58.449
is we've got them all piled[br]on top on the same row.

0:02:59.109,0:03:01.969
So the thing is that we want [br]to change the <i>y</i>, right?

0:03:01.969,0:03:03.999
That's what we were changing before [br]when we were copying pasting,

0:03:03.999,0:03:06.108
and right now, the <i>y</i> is always 90.

0:03:06.108,0:03:08.710
We want to y to change for each row.

0:03:09.440,0:03:15.308
So just the way <i>x</i> is dependent on <i>i</i>, [br]we want the <i>y</i> to be dependent on <i>j</i>.

0:03:16.188,0:03:19.173
So we can go ahead and change this

0:03:19.173,0:03:23.803
to something like, maybe <i>j times 30</i>.

0:03:24.663,0:03:29.244
Tada! Yeahh! So many gems! Allright!

0:03:29.934,0:03:32.336
Lets walk through what this does again.

0:03:32.336,0:03:37.060
The outer loop creates this variable <i>j</i> [br]and increments it up to 13.

0:03:38.340,0:03:42.820
In each execution of that outer loop, [br]it runs this inner loop.

0:03:44.340,0:03:48.073
The inner loop creates [br]the variable <i>i</i> which goes up to 12.

0:03:48.513,0:03:50.058
And for each execution of the inner loop,

0:03:50.058,0:03:54.148
it draws an image on the <i>x</i> and <i>y</i> [br]which are based off of <i>i</i> and <i>j</i>.

0:03:55.358,0:03:58.707
And this <i>i</i> changes a lot more[br]frequently than the <i>j</i> because of that.

0:03:59.607,0:04:01.228
To try and understand this even better,

0:04:01.228,0:04:04.438
let's try and actually visualize [br]the <i>i</i> and <i>j</i> values.

0:04:05.238,0:04:09.057
So what I will do is comment out image,

0:04:09.057,0:04:12.027
and then set a fill color,

0:04:12.027,0:04:14.976
and I'm going to use a text command [br]to show the value of <i>j</i>.

0:04:14.976,0:04:20.035
So text <i>j</i> and then I will put it [br]at the appropriate spot here.

0:04:22.025,0:04:26.009
Now we can see <i>j</i> going from 0 to 12.

0:04:26.009,0:04:29.739
This is basically where our rows of gems [br]were positioned as well.

0:04:32.019,0:04:34.934
And now we will visualize "<i>i</i>, [br]and see how that changes.

0:04:35.444,0:04:38.886
So for <i>i</i>, let's make it a different color.

0:04:43.066,0:04:45.635
Then we will go put the <i>i</i> somewhere.

0:04:46.475,0:04:49.481
And we will change its <i>x</i> [br]so that it goes across the screen.

0:04:49.481,0:04:53.338
We will do the same thing for the <i>y</i>.

0:04:54.688,0:04:59.561
Now we can see that the <i>i</i>[br]is going from 0 to 11.

0:04:59.561,0:05:04.326
And the <i>i</i>, as I was saying, [br]changes a lot more frequently.

0:05:04.326,0:05:08.778
And this line of code gets executed [br]a lot more times than this line of code,

0:05:08.778,0:05:13.855
because this line of code is executed [br]for every execution of this inner for loop

0:05:13.855,0:05:16.387
whereas this line of code [br]only gets executed

0:05:16.387,0:05:18.307
for every execution of the outer loop.

0:05:19.527,0:05:22.140
So this visualizing of the <i>i</i> and <i>j</i>,

0:05:22.140,0:05:23.733
hopefully helps you understand

0:05:23.733,0:05:26.233
what's going on with [br]these nested for loops better.

0:05:26.973,0:05:29.555
Now let's bring back our gems, [br]because they are kind of cooler!

0:05:30.475,0:05:34.066
So there's a lot you can do [br]with nested for loops

0:05:34.066,0:05:36.652
If you just think about [br]everything in the world

0:05:36.652,0:05:39.599
that looks like a two-dimensional grid, [br]like a chess board, a quilt,

0:05:39.599,0:05:43.824
the stars on the US flag, [br]cool patterns and wallpapers;

0:05:44.564,0:05:47.692
to start off your imagination,[br]just play around with this code,

0:05:47.692,0:05:49.806
like by changing the image.

0:05:49.806,0:05:53.166
I will start off [br]by changing it to a heart!

0:05:53.796,0:05:58.256
To show you how much [br]I love nested for loops! Aww!