 Hey guys, welcome back schizo in series. I'm just here on my Windows system trying to de-bloat it There rid of all the unused applications all the wasted utilities all the telemetry. I left one thing That's the shutdown button. We'll use that right now. Basically. I managed to get the entire OS under 4k pretty good He spoke gates was right Well, so we do recently we got some oh here This is a 3d model of a Boeing 727 with some passenger information about who was on the plane and where they were at this particular time Who cares about that not me. Oh also by the way, you can move that around the screen. Sorry I did mention that you can kind of zoom in and out pan left and right the whole line What else did we got here? We got some Some sample text pretty nice cool stuff there, and then we got obviously you got to have some way to talk to God and we have that Looking for some meaning here msg Hmm no Chinese food today ie Okay, I get rid of that on our windows install Anything else nothing right now, but pretty cool stuff all around So topic today obviously is going to be rendering Text to the screen rendering fonts to the screen and it's pretty simple to be honest Pretty short video today So have you ever thought about how you would rasterize a character? I don't care about how other people have done it This is about how you would do it and As far as I can tell you only have to think about one thing and that's knowing where the pixels have to end up in your image or on the screen and Then you put them there and that's it so for this letter m you'd have to know that there's maybe the The pixel array would start here and you have to know hey by the way one pixel to the right of that You have to draw that pixel a certain color You know, how would you go about storing that information and doing that think about it? It's pretty interesting to think about how you would do that a couple different ways that I've thought of to do that And I'm sure that there's many more than just this Option a which I'm pretty sure is what is used most of the time And that is you have a predefined rasterization for every letter in every desired font size So let's say you have this M in this font size And then you have a slightly bigger M and an even smaller M You might store different rasterization levels of that Letter and then just pull from the one that you need at that given time So that would be fast to drop because you'd have all the pixels already kind of stored Just be copying them from somewhere else onto your image. Maybe changing the color, but It would be fast to draw but it would take up more memory Because you have to keep storing all this different font sizes for every single letter that you want to use Option B might be pretty cool That's going to be a some kind of vector graphic representation So maybe you would store instead of these pixels you might store four lines one two three four Then you just re-render Those lines based off wherever you are it might get harder for letters like I don't know like G or like You know a K or something. How do you draw that? I guess this could be lines This would be like a circle and a and a curve. I don't know how you'd do that but you could potentially figure out a way to Store a vector Format for every letter and then just rasterize it every time you have to of course that would be very scalable You could increase the font size Infinitely, but it would be slow to draw obviously Option C which is what we're doing in this video that's storing each character minimally and then getting the pixels the rasterization that you need at Runtime and so basically I'm going to store an eight by eight pixel array for every character and then just Draw iterate through the rows and columns of this letter At runtime and figure out or I have to draw pixels That's going to be very efficient for us memory wise easy to implement, but it's also going to be slow to draw obviously And perhaps the best implementation might be a combination of a and c maybe you'd figure out Hey, I'm gonna maybe you'd store everything like I was saying with a Minimal array, but then you'd figure out. Hey when your program starts running you'd figure hey I'm going to use these three font sizes and these ten letters. I'm going to just Pre-compute these sizes so if I happen to use a size 8m five times I don't have to constantly be Revaluating this entire array. I can just evaluate it once and then just copy and paste that chunk of pixels as Needed so that could be the best way to do things Maybe not. I don't know up to you. Why don't you give it a try yourself? So how would I do this? Basically you can see here from ASCII values 32 to 126. I have implemented a 8-byte quad word for every single character. So for space, obviously it's all zeros. There's no pixels on for space Exhibition point you can see here. I have a couple of pixels turned on So basically the idea is you iterate through these eight byte data type things And you just draw a pixel wherever you have a one And then if you have a different font size you can have integer scales of this So for example if you get to this one a Font size one would be hey just one one, but if I had font size three that would be a Three-by-three array of once and every zero would be a three-by-three array of zeros basically and so basically you can just compute These characters and their pixel representation in real time Okay, so what's the algorithm for a full string? So we use you know because we're not normies We use no terminated strings. So every string ends in a zero bite So you begin at the first ASCII character of your string and then you figure out which eight-byte array that would correspond to Let's say it you passed in a number 32. Well, that's gonna be space So you're just gonna draw a space a space is just nothing, but you can kind of see how that would work Now if that eight-byte array is a normal letter You're just gonna draw it and then go to the next character after moving right by that amount on the screen Now if that character that you came across was a bogus character Let's say it was a number bigger than 126 Well, then you have to figure out how you're gonna handle that you could skip it you could put a space You could put a question mark you could put some kind of Cool graphic whatever you want to do you could do that What if that character happened to be a new line well Here you can say I'm saying go down to the left That would basically mean if you have a string like this You print your letters across you get you get to your new line character And then go back to the beginning but down one font size essentially That would work for that and if you get to the null byte you stop That's it very simple Now to the code it's gonna be pretty quick overview very simple implementation. Let's just show you how this works So we'll start off in the example a And I'll show you what we have going on here for our includes So the two most important includes for what we're doing in this video gonna be this set text File as well as our assembly listing. Let me open up those two files and show you what's going on really quick Just the font will do as well Okay, so the font you saw before that's just gonna be basically a listing of every single possible character here you can see is X for example WV YZ all the the symbols you would need all in order of the ASCII value Upper case letters lower case letters numbers obviously all that's in here That's all stored in order and of course you can change this if I wanted to change the way Exhibition point looked I could make it thicker. I could change these zeros to ones, right? I can make it a thicker character. That would also be an option. I'm not gonna do that But you could you make other fonts as well But the way it's set up currently is that only set only accepts eight by eight Fonts, but you could add your own fonts to this very easily Then we have our set text function. This only has one dependency, which is the set pixel function It's gonna draw pixels on the screen. How does this work? Basically it says it renders a String that you pass in the start address of a certain location With the certain font size and font and color So pretty straightforward you can see basically what it does is it loops through all the letters in your string checks from new lines unknown characters that I mentioned to you before Then it just basically loops through the rows and columns and it looks through the scale size So if you scale the font up to a different font size, it will scale up how much pixels It's gonna draw for every one it encounters in these arrays So that's how it works. It's very straightforward Now to the actual code that it's running for our let me show you the example For this sample text, let's show you how this is implemented So you kind of can see here It's very simple. We initialize our frame buffer as we did before here. You can see I'm setting the background to blue This is the rtb value for blue So These three bytes are GB. That's zero zero zero zero FF This is the alpha level the transparency which is not even used. I'm pretty sure and then this one indicates that our Rendering is upside down because the frame buffer is an Image that's basically upside down. Usually you count images from the bottom in bitmaps frame buffers from the top So that one means we're upside down. That's all it means You can see here is that call to set text. I'm passing in again information related to the font color the font size location and the frame buffer itself And here is the sample text so you can see that I've encoded the true that asking bites. It's DB and I have all the characters for each line followed by a new line And if you want I could add and you know, but it's at the very end. I could add some bogus character here Let's add some Okay, that's not in our array. Let's do one 99 If I run this now Let's see what it puts there it puts this unknown character a little cross I put a little cross there for to indicate basically this character is not supported by this font So we have this unknown symbol that goes in that place Next example here It's this alphabet screensaver thing again All it is doing is drawing a bunch of random rectangles to the screen random colors as well as random font size color letters Capital letters. So you can kind of figure out how this would work. Let's check out the code Again includes our very minimal. We just have those set text and skits own Listings also we have here because you can tell that we're drawing rectangles we have the set filled rectangle function as well as Random number generating functions from our previous episode So it starts with a black screen Has an infinite loop here We flush the screen contents to the frame buffer or should say Remember for contents to the screen. We pick some random locations for our rectangles and dimensions for rectangles and the Random colors for the text and rectangles and we plot them to the screen in a very simple way See the same thing here. Just the set text function call to draw the text Only caveat here is that you can see I'm I have a buffer for the characters So you can see this number buffer should really say letter buffer, but basically it's two bytes The first byte is the one that we're going to randomize and the second byte is The no byte that ends the string so that that way let me run this Program you can see it plots one letter at a time to the screen. They're all like no terminated single character But two byte arrays essentially So very cool What else we have samples see now this one was kind of weird. This one is the one that has a 3d model So you can see that we are we have our text being drawn to the screen at a certain location And that location is computed based off its 3d position So there's a 3d position in space that we're basically Orthognally projecting onto the view plane like this pixel here at the top left of each bit of text That's where both that line is connected But also the font is actually being drawn that the text and so yeah It's pretty cool no matter how you get the model the text is always going to be on the screen at that position in space It's always oriented the right way. This is kind of reminiscent of if you're an engineer and you know MBD It's just kind of how some of these things are rendered if you do MBD set of drawings. So that's pretty cool Yeah, whatever. How does that work? I won't get too much detail on this the codes all available You can check out the code if you'd like. Oh wow debugging stuff. Let's get rid of that So we have our cursor implemented here, but the most important thing is this art our Implementation of the actual text and so if you recall from our previous video we talked about 3d rendering we had these structures for the perspective but also for the geometry and And everything else that goes along with that so here I had had to add a couple things One all those leader lines that go from the text to the model those have to have their own edge structure So just like the plane had its own edge structure. I can show you down here Here's all the plane pixels and stuff and edge combinations So two of those lines have to have their own of course. They're very simple. They're only one Company one set of pixel one set of vertices per line. So you can see here the text edges Structure is just two quad words long, but um Yeah, that's how that works then we also have all the text so we have to have a new structure for text basically instead of encoding like the vertices and the edges that we had to do for our line segment Renderings for text we have to encode the text location. So here we're passing in a pointer to the 24 byte positions with x y z location in space as well as the actual string itself Address of that the font and the font size. So if you can if you want I can change the font size of one of those particular Renderings, let's change this one for example Rerun the code you can see we increase the font size of the plane type On the screen. So that's pretty cool Besides that the whole operation of this program is the same as it was in our previous episode It's the same plane model and everything else. So that's pretty cool in the last thing Is our simple GUI now this one if you remember from the end of the video This is just this kind of bogus windows implementation Actually behind me. There's nothing that you can even see I can even show you here There's nothing. Oh, it's no there's no clock or anything It's just a very simple blue screen with the gray bar on the bottom It detects where the mouse is if the mouse is over the start menu and you click start You know nowhere else does it work, but it click on the start menu. It'll pop up click anywhere else It goes away, you know and then obviously the shut down button if you click on that it turns off So this is just an exercise in in minutiae in tedium if you look into the code It's all just basically drawing of what your crap on the screen and checking where your mouse is at all times It's not all that interesting But it does it show that you can kind of create a GUI with everything that we've talked about so far You have to be able to draw text and draw rectangles and circles and lines and polygons and stuff You can detect the mouse position and detect clicks. You can make a functioning GUI that does interesting stuff so With that out of the way, I'll end the video If you made it this far check out our discord server If not, I'll see you in the next video. Have a nice day