 Hey everybody, this is Brian and welcome to the 80th... wow, 80? Yeah, 80th cute tutorial. Today we're going to be covering transformations. This is continuing our drawing series and this is going to be a little more advanced compared to what you used to. So fasten your seatbelts and let's just dive right on in here. All right, now I'm going to whip through a lot of the basic stuff just because, well, we already know it. So if you don't know it, if you have no idea what I'm typing and why I'm typing it then please, please, please go watch my other tutorials or grab a good book on cute and get up to speed because I don't want anybody to feel lost here. All right, so we're just going to override the paint of it and if you wonder why I right click and I go refractor then add definition to dialogue.cpp it's because one of the people who watches these videos and actually I remember who you are. Andre Pl, he also writes in with another good tip which says you can use control alt up and down to duplicate the line with the cursor and control shift up down to move the line up and down. He's got a couple really good tutorials. I just wanted to say, hey, thanks man. You like saved me a lot of work on some of these. All right, so let's dive right in here. So we're going to make a cue painter object. We'll call it painter and we're going to make a cue pen and we're just going to call this pen one and we're going to make it black. I like black. Black's a good color. All right, then we're going to say pen one set width and we're just going to we're just going to say six. I want to look at that one more time here. Control alt up and down to duplicate the line you're on here. Let's try this. Control alt down. Hey, it works. Sweet. Let's see if it'll do a couple lines at the same time. Oh, that's awesome. Sorry, I get excited about the littlest things. All right, that is a really good tip though. So we're going to say pen two. Hey, oh, I love that. And then we're going to make of course pen three and four and three is going to be green. And if you're wondering why we're making all these pens, it's because we are going to be doing a heck of a lot of drawing in this tutorial. And not the not the entry level how to draw a circle kind of thing. So got a little bit of preliminary to set up here before we start. So bear with me. So now we've got our four pens, pen one, two, three and four, they're black, red, green and blue. And we're going to just make a Q wrecked object. And we're going to say wrecked, and we're going to say 100, 100, 100, 100. We're just going to make a perfect square at 100, 100. And then we're going to painter, set pen. And we're just going to say pen one. And we're going to draw the rectangle. Just add a little extra one there. And of course, coordinates direct. Now, save and run. And of course, you're sitting here going, Brian, I thought this was not going to be one of those entry level how to draw a rectangle. Well, you're right, it's not. Then why do I see just a rectangle in here? Because I'm going to show you this black rectangle represents the original starting point. What we're going to be covering today are going to be called transformations. That includes how to rotate, how to scale, how to share, how to translate. Remember in the last try we talked about translating where we moved it at an offset. We're going to cover all that stuff today. Now, if I sign a little congest, I have to apologize, I am still, still, still getting over a cold. So say painter. And we're going to say translate. And what we want to do here is say 150 by negative 60. What in the world are those numbers mean? Well, I'm going to show you. Rather than explain it, I'm just going to show you. So we're going to say painter.Rotate. And we want to rotate the canvas 45 degrees. And then we're going to say painter. Set pen. And of course, we want pen two. Because we want to be able to see what's going on here. And then we're just going to draw a rectangle again. Now notice how we're using the same rectangle, which is at 100, 100. And it is 100 wide, 100 long, or I should say 100 tall. But we're using this translate. And we're using rotate. So let's build and run this and see what happens here. You notice how there's our red rectangle. Now we should probably go in here and set the width here. That's why that's what all that cold medicine does. Do it makes you all groggy and not paying attention to what you're typing. Okay, let's run this again. Little explanation. There we go. Now you can really see what's going on. The black one is our original. The red one is the one we just rotated. Now we didn't actually rotate the rectangle. We rotated the canvas. So imagine this window is a piece of paper. We just rotated that 45 degrees. Now the problem is we didn't rotate this area of the screen in the 100 by 100. We rotated at zero. And that's why you need that translate. Let's take translate out of there and see what happens. Notice how, wow, our red rectangles are actually going off the screen. It's because we rotated from this 00 up here. So just draw a line straight here to center this. Now rotate that 45 degrees. What happens ends up over here. That's why you need that translate. Because what translate does is it adds an offset. What we said is add 150 and then minus 60. So let's actually change the minus 60 to zero just so we're not translating that. And so let's see what's happening here. So the 150 actually said bump this out 150 pixels. But you notice how it's still down lower because we took the center axis and rotated it. So now we need to bump this up. We do that by giving it, of course, a negative number, which in this case is negative 60. Let's run this again. And there we go. So now we have it perfectly aligned in the center of our original. Remember, when you call a transformation, especially like rotate, it works off the 00. The 00 coordinate is the upper left. So it's going to rotate based on the upper left. So this corner right here would no longer be here. It would be down here somewhere. And that's why the square moved almost off the screen. So I hope the translate command is a little more clear. And yes, it will take a little trial and error in your part to really figure out, you know, what you want to do and how you want to do it. So now we're going to say pin three. And what we want to do with pin three is we want to scale. And we're going to say painter that scale. And what we want to do is say 0.5 and 0.5. What we're going to do is we're actually going to shrink that rectangle. Remember, we're using the same rectangle over and over again. The coordinates of that rectangle are 100, 100. But we're rotating the canvas. We're using pin three, which is I believe the green pen. And then we are reducing it by half 0.5. Any guesses what's going to happen here? Let's find out. Build and run your project. And there is your green. And notice how it is above the red. It's almost exactly aligned. Actually, it is exactly aligned. Well, what happened? Well, we scaled it, meaning we took this red one. We reduced it in size. But because we reduce the scale, it doesn't stay in the same spot. It actually moves. And that's why you need the translate to give it an offset. So if you know that this was 100 and you did translate 50, 50, you would actually be able to bump this back down into the center. But I just wanted to show you what scale does. You can actually scale it down. Now, you are scaling the entire canvas down, not just that rectangle. It's important to note that because anything you draw from this point forward will be scaled down 50%. Scaled and rotated, I should say. All right. Now, we want to undo everything that we've done to this point. We want to say, you know what, I've made so many changes. I just want to go back the way things were. I'm going to say reset transformation. It resets all your transformations right back the way they were. I'm going to say painter.shear. What does shear do? Well, shear kind of takes it and makes it crooked and cockeyed and does all sorts of weird stuff to it. So we're just going to shear it by .2.2. We should say 0.2, 0.2. Painter, set pen, and we're going to say, of course, pen 4. Then painter and draw a rect. And we're going to just use the same rectangle over again here. Save your work and run. And I want to show you exactly what's happening here. Now, you notice how we've done a lot here. And let's review really quickly. We've started our original black at 0, I'm sorry, 100, 100, and it's 100 long by 100 tall. So it's a perfect square at 100, 100. We rotated the canvas, which of course takes this square, shoves it down here because we rotated 45 degrees. And then we did a translate to move the red square back up here into our visible canvas. And then we did a scale to say, okay, scale it. We reduced it by half, which of course moves it across the canvas also. Now, if you wanted to move it back to the original location, unfortunately, you would have to do a translate. And then we did a shear, which is this blue rectangle here. Now, shear kind of makes it crooked and wobbly. We've actually made like a diamond shape. But you notice how it's back at the kind of 100, 100. It's because we did the reset transformation. If we didn't do that, well, let's be honest, I don't know what's going to happen. Let's get rid of our reset here. So it'll be rotated and scaled at the same time. So you can see how it's still rotated, it's scaled. So as you can see, drawing with Q can get incredibly complex. And you have this coordinate system that you're going to have to deal with under the hood. Your saving grace is really going to be reset transformation and translate. And I have to admit, with me working with translate for the first time was very trial and error. I didn't just magically come up with this negative 60, negative 150. I am not a math whiz. And I don't pretend to be. The 150 was actually kind of easy for me to figure out because I took the 45 degrees and just basically added 45 onto 100 and then I added another 5. The negative 60, I have to admit, was a trial and error. I'm not a math whiz, not by any means. I'm sure some of you out there are going to go, oh Brian, there's a formula for that. Well, please send it to me because I don't know. So a quick review. What we've done here is we have covered the transformations of rotate, scale, shear, we've learned how to translate the coordinate system after we've done our transformation and we've learned how to reset all the transformations. Now quick note, once you make a transformation, for example, rotate, everything you do after rotate will leave the canvas rotated 45 degrees until you reset the transformation. Or I guess you could rotate it negative 45 if you wanted to. Anyways, this is Brian. I wanted to say thank you very much for watching these tutorials. I hope you found them educational and entertaining and keep up that feedback. I really love hearing from you guys, especially when I get really useful comments like from Andre Pial about how to move things around and how to copy things. That's really useful. I love it.