 Okay, so before I continue, I feel like I should explain what these two things are. The window is just the window that you have, right? So let's say, for example, this terminal, that's a window. The renderer, I think the best way to think of it for now is just to think of the renderer as the canvas onto which you're going to paint all of your graphics and fancy textures. So when you actually draw something, you're going to draw it to the renderer, and then the window is just there to show it to the user. I think that's the best way to understand it. So let's just continue. Okay, so now that you have those two things declared, you are going to want to initialize SDL. So you're going to do SDL in it. And SDL has a bunch of constants for how you can initialize SDL, right? So you can either initialize the video, you can initialize the audio, you can initialize any number of modules that you want. For now, we're going to keep it simple. We're going to just initialize everything because we don't really care about whatever, you know, nuanced things go on the background or like this startup time or anything like that. So I'm just trying to show you how this thing works right now. So SDL in it, SDL in it, everything, yeah, that should be fine. Okay, now that we have these two things up here declared, we are actually going to initialize them to some value. And we initialize them by running the create window and renderer function. So we're going to call SDL create window and renderer. And I'm going to create this window to be 640 by 480. This may be a little small on your screen. So if it is definitely increase the resolution or just set the renderer scale to be higher. Then we are going to pass in the window flags. We don't really need any window flags, I'm just going to pass in zero. Then you're going to pass the address of the pointers. So you're going to pass the address of the window pointer and you're going to pass the address of the render pointer. Okay, perfect. So now what we're going to do is we are actually going to set the draw color. We're going to set the draw color of what the color we're going to use to draw to this renderer. And we are going to draw with the color black for this argument you're going to pass in the renderer. Then we are going to supply the color values using the RGBA format. A is the alpha, so this is the transparency. This is the RGB. So we essentially set our draw color to be black. If you want to think of this conceptually, think of we took our brush and we dipped it in some black ink. Okay, now we're going to tell our program to actually draw, actually no. We're going to clear the screen to some color, right? And the color we're going to clear it to is going to be the draw color that we just set. So we're going to say SDL render clear. And we are going to pass in a renderer again. Keep in mind this is a C library, so it doesn't have all of the luxuries of an object-oriented library. So there are some things like this that are kind of annoying when it comes to a non-object-oriented language. So definitely I don't like the way that the SDL makes you pass in a renderer every single time you want to do some operation on it. But it's C, it's supposed to be faster, so it's up to them. So now that we have the SDL clear that ran and what that's going to do is it's going to clear the screen to black. So if I run this right now, you're going to have a black screen. You won't really see anything because we didn't actually show this to the user yet. So we just clear the screen to black. But in memory, supposedly it's supposed to be black. So now what we're going to do is we're going to set our draw color to be white. Same deal as before, pass in your renderer, set your RGBA to be 255, 255, 255. This is setting the RGB to be white, so color is going to be set to white. Imagine, again, conceptually imagine you dipped your paintbrush into some white ink and now you're painting the white ink on the canvas. Okay, now what we're going to do is we are going to actually draw something to the screen and we are going to draw a point. We're going to draw a single pixel onto the screen and we do that by doing STL, render, draw, point, render and then we are going to draw it to the center of the screen. And I'm going to draw it to the center of the screen by just taking our screen resolution and dividing by two. Okay, so we have those things all done. Just a quick recap. We declared our two structs. These two structs are STL, window and STL renderer. We initialized STL. We created our window and renderer, so we initialized the value of those two structs. We set the draw color to be black. We painted our screen to black using the STL render clear function. Then we set our draw color to be white. Then we painted the screen to be, or we didn't paint the screen, but we painted a single pixel onto the screen at the center of this canvas. Now what we're going to do is we are going to present our renderer through our window and we do that by doing STL, render, present, render and here's the problem. If you run this program right now or if you compile this program right now, it's just going to open a window and it's going to immediately close the window. To fix that, we are going to delay this program by 10 seconds just to give it some more time to, just give it more time to, you know, just show on the screen. So we're going to do STL, STL, delay and we're going to delay for 10,000 milliseconds, which is 10 seconds if you didn't know. Okay, so now that our program is finished, we can actually compile it. Now to compile this program, we are just going to run g++, use whatever compiler you want on your end, but I'm using g++ here and then we are going to pass in basic.cpp. We are going to compile it over, we're going to link the STL library, so we're going to say L, STL2 and we are going to output as basic, okay, that compiled, it's run basic. Okay, I'm not sure if YouTube is going to pick this up, but there is a pixel right here on the screen. Yeah, so thanks for watching and in the next video, I'm going to go over some basic things you can do with rectangles and I'll see you then. Okay, so from the last video, I've modified the code a little bit just to make it easier to see on YouTube. I looked over the last video, the pixel I drew to the screen wasn't that visible, so what I did in this video is I've added this render set scale. I made it so that the render is going to scale by 2x and because of that, I also multiply the resolution by 2x. If on your computer, the way that everything is going is fine, you don't really need to add or modify any of the code here, but just so you know, between the last video and this one, this line and this line are different, so keep that in mind. Okay, so let's do rectangles. Let's talk about STL rectangles. Okay, so STL rectangle, how do you declare a STL rectangle? Well, you declare a STL rectangle like this and give it a name. I'm going to give my rectangle a name called rect. And what a rectangle is, is basically a structure that contains four values. It has width, a height, and a position. So the position is going to be, well, not a position, but it has width, height, and x position, and y position. So what you want to do is you want to set the width and the height of your rectangle. Then what you want to do is you want to set the position of your rectangle. And we set the width and height like this. So you basically just say rect.w, which is just stands for width is equal to, let's say 100. Then rect.h is equal to 100. And basically what I did here is I defined the width and the height of my rectangle. Now what we want to do is we want to set the position of our rectangle and the position, if you know the Cartesian coordinate system, x-axis, y-axis. So we're going to say rect.y is equal to zero. And then rect.x is equal to zero. So it's going to be at the top of our screen. So it's going to be at the top, it's going to be at the top left of our screen. In computer graphics, the y-axis actually begins at the top, not at the bottom. So I just say no. Okay, so now that we have our rect defined, what we want to do is we actually want to draw our rectangle to the screen. And we draw our rectangle like this. We are going to say stl. And then we are going to draw our rectangle like so. This function is called render, draw, rect. And to draw our rectangle, we need to specify which render we want to draw to. And we are going to specify the render we defined in this program. And then we are going to give it the address of this rectangle. Okay, I should set the draw color up here to be white. Okay, so what we're going to do is we are going to actually compile this and see what we get. Okay, so now we have our rectangle, or is the outline of our rectangle here. And we still have our pixel here. Okay, that's good. So what we can do now is we can draw another rectangle the same size, but it's going to be maybe to the right of this one. So we are going to, we are going to define a new rectangle, we are going to call this stl, rect. And we're going to call this rect to a very creative name I know. I'm going to say rect2.width is equal to 100. rect2.height is going to be 100. And then we are going to, we're going to move our rectangle to the right and to the bottom of the original one. So we're going to say rect2.y is equal to 50. And then we're going to say rect2.x is equal to 50. Right, actually, I forgot to draw it. So you're still going to draw your rectangle down here. So we're going to say stl, render, draw, rect, render. And then we are going to draw our rectangle by passing rect2. Right, let's compile this again. Okay, so now we have our two rectangles. We have, well, I mean, these are squares, but it's going to call them rectangles. So basically, we have these two rectangles. And as you'll notice, they're overlapping each other. And one of the great things about stl is that in stl, you can do collision detection in the library itself. So it's not, it doesn't only do computer graphics also does collision detection for you. Well, it's a very basic collision detection. So the way that you can do collision detection in stl is by getting the intersection of two rectangles. I believe you can also do the intersection of a line and a rectangle. I believe there are several geometric intersection functions you can use. But for this video, I'm going to show you how to do, how to test the intersection of two rectangles. And the way you do an intersection of two rectangles is like this. So we are going to do stl, we're going to define a third rectangle, and this is going to be the intersection. We're going to define a rectangle called intersection, and we're not going to actually specify anything for this one. Then what we're going to do is we are going to run the function stl, stl, not an intersection. I think it's called intersect, rect. And then what we're going to do is we're going to pass in the address of the two rectangles for which we want to test the intersection of. So we're going to pass in rect, and then we're going to pass in the address of rect2. Now, this function is going to return stl true or stl false based on whether or not there's an intersection. But since we already know there is an intersection, we are just going to pass in the third argument, which is going to be our, which is going to be our intersection. We have to pass in the intersect, oops, we're going to just put it. Okay, so we're going to pass in the third argument, which is going to be intersection, which is our rectangle that we are going to store the intersect data in. So we're going to say intersection. And basically what this function is going to do is it's going to take the first two rectangles, it's going to test whether or not they're intersecting. Then it's going to, it's going to populate the third rectangle's data to be the intersection of the two rectangles. It's also going to return stl true or stl false based on whether or not these two rectangles are intersecting. So to show you how this works, we are going to do another draw function. Actually, let's just set the color to stl, set render draw, draw color. And I'm going to set it to red. Okay, so we are going to draw the intersection here on this line, we are going to draw this rectangle. And I'm not going to draw the outline of the rectangle, rectangle, but I'm going to draw the filled in rectangle. So we're going to say stl render fill rect. And again, pass in your render, this is your canvas onto which you're painting. And then we're going to pass in the address of our intersection. So we're going to say, and for section, write this, and then we're going to compile this. And let's see what we get. Okay, so as you can see, this is our rectangle, this is our second rectangle. And this is the intersection point between the two. Okay, so that's a very basic overview of rectangles. I do recommend you check out the wiki for this for this library is actually pretty interesting. It has a lot of stuff in it that a lot of people I've noticed don't really use when they teach it. So definitely look it up. It has a lot of interesting things. And I'll see you in the next video. I think in the next video, I'll teach you more about drawing functions. I'll see you then. Okay, so for this video, I thought I would just do something a little bit more interesting than just drawing things more in time. So let's draw like 100 things at the same time. And to do that, we're going to use the vector library. Or should I say the vector container, but whatever. Okay, so we are going to include the vector. And then what we're going to do is we're going to create a vector of 100 points. A point in SDL is just a struct with an x and a y position. We're going to create SDL point. And we're going to call it V. And what we're going to do is we're going to do four and I is equal to zero. I is less than 100. I plus plus. And what we're going to do here is we are going to place back a new random point. In place back, essentially, it's just adding something to a vector. And we're going to do modulus 640. And then I'm going to do random modulus for 80. And that should be fine. Okay, so now that we have that, we can now draw all of these 100 points to the screen at the same time using SDL render. And then we're going to say draw points. Make sure you include the point. There's a function called point. Don't confuse it with points. Okay, so the first argument is going to take is obviously a render. Second argument is going to take is the points. It's going to ask for an array of points. It's not going to ask for a vector of points. So because of that, you need to get the underlying array from the vector. You get the underlying array by doing v dot data. And then since arrays do not contain any other information about them, you need to pass in v dot size so that it knows how many points there are inside of this array. Okay, save that. Now let's compile this to compile this you are going to need to use C++ I believe C++ 11 or higher. So we're going to do std is equal to C++ 20. Link, link stl2. And then we're just going to say draw that cpp. That's the file I'm using. And then I'm going to output this as draw. And we're going to execute this. Okay, let's see. What did I include vector? Okay, let's do that again. Okay, so what we get is we just get a whole bunch of points on our screen. And those are just the random points that we generated in this for loop up here. So this isn't the only thing you can do. You can also draw lines. So for example, if you wanted to lines, they work pretty much the same way you can just do stl render, draw lines, and then just pass in a render v dot data that v dot size, right. Okay, so as you can see, now we have a whole bunch of lines, they are all connected. So if you don't want connected lines, you would have to use a different function for that. What else we can do is we can also do something similar with rectangles. So if you want, you can define a whole bunch of rectangles. So for example, you can do something like std vector, stl, rect, and then we're going to say RV stands for rect vector. It's just a brace, so we can add a new line here. RV dot in place back, and then we are going to in place back. With a vector, we are going to in place back the position first, then we're going to in place back. Well, okay, so basically, it's going to take rand modulus 640. So the first argument is going to be the position the xy, and then rand 480. Then we are just going to, we're going to make the size standard so they don't look too crazy. So we have a random position for this rect, and then we have the size 10. So it's going to be a whole bunch of size 10 rects. And what we can do here is we can say, we can say stl, render, draw, rects, render, not the RV data. And then we can say RV dot size, right, let's compile this again. Okay, so as you can see, we have a whole bunch of rects here. We have a bunch of lines, we have a bunch of points. If you want to, you can go crazy, and you can also include stl, render, fill, rects, data, RV dot size. Okay, let's compile that. And as you can see, your rects are filled down. So this is pretty much all of the basic drawing operations you can do in stl. There are a lot more that I didn't cover, but they're all pretty much the same thing as I showed here. You can go and look at the wiki page for the documentation. I strongly recommend looking at the wiki, because there are a lot of functions that are not really talked about in tutorials that are on the wiki that could be pretty useful. So for example, one of them was stl intersection. That is like one of the functions that I didn't see in any tutorial when I was like learning about stl. Again, highly recommend looking at the wiki. In the next session, I'll probably be playing around with the event system. And yeah, I'll see you then.