Hi, everyone. We're going to do some coding today, and we want to think about being able to work with multi-dimensional structures, modeling multi-dimensional things. We're going to look at a chessboard. Here's one. See, we've got an eight by eight grid of squares, rows, and columns. Eight squares in each row, eight squares in each column with alternating colors. Normally they're black and white, but these are more like brown and yellow squares only. How do we draw something like this in JavaScript with our turtle? That's what we're going to try and do now. The text surface that we will be working with, and looking at really is the idea of a double nested for loop. We've seen those already, we're working with data, but now we're going to use the double for loop to output our two-dimensional grid for our chessboard. Before we get there, let's start off by reminding ourselves about how to draw a single square. If I say rectangle(20, 20) then I will draw a rectangle in the current turtle location. It doesn't update the turtle shape, but it draws in the current location. Let's reset that, and I clear the turtle. It's at the right command, clear? Yes, there we go. Now let's think about how to change the color. I could say, color, I can now say the British way or the American way it doesn't matter and I can change the color, and I can use CSS color specifications to set the color for my turtle. Well, we need the colors with the things that the turtle draws. If I do a rectangle now. That's a rectangle, that's 30 wide and 40 high. I hopefully, this should be a nice green rectangle. It is, it's enclosed in the turtle, that doesn't necessarily help. Let's make a blue one, and we can do other different colors as well. Here's yellow, we can do brown, let's see. There we go. Let me give it a color it doesn't recognize like, oh dear, let's think of a color it might not recognize, mauve. It recognize mauve? No, then it just doesn't draw anything. Well, maybe it does it just doesn't change the color, so we check that. Let's clear it first, and then try the color mauve, and see what happens. No, it doesn't run at all, because it doesn't recognize it. Get rid of that. I think it might recognize violet. Let's see if it likes that color. It's not nice. And purple, great. Then the other thing we need to do of course is to move our turtle, so we can draw our chessboard. If I say, go to, now at the moment it's positioned 0, 0 in the middle. Remember it goes 150 in either direction, negatively and positively, so as left to right, and also up and down in the vertical direction. Let's go somewhere towards the left, maybe minus 120, and somewhere towards the bottom, maybe minus 100 and let's try and draw a square there. There's a square down there, and then we could move along a little bit and draw another square. If I were to say go to minus, that's just moving x minus 90, minus 100, and I can draw another square there. I'm just going to copy paste that line so you get a square the same size. There we go. That's two squares next to each other now. Suppose I could draw one rectangle as twice as wide, but that's fine you get the idea. We now know everything we need to do in order to draw squares of different colors, reset back to my turtle back in the middle of the screen. Now let's try and think about how we're going to draw a row of squares with alternating colors. Well, here we're going to have to use an if statement, and set the color to be a different string, a different value, depending on which square we're trying to draw out, or even squares. Let's make a for loop, here we go for let i=0; i <8; we're just going to draw eight squares in a row for the chessboard, i++. Okay, I've been here, I'm going to say rectangle. Let's just do it 2020 for now. Then we're going to move along a little bit. I'm goto initialX plus 20 times i. I'll move along to the next location. InitialY okay, good. Let's see if this works. So startup by going to initialX, initialY set. These values are, I'm [inaudible] const. Const is like var, only thing called change. It's a constant value. Const initialX equals minus 120. We had before const initialY equals minus 120 as well. Great. So we said the turtle there, and then we're going to iterate eight times through this loop, drawing a rectangle, and then moving along, let's try it and see what happens. Well, there's our rectangle down there towards the bottom of the screen. Though it's all the same color. That's our problem. So actually, what we need to do is put reset to the top, starts loop, again, we need to make sure that we're changing the color of our turtle. So let's put an if statement in here. Look at this. If, now we want to say if i is even. To say that we use the modulo operator, i percent two. This means what's the remainder when you divide i by two? If we're even, the remainder would be zero, okay? Then we're going to say color black, okay? Then if the opposite is true, the remainder isn't zero, so it could, it could be one. [inaudible] the else clause, if I lets me that I need to pull up, the else, we're going to say color red. Good. This should give us the alternating square is in our chessboard. Let's see if we can get this to work here. Let's have a look and see. Yes, look, 1, 2, 3, 4, 5, 6, 7. Who dear, [inaudible] eight square there, i zero, i less than eight. We should have eight squares, 1, 2, 3, 4, 5, 6, 7. We have seven squares. Now why is that? When we want eight squares. Do you know what it is? We're drawing the first square on top of the second because we go to initialX plus initial Y, and then we go to again initialX plus 20 star i. The first time around the i is zero so this becomes zero, so we actually come to the same place. The first two squares get drawn in the same place. So actually, I think what I need to do is I need to move this to the start of the loop and go to the right position before I draw the first thing and that I should delete this one at all out here. That's better, isn't it? Now what's going to happen is I'm going to start off at initialX plus initialY. The first time round that if i be zero, so this would be zero as well. Good, Hopefully this should all be eight squares now. Let's try again. Run. Yeah, and the first square is black, which is when i is zero, That's right. Then red, black, red, black, red, black, red, and I've got my eight squares. Good, right? That's the first row. Now I want to do two rows. Actually I need two sets of loops. As I say, the texts surface will have doubly nested for loop i equals zero, i less than eight, i plus plus. Normally when you do for loops, you have i as the outermost variable, and then j is the next one in, j. Good. We need to indent lists as well. Let's put you two in, and all this as well. Let's indent in here. Draw a rectangle and then we're going to close that for loop, then we're going to close the bottom for loop there. Good. Now i equals zero, i less than eight, i plus plus j equals zero, j less than eight. So j is going to be iterating over the row here and i is going to be iterating over the columns. I want to say for my columns when they get to the next value of i, if it's the outermost loop, I'm going to multiply again by 20 star i. This will stay the same for the first eight squares, which is this innermost loop. Then it will bump up by one so we'll move up to the next row and draw our rows increasing outputs. Let's try this. Well that wasn't what we wanted, was it? What have you done wrong here, oops. I equals 0, i less than 8, i plus plus, j equals 0. J plus plus go to initial x plus 20-star j. Initial y plus 20 star i. Something has gone wrong here. What I'm trying to work out is, look that might have something to do with it. Polybase which is i and j, 20 star i, should stay at the same value for the first eight iterations. That should be changing initial x plus 20 star j, initial y plus 20 star i. What have we done wrong here? I've definitely done something wrong. I see what it is, how stupid. Look. That needs to be a j there, j plus plus. Here we're using i as variable that has to be i plus plus to increment by one, and here we're using j to be added lastly to be j plus plus. That was a silly mistake. Let's try it again. Good. Now we do get the eight rows, look, but actually, the color is the same each time. If you know what? Dennis the Medicis T-shirt looks like. This is a bit like that. We've got the strike p rows of black and red. Here I think what we want to do is we want to make this test dependent on both i and j. We need to put j in it because j is changing in each value, each square along the row, then I think we'll also need to put i in it as well. For the first row, i will be 0, so it will be different and i be 1. Which will mean that we'll go, so in the first row will go. Here we go. Even odd, even odd, even odd so the colors will go black, red, black, red, black red. If you add i and then for the second row where i is 1, we will go odd, even, odd, even. The colors go red, black, red-black. Hopefully, we should get this alternating pattern, the checkerboard pattern look there is there. That's exactly what we want. Fantastic. Good. Here's our code here, we're just stuck go back up to the top and look at the code. First, we do reset to clear the board. Then we work out where we're going to start off our initial coordinates. Then we have this doubly nested loop here, where this is going to iterate over the rows and this is going to iterate over the columns in each row. We go to the correct place, which is based on the column number for the x value and the row number for the y value. Then we do this test here to see whether when we add i and j, we get an even number. That tells us whether the square where drawing next should be black or red, then we draw the square. Notice this 20 here was the same for this 20 here, and then that's us, we're finished. I suppose what we could say something like this, we can say const width equals 20. Then ever we've got 20 in here which just replaces with width. Then that means in future if you want to change the size of the squares, that we don't need to worry about changing it in lots of places. We just change it in one place, width. Again, to demonstrate this now, if I were to change this width to 30, hopefully, the turtle window should, great there we are, that's fine. We see a big chessboard. Good. Will have a look at this in the next lab exercise when you're going to be drawing some two-dimensional draft graphics. Thanks for watching. Bye.
