Chapter 16: Basic Graphics Commands in C

The Graphics Window When you open a graphics window in C, youll get a window that looks something like this:

1 unit

1 unit

The graphics window wont be exactly square, which is unfortunate because the window is defined as a unit squareit is one unit wide and one unit tall. The origin of the coordinate system is in the lower left corner of the window, with the point (1,1) in the top right corner of the window. Youll notice that the window has the traditional Microsoft controls in the top right corner of the windowmaximize, minimize, and close. These controls do not work in this environment! If you try to use the maximize and minimize buttons, the window will just go blank. If you try to use the close button, the window might close, but dont do this. (In the Unix windows environment, closing the window just makes the window go awaythe computer is still keeping track of the window as if it were still visible. 89

This is fairly harmless as long as you only do it once in a while, but you can imagine that if you left dozens of these windows running in memory like that, eventually the computer would get very bogged down.) Rather, to close a graphics window in Unix, make sure that it is the current active window by clicking on it, and then press the enter key.

Code That Appears In Every Graphics Program In order to work properly, there are certain commands that every graphics program must contain. Skipping any of these steps will result in a program that may or may not compile but definitely will not work. Firstly, we need to #include the appropriate headers file with the definitions used by the graphics functions. This is done by simply adding this line to the #include block at the top of the program: #include graph.h Notice that this #include uses quotation marks instead of angle brackets. Secondly, there are additional flags that need to be added to the compile command inside of your makefile. Make sure that your makefiles gcc command includes the following flags: -lX11 graph.a (Thats minus l big X eleven.) These flags link the X11 libraries to your program, and include the package of precompiled graphics commands that Ive put into a file called graph.a. Inside of the main function of your program, you will need to enter the following code: main() { int ws_type; float xvp,yvp; ws_type = 0; gopen (My Figure,&ws_type, NULL); gset_maxview(&xvp,&yvp); gview (0,0.,0.,xvp,yvp); gset_redraw(0); /* Your graphics commands go here */ ghold(); gclose(); } Lets examine what this code actually does: 90

It declares a few variables that every graphics program needsws_type, xvp and yvp. It uses gopen to open the window. The text My Figure will be the title of the windowyou can call the window anything that you want. The next three commandsgset_maxview, gview, and gset_redraware necessary and shouldnt be changed. The ghold command should be executed after you draw on the window. It will hold the window open until the user presses the enter key. The gclose command closes the graphics window. Therefore, everything that your graphics program draws should occur between the gset_redraw and the ghold commands.

Defining Colors Before you can draw anything in the graphics window, you need to define the colors that you are going to be using. Unix has a virtually unlimited number of colors that you can work with, but you need to set them up first. Think of an artists palette:

The artist can mix together any color that he wants, but there are only so many cups on his palette. In the same way, in Unix you can create any color that you want, but you only have so many cups to put the colors in. In general, the number of colors you can work with at any given time is limited to 256, but in practice you will rarely need more than about 10 colors. The command to define a color is: gcolor (index, red, green, blue);

91

index is an integer, and it is the number of the cup on your palette that you are currently creating. red, green, and blue are floats. They define the amount of red, blue and green to add to the cup. The numbers here range from 0 to 1. (Trichroma theory tells us that all colors can be described as a combination of red, blue, and green.) For example, to define color 100 as white: gcolor ( 100, 1.0, 1.0, 1.0); (White is full red, full blue, and full green.). To define color 101 as black: gcolor ( 101, 0.0, 0.0, 0.0); (Black is no red, no blue, and no green.) Here are some common colors in C: Color White Black Red Green Blue Yellow Purple Cyan Grey Orange Magenta Brown Gold Red 1.0 0.0 1.0 0.0 0.0 1.0 1.0 0.0 0.5 1.0 0.8 0.8 0.7 Green 1.0 0.0 0.0 1.0 0.0 1.0 0.0 1.0 0.5 0.8 0.0 0.8 0.4 1.0 Blue 1.0 0.0 0.0 0.0 0.0 0.0 1.0 1.0 0.5 0.0 0.8 0.0 0.0 0.3

Light Green 0.3

92

Setting Line Attributes in C Before you can draw a line on a piece of paper, you need to decide which crayon you are going to pick up. In the same way, before you draw a line on a graphics window, you need to decide certain attributes of the lineits color, its thickness, and whether the line will be solid, dashed, dotted, or whatever. Attributes of the line are set before the line is drawn by using the gline_attr command like this: gline_attr (color, style, width); Here, color is an integer that refers to the color indices defined using the gcolor command. The style is an integer that refers to certain predefined styles of lines. Most of the time, you will be using style 1a solid line. However, other styles of lines exist, including dashed lines and dotted lines. Refer to this table to find the type of line that you need: 1 2 3 4 5 LS_SOLID LS_LDASH LS_LSDASH LS_LLSDASH LS_DOT Solid Long dashes Short dashes Dash-dotted Dotted

Notice that for each style of line, there is also a code that can be used. For example, to set up a dotted line, you could either use the integer 5 or LS_DOT. These codes were set up inside of the graph.h filesetting up stuff like this is why you had to include the file in the first place. I really dont care whether you use the integers or the codesI personally think that both of them are hard to remember! The width of the line is just a float that determines how fat the line is going to be. Most of the time, you will probably want the lines to have a width of 1.0, but experimenting with lines that are fatter than that can be interesting. Therefore, to set the attributes of the lines so that they use color 100, are solid lines, and have a thickness of 1.0, the command would be: gline_attr(100,1,1.0); A fat dashed line in color 101 would be: gline_attr(101,2,4.0);

93

Once you have set the attributes of the line, the attributes will stay this way until you change them again. In other words, once you pick up a crayon, that crayon stays in your hand until you pick up a different crayon.

Drawing Lines Every line segment that you draw in the graphics window has a starting point (x1,y1) and an ending point (x2,y2). Once you have defined colors and set the line attributes, you can draw a line between (x1,y1) and (x2,y2) with this command: gline (x1,y1,x2,y2); Neither (x1,y1) nor (x2,y2) are necessarily inside the unit square of the graphics window. Only the part of the line visible within the unit square will be plotted. Drawing lines is probably the single most useful thing we are going to learn about graphics in this class. We are going to be using the gline many different waysmake sure that you understand how this works.

Drawing Other Shapes There are functions that can produce several other shapes inside the graphics window. For example, to draw a filled rectangle: gfill_attr(color,0); gfrect(x1,y1,x2,y2); In this case, you are setting the attributes of the filled area using the gfill_attr command. The first argument is the index of the color that you want to use. The second argument is the an integer that suggests the style of the filled area. Most of the time you are going to want to use 0, which indicates that the area should have a solid fill. However, you can experiment with other integers for interesting effects. The rectangle itself is drawing using the gfrect command shown above. The coordinates (x1,y1) and (x2,y2) indicate two opposite corners of the resulting rectangle. Once you know the gfill_attr command, other filled shapes are possible, most notably: gfcircle(x,y,radius); which draws a filled circle centered at (x,y), and gfellipse(x1,y1,x2,y2); which draws a filled ellipse. The coordinates (x1,y1) and (x2,y2) are two opposite corners of a rectangle that bounds the resulting ellipse.

94

Text In The Graphics Window It is often necessary to include some text in the graphics window. This might be the label on a plot, data drawn on a map, or some other application. It should be pointed out, however, that you do NOT use text in a graphics window as an alternative to printing text on the screen. Typically text on the graphic window serves a very different purpose than text on the screenthe former is for labeling, whereas the latter is for prompting the user to enter information. Adding text to the screen requires three commands: gtext_attr(color,height,width,expan); gtext_align(i,j); gprintf (x,y,format); As was the case for lines and filled shapes, it is necessary to set the attributes of the text before you draw the text to the graphics window. There are four attributes for the text itself: color is an integer the refers to color indices set by gcolor. height is the height of the text characters, expressed in terms of the coordinates of the unit square of the graphic window. Therefore a height of 0.10 makes characters that are 10% of the size of the graphic window. width is a float that sets the line width for the pen motions that create the characters on the screen. Normally you will use 1.0, but numbers greater than that make the font seem bold. expan is a float that describes a left-to-right distortion of the font. Normally you will use 1.0 for this value, but using larger numbers makes the font wider. Once you have set the attributes of the font, the next step is to define how the text will be placed on the screen by the gtext_align command. This command determines how the text will be drawn with respect to a given location (x,y). For example, maybe (x,y) should be the center of the text; maybe (x,y) should be the top left corner of the text. For most applications, you will want to use: gtext_align (2,3); which means that the point (x,y) will be the center of the text. However, you can experiment with these number for different effects.

95

Finally, you write the text to the graphics window using the gprintf command. This command has at least three arguments. The first two arguments are the coordinates for the text, with respect to the unit square and to the text alignment rules specified by gtext_align. From there to the end of the command, gprintf works exactly like the printf command, with all of the possible formats and other tricks with which you are already familiar. For example, to write a title for a plot near the top of the window, you might use something like this: gprintf (0.5,0.9,This is the Temperature); Whereas to print the current temperature on some point of the map, you might use something like this: gprintf (0.2,0.45,%4.1f,temperature);

96

Assignment 10: Basic graphics commands Using the commands learned in this chapter, I want you to create a picture in a graphics window. The picture doesnt have to be anything scientific or meteorological or anything like thatfeel free to make a picture of a house, a tree, or whatever strikes your fancy. However, the picture needs to include the following elements: at least 5 colors at least 10 lines, using at least two different line styles at least 2 filled rectangles at least 1 filled circle or ellipse some text Just completing the basic assignment is worth 85%. You can impress me by expressing your creativity in this assignment, going beyond the minimum expectations. But you already knew that. The better your picture is, the better your score will be. This assignment is worth 5 points.

97