Nested For Loops (Video Version)

This is a video for subtitling purposes. See real version at: https://www.khanacademy.org/cs/nested-for-loops-2/4838213478776832

A gem, a pretty sweet gem!

But you know what's better
than a single gem?

Would be a whole row of gems!

And of course, now we know

the best way to make a row of gems
would be with a loop.

So let's use a for loop
to draw 12 gems in a row.

Going from left to right
across the screen.

Ohh like that.

So that is a for (var i equal 0

i is less than 12; i plus plus).

And then we will take this line
and move it inside here.

So now we have 12 gems,

but they're actually all piled
right on top on each other.

Remember, we want them
going across the screen.

That means we want
to be changing the x.

And 36 is the x right now,
but we want it to be different each time.

That means we want it
to be dependent on i.

So what we can do
is simply say; i times 36.

So the first one is at 0,
and then 36, then 72, and etc., etc.

Cool! Now we have a row of gems.

And this kind of reminds me

of those those scenes
in Indiana Jones or Aladdin,

where the hero discovers
that underground treasure trove of gems,

but they usually find
way more gems than this.

Not just a row of gems
but a pile of gems.

So how could we actually make gems

going all the way down the screen too?

Well, we could start by just repeating
the for loop, and copy pasting it,

and then changing this y each time.

And, so we'll change it
to 60 and then 90.

So now we have three rows of gems
--and that's cool--

but this is also getting really boring

because all I'm doing is copying
and pasting and changing this one little thing.

And normally, in the past, when we found
ourselves writing repetitive code like that

we would be like, "Oh, maybe
we should just use a loop instead,"

but we are already using a loop;

so what's the solution
to avoid writing this,

you know, doing
this repetitive copy-paste?

Well, it is something we call
"nested for loops": loop within a loop.

So what we are going to do
is make an outer loop,

and that's what's going to take care
of going down the screen,

and then our inner loop is going
to keep taking care of what it's doing now

which is going from left to right.

Let me show you what I mean.

So for - and we use a different
variable j since we're already using i

so for(var j equals 0, and we'll say
j less than 13 and j plus plus).

So that is going to be our outer loop,
in charge of going top to bottom.

And then we're just going to take
one of our previous for loops,

and put it inside there
and fix the indenting,

and we'll delete these old ones.

So now what we have

is we've got them all piled
on top on the same row.

So the thing is that we want
to change the y, right?

That's what we were changing before
when we were copying pasting,

and right now, the y is always 90.

We want to y to change for each row.

So just the way x is dependent on i,
we want the y to be dependent on j.

So we can go ahead and change this

to something like, maybe j times 30.

Tada! Yeahh! So many gems! Allright!

Lets walk through what this does again.

The outer loop creates this variable j
and increments it up to 13.

In each execution of that outer loop,
it runs this inner loop.

The inner loop creates
the variable i which goes up to 12.

And for each execution of the inner loop,

it draws an image on the x and y
which are based off of i and j.

And this i changes a lot more
frequently than the j because of that.

To try and understand this even better,

let's try and actually visualize
the i and j values.

So what I will do is comment out image,

and then set a fill color,

and I'm going to use a text command
to show the value of j.

So text j and then I will put it
at the appropriate spot here.

Now we can see j going from 0 to 12.

This is basically where our rows of gems
were positioned as well.

And now we will visualize "i,
and see how that changes.

So for i, let's make it a different color.

Then we will go put the i somewhere.

And we will change its x
so that it goes across the screen.

We will do the same thing for the y.

Now we can see that the i
is going from 0 to 11.

And the i, as I was saying,
changes a lot more frequently.

And this line of code gets executed
a lot more times than this line of code,

because this line of code is executed
for every execution of this inner for loop

whereas this line of code
only gets executed

for every execution of the outer loop.

So this visualizing of the i and j,

hopefully helps you understand

what's going on with
these nested for loops better.

Now let's bring back our gems,
because they are kind of cooler!

So there's a lot you can do
with nested for loops

If you just think about
everything in the world

that looks like a two-dimensional grid,
like a chess board, a quilt,

the stars on the US flag,
cool patterns and wallpapers;

to start off your imagination,
just play around with this code,

like by changing the image.

I will start off
by changing it to a heart!

To show you how much
I love nested for loops! Aww!