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!