Graphic Basics in C ATS 315. The Graphics Window Will look something like this

Graphic Basics in C

ATS 315

The Graphics Window

• Will look something like this.

The Graphics Window

• Has “minimize”, “maximize”, and “close” buttons, but don’t use them!

• Close by hitting “enter”.

The Graphics Window

• Defined as a “unit square”.

1 unit

1 unit

The Graphics Window

• “Origin” is in the bottom left corner of the window.

(0,0)

The Graphics Window

• “(1,1)” is in the top right corner of the window.

(0,0)

(1,1)

All Graphics Programs…

• #include <graph.h>

• Compile with:graphcc

graph.h and gks.h are NOT standardlibraries. *I* put them in /usr/lib

graphcc is a script *I* wrote that isequivalent to:

gcc $1 –lm –lX11 /home/schragej/glibrary/graph.a

Opening a Graphics Window

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);

ghold();

gclose();

}

Opening a Graphics Window

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);

ghold();

gclose();

}

This is code that you are going to need in every graphics program.

In general, it will not need to be modified.

Opening a Graphics Window

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);

ghold();

gclose();

}

These are three variables that the graphics package needs.

They must be declared in order to function properly.

Opening a Graphics Window

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);

ghold();

gclose();

}

This will be the title of the graphics window that you open.

Opening a Graphics Window

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);

ghold();

gclose();

}

The periods here are important.

The first zero is an integer.

The second and third zeros are floats.

Opening a Graphics Window

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);

ghold();

gclose();

}

All of your graphics commands, such as drawing lines and boxes, go here.

Opening a Graphics Window

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);

ghold();

gclose();

}

Once you are done drawing, ghold() holds the output on the screen until you press the “enter” key.

Opening a Graphics Window

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);

ghold();

gclose();

}

gclose() closes the graphics window.

Opening a Graphics Window

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);

ghold();

gclose();

}

Once you have this block of code in your program, you are ready to start adding graphics commands at the arrow and make some kind of picture!

Simple Graphics Commands

• Defining Colors• Setting the Attributes of Lines• Drawing Lines• Drawing Filled Boxes• Drawing Text

Defining Colors

• Picture an artist’s palette.

Defining Colors

• The artist can put whatever color he wants into each of the little cups.

• However, the artist only has so many cups to work with.

Defining Colors

• In the same way, you can define any color you want, but you can only have so many colors on the screen at a time.

• The number of colors you can have is 256—but you’ll probably rarely have more than 10 or so.

Defining Colors

gcolor ( index, red, green, blue);

• index: an integer that is the “cup” that you are filling with some color of paint

• red: the amount of red to add (0-1)

• green: the amount of green to add (0-1)

• blue: the amount of blue to add (0-1)

Defining Colors

gcolor ( 100, 1.0, 1.0, 1.0);

• In this example, the color “100” is defined as “white”—full red, full green, and full blue.

Defining Colors

gcolor ( 101, 0.0, 0.0, 0.0);

• In this example, the color “101” is defined as “black”—no red, no green, and no blue.

Common Colors in RGB

Color Red Green Blue

White 1.0 1.0 1.0

Black 0.0 0.0 0.0

Red 1.0 0.0 0.0

Green 0.0 1.0 0.0

Blue 0.0 0.0 0.0

Yellow 1.0 1.0 0.0

Purple 1.0 0.0 1.0

Cyan 0.0 1.0 1.0

Grey 0.5 0.5 0.5

Uncommon Colors in RGB

Color Red Green BlueOrange 1.0 0.8 0.0

Magenta 0.8 0.0 0.8Brown 0.8 0.8 0.0Gold 0.7 0.4 0.0Light

Green0.3 1.0 0.3

Setting Line Attributes

• When drawing a line on a piece of paper, you have to decide which crayon you are going to use:– What color is it?– How wide is it?– What kind of line are you going to draw (solid,

dotted, etc.)?

Setting Line Attributes

gline_attr(color, style, width);

• The color is the index of the color of the crayon that you want to pick up.

Setting Line Attributes

gline_attr(color, style, width);

• “Style” is an integer that describes the style of the line you are about to draw, or use these codes:

1 LS_SOLID Solid

2 LS_LDASH Long dashes

3 LS_LSDASH Short dashes

4 LS_LLSDASH Dash-dotted

5 LS_DOT Dotted

Setting Line Attributes

gline_attr(color, style, width);

• The width is the thickness of the line, in terms of pixels.

• Width is a float, and 1.0 will generally work best.

Setting Line Attributes

• Once you set the line attributes, they stay that way until you change the settings—in other words, you don’t “set down the crayon” until you “pick up another crayon”.

• Therefore, you don’t have to use gline_attr before every line you draw—just when you change the color, style, or width of the lines!

Drawing Lines

Once you have defined some line attributes, you can start drawing lines with those attributes.

Drawing Lines

Each line begins at some (x1,y1) and ends at some (x2,y2).

(x1,y1)

(x2,y2)

Drawing Lines

gline(x1,y1,x2,y2);

(x1,y1)

(x2,y2)

Drawing Lines

It doesn’t hurt anything if either (x1,y1) or (x2,y2) are outside of the unit square, but only the part of the line inside the unit square will be drawn.

Drawing Filled Rectangles

To draw a filled rectangle, you’ll need to know the coordinates of two opposite corners.

(x1,y1)

(x2,y2)

Drawing Filled Rectangles

gfill_attr(color,0);

gfrect(x1,y1,x2,y2);

• First, tell the program what color to paint the rectangle.• “0” tells the program to fill the rectangle with “solid” color

—try other integers for surprising effects!

• Then draw a filled rectangle from (x1,y1) to (x2,y2).

Other Filled Shapes

• Once you have used gfill_attr to set the attributes, there are several possible filled shapes, including:

• gfcircle(x,y,radius);• gfellipse(x1,y1,x2,y2);

Text In The Graphics Window

• gtext_attr describes how the font should look:– color is the “index” of the color to use– height is the size of the font (on the unit

square)– width is the thickness of the lines for the font– expan is a distortion of the font—use “1”

gtext_attr(color,height,width,expan)

gtext_align(i,j)

gprintf (x,y,format…)

Text In The Graphics Window

• gtext_align describes how the characters will line up with respect to (x,y):– Normally you will use “2,5”, which means

“centered at (x,y)”

gtext_attr(color,height,width,expan)

gtext_align(i,j)

gprintf (x,y,format…)

Text In The Graphics Window

• gprintf prints text at the location (x,y)– works just like a printf statement– examples:

• gprintf (.5,.5,”This is the middle\n”);• gprintf (.5,.5,”%4.1f\n”,temperature);

gtext_attr(color,height,width,expan)

gtext_align(i,j)

gprintf (x,y,format…)

YOUR ASSIGNMENT

• Produce a graphics window with a picture of anything you want—not necessarily weather-related.

• Your image must contain:– 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