 Hey guys, right now I'm going to be going over Functions Lab 2, Question 3. So for this question we are asked to write a program that draws a colorful grid. And every time a key is pressed, the colors of the cells should change. So the output should look something like this. And every time we press a key, the colors change. So we'll start out with this one by putting in our setup and our draw. And we'll just set the background in here to white. Although it doesn't matter too much because we're going to cover it up anyways. We'll make a nice big screen. And then we'll put our draw function in. We need our draw function to actually animate the code, but we're not actually going to put anything in the draw function because we know that nothing's going to happen repeatedly. Something's only going to happen when we press our key. So we need a key pressed function. So for this, we are given the hints to write a function to draw a colorful cell and then also to write a separate function that draws the grid. So we will start out by drawing our grid and we know nothing's going to be returned to us. So it's going to be void. We'll call it draw grid. And for this one, it won't take any inputs yet. So now we'll come into here and we'll just go through and do a for loop. So we're going to have a nested for loop for this one. The outer for loop I'm going to use to keep track of each row that we're working with. And then I'm going to use the inner for loop to keep track of the columns. So we'll start with our outer loop and we'll say for into i is equal to zero. So we want to start it at zero. We'll go until i is less than the height. And then we'll say i plus equals whatever the length of our cell is. So for this, I could just put in like 50. But then we don't really know what 50 is doing. So for this, I'm actually going to create a local instance. And it's going to be an integer. I'm going to call it cell height. I'm going to equal it to 50. So now I can clearly see, okay, this value of 50 is the cell height. And then I can come in here and write my inner for loops. I'll say for int j is equal to zero. And I'll say j less than the width. So now we're going through and we're focusing on each cell in the row. And then I'm going to increase j by the cell width. And I will come into here and create a new instance or new variable called cell width. And I'm going to equal it to 50 as well. So now I can come in here and I can actually draw my specific cell. So remember our hints suggested that we create a different function to draw the cell. You could just put your code to draw the cell in here. But that might get a little bit confusing and a little bit jumbled. So we'll create a different function to draw the cell. And we know that each cell that we draw is going to need variables for the x and the y position of that rectangle or of that cell. So I need to give it the j position for the x and the i position for the y. So now I'll come down here and I'll actually write out this function for draw cell. So I know it's not going to return anything to me. We called it draw cell and it's going to take two inputs. But I'm going to call them different things than j and i. I'm going to call them our row, our and our column. So draw cell is going to take the i value and the j value for its x and its y positions. And then we're going to come in here and we're going to insert that j and that i into these local instances of row and column. So for this, we have to randomly set a color. So I'm going to use this variable color. I'll just call it C and it's going to be three random values between 0 and 255. And then we'll just copy and paste this to speed it up a bit. So now we've got another local instance of this variable C. Now we will come in here. We'll set the stroke equal to white. We're going to fill it with our random color and then we're going to draw our cell. So a rectangle and the position is going to be where our j and our i was. And now we've come into here and insert them into these local variables. So it's going to be row at row and column. And then for this one, we came up to here and we set our cell height and our cell width, but now we actually need to access these two variables into here. So now I need to change these variables to be local instances because it needs to be accessed by more than one function. So we're going to create these to be local instances. So now draw grid can use the cell height and the cell width and draw cell can use the cell height and the cell width. So now we can come into here and we haven't actually called. We've used draw grid to call draw cell. So for every y position for every x position we need it to be at, it'll draw the cell. But now we need to actually draw the grid. So we'll come up here and just set up. So when we first set up the program, we need it to draw grid and then also whenever our key pressed, we need to redraw that grid and that's going to set off the whole process of redrawing all those cells of coming into here and then resetting those random values. So now we can check this and it all works. So again, just to summarize what we've done. We have come up here and we've created these local variables of cell height and cell width. So now I can change these to be like 100 and 200 and it comes in and it goes off the screen a bit. But it's there where I could do like 25 and 50 and it still works. So now I can really easily come into here and change my cell height, change my cell width and I know what it's going to be doing. So I've created these local instances because it's going to be used in multiple different functions. So every one of those functions needs to be able to see what those values are. We've come into here, we've used a function that we've written to draw the grid. That's going to go through a nested for loop to keep track of the y position here and the x position here. And then once it's got that i and that j, it's going to call another function that we wrote called draw cell. It's going to insert the j and the i values and we'll come down here into draw cell. And then we create local instances of the row and the column that we can use here in our rectangle. And then we've also created a local instance of the color C to set the random colored fill. And then every time we press our key, it's going to redraw the grid and it'll come through here and it'll set off the whole process for picking new random colors again. So you can have a bit of fun with it, you know, maybe try adding some different things to it or changing the shape around. But the more you work with it, the more you'll get used to it and the more it'll make sense.