Coding Graphics in TempleOS is Too Easy

all right let's try to actually visualize that so this is actually exciting because i already talked about it for quite some time some time ago i mean uh right that uh i want to use the uh you know graphics capability of advent of temple os in advent of code so i think the time has come finally so but we need to learn how to do graphics right because i have no idea how to do it right i did it quite some time ago but i already forgot everything the cool thing is that we can always just look it up right so let's go to the um to the root of the temple os and let's find some demos right so there should be some demos so there is a demo folder let's go there so there's definitely something interesting here there's the graphics folder uh okay so and what do we have on here so we have some interesting stuff uh something like like 3d poly i don't really want to go in 3d right now because it looks a little bit complicated for what i'm trying to do so let's take a look at balloon okay so there's a very small minimal example that does things and uh it's kind of weird so let's actually see oh it's a small i'm not sure if you've seen that but there was a small balloon but it feels like it's it drew a texture a classic commodore 64 sprite oh it just like drew a sprite so but this is not exactly what i wanted right so i wanted to see something that um you know draws rectangles right so i the only thing i need is an ability to draw a rectangle on the screen uh okay so there is bounds of box okay uh this is look like something that i might use look at that so there's a jr line jar okay so there are things that start with jr okay so there are things like jar line gi print jar rect okay so i we have jr rect and what it does it accepts the coordinates of the rectangle and cdc which i presume some sort of a graphics context and the question is how can we get a graphics context to do this kind of stuff uh right so this is rather interesting so they're using something called dc dc is passed in here right so it's called draw it and where do we call it okay so draw it oh this is complicated so we're using some sort of like f s oh it is using like special characters and like that like a mega and whatnot okay let's take a look at the at what it does holy what the uh so yeah it is capable of in 3d so it's literally a box oh it is using like a rotation matter it has a built-in rotation mattresses for 3d holy wait a freaking second who needs glm did you guys know what is a glm uh right glm it's like a the math library for opengl and stuff like that who needs that temple os has that built in just straight up you can use it also another thing i heard that it has like a differential equation solvers uh that you can use for physics simulation if you want to make a game with physics and stuff like that it's just like holy so yeah so it has a lot of interesting things that you can use uh the question is uh how can we get the the stuff right so there is a settings push right okay so there is a settings push dock clear whatever that's supposed to mean and then fs i'm not sure what the hell is the fs but i really want to see uh okay let me actually jump there so fs uh is the points to the current task oh okay so it points to the current task right and basically we can rewrite its method that draws on the screen and draw ourselves that is very cool that is very very cool and then we can sleep for like 20 seconds or something like that and i suppose settings push and settings pop just you know the task forms some sort of like a stack when you start a new task the um the settings of the previous one are saved and then you cancel that task they are restored in something like that i think this is basically what settings push and sending pop do this is pretty step forward right so let's give it a freaking try so i'm gonna just copy this entire thing right just select everything and i'm gonna literally adapt that for my case uh so i'm gonna go into the home like so and uh let's go into aoc boom so 11. uh so let me let me think so i might as well just comment out everything in here and uh copy paste everything we've got in here so let's start the adaptation right so let's start the updation i'm gonna remove that so this is basically drawing uh so old are i'm not sure what the hell is r but it's actually like saving uh something it is saving something that is called r within the context then it's probably some sort of a style or whatnot and then restoring the r so yeah in any case for now i just want to ignore everything in here right so we're going to straight up ignore everything right so this is going to be a box but maybe we're going to call it visu analyzation so this is our visualization so here is some parameters that i don't really care about but i'm gonna keep them around just in case so this is a global r which we removed and uh you know what i think i'm gonna just like straight up remove this thing i didn't think it's very important uh though uh wait a second um do i do anything to redraw anything i think i think i think i don't i think i just like keep scanning the characters uh and keep sleeping and stuff like that i think that is literally it so uh i might as well remove everything from here just a second uh just yeah i think this is a minimal example that draws on the screen i think so and then we have to call the visualization visualization all right so if i try to run this thing uh it is okay it's been like doing something but it was not drawing anything right you see it's just like doesn't draw anything so maybe now we should we should go ahead and try to draw something right uh so what i want to draw i want to be able to draw a rectangle right so i'm going to do gr uh erect right nng erect it accepts dc all right so this is going to be something like dc then 0 0 and let's draw a rectangle of 100 right so you can also set the current color i presume so let's go ahead and set the color to red so this is going to be color red and if i try to run that i only wish opengl was as easy as that imagine imagine if opengl was as simple as just this i mean it doesn't have a capabilities of opengl but i mean come on it's just like built into operating system and it's just super easy how many like loopholes do you have to go through in the modern operating system in a modern like real life operating system just to put a goddamn uh you know red rectangle on the screen well through a web you can probably do that quite easily but i mean if you don't want to use web we should go back to just writing to screen memory that was actually not a bad idea to be fair i think writing to just screen memory interface wise is actually very cool so it could be only just an interface uh imagine if you had like a back buffer screen memory writing but also had very accelerated something like that right imagine if it was just just an interface and when you just actually draw that it was actually work faster or maybe like it's essentially sounds like a fragment shaders right fragment shaders are basically that but your program is heavily paralleled if that makes any sense uh but yeah anyway whatever so let's actually see if we can uh maybe make this entire thing animate right so uh i presume the only place we can store our state is in a global state as long as you can't just write over other yeah exactly exactly so that's why i said that it's uh like interface wise so behind that interface the operating system or some sort of a supervisor uh basically abstract that away from you it makes sure that uh you like no program writes to the same buffer or something like that it's just like it's like virtual memory but like for for graphics right or something like that i'm not sure if i make any sense i'm sorry anyway so let's actually have something like uh x y right so this is going to be x y coordinates um right and i can use these coordinates uh to draw a rectangle right can i i think i can so this is going to be x y and in a loop right in a loop we can just increment x and y by 1. right something like this right one and uh there we go so it does not compile because why uh right i forgot to put a semicolon in there right rest in peace terry rest in peace terry holy that's that easy holy it's that easy it's embarrassingly easy uh so um what we want to do right um we need to probably define the size of a single cell that we're drawing right so we need to define the size of a single cell um right so let's define something like this um cell i think they're going to be square so i'm going to define only one value and it's going to be around uh probably 10 right so this is a cell size that's what we have and uh let me let me think so when we start the visualization obviously we don't need that um right we wanna read the input we are reading the input uh and uh that means now octo the global array octa has everything that we need to have to visualize this entire thing uh all right so i'm gonna start doing the following thing oh this one is actually rather complicated um because we only have 16 colors uh i was hoping that um i remember some of the some of the application used some sort of like a dithering to convey like shades of particular color maybe this is something that we can use as well or there's even cooler idea we can indicate the energy level by the size of the rectangle that's actually very interesting so the higher energy level the bigger the rectangle until it just flashes and they're gonna pulsate right so we can make them pulsate um which is also not bad you guys think anyway so before we can do that we probably need to uh render everything uh so what i want you to do i want to see what is the color right so what is the red uh so red oh it's actually an index within the palette that is perfect so that makes it actually super easy to work with uh so i'm gonna default the following thing i need to allocate a row and column right so i'm going to start iterating this thing so this is a row zero uh row less than n plus plus row and then for a column equals zero column less than n plus plus column uh there we go and uh what do i wanna do here so just for the sake of testing we're gonna assign a different color for each cell just to test things right so i'm gonna do the following thing i'm gonna do row plus column right and the amount of colors that we have is essentially colors color snap right colors num not num num uh right so that's how many colors we have in the palette if i remember correctly because i actually hacked the color theme so i kind of remember this kind of stuff and uh the next thing we need to do we need to do draw a rectangle uh so it's going to be dc the position of the rectangle is essentially column uh multiplied by the cell size then row multiplied by cell size and then just cell size uh cell size right so uh width and height is going to be cell size uh right there we go and i think that is basically it so that should draw the whole thing there we go so we drew uh the sort of like the um [Music] the the array of octopuses but the the colors right now do not represent any energy levels and as already said we're probably not going to use the colors to represent the energy levels because we only have 16 of the scores so but at least now we can control the size of the cell right we can clearly see that the size of the cell is rather small we want to make it a little bit bigger right so we have a constant that actually controls all of that right so we can do something like 30. so i think 30 is fine in this particular case uh only 10 energy levels yeah we can use different colors for each energy level but it's unclear which one corresponds to which one so so it's probably not going to really look good but we can try maybe okay so let's actually use the energy level as the index of the caller sure why not but i think it's it's basically not going to look good in my opinion so let me quickly try to do that so i can just do octa octo row and column and just literally use energy level as the color so that's the basically current state does it even say anything uh i don't think it even says anything so it's kind of like useless right so and one of the interesting things we can do is probably use the size of the thing of the rectangle uh to indicate the energy levels i think that's a little bit more interesting so and we're also gonna keep these uh the sizes of the rectangles centered at their cell position um so how are we going to do all of that that's a very interesting question uh question whoa whoa temple os not only temple os but temple os with graphics we're actually coding graphics for temple os in fact what we're doing we're just visualizing the day 11 of advent of code but for temple os that's what we're doing so yeah [Music] all right so uh let me let me actually see what we can do about that so we need to first figure out the center of the square right the center of the square to the to i think what we need to do right what we need to do is to have some sort of a function uh let's call it cell and i want this function to return me the shape uh the actual rectangle that i need to draw based on the energy level right so i'm gonna do i-64 and this is going to be energy and what i wanted to return is essentially x uh i 64 y i 64 w right so this is going to be w and the h right and uh that is basically it but i also want to give it maybe the position where it should be locating like a row and column um right because basically i just want to abstract that away a little bit uh so it's going to be i-64 row and i-64 column you know what um yeah it feels like that having separate function for this kind of stuff is kind of useless to be fair right because i can just do that in place so i don't think it's it's that important uh so let's have it like this uh so this is going to be i64 x uh y uh w and h and we can just pre-compute them in here so when the color by the way has to be something like maybe red let's call it red for now um okay so the position is going to be a row multiplied by cell size right so this is basically where we start so x is going to be equal to actually not row it has to be column all right so this has to be column uh and then we're gonna have a row which is cell size there we go so and uh we're gonna start at the center so that means i need to add uh cell size divided by two right but uh i can actually do something like this i'm not sure if holy c even optimizes this kind of stuff this is a very interesting question chad does holy c even do simple optimizations like imagine that we have a function foo right that accepts some sort of like x right so it accepts some sort of x and uh to be fair i think i need a ykk i want this function to return uh actually i-64 right so and uh unused variable foo or something like that i 64 i 64 um full i64x right uh this okay whatever uh so let me put it like that can i just run this thing uh and use variable x y and error there's error at 150 um 158 158 there's no such thing anymore but that is fine uh okay so that's the only thing i want you to do all right so i just want to um do this i 64 full i 64x right and we're gonna return x divided by two so and i'm gonna simply compile this entire thing and it complains about like unused variables but just ignore it for now though we can like go ahead and get rid of that but i have to use my mouse because it doesn't have a good navigation so and now you can disassemble this function you can literally disassemble you don't need a god bolt for that uh there we go so here we divided this thing by is that a shift did holy c compiler just optimized out division by two with a freaking shift i think it does it it actually optimizes okay so what if i divide it by three uh right and it uses id that's actually pretty cool so terry actually spent some time writing an optimizer for that wow divine truly divine intellect okay all right all right all right so i don't have to worry about that then that's pretty cool uh okay so this is a visualization of our nation uh so let's go back uh i'm gonna uncomment this thing and come in this thing and comment this thing so that means i can just divide it by two and terry is gonna optimize that for me thank you terry very cool uh size divided by two maybe i don't even need parentheses but who cares it doesn't matter i already have parentheses okay so this is where we start right so this is where we start and um essentially now we need to offset x and y by the half of this size right so we'll have to subtract essentially uh we'll have to subtract half of the size uh multiplied by the energy level but we'll need like uh floating points for that i think i think we'll need floating points for that uh also uh i want to have something like half of this size cell size um and let's do something like half sell um something okay uh okay that's fine it's probably fine so i need some sort of interpolator right so i know that it's f64 right so it's definitely f64 and this is going to be our interpolator uh then uh what i need to do i need to assign it like this right so i need to take octa octa row and column and i probably want to convert it to f64 right so i want to convert this thing to f64 let me quickly do that uh so i remember there was something like two f yeah there is two f64 uh right so if i jump here uh it takes i64 and converts it to f64 this is actually perfect two f uh 64. let's go ahead and use that uh to f 64. there we go and what i want to do in here is i want to actually uh divide this entire thing by nine so that will give me so i probably don't have to do that right that will give me value from zero two to the one hopefully which i can use as an interpolation of our nation um which also means that maybe these things have to be uh the floating points maybe all of these calculations are going to be floating points who knows uh right so it's going to be 2f64 right so this entire thing is to f64 uh right to f 64. um which is another interesting thing so i'll have to uh probably do this stuff all right i never worked with floating points in uh in holy see yet so i'm not really sure right how to do that properly um so i think i need to do the following thing i need to do to f uh maybe cell size and i'm going to multiply by that interpolator um you know half of this thing right so this is going to be half of this thing and this is going to be like this size uh multiplied by t so that gives me that so all right uh that's pretty cool but it's kind of like an opposite isn't it so the energy level zero yeah so it has to be the opposite one so that means i have to do something like minus uh minus one then all right uh minus one so at zero um at zero it has to be small that means it's okay so that that's actually pretty cool so and maybe because of that i want to actually do something like minus one uh right here right so that should be it so i don't have to do it like this yeah because i feel like i'll just need i will need to do that all the time right i'll need to do that all the time okay so what about uh w what about ww is basically going to be uh cell size right and if it's uh zero it has to be zero so okay that means i need to okay so uh if it's zero it has to be zero if it's that yeah i see i see what's going on uh i just like i never done floating point in holy see so i'm not sure what to expect in here right so i'm really uh really not sure what to expect uh okay so in here what we're gonna do is essentially two uh i-64x right and then just do something like this to i64y and then to i64w and uh by 64 h right is it gonna there we go so this is what i was talking about so this is what i was trying to achieve if that makes any sense right uh cool isn't it uh and of course we can now maybe even use uh octa row column for different colors right so now we have different colors and you can see as you can see they're not really like correspond to really well to what the is going on uh so yeah but let me actually see so this one has to be like nine uh right i'm gonna go to to the sample uh i don't know what we are reading we are supposed to be reading input okay so we are reading input and uh the second one has to be very close to nine so if i do here yeah it's like around seven uh okay so now now the moment we're waiting for right the moment we're waiting for what's gonna happen if we're gonna try to animate that right so uh we're gonna do next uh next octo right so this is gonna be next octa and we have to provide flashes but we're probably going to ignore it uh all the time so it's going to be just something like i64 flashes zero and there we go so uh wow what the hell is going on so i think it has to be a little bit smaller uh slower uh so let me let me try to do that so this is going to be like 100. uh all right okay so that's pretty cool uh we can make it maybe even slower [Music] there's something there's some rendering bugs in there right there are some rendering bugs in there but i think they're slowly synchronizing over time at least everything is growing right so are they synchronizing i think they're slowly synchronizing so i'm just waiting for the moment when they're going to synchronize there we go they synchronized yeah that's cool they finally synchronized uh all right that's the we can use this kind of capabilities to actually maybe debug something uh right in the future maybe i'm going to save this ability to draw the grid uh for the future uses right so when we need to debug like a grid based stuff uh so if i make it like super quick so will it synchronize faster right so this is actually maybe five uh they're gonna synchronize yeah it's like yeah in the sequence already um yeah that's pretty pogue uh so let's put like one twenty um though the problem here is that they are not doing that very um you know very smoothly uh they're not doing that very smoothly unfortunately uh but yeah that's pretty pog that's pretty poke okay so let's do a committee committee uh i don't know maybe i'm gonna put visualization like on uh comment in here and um yeah so here's the stuff so essentially if you want to play with the visualization yourself uh just basically uh unc uh comment part one and part two just comment part one and part two and then comment visualization right so i'm gonna put this kind of stuff in here uh right so and i'm gonna just quit this entire thing uh and i'm gonna sync all of that into the host aoc 2021 uh there we go there we go um wrong passwords was a hacked already okay so i wasn't hacked cool and uh now let me take a look um status uh to the two and uh get git add home and commit add a visualization for day 11 i'm going to push that right into the repon there we go uh okay so and you can find the source code for uh like everything here in the description or if you're watching live i'm gonna copy paste this thing in the chat um so yeah if you wanna play with the source code in here how much time did it take me to actually figure that like 30 minutes 33 minutes all right that's actually pretty cool that was relatively easy right so figuring out graphics if you know a little bit of graphics and temple os is actually relatively easy uh so that's pretty cool i guess i'm gonna call it a day for now thanks everyone who's watching me right now i really appreciate it have a good one and i see you on the next uh advent of code session i'm not sure if i'm gonna stream tomorrow because uh i've been streaming like non-stop quite for quite some time so maybe tomorrow i'm gonna take a day off uh but then we're gonna continue solving this entire stuff and now we have a practical tool under our belt right i hope i pronounced that idiom correctly that we can use for future things right so because now we we know how to visualize stuff and we can use that for debugging right which is absolutely freaking cool all right thanks everyone for watching thanks everyone for all the subscriptions and uh maybe we should rate somebody i don't know is anyone doing anything epic on a software and game development section okay come on twitch you can do that pilates stream but he's streaming runescape or something i don't know uh so i hope i hoped he streams like programming or something jessica already ready jessica uh probably all uh i don't remember who that is but they're streaming uh hairdressers api i don't know doesn't sound like advent of code to me [Music] bro epic bra moment [Music] advent of code uh what language is it i don't know it doesn't say the language unfortunately now you see the 11 [Music] c sharp a dream team hmm [Music] it sets a rust uh it said rust i don't see where's the rust should we raid the rust i didn't see rust where is the rust oh man i can't see and dismissed oh in the tags you mean right so somewhere in the tags there was rust like the interface doesn't allow me to see clearly okay so rust i would probably rate rust sure why not i absolutely love rust people who watch me for a very long time they know that i absolutely love rust rust i like it better than any other programming language it's my favorite language of all time so of course i'm going to raid rust it's not necessary but i do find the rust interesting but i don't think it's a you know it's a language that will make me switch from everything else all right at least it has a couple of novel ideas right which is quite rare these days even porz doesn't really have any novel ideas but rust has no ideas anyway get ready for the rate get ready for the rate and i see you all next time love you you

Channel: Tsoding Daily

Views: 6,719

Keywords: Advent of Code, TempleOS, HolyC, 2021, aoc

Id: d3eFHyryopQ

Length: 34min 45sec (2085 seconds)

Published: Tue Dec 14 2021