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!