 Hi everyone, today we are going to look at the advanced question from the Loops2 Workshop, the SpinnerWeb question here. So to get started with this question, you're given already some four lines of code to complete the red lines. So I've got that code here in my processing window. So we can run that and it works and I've just chosen 600 by 600 as my size. You can do whatever size you want. This will be a scalable program and so what we want to do with these lines is have a look at them and try and identify some patterns like what we do with regular loops. But in this case, there are two patterns that we need to recognize because we've got two different variables that are changing. So if we just consider our first x-coordinate for now, we can do that first and then we can have a look at our second y-coordinate because we can see that those are the two that are changing. So if we have a look at our x-coordinate, we can see that the first two lines are drawn at width divided by three and our second two lines are drawn at two times width divided by three. So another way to write that would be this. So we know that if we were to write or to transform this into a loop, then our x-coordinate the first time around, we want to times our width divided by three by one and the second time we want to times it by two. So perhaps that would be a good starting point for us. So I'll have a loop four inch, we'll say x is equal to one, x must be less than or equal to two and then x plus plus. So let's put all of that into a loop and change this to be x. There we go. So when I run that, I should get the same thing. But if you notice here, I've got some lines that are the same now. So line seven and line nine, for instance, is the same code, which is good because then we can remove some lines of code so I can remove one of these because it's already done once. We don't need two lines drawing over the top of each other. And also line eight and line nine are now the same so I can get rid of one of those. Perfect. So I've simplified my program now, but now I need to work out how to represent my y-value. So again, I've got something similar. The first time I have my y-value, it's at height divided by three and the second time around, it's at two times height divided by three. So again, we can represent it like this and we can have a inner loop that will represent this number one and two. So I can say four int y is one, y is less than or equal to two and y plus plus. We want to remember to indent our code because we want good code style and there we go. So now I've got the first time I loop round y will be one and the second time I loop round y will be two. So now these two lines of code are identical so we only need one of those. So now with this nested loop and this nested loop runs four times because the outer loop runs twice and for each value of the outer loop, our inner loop runs twice, that's four times. So that means we will be drawing four different lines. So when I run this, I should still get the same lines and we do, which is great. So that looks good. If we want to improve our code here, we can incorporate our width divided by three and height divided by three into our loop variables, but we can do that a little later. First we should try and get all our other points working, sorry our other lines working and then we can look at writing some better loops. For now we just want a loop that works. So this line is red and we also want to do some blue, black and green lines. So I'll set those strokes out, I've got the stroke blue, I've got green and then I've got black. So let's have a look at the blue lines first and we can work out what our pattern is there. So I've got my white board here, don't need that anymore, that's from the red lines. So if I draw out my blue lines, I'll have something like this, it's a very rough estimate and we know that this point here will be the width divided by three and this will be two times the width divided by three and then the same goes for the height. So I'll write w instead of width, so I've got width divided by three here, I've got two times width divided by three, I've got the height divided by three and I've got two times the height divided by three. So let's work out what our line functions will look like. So if I have a look at this top point that is width divided by three and zero for our y and our corresponding point is over here and so that's at the full width, height divided by three. And if we have a look at our next point, so from here to here, we've got the same point here, width divided by three, zero and this point here is width and two, height divided by three. Our next point we'll do from here to here, so that is two width divided by three, zero and the other point is width, height divided by three. Now I'm running out of space. Our last one, we've got two width divided by three, zero, width, two height divided by three. Great, so we've got all of our coordinates for our lines, so let's try and find some patterns. So we can see that the first y coordinate is always zero, so that's something that is consistent and we can see that the second x coordinate is always the width, so that's another thing that's consistent. The things that are changing, you'll notice that it's the same pattern that we had for our red lines, it goes width divided by three, then two width divided by three and then same with the height, we've got height divided by three and two height divided by three. So we've got the same pattern going on, so those can go into our loop as well, so I'll move this over a bit so we can see. So for our blue lines, we've got the same, let's just copy and paste this one, we've got the same pattern going on, but instead, this one's still zero but this one's at width, there we go, so now we've got that pattern there and then we can do the same thing with our remaining lines, so now we can see that we just need to see the two things that are the same. So if I have a look at my green lines which are in the bottom right hand corner, so I'm only going to do two lines because then we'll be able to see the pattern, I'll do this line and this line, so our first point down here is at width divided by three and then height and then the corresponding point up here is at width, height divided by three and the next one from here to here I've got width divided by three height and then I've got width two height divided by three, so we can see our pattern here, this is always going to be height, this is always going to be width and then our other two coordinates are going to follow that same pattern, so for the green ones I've got this will be my height and this will be my width and then lastly the black lines, I'll just copy and paste that, these two are going to change so what are they going to be, so we've got these aren't great lines, it's not looking as good as the processing window, so the points I'm going to do are the points from here to here and the points from here to up here, so let's start with this point here, that point is width divided by three height and then the corresponding point up here is zero for the width and then I've got height two height divided by three and then my next one which is from here to here I've got width divided by three height and that corresponding point up here is at zero height divided by three, so this time around I do have this being consistent and I have this as our consistent point, these height coordinates are the other way around but it doesn't matter because it's going to be the same pattern, same as if when you're planning your points you've got things the other way around so maybe you had yours as perhaps you had your points like this, it doesn't matter because with our points method it just has two different sets of coordinates and it will draw a line in between, so that's okay, so when we run this, awesome that looks pretty good, so again perhaps you had your coordinates the other way around, maybe add it like this, it doesn't matter, as long as you can identify a pattern then that's all that matters, so we can see that we have a lot of width divided by three and height divided by three so perhaps what we can do is change these loop variables to represent those values rather than one and two that might be something we can do, so for our x we know that the first coordinate we're drawing out is at width divided by three and that the next one we're doing is at two times width divided by three and each time we're adding another third of the width so we can do that and then that's the same with the height, we've got height divided by three that is equal to two times height divided by three and then we're crossing a third of the height each time there we go, so now what we can do is just have these in terms of x and y and that looks a lot neater, might I'll code a bit better, yeah that looks heaps neater we run this we should get the same thing again, great so that works well so that is how you identify patterns when it comes to nested loops definitely a little trickier finding the patterns compared to finding them with just single loops but if you use some diagrams like these it becomes a lot more manageable