 Hey everybody this is Brian and welcome to the 83rd Qt tutorial with C++ and GUI programming. We're going to kind of continue our little journey through the Q graphics view and we're going to call this one animation. And as you might have guessed yes we're going to be doing a bit of animation. I have to apologize it's been a while since I've done a video. Life's been just really really crazy lately. I got very sick then we had a tornado. A lot of people didn't have power or running water and the city I live in quite literally looks like a war zone right now so it's been kind of a weird ride. Alright now what we're going to do today is we're going to make a very simple animation and it's also going to be a bit advanced and it's very hard to find something that's simple yet advanced and that's what I've been kind of striving here. So let's just dig on in and start working with this thing. So open dialog.h and of course I am assuming making the assumption here that you have been following along in my other videos and if you haven't please watch them before you try watching this one. You may get very lost very fast if you try to just watch this one and we want a cute kui. One bit of news is I'm actually rebuilding my website so I'm going to have all of the source code for all the tutorials up on the website. So you could actually go to my website and don't worry there won't be a membership or advertising or anything really stupid like that. You just basically you know you download the source code right after you watch the video and you could watch the videos right off the website too. I'm going to link it back from from YouTube. All right we want a q graphics scene. Help if I could spell it right. Graphics scene. Here we go. Sorry I just ran three miles today. I've been running on top of my normal workout regimen so I'm a little little slow right now. Just bear with me. And we want a q timer and we're going to say timer. And we're going to flesh this dialogue out before we really do anything else here. Very simply what we're going to do is we're going to have a q graphics scene. We're going to add our q graphics view here in a minute. We're going to have a timer and that timer is going to fire off and do something. So let's take our dialogue here. Very simply just throw a graphics view on there and then tell it to take up the entire document. Then open up dialogue.cpp. Now what we want to do here is just very simply say scene equal new. We want q graphics scene. Like I said help if I could spell today. There we go. And we're just going to give it this as the parent. And then we're going to say UI graphics view. We're going to set the scene. There we go. Very simple. And now what we're going to do is we're going to do anti-aliasing. If you don't know what anti-aliasing is it's a very simple concept. It just smooths out the graphics. And we're going to set render hint. And what this does is it tells the graphics view what sort of rendering we want to do. So we're going to say q painter and anti-aliasing. And let me kind of scroll over here so you can see that. So we're just saying set render hint, q painter, anti-aliasing. And you can look all this up in the documentation. I'm actually not going to explain a lot of these commands. I'm just going to whip through the code. I really want you to grasp the concept and you can go back later kind of on your own time and explore the documentation for each one of these things. So scene and then we're going to set scene wrecked. And what this does is you can set the size of the scene within the view. And that's an interesting concept. We haven't really discussed this yet. And I'm going to show you what we're talking about here. You see I'm punching in some magic numbers. We're saying negative 200, negative 200, 300, 300. So what are we doing here? Well you remember when we run this it will show it was zero being dead center. So we're saying negative 200, negative 200, and then 300, 300. And we're just basically making a big rectangle here. Cue pen. We'll call this my pen and we're going to say cue pen. And we're going to say cute red. So we're just going to make a red pen here. And now we want to make a few lines and we're going to actually draw out on this scene. I'll show you here in a second what we're going to do. It's kind of kind of confusing to really explain. We'll say cue line F and we'll call this top line. And we want to give this the the location of the lines here. So we'll say scene, scene rect, and we want top left. So what we're doing is we're saying the bounds of the scene rect that we just set here. The scene is within the view. We're using that as our locations for our lines. And this will become pretty obvious here in a second what I'm doing. But right now you're probably looking at the screen going what are you doing. So bear with me. Because this is a more advanced topic it's going to take a little bit of setup here. And you can see what I'm doing here is I'm going from the top left to the top right. And then just for the sake of speed here I'm going to just literally copy and paste this line a few times. And then we're going to make a couple different line objects here. And what I'm going to basically do is make a box. And we'll call this left line. And then we'll call this right line. Now you might be saying well if you want to make a box why don't you just do a rect. Well I'm going to show you. What we want to do is we want to create a box and have our objects inside of that box. And so we've got top left. And now we need to do bottom right. Whoops. Kind of screwed that one up didn't I. Here we go. But that's really why I want to oops not bottom right bottom left. Sorry I got a little confused there. And then this one we want bottom right. What I really want to do with the website sorry kind of got lost there was I want to be able to have the source code on there so people can find it rather easily so they don't have to retype all of this garbage. And uh well I think you know the benefits of having the source code. So let's just leave it at that. But the website's half done. I'm hoping to have it done in another week or two. It's going to be all database driven so you can search for things rather than poking around through 500 links and looking for them. All right now let me check my notes real quick here. Make sure we got this all right. So we got top left top right top left bottom left top right to bottom right bottom left bottom right. So we're just basically making a box with a bunch of lines. Now we're not using a wreck because in this tutorial we're going to be using collision detection. And so what we need to do here is scene. Whoops. I totally misspelled scene didn't I? Yes I did. Sense. It's funny. No I guess I didn't. There we go let's fix this. Misspellings bug me. And of course now this won't work right. So we've got to touch this up a little bit. Like I said I ran three miles today. I'm very sorry. My mind's just kind of scattered brand right now. And we'll add line. And we're going to just add top line. And we're going to add my pen. So we're just going to draw these lines out now. And let's just copy and paste these in here. I'm a big fan of copy and paste less typing I have to do the better. So we're just adding in a bunch of lines. So let's save our work. Run this. Uh oh. Yep see that's what happens when we have a little bit of a spelling here. Not a big deal we can fix this super quick. Once again I apologize it's been it's been really crazy. Like I said I got really sick for about two three weeks. Then we had the tornado that ripped up the city and life is just now starting to go back to normal. Not quite there yet but it's getting there. All right now tick tock tick tock. Once this thing always builds there we go. So what you see here is we've got our graphics view and inside of it we have our scene. And you see these lines and we see we scroll but let's pull this out. Now you can see how it's like zero zero negative two hundred negative two hundred three hundred three hundred. That is how this works. We have our view in the view we have the scene and in the scene we have set the scene wrecked. I mean the outermost edges of the scene. And we've drawn these lines in here. We could have used erect but we want these lines because we're going to add objects in this box and we're going to move the objects around and use collision detection. So we're going to add a box and the box is going to move and when it hits this wall it's going to bounce back and then when it hits this one it's going to bounce back again and again and again. And then we're going to add a bunch of those boxes and they'll bounce into each other and into the walls and all sorts of fun stuff. So now you kind of understand what we're going to try to accomplish here. Sorry it took so long to get to that point but like I said we had a little bit of setup to do here. So we're going to say timer equals new and we're going to say queue timer and we are just going to connect that timer. Whoops somebody actually contacted me and said they were going to make a rap video out of all the times I say oops I think that's just hilarious. I actually want to see that if it ever gets done he's like me he just does no time but I think it would be kind of funny maybe like oops oops oops or something like that. I know don't quit my day job right. Like I said if you have absolutely no clue whatsoever what I am doing please watch the other videos. This is an advanced video and unfortunately we don't have a lot of time to sit and explain every single little thing here. But I am going to explain what we're doing right now. What we're doing is we're creating a timer and we're going to say okay this timer is going to run every 100 milliseconds and we're connecting that timer to signal timeout meaning every time this timer ticks to the scene's advanced slot. Now what does that do? Well the scene has a slot called advanced and what that does is it notifies every object within the scene that it's time to advance one step or multiple steps because that's what an animation is. It's a series of steps. I mean if you ever made your own cartoon in a notebook where you draw on a page and each page is slightly different then when you flip it with your fingers it animates. Well that's what the concept of an animation is. You have multiple steps and we got this timer firing off. Okay so we have got the basics now for our animation. Now what we need to do is add our own item. So let's just right click and we're going to add new and this is just going to very simply be called my item. Help if I could spell item jeez. I am like typing challenge today my item and actually let's just capitalize that sorry. Like I said it's been just one of those weeks. All right now we've got my item and we want to add a few includes and just for the sake of time I'm just going to copy and paste out of my notes. I had a couple people write and complain that I spent too much time adding includes when I could just copy and paste them. So here we go. We're including cue painter, cue graphics item and cue graphics scene. Now we want the painter because we want to be able to paint. We're going to actually inherit the cue graphics item and we want the cue graphics scene because we want to be able to reference that back. So let's actually do our inheritance now. We'll call this public we could say cue graphics item. I had another person right in. I actually I love hearing from you guys so please keep up the feedback and it just kind of makes me smile every time I get a message but he wrote in and said he laughs every time I make a spelling because he does it like nine million times a day and it makes him feel good to see somebody else screw up. So now based on our previous tutorial of course we need to have a few items in place if we're going to inherit a cue graphics item. One of which is the cue bounding rect and that is of course a constant and then of course we need our paint and we can just you know use IntelliSense to kind of fill this in for us here and that just saved us a whole lot of typing and now we want our protected and there's advanced. Now you notice how it has this int phase. You could also call that int step or whatever you want but that we're getting that from the timer. Remember the timer is going to fire off on the scene. Let's pull up that dialog.h here. We've got that timer and that's going to fire off the advance in the scene. The scene is going to tell every object in it to advanced and then how many phases or steps. And then we're just going to have a few private variables here and we're going to make a cue reel called angle and another one we'll call speed. This is going to be the speed of our object and we want a function do collision because we want to do something when the object collides with another object right? Okay. Now we're just going to add these in and of course you just right click go to refractor and then add definition to my item.cpp and it adds a code in for you so you don't have to type any of this stuff out. That's one of those hints I love. There's a bunch of hints people have been sending me in and I'm really sorry I just have not had time to sit down and burn them into memory. There we go. So now we've got our my item. Let's just give it a quick build make sure we didn't screw anything up here. Once this builds we can start filling it in and okay you notice how the only thing we have here is a warning. So we're good. Now what we should do here before we really step into this item is let's back up and go to our dialogue implementation here. Somewhere in here before we start this timer we have to add these objects in. So let's go ahead throw our include in here and we're going to include my item and then we're going to just say int and we will just call this item count equal and we're just going to add one item just for the sake of argument but then we're going to say for int i equals zero and we're just going to say you know i is less than item count i plus plus because what we're going to plan on doing is adding a bunch of items but we want to be able to change that kind of on the fly here. So I'll say my item and if you're wondering if we're creating a memory leak I don't believe so because we're adding this into the scene and the scene takes care of that pointer. I've had a couple people contact me about memory leaks and that's actually you know I like it when they contact me but cute handles memory very well for you so a lot of things that may look like memory leaks actually are not because it's all handled behind the scenes because we're passing this pointer off to the cue graphic scene item it is now in charge of that pointer and I believe when that is destroyed it destroys all the pointers or I should say it deletes all the memory too. All right so now we've got that and really all we're saying is for however many items added to the scene. Now we're going to look at the constructor here because this is going to be the main potatoes of this item is this constructor. What we want to do is accomplish a few things we've got our item and we want a random start rotation whoops we want to start this object off at a random axis we also want a random start position why do we want this well if we're going to add a bunch of these we don't want them all starting in the same place we're going to have a billion collisions going off at the same time now let's actually just flesh out this object really quick here. Remember from our previous tutorial the bounding rect is the outermost region of our object so we're just going to say 0 0 20 20 so it's only going to be 20 pixels why 20 pixels tall and then of course we have our paint which we are going to just quite simply paint this object so let's just say cue rect f and we want the bounding rect so we're just grabbing the bounding rect which is this 0 0 20 20 and then we're going to say cue brush whoops cue brish yeah that's a good one cue brush and we're just going to call this brush and we're going to just start off with gray here whoops we're just going to start off with a drab gray and what we're going to end up adding here is some basic collision detection and what we're going to say here is if scene and we want to know colliding items and you notice how the scene tells you what items are colliding and we want to know if this is one of the items that's colliding whoops but we want to say is empty meaning we want to know if this item's colliding with anything and if it is empty then there is no collision otherwise collision and then we'll just add a few exclamation points here so that's how we do basic collision detection the scene is going to tell us remember we add this object into the scene the scene is going to tell us where the objects are and it's going to say scene colliding items this meaning we're going to say is this item colliding with anything and it's going to turn is empty means no collision i know that sounds kind of convoluted but what we're going to do here is we're just going to say brush dot set color and we want cute green and then if we have a collision we want to do brush set color and we want to say cute red and if there's also a collision we want to call this do collision command down here because we want to do something when there's a collision and what that is going to actually do is set the new position and the problem i had with this tutorial trying to really build this thing is i want it to be an advanced topic but at the same time i want it to be easy to understand and that is an extremely hard combination to find and so what we're just going to do now is we're going to fill the rect and then we're going to draw the rect whoops draw a rect all right now that's our very simple object here um you notice how we have not done anything in the advanced yet and we've not done anything in the collision detection so let's actually um go ahead and do something here we're going to say if not phase meaning if there's no phase return because what may happen is it may call the advanced function and there's no phase meaning it's not doing anything it's just calling it we're gonna say q point f and we want the location and we want this dot pose i mean we want the current position of this object we want to know the point in space where this object is and then we're going to say set pose and we want mapped parent and what mapped parent does is it maps the current x y coordinates to the scenes x y coordinates all right so now we've got this map to parent and we want zero and we want to minus the speed so what we're really doing is we're saying set the position and we're going to map it to the parent coordinate systems zero and then we're going to minus speed and speed we have not set yet remember we have a lot of stuff to fill in in the constructor here which we haven't done yet so what we're going to do here is we're going to say start speed i should say set the speed not start to speed so we're going to say speed and we're just going to say five so this thing's going to go five pixels at a time and then we want to set the start position and we're just going to say uh actually let's let's focus on the angle here sorry i kind of scatterbrained i'm going to say angle equal and we want to make a random number so what we want to do here is say qrand which you guessed it makes a random number and we give the modulus of 360 so meaning it's going to do between zero and 360 it's going to make a random number and then we want to set rotation and of course we want the angle so we're just going to say okay give this start rotation a random number between zero and 360 so we're just going to spin it around set the rotation of the angle we're setting the speed to five meaning it's going to go five pixels at a time and then we want a random start position and we'll say int start x equals zero and int start y equals zero and then we're just going to say if and we want to make a random here so we're going to say qrand and we want the modulus of one so basically what we're doing is randomly saying true or false is very simple way of putting that so if it's one then what we're going to do is going to say start x equal and then of course we're going to do another qrand but we're really trying to make some random stuff happen here percent 200 so we're going to grab a random x location between zero and 200 and random y location between zero and 200 otherwise what we're going to do if it's not a one remember it's going to be random between one and zero is we're going to say negative 100 negative 100 so we've really got a whole lot of randomness going on here and let's review super quick we're setting a random angle we're setting the speed notice the speeds of constant right it's not really constant we're just not making it random and then we're setting a random x and y so then we're going to set pose i mean we're going to set the position and you guessed it map to parent because we want the parents coordinate system and we're just going to do start x and start y all right so we've got our constructor we've got all this random this going on here we've got our bounds so we're zero zero 2020 and then we're painting this thing and then we're advancing the position during the advance but we're not doing collision detection just yet what i think we should do at this point just save this let's build and run make sure there's no little bugs and watch this thing for just for a second here see there's a little block you see how it turns red when it hits that line and then it just keeps going and going and going off into space somewhere see there goes because we have no collision detection now if we had made this erect let's actually run this again i know that went fairly fast see that's green and now it's red and that's green if we had made this erect instead of lines it would be red all the way through because it's colliding with a rectangle that's why we made the individual lines now we need to do our basic collision detection here so in here what we're going to have to do is we're going to have to say get a new position and we're going to change the angle with a little randomness because we don't want to always turn the same way same direction same everything we want this to be a little unique each time so if and you guessed it qrand so we're just getting a boolean you know and we're going to set rotation and we're going to say rotation rotation gets the current rotation case you're wondering and then we're going to just say 180 degrees so if it hits something we're just going to spin it around plus we're going to add a little uh what's the term in poor english so we'll say qrand and the modulus of 10 so really all we're saying is if it hits something we're going to spin it around in the opposite direction and then we're going to add anywhere between zero and ten to the angle and if it's not that then we're going to move it in the opposite direction you know positive number goes clockwise negative goes counterclockwise so we're just going to basically randomly change between clockwise and counterclockwise with you know a 10 degree angle and then we're going to see what happens here and let's run this see there's our ball oh you notice how it kind of freaks out there and it just kind of got stuck on that line for a minute means we need a better algorithm here and you notice how it just went out of bounds and now it's going off into space so as you can see it's not just as simple as doing a little collision detection now what we've got to do is do some error checking on top of that so we have to see if it's in the bounds so what we're going to do here is we're going to say q point oops not q paint and we're going to say new new point equal map to parent and what we want to do is actually bounding rect dot width and then we want to bounding rect dot width plus two so what we want to do here is we want to see if this is within the bounding rectangle here hmm seems i've fudged something up let's i bet it's missing one of these okay when all this fails i'll just copy and paste for my notes here there we go so we're saying new point map to parent and we're going to make the bounding rect width a negative number and then bounding rect width plus two a negative number so what we're doing is we're really saying where it's at move it we want that plus two because we want to push it away from the object that it's currently colliding with i know that seems kind of convoluted bear with me i'm checking my notes make sure we're on track here yes we are all right so now what we want to do if not seen seen rect dot contains and we want the new point so what we're saying is if the scene wreck does not contain the new point then we need to do something about that and for this we're just going to move it back in bounds whoops else set the new position so we're going to set that whoops there we go new point map to parent and we're just going to say zero zero throw it back in there all righty now save our work run this and see your little bouncy ball and you see how it now bounces and we're just going to watch it here for a second watch it kind of bounce in and out of these lines and you know how it just kind of goes back back and forth back and forth and when it hits it doesn't just go back the same direction it actually kind of randomly jumps around here so that's pretty neat and you see how the edges are kind of smooth that's the anti-aliasing the reason why it's not turning red is because it's a pretty small object if we actually beef this object size up a little bit let's make this like a 50 and also that timer is firing off pretty quick so beef this up a little bit there we go and you can see it kind of bouncing in and out i don't know if the video is catching the red or not it's pretty fast on my screen let's set this back to 20 and what we want to do is we want to really quickly review this code because i want you to really understand how this is working here so let's just close everything and go back to step one because i got a feeling we we flew through this pretty quick we got our dialogue in the dialogue we have a graphic scene which is part of a view and a timer and that's firing off every time that timer fires off it calls the advance slot in the scene that scene then notifies all the objects within the scene and we're firing that off every 100 milliseconds and we've got one item let's actually change that to i need a random number here anybody tell me what we should change this to i'm looking at my cat and the cat's just kind of staring at me it's a little creepy let's just say 25 so we're going to add 25 of these little bouncy balls in here and then we've got a custom item and in that of course it's just a q-graphics item where we have the bounding wreck we have the paint the advanced angle speed and do collision and we've implemented that we've got a little bit of randomness at start we're setting a random angle setting the speed and then we're setting a random start location and then we're just setting in the position setting the bounds and then we're painting the object and what we're doing is some basic collision detection here and what we're saying is you know if there's no collision it's green if there's a collision there's red and then do collision which sets the position here and during this what we're doing is we are just mapped apparent zero speed what that does is it says move it speed which is five so we're doing negative five for the y so if you had no angle this would just drop straight down but because we're setting a random angle it's going at a different angle i know that sounds confusing and i'm sorry do collision which is where we're doing our collision event and what we're doing is we're just getting a new position we're changing the angle with a little randomness we're you know making it go a complete reverse and then adding a little 10 degrees to it getting a new position and then we're making sure that it stays within the bounds so let's see what this looks like with 25 of these little guys oh yeah you can definitely see them colliding now and you can see how whenever they collide they turn red they kind of bounce back and forth and if you did not have that collision detection what i saw when i was running this the first time is they would for the most part stay in bounds but once in a while you have an escapee that would go way out into space somewhere now granted this is not a perfect example there are bugs in this program as there are with every program but what i wanted to show you was how easy it is to do animation with Qt but at the same time just how complex animation really is so next time you play a video game or you see a screensaver or something you should realize there's a lot of stuff going on under the hood and a lot of solid math that's really going on so anyways this is brian thank you for watching keep up on that feedback i love hearing from you guys and like i said i am actually spending most of my time working on my website because i want to get the source code up there along with the videos and a whole bunch of other good stuff and no there won't be any cheesy advertisements or banners or join now or any of that garbage is just going to be my website so all right enough of me talking thanks for watching