Graphic Basics in C

Graphic Basics in C

ATS 315

The Graphics Window

•Will looksomethinglike this.

The Graphics Window

•Has“minimize”,“maximize”,and “close”buttons, butdon’t usethem!

•Close byhitting “enter”.

The Graphics Window

•Defined asa “unitsquare”.

1 unit

The Graphics Window

•“Origin” isin thebottom leftcorner ofthewindow.

(0,0)

The Graphics Window

•“(1,1)” is inthe topright cornerof thewindow.

(0,0)

(1,1)

All Graphics Programs…

•#include <graph.h>

•Compile with:

graphcc

graph.h and gks.h are NOT standard

libraries. *I* put them in /usr/lib

graphcc is a script *I* wrote that is

equivalent 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 youare going to need inevery graphicsprogram.

In general, it will notneed 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 threevariables that thegraphics packageneeds.

They must bedeclared in order tofunction 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 ofthe graphics windowthat 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 areimportant.

The first zero is aninteger.

The second and thirdzeros 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 graphicscommands, such asdrawing lines andboxes, 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 donedrawing, ghold() holdsthe output on thescreen until you pressthe “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 thegraphics 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 thisblock of code in yourprogram, you areready to start addinggraphics commands atthe arrow and makesome 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 putwhatever color he wantsinto each of the littlecups.

•However, the artist onlyhas so many cups towork with.

Defining Colors

•In the same way, you candefine any color youwant, but you can onlyhave so many colors onthe screen at a time.

•The number of colors youcan have is 256—butyou’ll probably rarelyhave more than 10 or so.

Defining Colors

gcolor ( index, red, green, blue);

•index: an integer that is the “cup” that you are filling withsome 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”—fullred, 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”—nored, no green, and no blue.

Common Colors in RGB

Color

Red

Green

Blue

White

1.0

Black

0.0

Red

1.0

0.0

Green

0.0

1.0

0.0

Blue

0.0

Yellow

1.0

0.0

Purple

1.0

0.0

1.0

Cyan

0.0

1.0

Grey

0.5

Uncommon Colors in RGB

Color

Red

Green

Blue

Orange

1.0

0.8

0.0

Magenta

0.8

0.0

0.8

Brown

0.8

0.0

Gold

0.7

0.4

0.0

LightGreen

0.3

1.0

0.3

Setting Line Attributes

•When drawing a line on a piece of paper, youhave to decide which crayon you are going touse:

–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 thecrayon that you want to pick up.

Setting Line Attributes

gline_attr(color, style, width);

•“Style” is an integer that describes the styleof the line you are about to draw, or usethese codes:

LS_SOLID

Solid

LS_LDASH

Long dashes

LS_LSDASH

Short dashes

LS_LLSDASH

Dash-dotted

LS_DOT

Dotted

Setting Line Attributes

gline_attr(color, style, width);

•The width is the thickness of the line, interms of pixels.

•Width is a float, and 1.0 will generally workbest.

Setting Line Attributes

•Once you set the line attributes, they staythat way until you change the settings—inother words, you don’t “set down thecrayon” until you “pick up another crayon”.

•Therefore, you don’t have to use gline_attrbefore every line you draw—just when youchange the color, style, or width of thelines!

Drawing Lines

Once you havedefined someline attributes,you can startdrawing lineswith thoseattributes.

Drawing Lines

Each linebegins at some(x1,y1) andends 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 ofthe line inside the unit square will be drawn.

Drawing Filled Rectangles

To draw afilledrectangle,you’ll needto know thecoordinatesof twooppositecorners.

(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, thereare 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 shouldlook:

–color is the “index” of the color to use

–height is the size of the font (on the unitsquare)

–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 characterswill 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 anythingyou 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