A Gem, a pretty sweet gem! But you know would be 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. Umm… 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” – A 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 this time, called j, since we’re already using i so for(var j equals 0; j less than 13; j plus plus) Okay, 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. Okay. 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 upto 13. And, In each execution of that outer loop, it runs this inner loop. The inner loop creates the variable “i” which goes upto 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, lets 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. Okay. 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 it’s 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 gets executed only 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!