Hey guys, welcome back to CodeWar. I am
Ramesh and in this video I will explain how to draw straight line using graphic.h library.. This is really an important topic in graphics and when you will start creating custom shapes and patterns, you will have to use this a lot..
So, I want you guys to watch this video till the end so that you don't face any
problem later.. Now let's start with a short definition of straight line.. The shortest path between two
points is called straight line.. That means, to draw
a straight line, we need to know the position of two points in between which
we want to draw a straight line.. In our case, we want to draw
a straight line in our graphics window.. or you can say, we want to draw
a straight line in XY-plane and therefore, we want the x and y-coordinates of these two points.. Let's understand it with an example.. So, we have two points p1 and p2.. To draw a line in between these two points,
we need the x and y-coordinates of both these two points..
That is, we need the value of x1 and y1 of the point p1 and
the x2 and y2 of the point p2 Now, the question is.. How to write a program to
draw a straight line? So, create a new C++ project and write this code which creates a graphics window..
I will not explain this as I have already explained it in
previous video.. If you face any difficulty regarding this, then watch the
previous video "Basics of graphics.h" Okay, now let's get back to our question..
So, to draw a straight line, graphics.h provides a function "line".. which takes
four integer arguments x1, y1, x2 and y2 The first two arguments x1 and y1 represents
the X and Y-coordinates of first point and the rest of the two arguments x2 and y2
represents the X and Y-coordinates of second point.. Now, let us
see how to use it with an example.. line(100, 150, 200, 300); Now, build and run it.. See.. we have passed (100,150) as the
coordinates of first point and (200,300) as the coordinates of second point
and we have got a straight line as an output in between these two points..
If you compare it with the graph that we have done in our high school, it looks
like a mirror image with respect to x-axis.. This is because the y-axis in our
graphics window is inverted.. Now, if you make the value of x1 and
x2 same, and build and run it.. You get a straight line parallel to y-axis.. In the same way, if you make the value of
y1 and y2 same and build and run it.. You get a straight line parallel to x-axis.. You may also face a situation where you
want to draw a straight line of specific length and making a given angle
with x-axis.. So, how to do this? See.. unfortunately, there is no specific
function for this.. So, we will create our own function.. But before we start,
we need some concept.. Suppose a triangle ABC..
Where, the length of AB equals to l and the angle BAC equals to Θ.. Now, by using trigonometry, we have.. AC equals to l*cos(Θ) and
BC equals to l*sin(Θ).. We will use these two values to
find the coordinates of second point in our line function.. Let's see how? As we need some math functions for this..
So, including math.h Okay, let me define the function
first then I will explain it.. So, here our function takes four
arguments.. The first two arguments are the x and y-coordinates of the first
point.. The third argument is the length of the line and this last argument is
the angle between the line and the positive x-axis.. So, first of all we have
to convert this angle value from Degree to Radian.. So, I have declared a variable
"rad" of double data type and initialized it with angle*M_PI/180.0
and typecasting it to double data type.. this "M_PI" is a macro
defined in math.h header file.. When you will build your program, this will be
replaced by the value of PI.. Now, in the next line, I have called the line
function with x and y as the coordinates of first point and I am calculating the
coordinates of the second point.. You can notice that even in the coordinates of
second point I have used the x and y values.. This is because, we want the
coordinates of second point relative to the coordinates of first point and as we
have already calculated using trigonometry this length*cos(Θ)
gives the x-component and the length*sin(Θ) gives the y-component..
You can also notice this negative sign here.. This is because, in the graphics
window the y-axis is inverted.. Okay, now let's try this function
with a simple example.. See, it's working.. Now, I want you guys to
pause this video and try what happens when you give here an angle greater than
180 degrees.. So, just try it by yourself.. Okay, so now we know about the line
function but apart from this, there is two more useful functions in graphics.h
which is used to draw lines as well.. One of them is "lineto" function..
This function takes two arguments X and Y-coordinates of a point and draws a
line from CP that is the current position to the point represented by x and y
value in the graphics window.. and then moves the CP to this point
represented by (x,y).. Let's see a simple example lineto(300, 250); lineto(400, 300); Okay, see.. By default, the value of CP or
the (current position) is that this origin that is (0,0).. The first "lineto"
function call has drawn a line from current position which is at the origin
to this point (300, 250).. and now the current position value is moved to this
point.. The second "lineto" function call has drawn a line from this point to
this point (400, 300).. Now, the current position is moved to this point and this
is how the "lineto" function works.. In most cases, you will need to move this
CP to specific position and then use the "lineto" function.. So, to do this, there is
another function which is called "moveto".. This function takes two integer
arguments x and y and move the current position (CP) to view-port position (x, y)..
Let's see an example of it.. So.. See, first we have moved this CP to
this position (100,100) using "moveto" function and then we
have drawn the rest of the lines.. You can use "lineto" and "moveto" functions together
to create some awesome graphics pattern like this.. Okay, one more important thing
I want to say that throughout this graphics tutorial series, I will show you
many examples like this.. But due to shortage of time, I can't explain about
the codes to draw each of these examples.. So, I have decided to write gist on
github and explain the code part of all these examples there.. If any of you want
to learn about these examples you can easily visit the link and learn about it..
Links will be available in the description of videos.. Okay, now let's come
to next function which is used to draw line and that is "linerel".. This function
also takes two integer arguments dx and dy and draws a line from current
position that is CP to a point that is relative distance (dx,dy) from the CP and
then CP is advanced by the value of (dx,dy).. Let's see an
example of it.. linerel(100, 200); linerel(100, -100); linerel(100, 200) Okay, consider this output.. As we already
know, by default the current position (CP) is at the origin of the graphics window..
So, this first "linerel" function has drawn a line from CP to a point which is
100 unit towards positive x-axis and 200 units towards positive y-axis relative
to this CP.. and now CP is moved to this point.. The next "linerel" function has
drawn a line from current position to this point which is 100 units toward
positive x-axis and 100 units towards negative y-axis with respect to current
position and now the CP is moved to this point.. Finally, this last "linerel" function has
drawn a line from CP to a point which is 100 unit towards positive
x-axis and 200 units toward positive y-axis with respect to the current
position and now CP is moved to this point.. Okay, one more thing, just like "moveto"
function, there is another function "moverel".. this function takes two
integer arguments dx and dy and moves the current position CP to dx-pixels in
the x-direction and dy-pixels in the y-direction.. You can use "linerel" and
"moverel" functions together to create something like this..
I have mentioned the link of gist in the description of this video.. If you want to
know about the code of this, you can visit the link and learn about it.. You may also ask a question that there is already a "line" function then
Why do we need "lineto" and "linerel" functions? Actually, this "lineto" and "linerel"
function is used when you create any pattern or you want to draw lots of
lines which are connected to each other.. The reason is very simple.. If you compare
"line" function with "lineto" and "linerel" functions, You can notice that both
"lineto" and "linerel" require x and y-coordinates of a single point.. But "line" function
require x and y-coordinates of two points to draw a line.. So, if you want
to draw any line pattern, you can use "lineto" and "linerel" function to reduce
the complexity of your code.. and even your program will require less number of
calculation to be performed as compared to the same thing done with line function.. So guys that's all for now.. In the next video, I will explain about
drawing Rectangle and Square.. Keep practicing..
See you in the next video..
