1
00:00:01,686 --> 00:00:04,237
A gem, a pretty sweet gem!
2
00:00:04,237 --> 00:00:06,035
But you know what's better
than a single gem?
3
00:00:06,035 --> 00:00:08,275
Would be a whole row of gems!
4
00:00:08,275 --> 00:00:09,562
And of course, now we know
5
00:00:09,562 --> 00:00:12,562
the best way to make a row of gems
would be with a loop.
6
00:00:12,562 --> 00:00:16,162
So let's use a for loop
to draw 12 gems in a row.
7
00:00:16,162 --> 00:00:19,523
Going from left to right
across the screen.
8
00:00:19,523 --> 00:00:21,624
Ohh like that.
9
00:00:21,624 --> 00:00:26,006
So that is a for (var i equal 0
10
00:00:26,006 --> 00:00:31,186
i is less than 12; i plus plus).
11
00:00:31,186 --> 00:00:34,939
And then we will take this line
and move it inside here.
12
00:00:36,429 --> 00:00:37,979
So now we have 12 gems,
13
00:00:37,979 --> 00:00:40,305
but they're actually all piled
right on top on each other.
14
00:00:40,305 --> 00:00:43,401
Remember, we want them
going across the screen.
15
00:00:43,401 --> 00:00:45,941
That means we want
to be changing the x.
16
00:00:45,941 --> 00:00:49,524
And 36 is the x right now,
but we want it to be different each time.
17
00:00:49,524 --> 00:00:51,859
That means we want it
to be dependent on i.
18
00:00:51,859 --> 00:00:56,329
So what we can do
is simply say; i times 36.
19
00:00:56,329 --> 00:01:01,627
So the first one is at 0,
and then 36, then 72, and etc., etc.
20
00:01:02,687 --> 00:01:04,575
Cool! Now we have a row of gems.
21
00:01:04,575 --> 00:01:05,755
And this kind of reminds me
22
00:01:05,755 --> 00:01:07,997
of those those scenes
in Indiana Jones or Aladdin,
23
00:01:07,997 --> 00:01:11,306
where the hero discovers
that underground treasure trove of gems,
24
00:01:11,306 --> 00:01:13,732
but they usually find
way more gems than this.
25
00:01:13,732 --> 00:01:17,306
Not just a row of gems
but a pile of gems.
26
00:01:17,306 --> 00:01:20,399
So how could we actually make gems
27
00:01:20,399 --> 00:01:23,676
going all the way down the screen too?
28
00:01:24,806 --> 00:01:29,539
Well, we could start by just repeating
the for loop, and copy pasting it,
29
00:01:30,639 --> 00:01:32,795
and then changing this y each time.
30
00:01:34,565 --> 00:01:37,688
And, so we'll change it
to 60 and then 90.
31
00:01:37,688 --> 00:01:42,308
So now we have three rows of gems
--and that's cool--
32
00:01:42,308 --> 00:01:44,425
but this is also getting really boring
33
00:01:44,425 --> 00:01:49,193
because all I'm doing is copying
and pasting and changing this one little thing.
34
00:01:49,193 --> 00:01:52,859
And normally, in the past, when we found
ourselves writing repetitive code like that
35
00:01:52,859 --> 00:01:56,215
we would be like, "Oh, maybe
we should just use a loop instead,"
36
00:01:57,025 --> 00:01:58,607
but we are already using a loop;
37
00:01:58,607 --> 00:02:01,014
so what's the solution
to avoid writing this,
38
00:02:01,014 --> 00:02:03,854
you know, doing
this repetitive copy-paste?
39
00:02:03,854 --> 00:02:09,518
Well, it is something we call
"nested for loops": loop within a loop.
40
00:02:09,518 --> 00:02:12,132
So what we are going to do
is make an outer loop,
41
00:02:12,132 --> 00:02:14,851
and that's what's going to take care
of going down the screen,
42
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
43
00:02:19,234 --> 00:02:20,997
which is going from left to right.
44
00:02:21,977 --> 00:02:23,406
Let me show you what I mean.
45
00:02:24,006 --> 00:02:29,851
So for - and we use a different
variable j since we're already using i
46
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).
47
00:02:37,274 --> 00:02:41,359
So that is going to be our outer loop,
in charge of going top to bottom.
48
00:02:41,999 --> 00:02:45,037
And then we're just going to take
one of our previous for loops,
49
00:02:45,037 --> 00:02:49,444
and put it inside there
and fix the indenting,
50
00:02:50,274 --> 00:02:52,164
and we'll delete these old ones.
51
00:02:53,274 --> 00:02:55,449
So now what we have
52
00:02:55,449 --> 00:02:58,449
is we've got them all piled
on top on the same row.
53
00:02:59,109 --> 00:03:01,969
So the thing is that we want
to change the y, right?
54
00:03:01,969 --> 00:03:03,999
That's what we were changing before
when we were copying pasting,
55
00:03:03,999 --> 00:03:06,108
and right now, the y is always 90.
56
00:03:06,108 --> 00:03:08,710
We want to y to change for each row.
57
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.
58
00:03:16,188 --> 00:03:19,173
So we can go ahead and change this
59
00:03:19,173 --> 00:03:23,803
to something like, maybe j times 30.
60
00:03:24,663 --> 00:03:29,244
Tada! Yeahh! So many gems! Allright!
61
00:03:29,934 --> 00:03:32,336
Lets walk through what this does again.
62
00:03:32,336 --> 00:03:37,060
The outer loop creates this variable j
and increments it up to 13.
63
00:03:38,340 --> 00:03:42,820
In each execution of that outer loop,
it runs this inner loop.
64
00:03:44,340 --> 00:03:48,073
The inner loop creates
the variable i which goes up to 12.
65
00:03:48,513 --> 00:03:50,058
And for each execution of the inner loop,
66
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.
67
00:03:55,358 --> 00:03:58,707
And this i changes a lot more
frequently than the j because of that.
68
00:03:59,607 --> 00:04:01,228
To try and understand this even better,
69
00:04:01,228 --> 00:04:04,438
let's try and actually visualize
the i and j values.
70
00:04:05,238 --> 00:04:09,057
So what I will do is comment out image,
71
00:04:09,057 --> 00:04:12,027
and then set a fill color,
72
00:04:12,027 --> 00:04:14,976
and I'm going to use a text command
to show the value of j.
73
00:04:14,976 --> 00:04:20,035
So text j and then I will put it
at the appropriate spot here.
74
00:04:22,025 --> 00:04:26,009
Now we can see j going from 0 to 12.
75
00:04:26,009 --> 00:04:29,739
This is basically where our rows of gems
were positioned as well.
76
00:04:32,019 --> 00:04:34,934
And now we will visualize "i,
and see how that changes.
77
00:04:35,444 --> 00:04:38,886
So for i, let's make it a different color.
78
00:04:43,066 --> 00:04:45,635
Then we will go put the i somewhere.
79
00:04:46,475 --> 00:04:49,481
And we will change its x
so that it goes across the screen.
80
00:04:49,481 --> 00:04:53,338
We will do the same thing for the y.
81
00:04:54,688 --> 00:04:59,561
Now we can see that the i
is going from 0 to 11.
82
00:04:59,561 --> 00:05:04,326
And the i, as I was saying,
changes a lot more frequently.
83
00:05:04,326 --> 00:05:08,778
And this line of code gets executed
a lot more times than this line of code,
84
00:05:08,778 --> 00:05:13,855
because this line of code is executed
for every execution of this inner for loop
85
00:05:13,855 --> 00:05:16,387
whereas this line of code
only gets executed
86
00:05:16,387 --> 00:05:18,307
for every execution of the outer loop.
87
00:05:19,527 --> 00:05:22,140
So this visualizing of the i and j,
88
00:05:22,140 --> 00:05:23,733
hopefully helps you understand
89
00:05:23,733 --> 00:05:26,233
what's going on with
these nested for loops better.
90
00:05:26,973 --> 00:05:29,555
Now let's bring back our gems,
because they are kind of cooler!
91
00:05:30,475 --> 00:05:34,066
So there's a lot you can do
with nested for loops
92
00:05:34,066 --> 00:05:36,652
If you just think about
everything in the world
93
00:05:36,652 --> 00:05:39,599
that looks like a two-dimensional grid,
like a chess board, a quilt,
94
00:05:39,599 --> 00:05:43,824
the stars on the US flag,
cool patterns and wallpapers;
95
00:05:44,564 --> 00:05:47,692
to start off your imagination,
just play around with this code,
96
00:05:47,692 --> 00:05:49,806
like by changing the image.
97
00:05:49,806 --> 00:05:53,166
I will start off
by changing it to a heart!
98
00:05:53,796 --> 00:05:58,256
To show you how much
I love nested for loops! Aww!