okay hey how are you doing i'm uh i
meant to do this
probably during the last few days but i
had to wait because i was sick for a bit
kind of had a low to medium grade fever
yesterday as well for about
20 plus hours i'm still a bit tired
today but i wanted to record something
so here you go so if i sound tired
i apologize but that's why i'm still
tired um
i guess some graphics primitives today
probably just 2d graphics primitives
such as
just drawing a pixel specifically and uh
drawn a line
vertical horizontal diagonal lines um
maybe like rectangles triangles
circles that sort of deal i don't think
i'll get into
like a linear gradient or anything this
just can be very basic today maybe like
a solid color fill
and then just basic shapes so um i'm
probably going to put these within the
kernel
in the graphics test command section
that i have
sort of fill well i don't have it filled
out just resets right now but it'll go
in here
i might make a standalone application
for testing these or
for maybe like a sort of paint program
ms paint style but worse
of course if i go into here i'm probably
going to clear the screen and then just
draw the examples to the screen
so and that is i'm going to change the
clear screen
uh function here to take in a color in
case you want to clear the screen to a
different color maybe you guys are tired
of the
pure white on blue turbo borland editor
style or what have you
old windows blue screen style i'm going
to change this to take in
a color it's going to be 32-bit
because right now we're dealing with a
rgb 32 bits per pixel for our colors
i'll just call it color so this is
simple enough instead of
setting this to be hard-coded we'll just
set it equal to whatever color we did
you know same as before we can just pass
in something specifically
what do we want to pass in i don't know
i'm going to have to change wherever
clear screen is called or else this is
going to error
but before i do that i will make
probably a little file
i will put it in include i'm going to
call it graphics
and then i'll make a file in there
either graphics.h maybe
2d graphics.h
um i think is there something i can do
with the shell like this
and that'll open there we go that's
that's pretty handy
so 2d graphics.h again i'm going to put
pragma once here
so what was i going to i was going to
start with colors okay we can do either
like an enum or defines or whatever to
hard code some some constants here i'll
just do defines because that's
right here it's easy enough i'll define
some colors
right now we're doing like blue for the
screens right now argbs can be a
r is going to be zero g is going to be
zero blue is going to be just pure blue
ff 32-bit argb
colors okay and we'll make some more
down here we can have
i guess we can do like black and white
and i'd be easy enough right black would
be all zeros
and then white would be all f's well
except for a
but that should handle we might handle
opacity and things later as well
i'm not too sure how to do alpha
blending and whatever other fancy things
you can do with colors
so i'm not going to deal with that in
this episode
um blue let's at least define rgb right
so red would just be
the first two are red so the first two
are going to be
f
green it's gonna be the middle two
are gonna be f and then blue again is
the last two
for r g and b okay and then we can
define some other things
maybe like yellow or something which
would be
red and green i believe but without blue
just have some uh you know some
different colors here i think purple or
violet or
however you want to call it is going to
be red and blue so red and green make
yellow red and blue would make
a purple color so f's for the red and
the blue
just so we don't get full on 100
contrast all the time maybe i'll make
like dark gray and light gray
so dark gray would be
i don't know maybe like all twos or
something something above black so it's
not pure
black but two two two two two two
okay two three four five six and then we
can make
maybe a light gray
which would be all f's would be white
right so we'll have a little bit below f
so let's just say d we'll have two away
from the bottom most and two away from
the top most
depending on if she sleeps during this
whole thing or wakes up or whatnot i do
have a cat like
right there if you wondered what that
blob is
there's a cat that likes to sleep on
couches or wherever
so we'll see we'll see what happens with
that one so we have these colors so i'll
come back to this in a second
but i will at least include this stuff
such as in the kernel
graphics i think it was 2d graphics
underscore right
okay so everywhere we have clear screen
i mean in all the files so this
and the calculator and the editor i
think are the only things we'll be using
this in
we need to pass a color so since we
included the 2d graphics we can pass
blue
it'll look like it normally did wherever
i just have a plain clear screen it's
probably going to be blue
right now but we could change it to
another thing you can change it on your
own to something else add another color
and use it right so that's all we're
doing in there
wherever we have it in the calculator
well i'm going to have to include it in
all these two
i'll just do that graphics
2d graphics.h this needs to be a slash
okay so we'll put in blue
and that's all i have in there simple
enough the editor i might have it in a
few more places but that's okay
slash and we'll include this
in the editor clear screen you know what
i could do
is just
um i'll do the hardcore the new clear
option we'll just do it with this
just change it to here everywhere
and six substitutions so everywhere we
have clear screen that should be blue
now
see if we made an errors any errors so
far i don't think so
um i also don't like how much make
output i have i might change that now as
well
so because really all i'm looking for is
how big these files are
but let me see if this worked first but
make it just
yeah it should still clear everything to
blue they really shouldn't take up any
more bytes actually
because it's just replacing constants
with defines so
since the screen is still blue we know
it's working because every time i do a
clear screen
it's clearing it the blue and then
typing everything over it so everything
still works
kernel the calculator everything else
so if we type a bunch of bunch of crap
and clear screen manually cls yeah it's
blue okay so we're good
okay i'm gonna change the make output
real quick because i was you know i look
up make things when i get annoyed with
it um
if we want to hide output i think
there's a command line flag you can pass
to hide everything but i want to show
some things
but the height output i think you can
just put an at sign in front of things
so i'm going to do that
so normally make copies whatever these
lines are
and then it types the output i'm just
gonna hide that this thing i think i
only have to hide the first one because
the the backslash at the end means it
continues on
so these four lines are going to be
executed as as one
in one sub process so i should only have
to put it here
i think because if i put it there yeah
it's not a different color
yeah so it knows that's good the
highlighting knows
i can keep clean and run but for these
things we can reduce the make output
just by putting an ad sign in front and
see
that's a lot better already i don't
really need to know the
the dd output though so we can change
that as well
but this is a lot easier to read see we
know we know it assembled and we
can see the sizes more easily here so
that's good
yeah let me change the dd status so
wherever we have dd it's probably
printing stuff out the way you can do
that
dd has a status and i don't know what
you call this option argument
whatever you call it but it is a status
thing you can do i think
x for for only the transfer status bytes
actually moved but you can also do none
in it and that should hide the output
on dd so where else do we have down here
i didn't mean to type that okay whatever
status equals none
and that should hide these like 280 plus
zero records in and out that should hide
all of those messages
so there we go so we have the assembler
passes and then the kernel passes that's
all i want to look at if we make an
error the errors would still show up
here
like from the clang compiling things or
phasm assembling things
but other than that if there's no errors
i just want to know how big things are
so that's a lot easier to read that's a
lot less to take in so that's pretty
good
and i can check what sizes things are
because the file table is not huge right
now this is still d so that's good
thirteen and six so that's all fine okay
okay the only other thing
i think i want to do something else to
the makefile and that's making a similar
thing like we did here to tell the size
of the assembled
files so let's add one of those we'll
add that line here
so i can run this again for this because
it'll be a separate
shell or subshell process than this
thing down here so i can
probably do the same line actually and
it'll be okay
except this will be
directory at a dot bin that would be the
size
and then i'll probably want to i don't
want to expand it
because in the assembler we can actually
extend things to the next
sector boundary but we'll just get the
size of what it is
and we'll echo that out so echo size
should be okay divided by 512 sectors we
don't need the new
size so i think that'll be all right
and i don't need to say we're going to
echo it i just need to echo it so we'll
hide that output
uh oh we're already doing with that at
sign okay cool so that should give the
size
of the assembled ones okay i do not need
to see
this i don't want to see that because i
already know what the size is now by
doing this so i'm going to hide
that phasm doesn't have a flag to hide
the output so i'm just going to do it
the linux or unix way and just
ensure standard out goes to null or i'm
going to explicitly put devno
well let's see there we go so now we
just get the assembled files
and then the c files so
get to actually making the graphics
stuff man quit just talking and not
doing anything okay
i'll do that we'll do this to do here
now let's clear the screen first we have
our nice and handy dark gray or light
gray i'll try the light gray we'll see
how that is if it's too blinding then
i'll go with the dark gray but
hopefully the light grey is not blinding
because i made it below all f's
so let's just ensure that that works
right now actually
i need a way to go back
i need to go back to get input or do
continue
yeah because that'll go back
continue all right what i
did i call it input character what did i
call it
i forget yeah input character okay
um i don't really think you need to
explicitly get the return value
you can just put get key but that'll be
like a warning
even though i don't have warnings turned
on in my compiler flags yet which i
probably should but
i'll just explicitly get a key here and
then i'll go back
so we'll do that and then continue
should go back to the top and it should
i don't know if that clears everything
actually well we'll find out if it looks
real jank that means
it didn't clear everything
see if we do graphics test that's not
too blinding that's a little darker than
white because this border is white so
you can see the contrast there so we
press any key
it goes back to the prompt and then it
prints it in the normal blue and white
colors
yeah we'll clear the screen and move the
cursor back i guess
that would be good that would look a
little less jank
let's do we'll clear it back to blue
and we'll set the cursor back
because we're clearing the screen we'll
set it set them equal to zero
yeah it's a lot easier to read that
output now that's nice
i just want to know if the size changes
on the files because then i have to
change it in the boot sector or
the file table but there we go we clear
the screen back after getting the key
uh we can still do things so we're good
okay
cool so now we want to draw stuff on
that screen
so let's actually get to what this video
should be about and go into here
the thing we're going to use um i'm
assuming or drawn in sort of a 2d plane
2d space i haven't done a lot of this
stuff since like high school which was
got eight eight to ten years ago is when
i took like trig and everything so i'm
not really gonna be doing trig i'm gonna
be doing real basic examples
but i probably also won't be able to
explain them at least for like drawing a
circle and things because
i kind of just copied stuff out of books
so
oh well but what i do remember is that
there are things called points
or a lot of things a lot of times when
people do graphics
they use points as sort of a thing to
draw with
something to connect lines with just
expressing where you are within
you know or our coordinate system let's
say we're using the coordinate system
x and y so i'm going to do that i'm
going to
i can do a struct point or
i can do i'm going to do a type diff so
i don't have to type struct every time
we'll do a type destruct
we'll call it points with the big p so
that i know it's a struct i think that's
a standard some people do
we'll make an x and y or i'm going to
assume this is for our screen right now
i'm doing with 1080p
so 1920 or 0 to 1919
effectively for the x values and then 0
to 1079
for the y values to get 1920 1080 or
1080p
so i'm going to have an x and y point
between
you know those starting and ending
values that's going to be our point here
i don't expect it to be negative i'm not
sure if it would help to do an integer
or not
2000 or 1920 or whatever is is well
below the limit of a third of a 32 bit
number so i'm just probably going to do
16 bit but we'll have x
x and y i would think
i forget if this is the right way to do
a struct
okay i didn't remember if if you had to
use semicolons or commas
or what you know if i do a comma it'll
give me an error right
yeah okay because the declaration list
wouldn't be empty i could do this
and save a line that would probably work
right
yeah that'd be equivalent okay i know
some people don't like when you do that
but i think here it makes
perfect sense so it doesn't really
matter it's either that or if i have a
function i would have to do
like you in 16x you went 16
y which is fine that works the same
or if i do this i can just say
points i don't know p1 or something so
it's a little shorter and
if you know what a point is i think it
makes more sense so that's probably what
i'm going to be doing here
the first primitive i'm going to do
though to start off with is
probably the simplest one which is just
drawing a pixel
i think primitive is the right word for
this riot graphics primitives
i'm probably going to do this similar to
what i've done before
i can clear screen we'll just have the
frame buffer thing here
so we'll have a frame buffer and we'll
just draw at that specific
point instead of going through a loop
so to get to that specific point
uh we can either add to the frame buffer
itself
so we need to get the y value for what
row we're going to draw
at which if we're passing in it'll be p1
i'm not passing in by reference i'm
copying
that'll take up more data but that's
fine okay p1 dot y
and to get to the right row we need to
consider however many
pixels are going to be in our row this
is going to be basically pixel
granularity for these
xy points so we'll multiply by 1920
then we'll do that well we need to add
the x value sorry let me do that and
then we'll have the x value
so if we're on row zero then we'll just
draw however many pixels we're into that
row by the x value that's being passed
in if we're on a row like two it'll
multiply two by 1920 first to get down
into that row in the screen and then
we'll go across however many x pixels we
need to go to
and that's where we're going to draw our
color it's a 32-bit pointer so we can
draw a 32-bit value by dereferencing
making that equal
to the color and i'm not passing in a
color let's
pass in a color there we go and we'll
set that equal
so we'll see if this works first let's
um
put that in the kernel here
we'll test these things
so i'll do draw a pixel test
uh we need to make a point first i'll
probably do it here normally i put
everything at the top though but i guess
i'll do it here so it's next to it so it
looks fine
that'll be that'll be fine this will be
points
p1 or p0 or whatever maybe i'll call it
zero i'll zero
offset right that'll make it a little
more confusing
because it's c a zero offset would mean
we're at that point so i'll change that
to p zero
[Music]
um i think i can just do this right like
dot x
equals and dot y equals i think i can do
that within here
let's put it um i guess like in the
middle of the screen so an easy way to
do that is just going to be dividing by
two that'll put it like
approximately in the middle of the
screen it might be a little off because
well this is going to be an integer
value if it was a floating point value
these are
integers so i think it'll cast them to
to an int if they were floating point or
double or whatever
i don't remember if c casts them like uh
to the floor or that or not i don't
remember how it rounds it but oh well
1080 divided by two or we could hard
code
what 960 and 540
but i'm not doing that oh this needs to
be
curly brace i think you can instantiate
like that but we'll see
asset p0 what color do we want it to be
let's try red i'll try a red pixel in
the middle of the screen to get some
contrast
and it doesn't work defaults to an oh
and that is because
i didn't say what type it was i just
said it's color
unless i want to do
that or something i don't think that's
how you do it i'll just specify that's
fine
it's going to be a un-32
type specifier missing nice defaults to
n
use of undeclared that is because i
called it p0 and didn't change
it you got to make mistakes if i don't
make a bunch of mistakes how do you know
i'm not human and not making it up on
the spot
type specifier missing okay it doesn't
return anything
wow i mess everything up this is how you
code c guys you just don't do anything
right and uh
you know you try you try to record
something after you've been not feeling
well and it just goes to
a crap shoot that's okay
let's give this a little comment too
draw a single pixel
to the screen is it going to work
oh now it works if you fix all your
problems
sometimes it just might find you get
what you need
and i don't see anything that doesn't
mean there's nothing there
it means my eyes could be bad
i think there is something right there i
think that's a red pixel right there
i'll have to zoom in on the recording or
i can just draw a box so it's easier to
see which would probably help a lot more
wouldn't it so let's do that
let's do that i'll go back where it was
draw pixel all right let's draw a box
instead let's do like
do i have do i have standard like
iterators up here whatever i have an
index
i'll just make like i people like i
right
let's do i zero
i don't know 50 well these could be
eight bit if i do that
all right plus plus let's do
this would be a line of pixels let's
make a box
j less than 50 j plus plus
let's do this we'll draw a pixel at that
position
so
[Music]
i'll do this it'd look a little less
jank if i surround it with brackets
again even though it's two more lines oh
well
so what am i doing here other than
messing up indentation i'm going to set
um we'll do x equal to j
we'll do y equal to the i so for a row
of 50 for every
x 0 to 50 in that row
i'm going to draw a red pixel right now
this will be 0 to 50 so it'll be the top
left corner i kind of want it to be in
the middle so it's a little easier to
see
and i might make it a hundred just so
it's bigger
so let's do that uh let's start off
1920 divided by two is about like 960
right
i also don't need this because i'm
setting it up
let's do we'll do it'll be offset a
little bit to the right that's okay
1080 half of that is 540. it'll be
offset a little bit to the bottom right
that's all right
i'm not centering it so let's see what
that does
i'll offset it a little bit from the
middle of the screen hopefully draw
a red square
which is a place in russia there we go
there's your big old red square so that
just proves that it works
we're drawing 50 pixels across
where's my cursor there's my cursor but
when i type anything it goes away
50 well free for zero to 50 rows for
each row i'm drawing 50 pixels across
so that's with this or 100 sorry for 0
to 100 rows i'm drawing
100 pixels across so draw pixel works so
that's cool
i guess the next easiest thing we could
do is draw a line
draw a line to the screen
this time hopefully i type this right
now we'll do draw a line
given probably two points
yeah so we want a starting point and an
ending point so we can do p0 to p1
start and end maybe that would make more
sense
it's a little bit easier to read start
and end
and we'll pass the color because what
color do we want the line to be
so what i ended up doing was searching
line algorithms the other day right
line drawing algorithms this is i guess
an easy one you can oh this is the
simplest one
this is really simple if we wanted it to
be a little more
performant we could do prison hams we
might try to do this first though
but it could be negative you could have
a negative slope
quite sparse ah so this doesn't work
really well yeah let's do breslin hams
so you can go through and read this on
your own i'm not going to explain it
because i'm
i would not explain it right and it
would be bad and wrong and i have not
done math for a long time so
i do want to learn it better
like i understand this is delta this is
the change in distance or whatever right
delta y
they put one half some things in there
basically we're getting like a decision
parameter or an error and we want to
choose depending on the slope of the
line that we're going to draw if it's
greater over an x distance or over a y
distance
the lines can be like steep if it's y
it's going to be like that
if it's an x distance it'll be like you
know not as steep it'll be a different
different slope and we want to see where
a pixel
that we're going to draw is it going to
be like above the line below the line on
the line
whatever is closer the x or the y
distance that we're going to
whichever one's closer to the line or on
the line we want to draw that we don't
want to draw like way off into space
that's kind of what these algorithms are
for and resin ham has a sort of
really good integer based example that
he uses so we don't have to deal with
floating point
this is a simple one for it uh but you
want to handle
the case where you put like the start of
the line
is going to be like to the right of the
end of the line like if you're drawing
it backwards then you're going to have
a negative slope and you kind of want to
account
for that i guess so they go through an
account for all that
the code isn't really that bad but i
ended up doing
i think i ended up going with this
before so it's pretty
it's pretty short instead of going
through and doing line low and line high
which are these two
would duplicate a bit of code four times
i'm just going to kind of
probably do this sort of copy and paste
this
to work with my example so i'm going to
do that right quick
all right let's draw a line here
adapting for my
variable names this can be sort of you
know what the wikipedia thing said so
i'm going to make these ins
um what am i making ends dx and dy i'm
going to make
integers and not unsigned integers
because our slopes could be negative
that we pass in
or we could add code to switch the
points
if the x or d y are negative
or we can just not do that so we'll have
this work with whatever we pass in but
we need
we need a change in x and a change in y
to get the slope that we want to draw so
the rise or the run
but how do we get those we can get
sort of the absolute value of the
changes in x and the changes in y
so the changes in x will be probably the
end minus the start
so n dot x minus start dot x
and then if that is negative
we want to negate it probably so
[Music]
if dx is less than zero dx is negative
dx
to get the positive absolute value in
all situations
i did see on wikipedia and on some other
articles
that they were using abs absolute value
i don't have a library with that built
in
so if we want to use this that's going
to error i could make like a macro or
something or another function to call
that does that
so i might do that yes okay so let's
make an absolute value function just to
make it read a little better
because this goes along with what
i've seen online before i'm going to do
a nice little
defined macro which is always nice and
can never go wrong
definitely doesn't make things harder to
read
a book i found used a computer graphics
and principles in c
which is like from the 90s second
edition it had like a round function
that used in a so i can use an a here
this could be whatever this can be x
this can be y it's just some symbol
to use when you're defining whatever
this function is going to be
so it used a i'm going to use a for lack
of
better symbols here but we'll say if a
is less than zero
i'm going to make a turn area here uh
return a otherwise return negative a
so that's simple enough um we'll
probably want to wrap that in brackets
though
so that should work that'll replace a
with whatever we're passing it to
so we're passing to it so index minus
start x this whole sort of expression
here would be passed in as a
so i don't think this will work because
this would say index minus start x
less than zero so i think it would be
index minus
start x less than zero and we want this
whole thing
so this is gonna look a little jank but
i think i'm gonna have to put double
parentheses
or maybe i can put triple parentheses up
here
for a maybe
i don't know we'll see i think this will
get the absolute value though
then we don't have to do that so okay
let's have a d
y as well the change in y um
for whatever reason they wanted it to
work
in like a more concise way the nice
folks that submit wikipedia articles did
a negative
absolute value for y so i'm going to go
negative d y
to ensure that that's always going to be
a negative step
on the slope for some reason oh well i'm
going to have a couple
couple sign variables these can probably
just be eights
eight bit a couple signed variables
variables i've seen it used as like x
i and y i before and a couple things
or s x and y x s might make more sense
i know these aren't great names they're
like two letters i could also type out
like delta x
if that makes more sense i don't know i
don't know what would be easier to read
that might make more sense actually
this needs to be negative there delta y
we'll do that that might be a little bit
easier to read
we'll call this sine x and sine y
so sine x is going to be overall what
direction are we moving are we moving
positive or negative in the x and y
direction so if we have a line that like
goes up to the right
would be sine of x would be positive and
sine of y would be positive
if we have a line that's just going like
horizontal left to right it's probably
gonna be positive
if we have a line that's horizontal
right to left start and then end
it's probably gonna be negative so this
is saying you know what what direction
are we moving
for the x and y direction so positive or
negative for for either one
so if the starting x is less than the
ending x
which means means we're going left to
right
pretty much the end is you know more
than the start
we're going to the right on our screen
from you know zero to the end
then it's gonna be positive so if it's
that i'm gonna say it's one
otherwise we're moving right to left
somehow it's gonna be negative
so our sign is gonna be one or negative
one
we'll do the same thing for the y
direction are we moving up or down
effectively if our starting y is above
the ending y the ending y will be more
because we're going down from an initial
origin in the top left of zero zero
it's kind of what we're basing
everything off of so if the y is going
down it'll be one
otherwise can be negative one we're
moving sort of end to start or whatever
we're going up we're going down the
screen it's positive we're going up the
screen the y direction will be
increasing or we'll be
decreasing so it'll be negative so then
for
this is kind of based off bressingham's
algorithm uh let me put the source here
actually
taken or adapted i can put adapted
adapted from
wikipedia page on
prezenham's line algorithm
actually these are these are lowercase
so if you search that wikipedia on that
you should find the page or i can i'll
probably link it in the video
description as well
that's where this is coming from but
okay we have resinham use like an error
or sort of decision parameter to decide
do we want to move in the x direction or
the y direction
whenever we're deciding the next pixel
to draw as part of our line
so i'm going to call it error that's
really i think
16 bits will hold it it'll be error
we're going to start it out as dx plus d
y or well
delta delta x
plus delta y so we're going to add them
both to get an initial
error parameter and whenever this this
error parameter variable
passes a certain threshold we're going
to add to it or subtract from it
and we're going to use however much this
equals to determine if we want to
move in the x or y direction for the
line which was a whole lot of words that
didn't really say anything but hopefully
it
makes more sense in the in the future
they had a thing called e2 which is just
going to be two times the error
so maybe i'll call it error times two or
something that's fine
okay but for the actual little loop here
for our algorithm it's not very long
not very long we're going to draw an
initial pixel at our x and y
which is where we're starting at so
start.x
and start.y well we're drawing using a
point right so we have to pass that
so let's just pass in start
and whatever color we passed in so
that'll draw the initial pixel to start
the line off
okay how they did this i don't really
like it but that's that's okay because
they're putting an
if statement usually when you have a
loop you can use this as the terminating
statement but they're drawing and then
doing this
so we don't miss off by one error or
anything but that's okay i'm just
going off with wikipedia but okay if our
start
if we're if we're at the end our start x
will equal the ending x
and the y's will be equal as well
if we've reached this point where the
x's and y's are equal then we're at the
end of the line we can stop drawing we
can break out the loop
and end but if we're not at the end
then we're getting our error variable
here which is going to be error times
two
and if this value
is greater than or equal to our change
in y which is always going to be a
negative absolute value but if we're
greater than or equal to that
let's put this up on the screen a little
bit more
then we're going to add that y
to the error
so we'll do error plus equal to delta y
and we're going to move in the x
direction so this is signifying that
after our initial delta x delta y
error we're going to multiply by 2 for
some reason i forget
if that's greater than our change in y
then that's signifying we're moving in
the x direction
so i'm going to i'm going to add the
change in y
but our next x that we're going to draw
up here is going to be moved
um you know to the next pixel before the
end of the line so start x we're going
to add in our sine of x
so if this is if we're moving left to
right it's positive we're going to add a
1
to this x value so the next pixel we
draw is going to be 1 to the right
if the sign's negative we're moving to
the left to get to the end of the line
so this is going to be
1 pixel to the left it'll add negative
one okay
that should be all right okay
um on the other side of things although
this won't always happen
there are two separate if statements but
if our
error times 2 value
in this case is less than or equal since
we made our delta y always negative we
can do this
it shortens code a bit if this is less
than or equal
or change in x which could be positive
or negative then we want to move in the
y direction so greater than or equal to
delta y
we're going to move in the x direction
but add the delta y to the error
if it's less than or equal to the delta
x
then we're going to add delta x to the
error and we're going to move in the y
direction
whether going down the screen for a
positive y positive sign it'll add one
if we're going up the screen
then it'll be a negative one and the y
will decrease
and that's the whole loop here which is
pretty simple that is what i
got uh from here that's what this is
effectively i'll zoom in a bit that's
what this is just adapted with my
variable names
but that's what they chose some versions
use integer incremental error to perform
all octant line draws so if you think of
like the unit circle there's eight
octents around the circle
we're kind of just deciding what
direction to draw on one of those
depending on the slope
this is just a concise version of that
and yes this does not handle vertical
and horizontal lines specifically either
we can add that
to be fancy if we want and yes in this
one
we can draw a negative or positive
slopes so in whatever direction
there's also dda algorithm and other
things but we're going to go with this
for now
so this should draw any line positive or
negative slopes
going anywhere we don't have to worry
about it so we can draw
you know lines so lines are fun uh let's
see if that compiles first
didn't mess anything up we are at e
sectors now but i'm going to add
a test to the kernel first before we do
anything else let's add a draw line test
or a few
i'll do um let's do horizontal line
we'll do vertical line we'll do
some sort of diagonal line um let's go
up and to the right
so up right if that makes sense
and i'll go down into the left just so
just just to show we can do negative
slopes on things up to the right down
well those would look the same though so
let's not do that
uh we go down to the right as well it's
fine
just to show we can do negative slopes
um okay
so horizontal so we'll draw a line we
need to pass in two points
so i need to make two points p one
so let's set the initial x to we have a
square in the middle of the screen we've
let's move this square and we can like
draw the lines in the middle or
something
we can move the square up or to the up
and up and to the left maybe
let's just do like we'll draw it at like
200.
we'll see how that looks we'll try to
draw these like in the middle i guess
maybe
let's set this equal to half the screen
with um
we can offset it up a little bit like
the upper middle of the screen
so i'll subtract maybe like 100 or 200
or something
we'll do 200
and y will do the middle of the screen
offset um actually this will be to the
left
so i don't need to do that i can just
well i'll offset it to the left a little
bit i'll do 100 to the left
but the y value will offset up 200
okay and then p1
if we want to do 100 pixels we could end
in the center
and then this would stay the same
for a horizontal line we're just going
left to right 100 pixels
okay p0p1 let's
draw just the black line
and then we'll try a vertical line
[Music]
vertical let's put it to the right of
the horizontal line so we can do
1920 by 2 plus 100 we can start this
and we'll say negative 100 to positive
100
so that'll be 200 pixels going straight
down
if i make the x's equal so if the x's
are equal and the y is changing
only the y then it's just a straight
vertical line if the y is equal
and the x's are changing then it's going
to be you know horizontal line left to
right
so hopefully that makes sense we'll see
what that looks like right now
let's make this some other color like
green
just to get some difference it may not
work unless we change
the sizes of things in the file table so
let's change that to e
which means i have to change the boot
sector because i don't have
a good thing to automatically pick that
up not yet
in the future i want to change this to
where we just read the file table so i
don't have to
change these values all the time that's
all right
we just changed those to be one more for
the kernel in the boot sector that's all
that was doing
let's see
what that looks like that doesn't look
good now does it we do have a vertical
line
i think i messed up somewhere because
that does not look good
the vertical line looks okay the
horizontal does not
not at all uh and it crashed so that's
good
so what did i mess up probably
everything
i usually mess everything up
like typing in draw underscore
what did i change here start and end
uh i don't think this would have an
effect but i can try
making these 16-bit
just so they're all equal i don't think
that'll change it
though but you never know
oh the absolute value is greater than
zero
sorry i'm dumb
yeah if you were yelling at your screen
you know sorry about that
a is needs to be positive the absolute
value we're only negating if it's
negative
if it's positive we want to return the
positive yeah that probably like broke
everything
most definitely remember absolute values
are positive values
yeah there we go it's kind of hard to
see the green but this is a black
horizontal line
the green here is vertical it's green
maybe it's easy to see for you for me
it's kind of hard to see
but then again i have giant glasses
because my eyesight's not 20 20 amaze
amazeballs so
i'm in kernel.c let's go to drawline
remember make absolute values positive
let's try yellow would also be hard to
see we'll try purple
purple might be a little bit i'm going
to move it up actually
to start where the other one's starting
it'll just be 100 pixels
i don't know if purple will be higher
contrast and easier to see or not yeah
purple's a little easier to see it's
down here
so every time i go outside of the screen
it uh it counts as a keystroke when i
press alt and stuff
so that's why it keeps going back but
here's horizontal here's vertical
diagonal lines let's look at
diagonal lines let's move that down
make it minus 100 if i want this to
start at the same place i can start this
at minus 100.
okay diagonal up and to the right
as i'll just put this here too so up
into the riot
i guess we'll put it to the right of
these two
so we'll do positive 150 maybe
i'll start it at the middle of the
screen
we'll go up so we'll go to negative 100
and we'll put it at 250 or maybe 300
150 pixels down right
okay we'll start this maybe at positive
200 so it ain't well this this ends at
300 so let's put this at
350. start it at 350
we'll go over to 450 or 500
this ends at negative 100 so maybe we
can start at negative 100 we'll end at
positive
100 that's fine we'll see what that
looks like this will be
make it dark gray we'll make this one
blue
just a couple diagonal examples we'll
see what that looks like
oh so there we go there's i mean this
shade is different from this black even
though it's hard to tell but
this goes up this goes down so we can
draw diagonal lines
you can draw vertical we can draw a
horizontal cool these are only one pixel
wide i don't have anything for line
thickness
i might make that part of like a paint
application if i do that
but this is basic line drawing hopefully
that
makes some sense or at least looks
interesting okay so the simplest
polygon i guess i want to think of a
polygon however many number of sides the
simplest
2d shape that is made of let's say
connected lines
is going to be three sides right
three vertexes three points in space for
a triangle
you know square is made up of sort of
two triangles if you can bisect it
because if you just have two lines
connecting then it's two lines but if
you have three lines connecting
oh then we're getting fancy got some
triangles there some trig
but uh we're not gonna go into trig at
all this is actually gonna be very
simple
for for my polygon drawings
which also means it's probably not going
to be very performance but right now i
don't have to worry about performance
i'm not doing 60 fps video games or
anything
i'm not worried about performance but
i'm worried about eventually ending this
video so let's draw a triangle
to the screen i keep putting to the
screen we can just do draw triangle
draw a line draw a single pixel
hopefully see where i'm going with this
i'm trying to build up from smaller
things
i'm building up from a pixel this is
calling draw pixel
triangle is going to call draw a line i
think
void draw triangle so this is going to
be three points in space
so i'll do point p0 or i mean these are
called like vertexes now
i guess if they're polygons i can make
it v for vertex
or maybe i call it vertex
um i could do that i guess i don't
whatever makes the most sense i want
this to be like
i'm not a good teacher but i want it to
be the most sense and the best like
pedagogically if that's a word we'll
have three points in space
or text zero one two or one two three
and whatever color we want these to be
and the uh the easiest way to draw three
lines on the screen is
drawing three lines on the screen so
that's what i'm gonna do
draw lines between all
all three points
so i'm going to draw a line from
point zero to point one or one to point
two which would be vertex zero to vertex
one
color color needs to be you want thirty
two
even thirty two t okay so draw a line
from zero to one
draw a line from one to two
and draw a line from two back to zero
that should be all we have to do to draw
like any arbitrary triangle we're just
drawing three lines on the screen
and connecting the points this is also a
way to see if we captured some off by
one errors
because if we didn't then there would be
gaps between the points
right at the end where they connect so
if they're all connected and it looks
right then we know we don't have any off
by one drawing pixel errors but
this will just kind of draw a line three
times and that calls draw pixel so we're
kind of trying to build up
from smaller things okay but that's
actually that i mean that should be all
we need to do
so draw lines have
triangle tests
maybe i could do a right angle one and a
knot what is it when two sides are equal
is that isosceles
so maybe we could do right angle
right angle would be the y value would
be the same
right for two of the sides well the y
value would be the same for one side
it'd just be vertical line and then a
horizontal line
for another side and then the rest of
the diagonal
so let's do three points now
p2 let's do three points now we'll add a
p2 there
this is all in the middle um let's put
this in the bottom left
just to have you know separate space out
from here so 1920 over two let's offset
to the left
yeah you know 600 this is 960 so this
only be like 300 off that's fine
let's start at the top of it for right
angle i'm going to do
0.1 0.2 below 0.3 over here and then
i'll connect
like that this will start at um
halfway in the screen maybe we'll add a
little bit
i'll add 100 offset it down into the
screen 100 from the middle
p1 i'm going to have the same x but the
y will change
we'll do 200 we'll make it 100 pixels
down for the height
and then p2 will be over to the right
aways
so we're going to go right from the
first point
maybe 150 pixels so minus
450.
and the y value will be equal to the p1y
value
so that it's a horizontal line
so vertical line p0 to p1
the y is changing and then a horizontal
line p1 to p2
the x is changing yeah okay
this will be draw triangle
spp0
p1 p2 we'll make it i don't think yellow
would show up
we can try making it yellow though i
think i don't think it'll it'll work
that well
but we can try yellow we'll see what
happens hopefully that's a right angle
and i missed a a thing what line was
that
257 267 that's close
there we go
it does take longer to compile when i'm
recording at the same time
oh i don't see it i don't see anything
oh there it is
yeah that's very faint i'm not doing
that can i have another color like burnt
orange or something let me look up a
color picker
and any one of these color codes that
sounds good
give me a yeah sort of like burnt orange
here let's do that
ff723
let's try that
so i will be hard coding this forgive me
ff7233
should be a sort of burnt orange
sort of burnt orange
just so it's easier to see on the screen
there's our triangle so you right angle
the vertical line p0 to p1 p1 to p2
is a horizontal p2 back to p1 for the
third line we're drawing
is diagonal that's a good right angle
triangle
and that draws a triangle do i really
need to draw the other two i guess since
i already said i would
i just want good examples you know but
all we're doing is drawing three lines
i don't know i'll do something different
when we go to fill it in i'll do a
filled triangle later and we can do a
different one let's just
that's a right angle test and it works
let's just do that for the sake of time
because i don't want to be editing this
video forever because i take too long to
make it
okay so what do we want to do after a
triangle let's add one more side
to draw so we'll make a rectangle
draw a rectangle so for a rectangle you
could
pass four points but since a rectangle
is kind of defined to be
you know parallel sides right we only
really need to pass in
two points to draw a rectangle let's put
this
in yeah let's make it first doy
let's do draw a rectangle and if all
four sides are equal length
it's a square so we could use this to
draw squares as well but
let's do a rectangle it'll be void again
draw call it rect or i can call it
rectangle usually people do draw rect
and for this
i think they some people do draw a try
triangle is fine but rect i'll i'll say
it's wrecked
so points will make zero and one
color
the points you need can just be the the
top
left point of the rectangle and the
bottom right point
so going from the top left to the bottom
right we go across
however many x pixels we need and then
we go down however many y pixels we need
so really we can just say you know this
x to this x draw a horizontal line
and then at you know this x or this y
down to this y draw a vertical
then that is the the bottom right and
then that x
back to the left the other x draw a
horizontal line
and then that x or that y up to our
initial point at the top left
that y we draw a vertical line so
horizontal vertical horizontal vertical
so let's do the top first top of
rectangle
so we'll draw a line from vertex
0 to 1 would be diagonal so i don't want
to do that
so probably have to make some the way i
did this i'll have to do some temporary
variables here
so we'll do points uh temp
uh temp x will equal vertex 1 or the
second point we're drawing to i'm
assuming that's the bottom right
i could call this top left bottom right
would that make more sense that might
make more sense
so i'm always drawing positive this way
i always draw positive values
usually well you can draw negative
slopes though withdraw a line so never
mind
but i'm always going in positive
direction x and y from the top left to
the bottom right that's kind of the
point of doing this
so temp x let's equal
the bottom right dot x
and then temp y will equal
top left dot x and then we can pass draw
line
top left point and temp
and it'll draw a horizontal line for the
top of the rectangle just going across
the x direction
let's draw a right side
right side will be drawing a line from
our temporary point which is
i guess the top right right now draw
from temp
to bottom right
we need to pass the color in as well
before i forget before i forget that
since the x values are equal the y value
will be changing from top left to bottom
right y
so this will draw a vertical line down
for the right side
put some spaces there at the bottom
we can draw left so i can show that
negative slopes work with draw line
draw from the bottom right to well let's
redo temp
the temp y will equal the bottom right y
yeah we'll change the x value to the
left x value
and the y value will be the bottom y
value and then we'll draw from the
bottom right to temp
so that the y values are the same but
the x value changes going to the left
that'll draw the bottom of the rectangle
and then we just uh we'll draw the left
side so i'm going clockwise here
you can go in whatever other order
directions you want there's probably a
way to do it
more performant and easier more concise
but this is what i'm doing for i guess
for learning
we'll draw from temp
which is at the bottom left right now
we'll draw that back up to the top left
that's our color so four lines to draw a
rectangle so there you go
so let's go down here draw a rectangle
test
you can put it next to the triangle i
guess we'll do that so p0
let's do
so where does this end minus 450 we can
do minus 400
or the top part of this is at plus 100
so let's do that
and then for the bottom right point
let's go across i don't know 300 pixels
maybe it'll run into one of the lines or
something but we'll go across 300 pixels
and we'll go down i don't know 100
pixels
it'll be like a skinny triangle or a
rectangle
and go down maybe 200 actually
so we'll do plus 300.
and it was draw rect p0 p1
we can make it the burnt orange color
again i want to get some fancy
colors but you can't these are like
single pixel lines so they're not really
gonna
they're not gonna stand out that much
but we can try for some other
contrasty color like a nice i don't
whatever this is teal
kind of teal color 33c e f f yeah we'll
try that
c e f f i think that's what it was
kind of teal maybe
i keep forgetting type specifier missing
uh needs to be a point
yeah why do i always forget these things
i know it's a point in my head but when
i type it i don't realize i'm not typing
the whole thing
that's that's usually what syntax
highlighting is for but you know
oh well oh guard local oh it doesn't
like it
it doesn't like me passing temp okay so
i have run into this before
this is i mean it's a good thing it's
telling you hey there's a potential that
you're going to mess up the stack
however
for the purposes of these examples and
everything
i generally i know i'm not really going
to mess up the stack so this is kind of
just annoying me
and i think it's because these are
enabled by default on openbsd
i can add a flag to get rid of that i
think it's f no
stack protector i think that's what it
was
or no stack protection it's something
like that i think that's what it is
yeah it's f no stack protector so i mean
normally you probably shouldn't disable
that because you might have some some
stack overflow errors if you
if you disable it but for what i'm doing
i don't think that's gonna happen
i don't need that error getting in my
way
um oh stuff's wrong here uh oh we're at
f
sectors now yeah these things do take up
a lot of bites we're not an assembly
anymore
so stuff takes up a fair bit more bites
you know if you want something cool and
all in assembly and
very well made look up min wet os but
for me
uh yeah we're just doing things you know
not not performance oriented at all not
space size constrained at all
all right so that is not what i wanted
at all that's not good that's like a
giant trapezoid or something so that's
that's obviously not great
so something i did is wrong yeah that
should not be x this should be y
that's that's a red flag that should be
a y not an x
it's a y value maybe that's why it told
me that error i don't know
it was just saying it very kindly behind
the guise of
a stack protection guard local instead
of what really happened which is me
being an idiot
uh this is a rectangle but it's not
it needs to be cut off like down here
something still ain't right
um correct is lowercase
yes p0 to p1 i mean i could set this
initialized
to the bottom right and then just change
this
that would be one less line
oh 1920 this needs to be 1080
1080 it's the y value wow yeah that
would that would make sense why it would
go off the screen because that's way
farther than the bottom of the screen
and i don't have an infinite scrolling
screen space there we go look at that
get the top get the right get the left
so it does draw in the negative
direction
draw a line works for that and then back
drawn those four lines so that works
i might make that a little bit skinnier
though i wanted to do
source
let's go 200
there i'll draw a little skinnier
rectangle there we go oh it's a
rectangle
okay what do i want to do after a
rectangle
um we could draw like a generic polygon
try to draw something
okay if i want to just draw a generic
polygon
we can pass in however many points we
want to do for that so
i'm probably just going to do an array
of points so i could pass a pointer to
an array or just
say it's going to be an array so this
will be like an n
sided polygon or however many sides we
want to use
it'll just be more than four sides i
guess
or at least more than three sides we
could probably draw a triangle with this
function i just wanted that to be
separate to be explicit but
i think a triangle is technically a
polygon just with three sides right
so we could really do everything with
this function
um let's do like a vertex array
so we can make an array i guess this
would be equivalent to passing a pointer
but i want to say we're passing an array
of points so i'll put i'll put the
brackets there um you can't if it's only
one dimension
or i think the highest dimension and c
then you can have it be blank for a two
dimensional array you can
make the first thing blank and the
second one you can fill with like you
know five or whatever
like this would also be valid i think
but if we're just doing one dimension we
can just
we can leave it blank it's fine but an
array of x and y values an array of
vertexes or vertices is the word right
multiple an
array of vertices that we're going to
draw our polygon from
how do we know how big it is i'm going
to also pass in
let's let's limit right now to 255
i'll have number of points or number of
vertices
that's basically the array size that's
what i'm going to use that for
and we'll have a whatever color we want
to we want to draw it as
so how do i do this i'm basically going
to do a couple lines
that are going to a couple statements
that are just going to call drawline
again
but i'm going to draw lines up to the
last line
and then i'm going to draw the last line
you'll see why in one second
i'm going to use a for loop
let's do i guess 0 yeah zero because we
have to zero offset
zero based indexing and for c
arrays we'll do up to the number of
vertices
i'm gonna index the array so i'm gonna
do minus one because if we do vertex
array offset or
index num vertices that's going to be
invalid that's not right
so we could get a weird memory
corruption from that so we'll do this
and we only really need a one-liner i'm
just going to draw a line
from our vertex array
whatever point we're on we're starting
at zero we want to go to the next point
so we're gonna do one
to i plus one effectively
and pass the color in but that will stop
before the last line so we need to draw
that as well
so this will be basically num vertices
well it'll stop at minus one so we can
do minus one
um and it'll go to the first point in
the array
first point will be zero
so if we draw like a hexagon or an
octagon or
just random lines or whatever we want to
draw every line up until the last one
since we can't do the last one to the
first one within a one line
for loop i'm just drawing the last one
right after explicitly
so if we draw like the hexagon and go to
the end
we want to draw the last you know the
last line there that's all that's doing
so that's pretty simple that'll draw a
polygon should draw a polygon should
draw a triangle
if we just pass three vertices or
rectangle if we pass four
um but we'll draw something
maybe maybe a hexagon for an example or
an octagon for a stop sign
or something the octagon at the ocho
so let's do draw a polygon test
um that'll be an array of points let's
make an array
points array
i don't know verte well i'll do that
yeah vertex array
vertex array let's make this six points
for now
so this is going to be annoying filling
it all out but that's okay i'll do zero
i can put this next to the rectangle so
that's fine so we'll start it
where does this end the x ends at
negative 100 we'll just do the middle of
the screen
i don't know if this will run into the
lines or not we'll find out i'll change
it if it does
we'll do the middle of the screen
and this will be 1080
it starts at plus 100 we can do that
zero one two three four five
it is gonna be long
just be one let's see let's draw
like i did six points let's draw a
hexagon
even though it's not some fancy thing
i'll draw a hexagon
so six sides i wanna i'm gonna go like
clockwise to the top
whatever left thing i'm starting here
and then i'll go across
for the top so the x will be
i don't know 100 i guess
and the y will stay the same then i'm
going to go like down
so x will be let's do 150
and then the y will change we'll do the
y change as well 150 and then i'll do a
vertical line down
i'll do 200 and i want to go
down into the left
again by 50
and y will increase 250 maybe because
i'll be going down
then we want to do a horizontal line to
the left now we'll need more than this
isn't a hexagon
hexagon i'm thinking of an octagon still
because i'm stupid all right
yeah it's hop and then we go to a point
and then we go back yeah
geez okay now i want to go
yeah we need a horizontal line for the
top and then i want to go down to the
right
50 we'll do 200
and then down 150 sure and then we want
to go down
back to the left the x will be
whatever the other one was one hundred
and y can be two hundred
so let me separate this out
increment x and x and y then decrement
back
but the y is greater okay that's fine
now we just want to go to the left again
100 will go
back to zero for the middle
and we want to go up to the other point
which is going to be we'll decrease by
100 and we'll go up
to 150 and then the sixth point will be
the first point
so that'll be okay so what we can do now
is do draw a polygon
pass in the vertex array
pass in the number of points which is
going to be six zero through five
zero one two three four five yeah six
count on your fingers make sure
and the color red again that's fine
i'll do a red polygon
no member name y because it's a capital
because it's a capital y why did i do
lowercase i don't know
because i wasn't looking
because i wasn't looking still f sectors
that's good
so it's a little wonky looking but that
is a hexagon
right we drew this point and this point
threw a line to here lined back to here
back to here back to here back to here
so it's a hexagon
so we got all our polygons out of the
way we could probably also call it with
these points and a three for the number
to draw a triangle and then these points
in a four to draw the rectangle i just
have those separate
make it easier to understand okay so
what can we do now that we've drawn all
straight angle things
we can draw probably curved things by
that i mean an infinite number of points
by that i mean
not really infinite but more uh a circle
yeah
circle so this isn't a big
uh function it's pretty small but i want
to show where i got it from
because i like to cite my sources
because i wouldn't be able to explain it
on my own
so i'm a dum-dum okay computer graphics
principles and practice and see second
edition that's what this is
output primitives circle
this goes through and explains um i
don't know if i can put links to pdfs
that
aren't in print but may not be
technically
free to acquire but i'm sure you can
find this pdf on your own somewhere
right
computer graphics principles and
practice and see second edition it was
in the 90s but it makes sense
so this goes and explains you know we're
drawing
basically eight points in each octant of
the circle
so once we find out one point we can use
symmetry to draw the other seven
we just go and draw basically in one of
the the octants or well it's the
quadrant but if we
dissect it more it's a bisect bit more
it's it's octants
but we do quadrants and we just draw
four symmetrical points
we could like start here start here and
then draw one arc
for the quadrant and then symmetry will
handle drawing the other three or if
there's octants we can draw one
octent and then symmetry can handle the
other seven so we're really just going
to be drawing
[Music]
you know figuring out the x and y for an
octet deciding where to move
and what direction to draw the next x y
point of that
curve on the octent and then draw the
rest through symmetry
so i didn't explain how that works but
that's what we're going to be doing
and yeah circle x plus y minus r squared
for a midpoint function
it's kind of like resin ham with the
line we're just trying to determine if
the point we want to draw is
close enough on the inside or outside or
on the line
and we end up with the midpoint i'm
using the midpoint algorithm is what i'm
going to be doing
this ends up drawing stuff
so basically i'm doing this this
function here this is p
plus equal it's hard to read plus equal
to times x plus one plus equal two times
x minus
minus y plus one so you start y
the radius x is zero so zero to the
radius
we're going in like whatever octant the
up and right is
p is some point one minus the radius
first we plot eight
by taking you know the first eight
symmetrical points that we start at
and then we get the rest as we draw the
curve so while x is not at the radius
yet we're going to increment
our p or one minus the radius is
negative then we're going to add
two times the x plus one otherwise it's
positive or equal to zero
we're going to subtract the y for the
next point and add
two times x minus y plus one and then
draw those points and keep going
until your x is equal to or greater than
starting radius
that draws a circle so that's what i'm
going to be typing out
so let's do this down here draw a
circle a circle i'm also going to draw
an ellipse after this
but you can think of a circle as an
ellipse where both
radiuses radii i guess were both radii
horizontal and vertical of an ellipse if
they're both equal you have a circle
same thing with a square compared to a
rectangle if all sides are equal square
is a rectangle a rectangle is a square
if all the sides are equal an ellipse is
a circle if
both radii are equal i think that's
right i could be
talking out my butt though like i'm
wanting to do void draw
circle so i'm going to pass in
i'm going to pass in a point again it's
going to be the center of the circle we
want to draw so i'll call it center
and then however big the circle is is
going to be the radius
probably do want i probably want a
positive radius right
that would make sense i don't think we
could have a negative radius that'd be
kind of weird
let's do un16
radius and whatever color we want it to
be
which will be un-32
put this here so we get it up on the
screen some more
okay so let's have an x and a y x is
going to start at zero
this needs to be a t y is going to start
at the radius
because we're going to move from zero to
the radius
to draw you know our octant that we're
going to do
and we're going to have a p value i
forget what that stands for but they use
the p
p is going to be 1 minus 1 minus the
radius
that wouldn't be an inverse right be
just some other complement or something
i don't know i don't know what you call
it but i'm going to draw the initial
how they did it you could probably make
it all in one loop without drawing
points multiple times but
that's just how the book had it so
that's how i'm doing it so draw initial
eight octane points
so center dot x plus
whatever x we're currently on
and then center dot y plus the y
and then the color two
three four five six seven eight
we'll do center minus x and plus y
we'll do plus x and minus y
and then minus x and minus y
and i'll switch these around i'll do
plus
y plus x
oh can't type minus y
and plus x
plus y minus x
and minus y and minus x
so this gets all eight octants of the
circle
we're gonna draw since we have the first
point we can do symmetry from all of
those
this is the first point these other
seven octanes are you know from symmetry
okay and then we want to loop and draw
the rest of the points so while
x is less than y while we have not
reached the radius yet with our
temporary x value here we want to keep
drawing points
so i'm going to go increment x for the
next point and now we need to see if we
want to move in the y direction or not
so if p is less than zero
i can add
two times x plus one
otherwise we can subtract decrement y
and add two times
x minus y plus one
and then we can draw the other points
so it is it is duplicated code here for
this so
i think maybe you could do a do while
and then just have this once up here
instead of having it twice that might be
something to do
if you want to optimize a little bit for
lines of code or whatever else
this is all we need to do
draw next set of eight
octant points
so we're just drawing the one octant on
the circle and then going
um going up i guess because we're
decrementing y
in this case so decrement would go up so
we're drawing like this octet going up
and then every point in that little
curve there we're drawing the other
seven symmetrical octants okay
if any that made sense it didn't because
i can't explain but
that is all right let's draw a circle
let's draw a circle
draw a circle test
let's give it a center let's just do
where do we want the center to be and
the radius and everything we can do the
bottom right
i guess or we can do next to the hexagon
1920 by 2 plus 200 so we do plus 300.
actually we want the radius that'll go
to the left a bit so let's do 350 we'll
make the radius 50.
the top y up here
was plus 100 the middle is plus two
let me do plus two
offset at 200 down and the radius i can
make like 50. that'll be fine i'll pass
it p0
50 for the radius the color make it blue
and i'll see if that does anything and
looks okay it doesn't obviously
too many arguments expected too oh for
draw pixel yeah
that's why yeah draw pixel only takes a
single point
and i'm offsetting
okay that's annoying i need a
temporary point
sorry about this
but then i'll have to do this oh that's
annoying dude
so i could either make a lot more code
or put in an x and y
up here i don't know i like working with
a point though it makes sense
but this would just be taking in an x
and y value for draw pixel
uh start it off as center
it'll it's a lot of extra code
but that's all right
actually
we'll have to do this this is not great
this is not great
but it does make that look a little
better we have to do that basically
or i could just make draw pixel taking
an x and y value instead
i can do that we'll do we'll do that
start dot x start dot y
just mess everything else up we'll do
that
this will be y plus x
and we call draw pixel we call it down
here as well
that's the only other place okay
i'll copy that line put it back
okay and then that'll work this this all
should work
but instead of p0 we have to do dot x
and dot y
but everything else should be okay
because we're not calling draw pixel
directly other than there
so that might work
no i didn't really like that too few
expected four
draw pixel as xy and color oh
don't need that comma there there we go
there we go the kernel is 16 sectors now
however
that's okay do one
zero there
and this would be f this will be one
zero this would be one zero
okay so we'll have to increase the
kernel a bit during this
that is all right hopefully everything
else works i just changed draw pixel but
it wasn't that big of a change which is
good
and everything else does work okay so
here's that 50 radius circle from our
center point we gave
that draws it it's pretty good cool
beans okay
so what can we draw after a circle we
can draw a football here well
an elongated circle by which i mean an
ellipse
that'll be the last um primitive the
last 2d
line drawing sort of thing primitive i'm
going to do so i think that's all we
really need well
other than like curves like bezier
curves or something i'm not doing that
in this episode so sorry if you wanted
something really cool i'm not doing that
because that takes a bit more
code this is also going to be
taken from this book
i'll just show
the ellipse uh that's the circle
algorithm
a little bit bigger so we get a thing
for an ellipse
and ellipse depending on each radial
radius or well the regions they're
saying
it's kind of like the quadrants and the
in the circle and everything
they're defined a couple regions this is
region one
this is region two so region one would
be sort of similar to the first
octant that we're drawing in the circle
algorithm where we just get a point
draw the other seven points and then
decrement the y to draw this
that's kind of what we're doing for the
circle that's what this is doing but
then we're also doing another one
for region two so going from that point
and then i guess
incrementing y down to here so that's
sort of what we're going to do to draw
the ellipse
and that should work
this is what they did oh batteries out
on the camera sorry about that i'll be
back
in a minute anyway here so the same book
computer graphics principles and
practice and see second edition this is
for the midpoint
algorithm for for an ellipse and not the
circle
we have a rounding function here to
round uh to an integer here rounding up
from point five you give it a center
point and you give it an x radius or a
width of the ellipse and a y radius
for the the vertical so they have rx
squared and ry squared and then also rx
squared times 2
and ry squared times 2. i have another p
value our starting x is 0 or starting y
is the y
radius p x is 0 p
y 2 rx squared times y
so we have our two regions and i showed
briefly so to draw the first region
of our our quadrant or octet that we're
drawing
well first i draw the first set of
points for the first region
we're rounding r y squared minus
rx squared times ry plus 0.25 times rx
squared
while px is less than py add x i have
two roi squared to px
if p is less than zero add two ry
squared plus px
to p else decrement y
decrement to our x squared from p y and
add r y squared plus p x minus p y p
it's kind of it's kind of like the
circle algorithm but we're doing two
parts we're basically
kind of drawing two circles one for the
y radius one for the x radius
sort of it's kind of why there's two
regions here
and this you know i just i can't explain
why these exact values were chosen
because i haven't taken math in a long
time
but this is kind of similar to drawing
this just for the second region
decrementing y and using rx squared
instead of
while we're decreming y there it kind of
switches x plus plus y minus minus
y minus minus x plus plus then switching
the rx and our y squareds and stuff okay
and we're drawing the points which this
we're doing quadrants and not octants
four points plus x plus y minus x plus y
plus x minus y minus x minus y
from the center okay but we're going to
be doing this a version of this
it'll be a little more verbose than the
circle one
but that's okay
okay so let's give it a center point
we'll give it um
an x and y radius so radius x
radius y and the color we want to draw
the ellipse as
i guess when i was testing this before i
had issues with 16 bit values because
we're doing multiplying of things so
these are making 32 bits
i'm not sure if they all have to be
32-bit but it was easy making them all
32-bit so this does take up a bit more
space
but that's okay this was the first line
rx times rx except this will be
radius x radius x times
radius x this will be y squared
at least for the initial parms
but rx squared and ry squared then 2 rx
squared equals
2 times rx squared and the same for ry
to our y squared is 2 times ry squared
and then we have a p value
we have an x value which is going to be
0 we have a y
value which is initialized to radius y
we have a p x value
initialized to zero and a py value
initialize the two rx squared times
y okay
so we're gonna like the circle draw our
initial points first
so i'll do draw initial four
this would be quadrant points
these will be called the draw pixel
which is center x
plus x center y plus
center dot center y plus y
two three center x minus x and plus y
if i can do the minus plus x minus y
and minus x and minus y yeah
so we're just doing quadrants not
octants for this you could probably
change it to do octants
i'm not sure why the book did quadrants
maybe to take up less space or something
but i don't know but it did say we're
drawn two regions here
region one and two
they did use a rounding function as well
so let me put that
at the top absolute values
we'll do to find round a
as i think it was a plus 0.5 and that
was int
so we're casting to an int
it's all within parentheses
and a plus 0.5
r y squared
minus our x squared times
our y which is radius y
plus 0.25
times our x squared
so after we set the initial p value all
px is less than py
we'll increment x we'll add
2 roi squared our y squared to px
and then if p
is negative from rounding
then we'll add
our y squared plus px
else we'll decrement y we'll subtract
2 rx squared from py
and we'll add our y squared plus px
minus py to our p so we're having like
two p
values well we have an overall p-value
you know which determines what direction
we move in to draw the next pixel at and
stuff we have an overall p-value and
then we have additional p-values for
the x or width and the y or height for
the ellipse for the circle we only had
the one
p value but since we have two different
radiuses radii every say
two different radii to worry about we
have initial px and py values for those
uh okay if that makes sense it doesn't
to me because i don't
fully get it but i know it works so
it works and then we draw the quadrant
points again
so i am going to end up drawing these
three times you know less efficient more
lines of code unfortunately but
oh well okay so that's the first region
then we want to draw the points
for region two so for that we get
another
p-value these are separate while loops
sorry
yeah region two those are all the region
one points after that we're going to
reinitialize and do all these for region
two
okay so for region two for the initial p
we're gonna round off
y our y squared
multiplied by x plus 0.5 and our x was
initialized to zero
[Music]
well it's whatever x is after being
incremented throughout region one
whatever that ends up as
we're going to add 0.5 to that
twice so x plus 0.5 squared or whatever
x plus 0.5 times x plus 0.5
we're going to add rx squared
times y minus 1
squared so y minus 1 times y minus 1
minus rx squared times ry squared
which is a mouthful
and then we check while y is greater
than zero
we want to decrement it
we want to subtract two 2rx squared from
py
if p is positive
wow i can't type there we go
if p is positive i'm going to add
rx squared plus py to p
going in the y direction else it's not
positive
it's 0 or negative we're going to
increment x
we're going to add in 2 or y squared to
p x
we're gonna add rx squared minus
actually minus py
plus px so rx squared
yeah rx squared minus py plus px we're
gonna add to p
i think that's all yeah and then we're
gonna draw the points
[Music]
or region two
that is all we have to do cap off that
while loop so region one and region two
sort of drawing two sort of circles i
think if we pass in equal radiuses
equal radii for radius x and y then this
would draw a circle
it's just a bit more work because we're
working with two different radii
anyway that draws an ellipse
we can test that out by making a test
so we need a center point um i'm going
to put this under
where the triangle was our right angle
uh here diagonal draw triangle so this
second point this is minus 600 and plus
200.
so i'll do minus 600 and i'll do plus
like
300. i lost my place there we go
let's do plus 300 i want this to
basically be underneath the uh the
triangle example we'll do plus four
because we'll have a radius that we're
working with so that'll be close to the
bottom of the screen let's do
350 and we want to pass in
the center
um the center the x and y radius and the
color
okay so this will be the center point
x radius let's make a hundred the y
radius i'll make
50. and
i don't if green will show up all right
we'll do green if not we can do
something else
i can do green i'll make it a little
darker so i'll do minus
uh two so this will be
ff minus two so that'll be dd so really
i could just pass that in instead but
that that's how you offset from a green
this will make it a shader
a couple shades darker so that's one way
to do that
let's see if the ellipse shows up
oh type specifier missing it would help
if i didn't make mistakes but you know
i gotta forget i always have to forget
it's just a warning though it knew what
i meant
it knows what i mean i keep saying why
would i care about what the types are um
these will be so yeah
16. 16-bit
unsigned integers we want to be positive
and now the kernel is is bloated beyond
compare
it is now at 18 sectors so i need to
handle that
12 minus 1 11 12
12 okay
and we're good hopefully what does that
ellipse look like probably looks
terrible
[Music]
it's so well i didn't do something right
the edges are cut off
it's not good they're just vertical
lines well that's kind of like a
football
not quite any lips though i got to work
on that okay so i must have typed
something wrong probably did
let's work on that
kind of like a football
this needs to be minus p y
i had a plus p y so if p is greater than
zero in region two you want to add rx
squared minus py not add them together
this is still plus okay
yeah that was probably not not right
all it takes is one symbol not even a
one line change and one character change
oh there we go that's an ellipse those
are curved now
i'm gonna make that green a little bit
darker though because it's still hard
for me to
hard for me to see
so let's subtract five
um yeah
be f minus uh five
well we'll see what that looks like
there we go it's a bit darker green so
that's an ellipse see the circle
is equal all the way around the ellipse
has the y radius and the x radius
so those are going to be all the sort of
shapes for the primitives i'm going to
draw
lines triangle rectangle some sort of
polygon
circle ellipse that's all i'm going to
do today for
for those i will show how to fill in
those shapes though in case you want
solid colors
like i did for the the rectangle and
graphics test
but for one sort of simple way
that we want to fill in the colors and
we can use either
there's kind of two simple algorithms
you could use
flood fill or boundary fill is what i'm
going to use
which is just taking a pixel seeing what
color that is
and then flood fill would be filling all
pixels of a certain color with another
color
within some boundary color of our shape
boundary fill
is just not checking what it is just
filling in colors until you hit a
boundary i think
something like that i don't know they're
very similar i'm going to be using
boundary fill
to fill in these shapes and it's
actually pretty pretty small
function here let's do
fill just a generic fill a generic area
with a color this will be solid
no no um gradients or anything we're
going very simple for this one
fill an area with a solid color
so this will be boundary fill
boundary fill algorithm i'm going to
take in a point
which is somewhere within the area we
want to fill
let's call it a point it'll be point p
we'll have a color we'll have a fill
color
and a boundary color a phil collins and
a boundary
columns now fill color in a boundary
color
so we need to check given the point we
need to check
that point and around that point to see
what the color is if there's
you know somewhere around the point that
is not the boundary color
then we can make it fill color somewhere
around the point is the boundary color
then we've hit a boundary we don't want
to go beyond that point and spill out
we're not interested in doing that this
is going to be recursive version because
it's shorter
may use a lot of stack space so if you
have a huge area you want to fill
and then you're going to have to have a
larger stack than what i've given so far
in this os but for any decently sized
shape
or area you want to fill this should be
okay
hopefully if not then i can increase the
stack size
i'm going to set up the frame buffer
again
just do that there actually i can do the
second one as well
um this will be from the point we got in
p dot y
p dot x okay
so if the color that we're currently at
the dereferencing the 32-bit value from
the pointer
that'll be effectively the color on that
screen pixel
so if the color is not the color that
we're going for you could get rid of
this check
this is just an extra check but we're
putting it there anyway if it's not the
fill color that we want
and we're not at the boundary so it's
not equal to the boundary color
then we want to fill that in with the
color
which effectively effectively we can
just set that
we could do draw pixel instead of using
frame buffer here
but i need to be able to check the color
so i might as well just
put all this in here so it doesn't
matter
so we'll do this frame buffer equals the
fill color so if the color is not the
color we want it to be and we haven't
hit the boundary of the area we're
filling in then we want to keep filling
it in so we set that equal to the fill
color that's passed in
and then we want to check pixels around
that
current one people check for four or
eight uh depending on
the shape you're doing it could be
better for large areas to check the
eight pixels around this i'm going to
check the four
pixels around this area because i have
um sort of points like if you know the
triangle
ends like sorry the triangle ends at the
end of two diagonal edges
and if you check for eight pixels around
then the diagonal
pixels that are outside of that like
point like here and here it
those will count and uh we'll end up
filling like everything and we don't
want that
we want to stop like if we're filling a
triangle we want to only fill in
inside of that triangle so
that's why we're only checking four to
prevent that
issue from spilling out so to do this
recursively we can call in
boundary fill um it actually is probably
easier to take in an x and a y
instead of a point so sorry i gotta
change this again
let's take in an x and a y value
you want 16t y then another comma
we can just do this okay
because then i can put in this needs to
be x
and i can put in x plus one y
fill color boundary
boundary color
fill that in let's do
x minus one y
x y plus one
these y's need to be capital
and x y minus 1. these will check the
four
cardinal directions around the current
pixel so to the right
with the same y to the left with the
same y above
with this error well below with the same
x and above with the same x
plus and minus below and above
and there you go it's recursive it's not
in a loop
which might be better but this uses
stack space but it's very short if we do
it this way so
recursion is cool sometimes so we're
just filling in with a color and then
we're checking
you know each additional call checking
if it's the fill or the boundary color
we stop when we hit the boundary
and uh yeah that's that's the way to
fill an area so we can
we can either fill in like an outline
for a square or whatever
or we can draw like a solid color
polygon without a different outline
however we want to do that i'm going to
do solid ones like if uh
let's say like in javascript i think
there's draw rect and fill rect like for
the canvas
draw rect is just a square like an
outline and phil rect
draws a solid color it doesn't draw the
outline so
that's what i'm going to do i'm just
going to draw the whole thing a solid
color if you want a different border
then you can just draw
the outline on top of the filled in
space
right i'll start with fill triangle
[Music]
phil collins triangle fill triangle let
me call it phil triangle solid for solid
color fill
in case i do want to go on to like
gradients or other fancy things in the
future then i can do phil's triangle
gradient
and it'll look a little bit different
we'll do fill
shape solid during this
so fill triangle with a solid color and
this will not have a different colored
outline
you can draw over it if you want a
different colored like border outline
for these
but fill triangle solid we're going to
do three points again point p0 p1 p2
which i need to put point for all these
and whatever color we want it to be
this will be a solid color
t okay
to be able to use our boundary fill to
fill in the shapes we need a point
inside of the shape not on the boundary
the easiest way at least for a triangle
to get that would probably be getting
the center of a triangle
i think that's called a centroid which
is a cool name
but to get the center or centroid
of a triangle the point we want to draw
in
i'm going to have a temporary point
maybe
let's do that point temp
so to get the center we can just add all
the points together
and then average by three so getting the
average of all the points that'll get
the center of the triangle that'll get
the centroid
so p0 x
plus p1 plus p2 divide those all by
three
i'll put in parentheses to make sure
um do that and then we'll do the same
for the y values
and that will be the center of the
triangle
and then we can pass that into boundary
fill
and it'll fill in a triangle area but we
wouldn't
well normally it would but we don't have
any boundaries drawn for the triangle
yet so
let's do that first so first draw
triangle
sides so effectively these will be
boundaries
that we want to fill in with color and
we want to fill we want to draw the
triangle first
so let's draw a triangle using p0 p1 and
p2
if we want to fill something in using
boundary fill we need a different color
for the boundaries that we want to check
against
so we want to fill it with the color
that we passed to this function but the
boundaries have to be a different color
so it could be any color as long as it's
different
one easy way to do that is just going to
be like subtracting one or something
from the color that's fine that's an
easy enough way yeah the shade will be
slightly different it'll be slightly
darker ever so slightly on the on the
blue
spectrum here that's okay and if color
would had a zero
in the blue area then it would just roll
over to ff
for everything so that's fine but color
minus one it'll be slightly different
i think it'll roll over and it'll be
okay we'll find out since it's unsigned
it'll probably roll over
but as long as the color is different it
doesn't matter
then we'll fill in the boundaries and we
can call boundary fill
and it should work and called in with
our
temporary point we got temp x
temp y the fill color is the color that
was passed in
and the boundary color we did was color
minus one
and then if we want it to be a solid
color and not have
an outline of a different color i'll put
redraw
boundaries to
to correct color so we'll just draw the
triangle again
but with the color the user passed in so
we'll draw some boundaries
we'll fill in those boundaries and then
redraw them so it's all one solid color
it is extra work and it's extra code and
processing everything but if you want
a different colored outline you would
just draw over this
with a different color you call draw
triangle after fill triangle and it
would do
you know the outline okay
well let's see if we can get that to
work um
ellipse was the last yeah
little triangle test
so we got to set these up somewhere i
guess i could do it next
to the ellipse or i could do it under
the triangle move this stuff over all
right that doesn't matter
so let's try it at 400 this will be the
top point
probably three hundred
two three so the next one
let's go down into the right so let me
do 450 or maybe 500
and we'll go down i don't know 350.
the next point i'll do to the left
it'll be 450 sure or i'll make it a
little different 420
blaze it and b2 will be
do 250 just to be a little different
we'll do a scalene triangle hopefully
fill triangle solid p0
p1 p2 i want to fill it with
some fancy color well let's do like a
let's do a purple
do like the purple six three one five
fd
six three one five
f fd let's do that
some sort of purple all right
dark purple
and 13 sectors now eventually i'll
change the build process a little bit
or the code to not need to do this
kernels 13 19 sectors
16 plus three okay
oh there we go look at that purple
filled in triangle so i went down here
and then i went
down and then back up
nice so i drawed an outline and then
filled it in and then drew over the
outline okay
so now i'll do filled versions of i
guess the rectangle
polygon circle and ellipse i'll just put
them all down here i guess
um fill triangle that that is right
right just make sure this goes 100
it goes back 80. oh actually no this
goes to the left
and then to the right 20. oh this goes
to the left
yeah i wanted that to go to the right
and then to the left but that's fine i
mean it showed it showed it was right
okay it was just a little different than
what i thought
so i want to make a fill rectangle as
well
just to show
fill rectangle with a solid color
we could do some of these a different
way as well
yeah we'll pass into two points however
we did draw rect
which was top left bottom right
and then the color
so we could do it like this get some
point within this
and then call draw boundary call and do
this we could do that
again or we could do a full brute force
method
i'll do this brute force method and
that's just drawing
basically what we did for the red square
for the draw pixel test
it's basically what we're going to do
here
so for y for y equal
top left y y
less than
bottom right y
y plus plus same thing for x
all right less than bottom right x
and x plus plus
we're gonna call draw a pixel for the x
the y
and the color values so that'll fill in
you know a rectangle of all the pixels
so we don't have to draw an outline
flood fill
and then outline again we'll just draw
the pixels directly
that'll be simple enough
uh what do we want this to be i'll have
it next to
the triangle which goes
to 400 so we'll do 350
300 and
the bottom right
make it 200 long
and we'll go down
50 350.
p0 p1 what color
let's get another color another cutter
we'll do whatever this is some sort of
aquamarinish color
or c color somewhere one five f d c d
or maybe it's like toothpaste i don't
know sort of minty
one five f d c d
f d c d okay
mintish greenish
oh and i put a thing there
i put a comma that should not have been
put there
get rid of that
oh i did it wrong again redefinition
that doesn't need to be a comma and he's
b colon
what else did i f up nothing no one more
thing
no member named y yeah that's because
it's
oh was that in the kernel kernel 308
it needs to be upper case small syntax
errors
always let you know you're human and
it's 14 now
maybe i should make the kernel 15 sec
now let's make it 14.
if there was a way to pad out within c i
would do that but i don't think there's
a good easy way to do that
unfortunately so i have to go through
and mess up type in a three too many
times
three because it's 16 plus four which is
20 sectors now
hopefully this works it compiles so
that's good
all right what does the filled in
rectangle look like there it is
some sort of toothpaste like color
okay so now i'll go to fill in
a polygon and a circle
and an ellipse
let's fill in a polygon fill
polygon with a solid
color
you could call it phil polly i'll call
it phil polygon
solid it'll be similar to draw polygon i
think
yeah it should be similar to draw
polygons so
we need an array triangle polygon here
so i'll just copy over this fill
yeah send it a vertex array
the number the color well yeah we could
do that the number in the color that's
fine um
so on this one i guess we could probably
find a way to brute force and getting
the average
and get a point within the polygon or
i'm going to go back to doing like what
i did up here uh let me just copy all
this
just copy all the triangle code i'm
gonna do similar stuff
i do need brackets for the function
those are important
so what am i doing um
for a given polygon that i'm assuming
i'm assuming this will work i don't know
if it works for all polygons probably
not
i'm hoping too much but for any sort of
general polygon hopefully this works
i'm going to sort of get a triangle that
the polygon is made up as
so if it's like a hexagon that's you
know six points i guess it could be made
with
six triangles or however it is a square
a rectangle is four points you can
bisect it and get two triangles
so assuming we get a point that's in the
middle
of one of the triangles that could make
up this polygon
then we could use our fill function
on that point right if we get a point
inside of a triangle that is inside of
this polygon
then we can use the fill function on
that point
if that makes sense so that's what i'm
going to try to do
i'm assuming this works so i'm going to
put assuming this works in general
i'm going to get the center of a
triangle in the polygon
and i'm just going to use the first one
here so the vertex array
the first triangle in the array the
first point in the array
so vertex array zero we'll get the x
value
we'll get the x value from the first
three points so i'm assuming you're
calling this function with at least
three points hopefully you are
if you're not well it's your fault or my
fault when i mess up in the future
but right now we're assuming it's going
to be correct because that's the easy
way to do things
so we do that and then this needs to be
y
let's find x what was it semicolon right
yeah
lowercase i have capital x to get it
within the line and then i changed it
and then i did semicolon to get the next
so colon or i calling move between
you know things if you use f i'm
learning them anyway
so i'm getting a point within the first
triangle within the polygon getting the
center
of the first triangle within the polygon
i'm assuming that'll work
but what i'm going to do is yeah draw
that triangle well
now i'm going to draw the polygon
actually
first draw the polygon sides
which will be the vertex array
it'll be the number that was passed in
and it'll be the color
but we want it to be a different color
so we'll do minus one
then we'll do boundary fill with the
temp which is the middle of that
triangle we found within the polygon
send it the color we want to fill it in
as and the boundary color which is going
to be color minus one
and then we're going to redraw with the
correct color
nope get rid of that line which will do
the same thing but with the color okay
hopefully that works that'll fill in
some polygon
we'll see our normal ones like a hexagon
or whatever it should work but
i want to get wrecked yeah okay
we'll just try it on like a hexagon
example again that's fine because i
already did that
where am i drawing this let's do all
this
fill it in under here
so this ultimate x value is negative 150
so i want the left of the hexagon
to be at least a negative 100 yeah so
that'll be okay but the y value
or plus 350. that's the ultimate left
point of this hexagon
or the leftmost point rather not lift
point
hexagon okay that's the ultimate left
most points
which will connect to the top
so let's do something like 300
[Music]
minus 50 sure
and we'll go over 50 which would be in
the middle
and we'll go to the right we'll say 50
and i'll be
fine this would be plus 50
and i'll go i guess i'll go down well
this is down at
350. we don't want to go all the way up
that'd be a lot
250 then this can go down to 300
so the top the top left point the top
right point
the x's are the same so it'll be or the
y's need to be the same rather so it'll
be a horizontal line
and we want to go to the right most
point which will be 300
the x will increase we'll say to 100
and we want to go back down
again to 350
and this will go back to 50.
back and then we want to go left so the
y's will stay the same
the x will go back to the middle that's
fine
and then this will be negative 50.
if we want to do it like this or no
that'll be the leftmost point that needs
to be negative 100 here
but this will go back up to 300.
okay anyway hopefully that draws a
polygon
a hexagon in this case hopefully that
draws a hexagon
what's some other weird color we can do
orange
a lighter orange fd9b
just being different here for the sake
of being different
still 14 sectors that's good
i did not fill it in but i think i just
did draw so that's why but that's what
it looks like that's a
that's a polygon that only a mother
could love
uh let's we could try to straighten that
out
it needs to be filled
so this needs to be sort of the same as
the first one
yeah minus 50. yeah okay
that should be a little bit better
you want to say hi just looking at me
she's looking at me like what are you
talking about there we go
[Music]
that's more equal hexagon there
so now i'll do a circle and an ellipse
yeah i'll do a circle in the ellipse and
then i'll probably end it because i'm
tired i need to probably eat dinner and
sleep a lot again tonight
okay void phil circle
you don't want to hear me just complain
about being tired all day although
that's kind of what being an adult is
like it's just being tired all day so
we'll fill circle solid
given the center of the circle
the radius and the color we want to do
similar to the rectangle that we filled
in with a solid color
we could do this same thing again get a
point and call these three or we can
fill in the pixels directly sort of like
what we did up here
it'll look slightly different though
because the circle is
slightly different so again i'm going to
call it the brute force method of just
filling in all the pixels within an area
just to be different i'll move this up a
little bit
so you can see it better brute force
method
these will be integers though so n16y
we're going to do a negative radius
it's going to go to the positive radius
equally in the positive radius otherwise
if we just do less than there will be a
one pixel gap so i'm doing an equal
for that reason in this case
i didn't like that white space there y
plus plus uh
let's have x equal i think it's the same
thing right yeah
x equal negative radius less than or
equal to radius
x plus plus and then i'm going to put in
a check
if x squared
plus y squared is less than radius
squared so radius times radius
minus a radius x squared y squared
added together if that's less than
radius squared minus radius
then we want to fill in the pixel so
i'll call
draw pixel or i can fill it in with the
frame buffer i'll just call it draw
pixel
drop pixel with center
uh center x plus x
center y plus y and color
yeah so negative the positive radius for
x and y
so i guess it'll start at negative x
negative y so somewhere down there and
then just draw in
you know the x row and the y rows to
fill in the circle
i guess bottom up is what this is doing
but yeah that's what it's doing
if it's within the circle draw the pixel
so fill polygon let's do
fill circle test
i'll put it next to the hexagon
so i'll have our center point be located
at
where's the rightmost point here
be two so plus one hundredths will be
plus one fifty
1925 by two or 160 one five
one five oh or well we want it to be the
center let's do plus 200
and we'll make the radius 50.
putting this here so i don't forget
50 and then whatever color we want to do
oh i didn't fill this in uh lights
orangey
we'll put it up a little bit 270. put it
up 30 pixels
all right what color we want to go with
today pink
magenta fuchsia something like that some
deep sort of pinkish magenta-ish
thing ffofe6
e6 uh
magentish few few few sh
that's a word oh but i didn't put that
in
remember your colors are um 32s come on
guys
come on video man why aren't you smart
come on you're just copying and pasting
from books
even stack overflow what is wrong with
you
be a better programmer fill in your
circle like that look at that
my mouse is being weird but here's a
circle i'm going to draw an ellipse like
over here next to it
hopefully and then we'll be done
phil collins and ellipse with the saleed
calor with the solid color
this one will do similar to the other
things boundary fill with the the
borders
we'll try that
we'll get
the center point of the ellipse the x
and y radiuses
radii radius x
um un16 yeah
radius x
radius y
and the color we want to do
so first draw boundaries
a different color so we can call
draw ellipse with
our
with our everything that was passed in
surely center radius x y and color yeah
there we go
center radius
x radius radius y
color we want to be slightly different
so we'll do minus one
and fill in the boundaries
so we'll call boundary fill
um
center since we're given the center of
the ellipse we can just fill it in with
the center so
the circle i could have done this too it
depends whether you like you know doing
this
or doing this you know you can basically
do it for either one i think but anyway
since we're passing in the center of the
shape we want to fill
we can just use that point to for
boundary fill
and the color and then
redraw the boundaries simple enough
all right and redraw boundaries
uh as the correct color
hopefully that's good did i mess that up
oh i did
i really i'm never going to remember to
put you in third i really should make it
a typedef because i'm not going to
remember this
i keep forgetting it too few arguments
expected four
oh wow oh you want the boundary color oh
i'm sorry
there you go you need you need to have
the boundary color
for boundary fill fill color and
boundary color there we go
that compiles now the kernel is 15
sectors as well that's okay
fill ellip no circle
philly lips test
okay let's put this over and a little
bit down because the drawn circle was a
little bit
was a little bit down so this will be
over
i'll do 300
and let's do three 300 300 303
we'll have a a radius
300 350 maybe sure and then a radius
y radius of 50. i can try that
pass in p0 x radius let's do 100 so
let's move this over actually
let's move this to 350. so this will go
to 250 oh
that'll touch um let's do 400.
okay x radius let's do 100
y radius we'll do 50
color we need something special i need
something special here
yellow gold ffe-0f
hopefully that's special enough
special enough for me not to remember ee
ffe fifo from 0f
okay
i love gold this golden wedding tackle
is golden twig and berries
you know i like austin powers so let's
see if that draws
any lips or not we do have 15 sectors so
we do have to keep that in mind
this should be the last time in this
episode i have to increase the kernel
size
maybe i'll change the build process or
the boot sector next episode to not have
to change all these things we'll see
if i get really annoyed by it i probably
will because rage driven development
is uh the best kind of development when
you get so po to something
you make it better that's that's great
everyone loves doing that
and it would automate it even more there
we go well it's you know we it probably
should be a little darker
it's yellow it's a piss stain that's
okay you can see the ellipse
now okay so that's our drawn
uh primitives and our filled in
primitives i should make these lines
shorter
because it touches but you know there we
go that's
you know basic 2d graphics primitives
hopefully you learned something
or it was interesting and the least bit
if not that's fine though but yeah
thanks for watching if you got this far
or you skipped to this point no problem
the next time i'll do something if you
have any suggestions let me know
otherwise
maybe i'll do a paint application using
these things or
i'll fix up the editor some more or some
other stuff we'll see
i'll find something to do of course but
thank you i really do appreciate it
thank you for watching
i will see on the next one
[Music]
you