 Hi everyone. So today I'm going to have a look at question four from the loops one practical where we use loops to draw a pattern. So let's get started. So what we have is this picture here. We know that we want to draw what looks like 18 lines. It's actually 20 lines. There are two lines here which are just a dot. So what we could do with this question is we could not do it with loops and we could do 20 separate line calls but we could definitely make it more efficient. We can write a loop that will only require two separate line calls inside it and that's a much better way of writing this program here. So what we're going to do is we're going to have a look at these two different patterns. We'll have a look at the red ones and then the blue ones. We'll have a look at each of these lines, see if there's a pattern and then try and design a loop that will create this pattern for us and we're going to look at it one at a time. So first off I've got my diagram here. I've got my red lines and we want to write this program so that it's scalable. I've just done my window as 400 by 400 just to make it a bit easier but we want to write this so that it's scalable. So that's one thing to keep in mind and the way that I worked out each of these coordinates here is in the question it asks to create lines that are evenly spaced apart, 10 evenly spaced lines. So if we want 10 evenly spaced lines then we want to have a line in this case because the width is 400 every 40 pixels which is represented as width divided by 10. So that's something to keep in mind if we want it every 40 pixels width divided by 10, 10 times. But to get started with this question what I'm going to do is write out some line function calls to do these first, well this is actually the first one but I'm going to write some for these three lines here. See if I can find a pattern and then we can design our loop. So let's get started with this one here. So if we were to write some code for this one we look at this first point here. Here we've got x is equal to 40 and on the y-axis it's at zero. So this would be at point 40-0 and then the other point on the x-axis it's still 40 and on the y-axis it's gone down so it's 40 on the y as well. Okay and then the second line of it look at this point here it's at 80 on the x-axis zero on the y and then our other point here we've got 80 on the x-axis and then 80 on the y as well. We'll just do one more line, next one here got 120 on the x, zero on the y and then we've got 120 on the x, 120 on the y. So we can already see a pattern coming up here. Okay so we're finding the pattern in these three lines. We want to look at what's similar and what's different in each so that we can come up with a loop that will help us achieve what we need to achieve. So the first thing that steps out to me or stands out to me is that the second coordinate, this y point for the first point, first coordinate is always zero. So that's something that's common to each of them. We can see that they're all zero. The next thing that I can see is that every other coordinate we're given here is the same value and that's the same for each of these cases and then the next thing that I can see is that every time we're going to the new line it's increasing by 40 each time. So we can already see our pattern. We want to draw lines starting at the coordinate zero and then when we add 40 each time we'll be drawing a new line and we're drawing 10 of those lines. So we'll continue drawing these lines until we get to 360 so we won't be drawing one at 400. So now that we can see a bit of a pattern we can start to draw our or write our loop and I'm going to do a for loop for this one. So we're going to create a variable i and that's going to represent the x and y coordinates except for that y coordinate here of each line. So the first line starts at zero. We can sort of see it up there and we want to keep on drawing more and more lines until we get to this point here. So i must be less than 400. We can make it scalable later. Let's just do it for the 400 value and every single time we want to increase i by 40 so that we're drawing a new line every 40 pixels. We want that to be read and here we can write our code. So our i we said represents each of our coordinates except for the second one. So we can say i zero i i and if we trace the values of all the variable here for our loop we would see that the first four times that this runs well the first time i is zero we draw a line at zero zero zero zero zero. The second time the loop runs i is equal to 40 so we've looped around again i is 40 so we're drawing it 40 zero 40 40 which is this one here increased by 40 we go back around now we're doing it by 80 zero 80 80 so this should work and we're happy great so that's working well there. So now what we want to do is have a look at the pattern with the blue lines work out what that pattern is and then write some more code we just need two lines of code one to change the color to blue and then we need our line values here so let's have a look at our next diagram so again i'm going to do the same thing i'm going to do the first three lines and then see what the pattern is and i'm not going to include the line at zero zero zero zero because that's quite straightforward okay so if we have a look at this coordinate here there is where x is zero and y is 40 and if we have a look at the matching point here now x is over a bit more so x is 40 and y is 40 so it's a very similar pattern again if we have a look at our second line here this point here we've got x is zero and y is 80 and then our second coordinate here it's gone over again on the x-axis so x is 80 and y is 80 still and then last of all i'll just write this one quickly because i'm hoping everyone can see that pattern here so if we have a look at what's similar and different it's very similar to the to the red lines but this time it's that first x-coordinate that is the same each time and then for each line every other coordinate is the same and those coordinate values are going up by 40 each time again and it's great that we can see that pattern there which means we don't have to write a second loop both of these lines can be done inside the same loop so we know that the first x-coordinate is always zero and then we can use this i variable again to represent our values here because they're the exact same as the ones that we had above 40, 80, 120, 40, 80, 120 which is really handy in this case perfect and that works there so now if we want to focus on making this scalable we want to have a look at our loop values up here so instead of saying 400 as where we're going to stop or 400 is our width or our height so we can have the condition here that it must be a screen of equal height and width for this to work so width and or height doesn't matter which one you do and instead of writing plus equals 40 we said initially that 40 is the same as width divided by 10 so that's how we can represent it so here we've got the same looking output here but if we change the screen size we've made it scalable which is great maybe not the stroke weight but that's fine so that is how you do question four