{"id":771,"date":"2014-07-05T00:01:23","date_gmt":"2014-07-05T07:01:23","guid":{"rendered":"http:\/\/c-for-dummies.com\/blog\/?p=771"},"modified":"2014-07-12T07:32:14","modified_gmt":"2014-07-12T14:32:14","slug":"graphing-in-text-mode-part-ii-lines","status":"publish","type":"post","link":"https:\/\/c-for-dummies.com\/blog\/?p=771","title":{"rendered":"Graphing in Text Mode, Part II: Lines"},"content":{"rendered":"

So far in my text mode graphics demonstration, I’ve shown you code that presents a graphical grid, plus the plot()<\/em> function that “draws” pixels in the grid. These are the basic building blocks you need to do graphics in text mode. The next step is to craft functions that create basic geometric shapes. The most basic of those is the line<\/em>.
\n
\nA line is defined by two points. It connects the two points in the shortest distance possible in two dimensions.<\/p>\n

The traditional computer graphics line()<\/em> function takes at least four arguments: Position x1<\/em>, y1<\/em> for one point on the line, and position x2<\/em>, y2<\/em> for the other point. Additional arguments may set the line’s width, color, style, and so on, but basically two points are specified and the line is plotted betwixt them.<\/p>\n

The formula for plotting a line goes back to that High School algebra class you slept through:<\/p>\n

y = mx + b<\/p><\/blockquote>\n

Where y<\/em> is a function of the slope, m<\/em>, by the corresponding x<\/em> position. Value b<\/em> is the vertical axis intercept.<\/p>\n

The most difficult part of converting the line equation into C code is the slope calculation. You’ll also discover — especially if you were coding this function on your own — that some conditions exist where the slope becomes undefined. I’ll burn that bridge when I come to it.<\/p>\n

To calculate the slope, you need to know the change between the y<\/em> coordinates and x<\/em> coordinates. That is, what’s the difference between y1<\/em> and y2<\/em> as well as x1<\/em> and x2<\/em>. The slope is the ratio of that change in y<\/em> over the change in x<\/em>.<\/p>\n

In Figure 1, you see two coordinates plotted in a Cartesian grid, (-4,3) and (3,-5). The equivalent line()<\/em> function is also shown.<\/p>\n

\"Figure

Figure 1. A line is plotted.<\/p><\/div>\n

To calculate the slope, or the difference between the starting and ending points on the Y axis, you take the ratio of the differences with respect to the y<\/em> and x<\/em> coordinates, as shown in Figure 2.<\/p>\n

\"Figure

Figure 2. The slope calculation is made.<\/p><\/div>\n

From Figure 2, you see that the slope is -8<\/sup>\/7<\/sub>, or -1.14285714. That’s a negative slope, which means the line falls from left to right. A positive slope means the line rises from left to right.<\/p>\n

To code this concept, create a loop that crawls from position x1<\/em> to x2<\/em>, plotting values from y1<\/em> to y2<\/em> by modifying the y<\/em> values with the slope. This solution is presented in the following code.<\/p>\n

\r\n#include <stdio.h>\r\n\r\n#define WIDTH 60\r\n#define HEIGHT 20\r\n#define X WIDTH\/2\r\n#define Y HEIGHT\/2\r\n#define XMAX WIDTH-X-1\r\n#define XMIN -(WIDTH-X)\r\n#define YMAX HEIGHT-Y\r\n#define YMIN -(HEIGHT-Y)+1\r\n\r\nchar grid[HEIGHT][WIDTH];\r\n\r\nint line(int x1, int y1, int x2, int y2);\r\nint plot(int x, int y);\r\nvoid init_grid(void);\r\nvoid show_grid(void);\r\n\r\nint main()\r\n{\r\n    init_grid();\r\n    line(-4,3,3,-5);\r\n    show_grid();\r\n\r\n    return(0);\r\n}\r\n\r\n\/* draw a line from point x1,y1 to x2,y2 *\/<\/span>\r\nint line(int x1, int y1, int x2, int y2)\r\n{\r\n    int x,deltaY,deltaX;\r\n    float slope,y;\r\n\r\n    \/* Calculate the slope *\/<\/span>\r\n    deltaY=(Y-y1)-(Y-y2);       \/* Calculate using absolute *\/<\/span>\r\n    deltaX=(X+x2)-(X+x1);       \/*  coordinates *\/<\/span>\r\n    slope=(float)deltaY\/(float)deltaX;\r\n\r\n    \/* Plot the points on the line *\/<\/span>\r\n    x = x1;\r\n    y = (float)y1;\r\n    while( x!=x2 && (int)y!=y2)\r\n    {\r\n        plot(x,(int)y);\r\n        y += slope;\r\n        if( x1 < x2 )\r\n            x++;\r\n        if( x1 > x2 )\r\n            x--;\r\n    }\r\n    return(1);\r\n}\r\n\r\n\/* Set \"pixel\" at specific coordinates *\/<\/span>\r\nint plot(int x, int y)\r\n{\r\n    if( x > XMAX || x < XMIN || y > YMAX || y < YMIN )\r\n        return(-1);\r\n\r\n    grid[Y-y][X+x] = '*';\r\n    return(1);\r\n}\r\n\r\n\/* Initialize grid *\/<\/span>\r\nvoid init_grid(void)\r\n{\r\n    int x,y;\r\n\r\n    for(y=0;y<HEIGHT;y++)\r\n        for(x=0;x<WIDTH;x++)\r\n            grid[y][x] = ' ';\r\n    \/* draw the axis *\/<\/span>\r\n    for(y=0;y<HEIGHT;y++)\r\n        grid[y][X] = '|';\r\n    for(x=0;x<WIDTH;x++)\r\n        grid[Y][x] = '-';\r\n    grid[Y][X] = '+';\r\n}\r\n\r\n\/* display grid *\/<\/span>\r\nvoid show_grid(void)\r\n{\r\n    int x,y;\r\n\r\n    for(y=0;y<HEIGHT;y++)\r\n    {\r\n        for(x=0;x<WIDTH;x++)\r\n            putchar(grid[y][x]);\r\n        putchar('\\n');\r\n    }\r\n}<\/pre>\n
The basic skeleton for this code was presented in last week’s Lesson. The line()<\/em> function, dwelling between Lines 29 and 52, is what’s new.<\/p>\n
Lines 35 through 37 calculate the slope<\/code>. The change in y<\/em> and x<\/em> are calculated using absolute coordinates: Remember that the grid can have both positive and negative values.<\/p>\n
In Line 41, y<\/code> is initialized as a floating point value. It could be an int<\/em>, but text mode lines are crude. Therefore, the float<\/em> calculation is used for more drawing precision.<\/p>\n
The while<\/em> loop at Line 42 plots the line. Lines 46 and 48 handle the situation when the starting coordinates might not always be the leftmost coordinate.<\/p>\n
Figure 3 displays the result as shown on my terminal.<\/p>\n
\"Figure
Figure 3. A lovely text mode graphical line.<\/p><\/div>\n
Feel free to plug in other values for the line()<\/em> function in this code. See whether you can discover which two conditions throw the function. If not, I’ll be covering them next Lesson<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"
Once the plot()<\/em> function is crafted, writing basic (text) graphics routines is the next step. Continue reading →<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2],"tags":[],"class_list":["post-771","post","type-post","status-publish","format-standard","hentry","category-main"],"_links":{"self":[{"href":"https:\/\/c-for-dummies.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/771","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/c-for-dummies.com\/blog\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/c-for-dummies.com\/blog\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/c-for-dummies.com\/blog\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/c-for-dummies.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=771"}],"version-history":[{"count":13,"href":"https:\/\/c-for-dummies.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/771\/revisions"}],"predecessor-version":[{"id":856,"href":"https:\/\/c-for-dummies.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/771\/revisions\/856"}],"wp:attachment":[{"href":"https:\/\/c-for-dummies.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=771"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/c-for-dummies.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=771"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/c-for-dummies.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=771"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}