 Okay, so let's have a look at question five from the loops one practical so this question is pretty cool a Lot of people's initial Thoughts is that they have to use some arcs for this when actually you're just drawing a lot of lines So to achieve this here We just need a loop that has four lines and one for each One of these patterns what we're going to do is look one by one at each corner Starting with this one here And then do each of the corners so we'll start with this one here first I'll show you what the pattern actually is Because it's a bit hard to say With this diagram here. It just looks like a bit of a an arc But what's actually happening is? So for this corner here, you're drawing a line from here to here Then you're going a little bit further down on the y-axis For this point here and on the point down the bottom you're going a little bit further on the x-axis So you're drawing a point from here to here Then we go down the y-axis across on the x here And so on so if you keep drawing these lines here And you can already hopefully start to see that I haven't drawn them very evenly But it starts to create that cool pattern there. So To work this one out what I'm going to do is I'm going to write Some code for the first three or four lines And once we've done that we can start to pick up a pattern and then design a loop that will help us achieve that pattern so I've just done a screen 800 by 800 The question didn't see how big it was. That's okay So what I'm going to do is I'm going to come up with some fake Cornets along along the line. I might do it Let's say every 20 pixels 20 40 60 80 so that obviously is not to scale But you get the idea 20 60 40 80 Like that. Okay, so let's go line by line and write some some code So our first line here We want to be drawing a point from here to here So if we look at this point here, that's at zero on the x-axis and 20 on the y And it's corresponding point. It's going down here So we've shifted a little bit over on the x-axis. So let's just keep it even. Let's say it's 20 on the x-axis and The point for the y is The full height so we can say 800 or we can just say height. I want to stay I might even just say H To make life a bit easier Okay, let's have a look at the second line So the second line here is a little bit lower and a little bit more across So we have a look at this point here. That's at x equals zero and y equals 40 and Then it's Corresponding point. Oh, what did I do here? I mixed up my 40 and my 60 you get the idea so this point here will be 40 on the x-axis and the full height And then I'll do just one more line So Now what I want to do is have a look at what's similar what's different in each line And then for the things that are different come up with a pattern So one similarity for each of these lines is that the first x-coordinate is always zero And the last y-coordinate is always the height So when we have our line Those two will always be the same and Then for all the other coordinates, they're the same in each line And they're increasing by 20 each time so We could just Have a test. We don't have to get the correct code straight away. We could just play around with it and see the effect So what if I created a loop that started at 20? Increase by 20 each time which is what these coordinates are doing and kept on doing that until we got to 780 must be less than 800 Hi Plus plus. Oh, no, not plus plus. We want to plus 20 each time We want to draw a line So the first coordinates always zero. We're going to say that our eye represents our X and Y coordinates for each line and Then the last one is the full height So let's have a look at this test code. See how it goes and there we go. That looks pretty cool to me I'm happy with doing it every 20 We could adjust that as well if we wanted if we wanted Every 40 bit more spaced out It's up to you what you do here I might make it more scalable Does it start in a corner? Yeah, okay, so maybe I'll start at zero I'm gonna start at zero. I'm gonna go until I get to We'll say that the width and height have to be the same. So I'm just gonna write width and I'm gonna do it every If we do it every 20 then it would be we want to plus width divided by 40 Some bad maths going on today. No, okay. Good maths today. That's good. Okay. So now we've got that corner there Now we want to do the same thing with each of our other corners like that Okay, so if we do this top left corner here So we've done this one you go from here to here here to here and this Goes to show how handy it is having a pen and paper when you're doing an exam because being able to draw it out and try writing it out with some test Coordinates really helps you identify what the pattern is So Let's say that that's 780 760 740 etc. All right, so let's come up with some code So let's go our first line our first line is at 780 across the x-axis And I'm talking about this line here this point 780 on the x-axis and zero on the y And then it's corresponding boy point. It goes across here It's not lighting up quite well But we'll say that it's zero on the x and about 20 on the y We have a look at our next point here. It's gone across in the x-axis. So now it's at 760 It's y is zero and Then the corresponding point here. Well, that's way too far down. That should be up here We've got 40. Oh, no, we don't Our x is zero That's what happens when you rush our x is zero and our y is 40 And then We've got This here Okay, so we want to have a look at our patterns again. So we can see that Our first y-coordinate and our second x-coordinate are both zero all the time So those two values are the same each time And here we've got something a little bit different which might be a bit tricky For our first x-coordinate, it is decreasing by 20 each time And then in our fourth y-coordinate, or sorry, our second y-coordinate, it's increasing by 20 each time Or increasing by whatever value we have it. So We need to find another way of representing that first x-coordinate here and If we have a look at what we're doing is we're starting at the very At the width and every time we're minusing 20 each time from the width. So 780 can actually be represented as width minus 20 760 can be represented as width minus 40. So if I Replace those here width minus 20 width minus 40 so now We've got these each match up So we can use this same loop here So for this line, we've got our first coordinate is the width minus Our i value our y is zero Next x is zero and there we go. That works pretty well So we've done that one there. Let's have a look at the next Hopefully I can do this one a little bit neater And the others that just did not match up in the slightest Okay, so let's do the top right corner now I want to do it with our coordinates and then I write the coordinates on so from here And then we've got 20 40 60 80 Definitely not the scale again 20 40 60 80 That's shocking, but we get the idea Okay, so again, we're going to do the same thing. So we've got this point here is 20 zero corresponding point is The full width here so I'm gonna write w And our y is 20. We have a look at our second line here. We've got 40 zero in The corresponding point here is at the full width and 40 so I'm not going to do that third line here. We can already see the pattern coming up here very similar again we've got Our first y coordinate will always be zero and our first or sorry our second x coordinate will always be the width and Then again, we've got our 20 40 60 for our other two coordinates So this first one would be the value of I and we've got zero Width and then I again We want to double-check perfect So just one more corner to go So go here to here Here to here It's a little better So let's do our points again. We've got 20 40 60 80 And here if we're starting from This is 800 down here So we'll say this is 780 760 740 720 again Okay So once again, we've got this point here Or this first line the width Also the x coordinate is the width And the y is 20 and the corresponding point here x is 780 and The y is the full height We have a look at our next one here. We've got x is the width and y is 40 in the corresponding point we've got the x is 760 and The y is the full height So I'm just going to stop it to again this time. So let's look at what's similar so Our first x and our second y are width and height respectively So they are always the same And then we've got a similar situation to that second line Where we can represent this coordinate here 780 is the same as The width minus 20 and 760 Is the same as the width minus 40 So now we've got our Same values here. Cool. All right. So Fingers crossed down next line works. So we've got width And that value here is represented by our i We've got width minus i We've got height And if we have a look here perfect Looks pretty cool It's a bit brighter maybe because I did stroke weight is to try stroke weight one Yeah, that's a bit better Awesome So if you adjust these values here Those lines will either get closer together or further away and because we wrote them in terms of width and height We've made it scalable as well. So Can make a tiny one Maybe not that big There we go. That's cool Yeah, so The question does look quite tricky, but once you see the pattern Drawing it out in a piece of paper really helps once you see the pattern It's actually really easy to shave and also it looks pretty cool. So Good question to show off with