COMPUTER GRAPHICS

Prepared byS.MAHALAKSHMIAsst. Prof(Sr) / SCSEVIT University

Programming in SRGP

INTROINTRO

Advantages of Raster DisplaysAdvantages of Raster Displays Fill areas with uniform color or Fill areas with uniform color or

repeated pattern with 2 or more repeated pattern with 2 or more colors.colors.

Stores images which allows Stores images which allows manipulation @ fine level : individual manipulation @ fine level : individual pixels can be read or written and pixels can be read or written and arbitrary portions can be copied or arbitrary portions can be copied or moved.moved.

SRGP(Simple Raster Graphics SRGP(Simple Raster Graphics Package)Package)

Device independent Graphics packageDevice independent Graphics package Similar to Macintosh QuickDraw Similar to Macintosh QuickDraw

Raster package and Xlib package of Raster package and Xlib package of Windows systemWindows system

SRGP (Continued..)SRGP (Continued..)

Drawing with SRGPDrawing with SRGP Basic Interaction HandlingBasic Interaction Handling Raster Graphics FeaturesRaster Graphics Features Limitations of SRGPLimitations of SRGP

1.Drawing with SRGP1.Drawing with SRGP

1.1 Specification of Graphics 1.1 Specification of Graphics PrimitivesPrimitives

1.2 Attributes1.2 Attributes 1.3 Filled primitives and attributes1.3 Filled primitives and attributes 1.4 Saving and Restoring Attributes1.4 Saving and Restoring Attributes 1.5Text1.5Text

1.1 Specification of Graphics 1.1 Specification of Graphics PrimitivesPrimitives

Drawing in integer graphics package such as SRGP Drawing in integer graphics package such as SRGP is like plotting graphs on graph paper with very fine is like plotting graphs on graph paper with very fine gridgrid

Grid varies from 80-120 points per inch to 300 or Grid varies from 80-120 points per inch to 300 or more on high resolution displaysmore on high resolution displays

(0,0)--> bottom left of the screen . +ve x increases (0,0)--> bottom left of the screen . +ve x increases towards right and +ve Y increases towards toptowards right and +ve Y increases towards top

1.1 continued...1.1 continued...

SRGP supports basic collections of SRGP supports basic collections of primitivesprimitives

a)a)LinesLines

b)b)PolygonsPolygons

c)c)CirclesCircles

d)d)EllipsesEllipses

e)e)TextText

Lines and Poly linesLines and Poly lines VoidVoid SRGP_lineCoord(int x1, int y1, int SRGP_lineCoord(int x1, int y1, int

x2, int y2);x2, int y2); eg:eg: SRGP_lineCoord(0,0,100,300)SRGP_lineCoord(0,0,100,300) (or)(or) void void SRGP_line(point pt1,point pt2);SRGP_line(point pt1,point pt2); Point is a defined type, a record holding Point is a defined type, a record holding

2 integer x,y values2 integer x,y values typedef structtypedef struct {int x,y;{int x,y; }point;}point;

Lines and Poly linesLines and Poly lines

A sequence of lines connecting A sequence of lines connecting successive vertices is called polyline.successive vertices is called polyline.

There are 2 polyline procedures. There are 2 polyline procedures. These take array as parameter.These take array as parameter.

VoidVoid SRGP_polyLineCoord (int vertexcount, SRGP_polyLineCoord (int vertexcount, int*xArray, int*yArray);int*xArray, int*yArray); Void Void SRGP_polyLine(int vertexcount, point SRGP_polyLine(int vertexcount, point *vertices);*vertices);

continued..continued.. /* plot the axes*//* plot the axes*/ SRGP_lineCoord(175,200,320,200);SRGP_lineCoord(175,200,320,200); SRGP_lineCoord(200,140,200,280);SRGP_lineCoord(200,140,200,280); /*plot the data*//*plot the data*/ SRGP_polyLineCoord (12 ,months, SRGP_polyLineCoord (12 ,months,

balanceOfTrade);balanceOfTrade); SRGP_polyLine(7, bowtieArray);SRGP_polyLine(7, bowtieArray);

contiued..contiued..

Markers and polymarkersMarkers and polymarkers It is convenient to place markers(dots,asterisks It is convenient to place markers(dots,asterisks

or circles) at the data points on graphs.or circles) at the data points on graphs. Void SRGP_markerCoord(intx,inty);Void SRGP_markerCoord(intx,inty); Void SRGP_marker(point pt)Void SRGP_marker(point pt) VoidVoid SRGP_polyMarkerCoord (int vertexcount, SRGP_polyMarkerCoord (int vertexcount,

int*xArray, int*yArray);int*xArray, int*yArray); Void Void SRGP_polyMarker(int vertexcount, point SRGP_polyMarker(int vertexcount, point

*vertices);*vertices);

continued...continued...

Polygons and RectanglesPolygons and Rectangles --> To draw an outline polygon, we --> To draw an outline polygon, we

can either specify a polyline on itself can either specify a polyline on itself by making the first and last vertices by making the first and last vertices identical (or) we can useidentical (or) we can use

void SRGP_polygon(int vertexCount, point void SRGP_polygon(int vertexCount, point *vertices)*vertices)

Now bowtieArray is of only 6 points it Now bowtieArray is of only 6 points it automatically closes the figure.automatically closes the figure.

ContinuedContinued Any rectangle can be specified as a Any rectangle can be specified as a

polygon having 4 vertices.polygon having 4 vertices. Uses only 2 primitives(lower left & upper Uses only 2 primitives(lower left & upper

right)right) Void SRGP_rectangleCoord(int leftx, intbottomY,int Void SRGP_rectangleCoord(int leftx, intbottomY,int

rightX, int topY);rightX, int topY); Void SRGP_rectanglePt(point bottomLeft, point Void SRGP_rectanglePt(point bottomLeft, point

topRight);topRight); void SRGP_rectangle(rectangle rect);void SRGP_rectangle(rectangle rect); typedef struct{ point bottomLeft,topRight;typedef struct{ point bottomLeft,topRight; }rectangle;}rectangle;

Rectangles continued..Rectangles continued..

Point SRGP_defPoint(intx,int y);Point SRGP_defPoint(intx,int y); Rectangle SRGP_defRectangle(int Rectangle SRGP_defRectangle(int

leftX,int bottomY,int rightX, int topY);leftX,int bottomY,int rightX, int topY);

Circles and EllipsesCircles and Ellipses

• Circles are Special types of ellipses.Circles are Special types of ellipses.• The term ellipse arc used for The term ellipse arc used for

circular,elliptical,closed or partial arcs.circular,elliptical,closed or partial arcs.• It is easy to specify arcs via upright It is easy to specify arcs via upright

rectangles (bounding boxes or extents)rectangles (bounding boxes or extents)• VoidVoid SRGP_ellipseArc( SRGP_ellipseArc(rectanglerectangle

extentRect, float startAngle, float extentRect, float startAngle, float endAngle);endAngle);

Circles and ellipsesCircles and ellipses Relationship between rectangular and Relationship between rectangular and

circular angle iscircular angle is Rectangular angle=arctan(tan(circularangle).width/height)+Rectangular angle=arctan(tan(circularangle).width/height)+ adjustadjust

where the angles are in radians andwhere the angles are in radians and adjust = 0, for 0<= circular angle<∏/2adjust = 0, for 0<= circular angle<∏/2 adjust = ∏/2 , for ∏/2 <=circular angle < 3∏/2adjust = ∏/2 , for ∏/2 <=circular angle < 3∏/2 adjust = 2∏, for 3∏/2<= circular angle < 2∏adjust = 2∏, for 3∏/2<= circular angle < 2∏

1.2 Attributes1.2 Attributes• The specification of a primitive can be The specification of a primitive can be

controlled by specification of its controlled by specification of its attributesattributes

• Line style and Line widthLine style and Line width• ColorColor• PenstylePenstyle• Attributes are global state variables Attributes are global state variables

that retain their values until they are that retain their values until they are changed explicitlychanged explicitly

Void SRGP_setLineStyle(lineStyle Void SRGP_setLineStyle(lineStyle CONTINUOUS / DASHED /DOTTED/….);CONTINUOUS / DASHED /DOTTED/….);

Void SRGP_setLineWidth(int widthValue);Void SRGP_setLineWidth(int widthValue);

Attributes..Attributes..• Each attribute has a default.. Eg., default for Each attribute has a default.. Eg., default for

linestyle is CONTINUOUS that for line width is linestyle is CONTINUOUS that for line width is 1.1.

• Line style can be represented as bit mask and Line style can be represented as bit mask and it is scan converted by SRGP.it is scan converted by SRGP.

• For eg.. Contimuous all 1’sFor eg.. Contimuous all 1’s• DASHED DASHED 1111001111001111…..1111001111001111…..

Attributes for marker primitiveAttributes for marker primitive

Void SRGP_setMarkerSize(int sizeValue);Void SRGP_setMarkerSize(int sizeValue); Void SRGP_setMarkerStyle(Void SRGP_setMarkerStyle(markerStylemarkerStyle

MARKER_CIRCLE / MARKER_SQUARE/…);MARKER_CIRCLE / MARKER_SQUARE/…); The default is circle styleThe default is circle style COLORCOLOR bilevel system the color value is 0 and 1.bilevel system the color value is 0 and 1. -1 black, 0 white for black on white devices-1 black, 0 white for black on white devices 1 green, 0 black for green on black devices1 green, 0 black for green on black devices

Attribute-colorAttribute-color

• The integer color attribute is an index to The integer color attribute is an index to SRGP;s color table. Each entry defines SRGP;s color table. Each entry defines color or gray scale value.color or gray scale value.

• There are 2d entries and d is the depth of There are 2d entries and d is the depth of frame bufferframe buffer

• 2 methods to specify colors2 methods to specify colors• 1. use integers 0 and 1 directly1. use integers 0 and 1 directly• 2. use color names supported by SRGP2. use color names supported by SRGP• We can also select color by callingWe can also select color by calling• Void SRGP_setColor(int colorIndex)Void SRGP_setColor(int colorIndex)

1.3 Filled Primitives and Their 1.3 Filled Primitives and Their AttributesAttributes

Primitives can be drawn in 2 waysPrimitives can be drawn in 2 ways OutlineOutline FilledFilled SRGP’s filled versions of area SRGP’s filled versions of area

defining primitives draw the interior defining primitives draw the interior pixels with no outlinepixels with no outline

Code for creating filled PrimitivesCode for creating filled Primitives

Output for the previous codeOutput for the previous code

Odd Parity ruleOdd Parity rule We need a rule for specifying which regions are We need a rule for specifying which regions are

interior, and thus should be filled and which is interior, and thus should be filled and which is exteriorexterior

This can done in SRGP through odd parity rule.This can done in SRGP through odd parity rule. To check whether the region lies inside/ outsideTo check whether the region lies inside/ outside1.1. Choose a test pointChoose a test point2.2. Choose a ray that starts at the test point Choose a ray that starts at the test point

extends indefinitely in any direction and does extends indefinitely in any direction and does not pass any vertices.not pass any vertices.

3.3. If this ray intersect the polygon outline an odd If this ray intersect the polygon outline an odd no of times ->interiorno of times ->interior

4.4. else exteriorelse exterior

Fill style and fill pattern for areasFill style and fill pattern for areas

4 ways 4 ways VoidVoid SRGP_setFillStyleSRGP_setFillStyle(drawStyle (drawStyle

SOLID/ BITMAP_PATTERN_OPAQUE / SOLID/ BITMAP_PATTERN_OPAQUE / BITMAP_PATTERN_TRANSPARENT/ BITMAP_PATTERN_TRANSPARENT/ PIXMAP_PATTERN);PIXMAP_PATTERN);

There is no distinction in opaque & There is no distinction in opaque & transparent in pix map patternstransparent in pix map patterns

Application screen backgroundApplication screen background

Background color Background color 0 bits in bitmap 0 bits in bitmap patterns used in opaque mode.patterns used in opaque mode.

Suppose user expects the uniform screen Suppose user expects the uniform screen background pattern then the application background pattern then the application should set up the background in desired should set up the background in desired pattern. Default pattern. Default solid color 0solid color 0

Erase primitiveErase primitive is done by redraw them is done by redraw them in the application background pattern.in the application background pattern.(Quick & dirty technique). This yield (Quick & dirty technique). This yield damaged image if primitives overlaps.damaged image if primitives overlaps.

Damage repair is done by respecifying Damage repair is done by respecifying primitives in application dataprimitives in application data

1.4 Saving and restoring Attributes1.4 Saving and restoring Attributes

Attributes can be saved for later Attributes can be saved for later restoration.restoration.

It does not affect the global attribute It does not affect the global attribute state.state.

SRGP does this attribute group viaSRGP does this attribute group via

void SRGP_inquireAttributes(attributeGroup * group);void SRGP_inquireAttributes(attributeGroup * group);

void SRGP_setAttributes(attributeGroup * group);void SRGP_setAttributes(attributeGroup * group);

1.5 Text1.5 Text Specifying and implementing text drawing is Specifying and implementing text drawing is

always complex in graphics package. always complex in graphics package. (style,font,bold,italic,width,spacing)(style,font,bold,italic,width,spacing)

In SRGP text is horizontally aligned and In SRGP text is horizontally aligned and character widths vary, but space b/w character widths vary, but space b/w characters is constant.characters is constant.

High quality documents need specialized High quality documents need specialized packages that offer more ctrl.packages that offer more ctrl.

Eg. Post scriptEg. Post script Text in SRGP is generated byText in SRGP is generated by void SRGP_text(point origin, char *text);void SRGP_text(point origin, char *text);

1.5 Text continued..1.5 Text continued..

The location of text is ctrlled by The location of text is ctrlled by specification of its origin/Anchor pointspecification of its origin/Anchor point

Text primitive’s appearance is determined Text primitive’s appearance is determined by only 2 attributes (color and font)by only 2 attributes (color and font)

void SRGP_setFont(int valueIndex)void SRGP_setFont(int valueIndex) Each character in the font is defined as Each character in the font is defined as

rectangular bitmap.rectangular bitmap. SRGP draws a character by filling a SRGP draws a character by filling a

rectangle using character bitmap as rectangle using character bitmap as pattern in transparent mode.pattern in transparent mode.

Formatting textFormatting text

Void SRGP_inquireTextExtent(Char*text, int Void SRGP_inquireTextExtent(Char*text, int *width, int * height, int *descent);*width, int * height, int *descent);

Code for formatting textCode for formatting text

2.Basic Interaction Handling2.Basic Interaction Handling

Topics to be discussedTopics to be discussed Human FactorsHuman Factors Logical Input DevicesLogical Input Devices Sampling versus Event driven ProcessingSampling versus Event driven Processing Sample modeSample mode Event modeEvent mode Pick correlation for Interaction HandlingPick correlation for Interaction Handling Setting Device Measure and AttributesSetting Device Measure and Attributes

2.1 Human Factors2.1 Human Factors

Interaction style(look and feel)Interaction style(look and feel) Ease of learning and useEase of learning and use Guidelines for user computer interactionGuidelines for user computer interaction

1.1. Provide simple and Consistent interaction Provide simple and Consistent interaction sequencesequence

2.2. Do not overload the user with too many Do not overload the user with too many different optionsdifferent options

3.3. Show the available options clearlyShow the available options clearly4.4. Give appropriate feedbackGive appropriate feedback5.5. Allow the user ti recover gracefully from Allow the user ti recover gracefully from

mistakes.mistakes.

2.2 Logical Input Devices2.2 Logical Input Devices

Device types in SRGPDevice types in SRGP 2 logical input devices supported by SRGP2 logical input devices supported by SRGP a) Locatora) Locator b) Keyboardb) Keyboard• SRGP maps the logical devices to physical SRGP maps the logical devices to physical

devices(eg locator to mouse, joystick, devices(eg locator to mouse, joystick, tablet….)tablet….)

• SRGP provides only one logical locator and SRGP provides only one logical locator and one keyboard deviceone keyboard device

2.3 Sampling versus Event driven 2.3 Sampling versus Event driven ProcessingProcessing