 Hi everyone, let's have a look at question five from the loops to workshop. So in this question we need to design a Sudoku board and whenever I get to this question in the workshop some more is so distressed by the number of students who don't know what a Sudoku is. So if you don't know what a Sudoku is, definitely go and search that up and give it a go. But if you do know what it is, then we can get started with coding. So creating this board here and what's helpful about this question is that we have some little checkpoints here that we can check off to make sure that we are doing this correctly. So we know that we want a 300 by 300 window. The board itself has a white background, so we can see we've got a gray background, but this must be a white square on top of that. There's a 15 pixel margin around the outside of the board. So this will be 15 pixels each. And then each square in the board is 30 pixels wide and high. The thinner lines are one pixels wide and a gray and the thicker lines are three pixels wide and a black. The thicker lines need to be drawn over the thinner lines. Cool. So let's have a look at creating a Sudoku board. So I've already gotten us started with a 300 by 300 square screen. First thing we probably want to do is look at getting our rectangle, our outside rectangle going. So we know that that is going to be white in the rectangle. You can see in my diagram here. It's top left corner point will be 15, 15 because we need a 15 pixel margin. And if we have a look at our width and our height, we want it to go until 285 on the width and then 285 on the height, because then there's a 15 pixel margin here as well. So that distance will be 285 minus 15. So we get 270. So I want 15, 15, 270, 270. So let's double check that that's OK. Great. That looks good. So to start with, we should probably have a look at our gray lines. And then once we've worked out our gray lines, we can do our black lines. So first, we need to set up our stroke color. So our stroke color will be maybe 100. Looks good. OK, so let's have a look at the pattern that we need. So if we have a look at our vertical lines, we know that the first one is at x is equal to 15, and that's the border. And then we need the width and the height of each tiny cube to be 30 by 30 pixels. So if we have a gap of 30 here, then our x coordinate is now going to be 45. We have another gap here. Our x coordinate will be 75. We want to keep on doing that until we get to 285. So what we need is a loop starting at x is equal to 15. And then every 30 pixels, it will draw a new line, and then it will stop at 285. So that can be easily transformed into a for loop. So we want to start at 15. We want to keep going until we get to 285. And then each time, we're plusing 30. So if we do that, what will our line function look like? So if we look at this line here, this is at x is 45, y is 15. This point here is at x is 45, y is 285. So it's going to look something like x is 15, x is 285. As we increase by 30 each time, our x will increase, and that will draw each line that we need. Great, that looks good to me. I've got the number of lines I need. Three, six, nine, perfect. So now let's do our gray lines for our y-axis. So we don't actually need a nested loop for this, because if we have a look here, we can represent this with our x-coordinate that we've created. So perhaps we need to rename this coordinate so that it better reflects what it's representing. So we know that our first one here will be at 45. So if we have a look at this point, this is at x is 15, y is 45. This is at x is 285, y is 45 again. So that can be represented as our x-coordinate. So 15, x, 285, x. So this will, oops, I've made a mistake here, because I've written 185 instead of 285. Silly mistakes. Great, that looks good. So maybe we need to rename our x. So maybe I'll rename it to xy or pos or something like that. Let's go xy. Awesome. So now we've got all of our gray lines working. And so what we need to do is work out how to get these lines to be thicker. So we can do that with another loop outside of our single loop that we have here. Just have a loop that runs after that that runs every 90 pixels and does the same thing. So we could easily do that. So we'll start at 15 again, but each time we're plusing 90 and our stroke weight is also three pixels. So that works there. So we can put this all inside the same loop. And to do that, we need to have a look at our patterns again. So if we have a look at our thicker black lines, it's going to be at here, at these lines too. So let's have a look at what those coordinates will be. So we've got 15 here. We know it's every 90 pixels. So we do 15 plus 90, we'll get 105. And if you plus another 90, you get 195. And if you plus another 90, you get 285. So those are our points here. So that's our pattern. We've got, we want to draw a thicker line whenever our xy value gets to 15, 105, 195, and 285. So what we need to do is find out what these four numbers have in common and then create a condition that says when we find an xy value that has that common attribute, then we need to increase our stroke weight and then also change the color of our stroke. So it's hard to see straight away what that difference is. We know that each time they are increasing by 90. So perhaps if we removed 15 from each and started from zero, each time we will get, we'll get 0, 90, 180, and then 270. So that becomes a little more obvious. So perhaps if I remove 15 from each, then I get 0, 90, 180, and 270. Well, we know that if we want to create a condition that says if this number is divisible by 90, then we can use some modulus. So if we can say that if our xy value minus 15, if that value, when you divide by 90, you get zero remainder, then we know that it's divisible by 90. So we can have a condition that will draw a thicker line if that's the case. So I'll take this here and I'll remove this. You don't need that anymore. And let's create a condition in here. So I can say if my xy value minus 15, modulo 90 is equal to zero, then I want the stroke to be black and the weight to be bigger. Else, I just want my regular stroke with the smallest stroke weight. There we go. So we do have a small bug where some of the gray lines are going over the top of the thicker lines, which is not what we wanted, but I guess if we want it all under the same loop, then there are some compromises we have to make. And there are lots of ways to do this question. You could have done it with lots of different loops and you'll see in the solution page that there are plenty of different ways to do it.