WEBVTT
00:00:01.686 --> 00:00:04.237
A gem, a pretty sweet gem!
00:00:04.237 --> 00:00:06.035
But you know what's better
than a single gem?
00:00:06.035 --> 00:00:08.275
Would be a whole row of gems!
00:00:08.275 --> 00:00:09.562
And of course, now we know
00:00:09.562 --> 00:00:12.562
the best way to make a row of gems
would be with a loop.
00:00:12.562 --> 00:00:16.162
So let's use a for loop
to draw 12 gems in a row.
00:00:16.162 --> 00:00:19.523
Going from left to right
across the screen.
00:00:19.523 --> 00:00:21.624
Ohh like that.
00:00:21.624 --> 00:00:26.006
So that is a for (var i equal 0
00:00:26.006 --> 00:00:31.186
i is less than 12; i plus plus).
00:00:31.186 --> 00:00:34.939
And then we will take this line
and move it inside here.
00:00:36.429 --> 00:00:37.979
So now we have 12 gems,
00:00:37.979 --> 00:00:40.305
but they're actually all piled
right on top on each other.
00:00:40.305 --> 00:00:43.401
Remember, we want them
going across the screen.
00:00:43.401 --> 00:00:45.941
That means we want
to be changing the x.
00:00:45.941 --> 00:00:49.524
And 36 is the x right now,
but we want it to be different each time.
00:00:49.524 --> 00:00:51.859
That means we want it
to be dependent on i.
00:00:51.859 --> 00:00:56.329
So what we can do
is simply say; i times 36.
00:00:56.329 --> 00:01:01.627
So the first one is at 0,
and then 36, then 72, and etc., etc.
00:01:02.687 --> 00:01:04.575
Cool! Now we have a row of gems.
00:01:04.575 --> 00:01:05.755
And this kind of reminds me
00:01:05.755 --> 00:01:07.997
of those those scenes
in Indiana Jones or Aladdin,
00:01:07.997 --> 00:01:11.306
where the hero discovers
that underground treasure trove of gems,
00:01:11.306 --> 00:01:13.732
but they usually find
way more gems than this.
00:01:13.732 --> 00:01:17.306
Not just a row of gems
but a pile of gems.
00:01:17.306 --> 00:01:20.399
So how could we actually make gems
00:01:20.399 --> 00:01:23.676
going all the way down the screen too?
00:01:24.806 --> 00:01:29.539
Well, we could start by just repeating
the for loop, and copy pasting it,
00:01:30.639 --> 00:01:32.795
and then changing this y each time.
00:01:34.565 --> 00:01:37.688
And, so we'll change it
to 60 and then 90.
00:01:37.688 --> 00:01:42.308
So now we have three rows of gems
--and that's cool--
00:01:42.308 --> 00:01:44.425
but this is also getting really boring
00:01:44.425 --> 00:01:49.193
because all I'm doing is copying
and pasting and changing this one little thing.
00:01:49.193 --> 00:01:52.859
And normally, in the past, when we found
ourselves writing repetitive code like that
00:01:52.859 --> 00:01:56.215
we would be like, "Oh, maybe
we should just use a loop instead,"
00:01:57.025 --> 00:01:58.607
but we are already using a loop;
00:01:58.607 --> 00:02:01.014
so what's the solution
to avoid writing this,
00:02:01.014 --> 00:02:03.854
you know, doing
this repetitive copy-paste?
00:02:03.854 --> 00:02:09.518
Well, it is something we call
"nested for loops": loop within a loop.
00:02:09.518 --> 00:02:12.132
So what we are going to do
is make an outer loop,
00:02:12.132 --> 00:02:14.851
and that's what's going to take care
of going down the screen,
00:02:14.851 --> 00:02:19.234
and then our inner loop is going
to keep taking care of what it's doing now
00:02:19.234 --> 00:02:20.997
which is going from left to right.
00:02:21.977 --> 00:02:23.406
Let me show you what I mean.
00:02:24.006 --> 00:02:29.851
So for - and we use a different
variable j since we're already using i
00:02:29.851 --> 00:02:35.974
so for(var j equals 0, and we'll say
j less than 13 and j plus plus).
00:02:37.274 --> 00:02:41.359
So that is going to be our outer loop,
in charge of going top to bottom.
00:02:41.999 --> 00:02:45.037
And then we're just going to take
one of our previous for loops,
00:02:45.037 --> 00:02:49.444
and put it inside there
and fix the indenting,
00:02:50.274 --> 00:02:52.164
and we'll delete these old ones.
00:02:53.274 --> 00:02:55.449
So now what we have
00:02:55.449 --> 00:02:58.449
is we've got them all piled
on top on the same row.
00:02:59.109 --> 00:03:01.969
So the thing is that we want
to change the y, right?
00:03:01.969 --> 00:03:03.999
That's what we were changing before
when we were copying pasting,
00:03:03.999 --> 00:03:06.108
and right now, the y is always 90.
00:03:06.108 --> 00:03:08.710
We want to y to change for each row.
00:03:09.440 --> 00:03:15.308
So just the way x is dependent on i,
we want the y to be dependent on j.
00:03:16.188 --> 00:03:19.173
So we can go ahead and change this
00:03:19.173 --> 00:03:23.803
to something like, maybe j times 30.
00:03:24.663 --> 00:03:29.244
Tada! Yeahh! So many gems! Allright!
00:03:29.934 --> 00:03:32.336
Lets walk through what this does again.
00:03:32.336 --> 00:03:37.060
The outer loop creates this variable j
and increments it up to 13.
00:03:38.340 --> 00:03:42.820
In each execution of that outer loop,
it runs this inner loop.
00:03:44.340 --> 00:03:48.073
The inner loop creates
the variable i which goes up to 12.
00:03:48.513 --> 00:03:50.058
And for each execution of the inner loop,
00:03:50.058 --> 00:03:54.148
it draws an image on the x and y
which are based off of i and j.
00:03:55.358 --> 00:03:58.707
And this i changes a lot more
frequently than the j because of that.
00:03:59.607 --> 00:04:01.228
To try and understand this even better,
00:04:01.228 --> 00:04:04.438
let's try and actually visualize
the i and j values.
00:04:05.238 --> 00:04:09.057
So what I will do is comment out image,
00:04:09.057 --> 00:04:12.027
and then set a fill color,
00:04:12.027 --> 00:04:14.976
and I'm going to use a text command
to show the value of j.
00:04:14.976 --> 00:04:20.035
So text j and then I will put it
at the appropriate spot here.
00:04:22.025 --> 00:04:26.009
Now we can see j going from 0 to 12.
00:04:26.009 --> 00:04:29.739
This is basically where our rows of gems
were positioned as well.
00:04:32.019 --> 00:04:34.934
And now we will visualize "i,
and see how that changes.
00:04:35.444 --> 00:04:38.886
So for i, let's make it a different color.
00:04:43.066 --> 00:04:45.635
Then we will go put the i somewhere.
00:04:46.475 --> 00:04:49.481
And we will change its x
so that it goes across the screen.
00:04:49.481 --> 00:04:53.338
We will do the same thing for the y.
00:04:54.688 --> 00:04:59.561
Now we can see that the i
is going from 0 to 11.
00:04:59.561 --> 00:05:04.326
And the i, as I was saying,
changes a lot more frequently.
00:05:04.326 --> 00:05:08.778
And this line of code gets executed
a lot more times than this line of code,
00:05:08.778 --> 00:05:13.855
because this line of code is executed
for every execution of this inner for loop
00:05:13.855 --> 00:05:16.387
whereas this line of code
only gets executed
00:05:16.387 --> 00:05:18.307
for every execution of the outer loop.
00:05:19.527 --> 00:05:22.140
So this visualizing of the i and j,
00:05:22.140 --> 00:05:23.733
hopefully helps you understand
00:05:23.733 --> 00:05:26.233
what's going on with
these nested for loops better.
00:05:26.973 --> 00:05:29.555
Now let's bring back our gems,
because they are kind of cooler!
00:05:30.475 --> 00:05:34.066
So there's a lot you can do
with nested for loops
00:05:34.066 --> 00:05:36.652
If you just think about
everything in the world
00:05:36.652 --> 00:05:39.599
that looks like a two-dimensional grid,
like a chess board, a quilt,
00:05:39.599 --> 00:05:43.824
the stars on the US flag,
cool patterns and wallpapers;
00:05:44.564 --> 00:05:47.692
to start off your imagination,
just play around with this code,
00:05:47.692 --> 00:05:49.806
like by changing the image.
00:05:49.806 --> 00:05:53.166
I will start off
by changing it to a heart!
00:05:53.796 --> 00:05:58.256
To show you how much
I love nested for loops! Aww!