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!