{"id":6607,"date":"2024-10-12T00:01:38","date_gmt":"2024-10-12T07:01:38","guid":{"rendered":"https:\/\/c-for-dummies.com\/blog\/?p=6607"},"modified":"2024-10-05T10:57:59","modified_gmt":"2024-10-05T17:57:59","slug":"more-terminal-screen-manipulation","status":"publish","type":"post","link":"https:\/\/c-for-dummies.com\/blog\/?p=6607","title":{"rendered":"More Terminal Screen Manipulation"},"content":{"rendered":"

Bouncing a cursor on the screen is a fun programming exercise, and you can use common C library techniques and ANSI escape sequences to make it happen in a terminal window, as covered in last week’s Lesson<\/a>. At this point, most programmers would be content and leave well enough alone. Not me!
\n
\nThe first, and major, change I made to the code is to turn the single asterisk into a line of asterisks — a snake. So instead of a single asterisk bouncing around the terminal screen, a conga line of asterisks bounces around the screen. The effect looks like a snake trying to escape.<\/p>\n

2024_10_12-Lesson-a.c<\/a><\/h3>\n
\r\n#include <stdio.h>\r\n#include <time.h>\r\n#include <unistd.h>\r\n#include <sys\/ioctl.h>\r\n\r\n#define home() printf(\"\\e[H\")\r\n#define clear() printf(\"\\e[H\\e[2J\")\r\n\r\n\/* check for a key waiting *\/<\/span>\r\nint kbhit(void)\r\n{\r\n    int k;\r\n\r\n    ioctl(STDIN_FILENO,FIONREAD,&k);\r\n\r\n    return(k);\r\n}\r\n\r\n\/* set the cursor to position x (columns)\r\n   and y (rows ) and set character c *\/<\/span>\r\nvoid putat(x,y,c)\r\n{\r\n    printf(\"\\e[%d;%dH%c\",y,x,c);\r\n}\r\n\r\n\/* pause for m milliseconds *\/<\/span>\r\nvoid delay(int m)\r\n{\r\n    long pause;\r\n    clock_t now,then;\r\n\r\n    pause = m*(CLOCKS_PER_SEC\/1000);\r\n    now = then = clock();\r\n    while( (now-then) < pause )\r\n        now = clock();\r\n}\r\n\r\n\/* set an asterisk in the center of the screen *\/<\/span>\r\nint main()\r\n{\r\n    int rows,columns,vert,horz,a;\r\n    const int length = 7;\r\n    struct winsize w;\r\n    struct coord {\r\n        int y;\r\n        int x;\r\n    } tail[length];\r\n    char buffer[BUFSIZ];\r\n\r\n    \/* obtain the window size *\/<\/span>\r\n    ioctl(STDOUT_FILENO, TIOCGWINSZ, &w);\r\n    rows = w.ws_row;\r\n    columns = w.ws_col;\r\n\r\n    \/* remove line buffering *\/<\/span>\r\n    setvbuf(stdout,buffer,_IONBF,BUFSIZ);\r\n\r\n    \/* initialize *\/<\/span>\r\n    clear();\r\n    puts(\"Press Enter to end\");\r\n    vert=1;\r\n    horz=1;\r\n    for( a=0; a<length; a++ )\r\n    {\r\n        tail[a].y = columns\/2;\r\n        tail[a].x = rows\/2;\r\n    }\r\n\r\n    \/* bounce the asterisk *\/<\/span>\r\n    while(1)\r\n    {\r\n        \/* end the loop on key press *\/<\/span>\r\n        if( kbhit() )\r\n        {\r\n            getchar();\r\n            break;\r\n        }\r\n        \/* output the snake *\/<\/span>\r\n        putat( tail[0].y, tail[0].x, ' ');    \/* erase the tail *\/<\/span>\r\n        for( a=1; a<length; a++ )\r\n            putat( tail[a].y, tail[a].x, '*');\r\n        \/* update the snake *\/<\/span>\r\n        for( a=0; a<length-1; a++ )\r\n        {\r\n            tail[a].y = tail[a+1].y;\r\n            tail[a].x = tail[a+1].x;\r\n        }\r\n        \/* move the head *\/<\/span>\r\n        tail[length-1].x += horz;\r\n        tail[length-1].y += vert;\r\n        delay(125);                \/* 1\/8 sec. delay *\/<\/span>\r\n        \/* check bounds *\/<\/span>\r\n        if( tail[length-1].y==columns-1 || tail[length-1].y==1 )\r\n            vert=-vert;            \/* switch directions *\/<\/span>\r\n        if( tail[length-1].x==rows-1 || tail[length-1].x==2 )\r\n            horz=-horz;            \/* switch directions *\/<\/span>\r\n    }\r\n    \/* set the cursor and say goodbye *\/<\/span>\r\n    putat(1,rows-1,'B');\r\n    puts(\"ye!\");\r\n\r\n    return 0;\r\n}<\/pre>\n
This code requires a massive update to the main()<\/em> function to account for plotting multiple asterisks in a line. To accomplish this task, the coord<\/em> structure is created, which contains members y<\/code> and x<\/code> for rows and columns. This structure is declared as an array, tail<\/code>, with a given length<\/code> defined as a constant integer.<\/p>\n
The entire “snake” is initialized to the center screen position in a for<\/em> loop:<\/p>\n
for( a=0; a<length; a++ )
\n{
\n    tail[a].y = columns\/2;
\n    tail[a].x = rows\/2;
\n}<\/code><\/p>\n
Within the endless while<\/em> loop, an asterisk is set at every position in the tail structure array:<\/p>\n
for( a=1; a<length; a++ )
\n    putat( tail[a].y, tail[a].x, '*');<\/code><\/p>\n
Then the snake’s position is updated, copying each array element from the head (the last element, tail[length-1]<\/code>) back down to the tail (tail[0]<\/code>):<\/p>\n
for( a=0; a<length-1; a++ )
\n{
\n    tail[a].y = tail[a+1].y;
\n    tail[a].x = tail[a+1].x;
\n}<\/code><\/p>\n
Finally, the head is moved according to the direction variables horz<\/code> and vert<\/code>:<\/p>\n
tail[length-1].x += horz;
\ntail[length-1].y += vert;<\/code><\/p>\n
A delay occurs, followed by if<\/em> statements to check the boundaries and reverse the horz<\/code> and vert<\/code> direction variables if necessary.<\/p>\n
Figure 1 illustrates the results. You can change the snake’s length by resetting the length<\/code> variable, though as a constant it can’t be adjusted as the code runs.<\/p>\n
\"\"
Figure 1. The snake!<\/p><\/div>\n
Not content with my messing around, I tried another update to the code, one to add color. This change is done by updating only the putat()<\/em> function, shown here:<\/p>\n
\r\n\/* set the cursor to position x (columns)\r\n   and y (rows ) and set character c *\/<\/span>\r\nvoid putat(x,y,c)\r\n{\r\n    int color;\r\n\r\n    color = x\/10;\r\n    switch(color)\r\n    {\r\n        case 0:            \/* red *\/<\/span>\r\n            printf(\"\\e[31m\\e[%d;%dH%c\",y,x,c);\r\n            break;\r\n        case 1:            \/* green *\/<\/span>\r\n            printf(\"\\e[32m\\e[%d;%dH%c\",y,x,c);\r\n            break;\r\n        case 2:            \/* yellow *\/<\/span>\r\n            printf(\"\\e[33m\\e[%d;%dH%c\",y,x,c);\r\n            break;\r\n        case 3:            \/* blue *\/<\/span>\r\n            printf(\"\\e[34m\\e[%d;%dH%c\",y,x,c);\r\n            break;\r\n        case 4:            \/* magenta *\/<\/span>\r\n            printf(\"\\e[35m\\e[%d;%dH%c\",y,x,c);\r\n            break;\r\n        case 5:            \/* cyan *\/<\/span>\r\n            printf(\"\\e[36m\\e[%d;%dH%c\",y,x,c);\r\n            break;\r\n        default:\r\n            printf(\"\\e[37m\\e[%d;%dH%c\",y,x,c);\r\n    }\r\n}<\/pre>\n
You can obtain the full code for this update from GitHub<\/a>. Its output looks like Figure 1, but with colors applied as the snake horizontally traverses the screen. (The GIF I made doesn’t capture the colors adequately.)<\/p>\n","protected":false},"excerpt":{"rendered":"
Once I realized I could play with the cursor on the terminal screen, I just went nuts! 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-6607","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\/6607","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=6607"}],"version-history":[{"count":5,"href":"https:\/\/c-for-dummies.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/6607\/revisions"}],"predecessor-version":[{"id":6620,"href":"https:\/\/c-for-dummies.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/6607\/revisions\/6620"}],"wp:attachment":[{"href":"https:\/\/c-for-dummies.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=6607"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/c-for-dummies.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=6607"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/c-for-dummies.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=6607"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
The column position is divided by ten — which is a guess, assuming an 80-column screen. Using the screen’s actual width would be a better determination. These ANSI color codes were covered in an earlier blog post<\/a>.<\/p>\n