1

CSC 706 Computer GraphicsCSC 706 Computer GraphicsPrimitives, Stippling, Fitting InPrimitives, Stippling, Fitting In

OpenGL Primitives

Examples:

GL_QUAD_STRIPGL_QUAD_STRIP

GL_POLYGONGL_POLYGON

GL_TRIANGLE_STRIPGL_TRIANGLE_STRIP GL_TRIANGLE_FANGL_TRIANGLE_FAN

GL_POINTSGL_POINTS

GL_LINESGL_LINES

GL_LINE_LOOPGL_LINE_LOOP

GL_LINE_STRIPGL_LINE_STRIP

GL_TRIANGLESGL_TRIANGLES

Graphics PrimitivesGraphics Primitives

Points

void drawDot(GLint x, GLint y){

glBegin(GL_POINTS);glVertex2i(x,y);

glEnd();}

Graphics Primitives cont’dGraphics Primitives cont’d

Lines

glBegin(GL_LINES);glVertex2i(10,50);glVertex2i(80,20);glVertex2i(20,10);glVertex2i(10,45);

glEnd();

Graphics Primitives cont’dGraphics Primitives cont’d

Polylines

glBegin(GL_LINE_STRIP);glVertex2i(20,10);glVertex2i(50,10);glVertex2i(20,80);glVertex2i(50,80);

glEnd();

Polygon types

2

Graphics Primitives cont’dGraphics Primitives cont’d

Polygon

glBegin(GL_LINE_LOOP);glVertex2i(20,10);glVertex2i(50,10);glVertex2i(20,80);glVertex2i(50,80);

glEnd();

Remember to FlushRemember to Flush

To ensure graphics are output to the drawing window, you must follow the plotting process with:

glFlush();

Remember to FlushRemember to Flush

glBegin(GL_LINE_LOOPglBegin(GL_LINE_LOOP););glVertex2i(20,10);glVertex2i(20,10);glVertex2i(50,10);glVertex2i(50,10);glVertex2i(20,80);glVertex2i(20,80);glVertex2i(50,80);glVertex2i(50,80);

glEndglEnd();();

glFlushglFlush();();

Polygon IssuesPolygon Issues• OpenGL will only display polygons correctly that are

- Simple: edges cannot cross- Convex: All points on line segment between two points in

a polygon are also in the polygon- Flat: all vertices are in the same plane

• User program can check if above true- OpenGL will produce output if these conditions are

violated but it may not be what is desired• Triangles satisfy all conditions

nonsimple polygonnonconvex polygon

StipplingStipplingStippling means to add a pattern to a simple line Stippling means to add a pattern to a simple line or the filling of a polygon.or the filling of a polygon.OpenGL allows stippling to be performed using OpenGL allows stippling to be performed using bit patterns.bit patterns.Turn stippling on with: Turn stippling on with:

glEnable(GL_LINE_STIPPLEglEnable(GL_LINE_STIPPLE););glEnable(GL_POLY_STIPPLEglEnable(GL_POLY_STIPPLE););

Turn off with:Turn off with:glDisable(GL_LINE_STIPPLEglDisable(GL_LINE_STIPPLE););glDisable(GL_POLY_STIPPLEglDisable(GL_POLY_STIPPLE););

Line StipplingLine Stippling

Defining a line stippling pattern:Defining a line stippling pattern:glLineStipple(GLintglLineStipple(GLint factor, factor, GLushortGLushort pattern);pattern);

The pattern is a 16 bit sequence of 1s and 0sThe pattern is a 16 bit sequence of 1s and 0se.g. 1110111011101110 e.g. 1110111011101110

The factor is a bit multiplier for the pattern (it enlarges it)The factor is a bit multiplier for the pattern (it enlarges it)e.g. factor = 2 turns the above pattern into:e.g. factor = 2 turns the above pattern into:1111110011111100111111001111110011111100111111001111110011111100

The pattern can be expressed in hexadecimal notationThe pattern can be expressed in hexadecimal notatione.g. 0xEECC = 1110111011001100e.g. 0xEECC = 1110111011001100

e.g. e.g. glLineStipple(2, 0x7733);glLineStipple(2, 0x7733);

3

Stippled Lines cont’dStippled Lines cont’d

To make stippled (dotted or dashed) lines, you To make stippled (dotted or dashed) lines, you use the command use the command glLineStippleglLineStipple( )( ) to define the to define the stipple pattern;stipple pattern;Then you enable line stippling with Then you enable line stippling with glEnableglEnable( )( )::glLineStipple(1, 0x3F07); glLineStipple(1, 0x3F07); glEnable(GL_LINE_STIPPLEglEnable(GL_LINE_STIPPLE););Line stippling is disabled by passing argument Line stippling is disabled by passing argument GL_LINE_STIPPLEGL_LINE_STIPPLE to to glDisableglDisable( )( ). . glDisable(GL_LINE_STIPPLEglDisable(GL_LINE_STIPPLE););

Wait a minute…..Wait a minute…..

How do I convert binary How do I convert binary to hexadecimal?to hexadecimal?Hexadecimal character Hexadecimal character equivalents to 4 bit equivalents to 4 bit binary expressions binary expressions

2. Split the binary into groups of fourfour digits and assign hex values

0100 0010 = 421110 1001 = E9

0001 1100 0011 = 1C3

3. Then put 0x in front of the number in your code, e.g. 0xE9

Line StipplingLine Stippling

Lets see it in Lets see it in action…action…

glEnable(GL_LINE_STIPPLEglEnable(GL_LINE_STIPPLE););glLineStipple(1, 0x7733);glLineStipple(1, 0x7733);glBegin(GL_LINE_STRIPglBegin(GL_LINE_STRIP););

glVertex2i(10,10);glVertex2i(10,10);glVertex2i(600,450);glVertex2i(600,450);

glEndglEnd();();

glLineStipple(2, 0xFF00);glLineStipple(2, 0xFF00);glBegin(GL_LINE_STRIPglBegin(GL_LINE_STRIP););

glVertex2i(10,30);glVertex2i(10,30);glVertex2i(600,470);glVertex2i(600,470);

glEndglEnd();();

glLineStipple(5, 0xFF00);glLineStipple(5, 0xFF00);glBegin(GL_LINE_STRIPglBegin(GL_LINE_STRIP););

glVertex2i(130,0);glVertex2i(130,0);glVertex2i(600,430);glVertex2i(600,430);

glEndglEnd();();

glFlushglFlush();();glDisable(GL_LINE_STIPPLEglDisable(GL_LINE_STIPPLE););

Example glLineStipple(1, 0x3F07);Example glLineStipple(1, 0x3F07);The above example and the pattern 0x3F07 (which translates to The above example and the pattern 0x3F07 (which translates to 0011111100000111 in binary), a line would be drawn with 3 pixels0011111100000111 in binary), a line would be drawn with 3 pixels on, then on, then 5 off, 6 on, and 2 off. (If this seems backward, remember that t5 off, 6 on, and 2 off. (If this seems backward, remember that the lowhe low--order order bits are used first.) If bits are used first.) If factorfactor had been 2, the pattern would have been had been 2, the pattern would have been elongated: 6 pixels on, 10 off, 12 on, and 4 off. Figure 4.1 shoelongated: 6 pixels on, 10 off, 12 on, and 4 off. Figure 4.1 shows lines ws lines drawn with different patterns and repeat factors. If you don't edrawn with different patterns and repeat factors. If you don't enable line nable line stippling, drawing proceeds as if stippling, drawing proceeds as if patternpattern were 0xFFFF and were 0xFFFF and factorfactor 1. (Use 1. (Use glDisableglDisable()() with GL_LINE_STIPPLE to disable stippling.) Note that stipplingwith GL_LINE_STIPPLE to disable stippling.) Note that stipplingcan be used in combination with wide lines to produce wide stippcan be used in combination with wide lines to produce wide stippled lines. led lines.

Fig. 4.1: Fig. 4.1: Stippled Lines Stippled Lines

Polygon StipplingPolygon Stippling

Defining a polygon stippling pattern:Defining a polygon stippling pattern:glPolygonStipple(GLubyteglPolygonStipple(GLubyte mask);mask);

The pattern is a 128 byte array of 1s and 0s (32 bits across andThe pattern is a 128 byte array of 1s and 0s (32 bits across and32 bits down)32 bits down)

e.g. e.g. GLubyteGLubyte mask[ ] = {0xff, 0xfe, 0x34, ..};mask[ ] = {0xff, 0xfe, 0x34, ..};The pattern is tiled inside the polygon.The pattern is tiled inside the polygon.

e.g. e.g. glPolygonStipple(maskglPolygonStipple(mask););Polygon stippling is enabled and disabled by using Polygon stippling is enabled and disabled by using glEnableglEnable( )( ) and and glDisableglDisable( )( ) with with GL_POLYGON_STIPPLEGL_POLYGON_STIPPLE as an argument.as an argument.

Polygon StipplingPolygon StipplingThe argument The argument maskmask is a pointer to is a pointer to a 32 x 32 bitmap that's interpreted a 32 x 32 bitmap that's interpreted as a mask of 0s and 1s. Where a as a mask of 0s and 1s. Where a 1 appears, the corresponding pixel 1 appears, the corresponding pixel in the polygon is drawn, and in the polygon is drawn, and where a 0 appears, nothing is where a 0 appears, nothing is drawn. Figure 4.2 shows how a drawn. Figure 4.2 shows how a stipple pattern is constructed from stipple pattern is constructed from the characters in the characters in maskmask. .

4

Polygon Stippling cont’dPolygon Stippling cont’d Example 2 Example 2 -- Polygon Stippling Polygon Stippling

Example 2 Example 2 -- outputoutput

/* draw one solid, unstippled rectangle, */

/* then two stippled rectangles */glRectf (25.0, 25.0, 125.0, 125.0);glEnable (GL_POLYGON_STIPPLE);glPolygonStipple (fly);glRectf (125.0, 25.0, 225.0, 125.0);glPolygonStipple (fire);glRectf (225.0, 10.0, 400.0, 325.0); glDisable (GL_POLYGON_STIPPLE);

Polygon StipplingPolygon Stippling

Lets see it in Lets see it in action…action…

glEnable(GL_POLYGON_STIPPLEglEnable(GL_POLYGON_STIPPLE););

GLubyteGLubyte mask[] = {0x31, 0xfe, 0x34, 0x12,mask[] = {0x31, 0xfe, 0x34, 0x12,0xff, 0xfc, 0x00, 0x12,0xff, 0xfc, 0x00, 0x12,0xaa, 0xfe, 0x00, 0x12,0xaa, 0xfe, 0x00, 0x12,0xaa, 0xfe, 0x00, 0x12,0xaa, 0xfe, 0x00, 0x12,0xfc, 0xfe, 0x00, 0x12,0xfc, 0xfe, 0x00, 0x12,0xff, 0xfe, 0x00, 0x12,0xff, 0xfe, 0x00, 0x12,…};…};

glPolygonStipple(maskglPolygonStipple(mask););glBegin(GL_POLYGONglBegin(GL_POLYGON););

glVertex2i(10,10);glVertex2i(10,10);glVertex2i(600,450);glVertex2i(600,450);glVertex2i(45,300);glVertex2i(45,300);glVertex2i(240,460);glVertex2i(240,460);

glEndglEnd();();

glFlushglFlush();();glDisable(GL_POLYGON_STIPPLEglDisable(GL_POLYGON_STIPPLE););

Fitting it inFitting it in

Sometimes you may want to print out a Sometimes you may want to print out a plot of some data when the data ranges plot of some data when the data ranges are unknown.are unknown.However, you want them to appear in the However, you want them to appear in the window presented in a visually pleasing window presented in a visually pleasing manner.manner.

Fitting it inFitting it in

E.g. Let’s plotE.g. Let’s plotPlotted with screen Plotted with screen coordinates of 640 x coordinates of 640 x 480 we will get: 480 we will get:

)2cos( xe x π−

A data plot is no good if we can’t see

it!!

5

Fitting it inFitting it in

How do we MAGNIFY the data?How do we MAGNIFY the data?

Stretch out XStretch out X

Stretch out YStretch out Y

Simple “Dot Plots”Simple “Dot Plots”Draw a function Draw a function for values of for values of x bx between 0 and 4?etween 0 and 4?

Steps:Steps:“sample” it at a collection of “sample” it at a collection of equispacedequispaced xx--values;values;plot a dot at each coordinate pair (plot a dot at each coordinate pair (xxi, i, ff((xxii)); )); choose some suitable increment, say 0.005, choose some suitable increment, say 0.005, between consecutive between consecutive xx-- values.values.

Simple “Dot Plots” cont’dSimple “Dot Plots” cont’dglBegin(GL_POINTSglBegin(GL_POINTS););

for(GLdoublefor(GLdouble x = 0; x < 4.0 ; x += 0.005)x = 0; x < 4.0 ; x += 0.005)glVertex2d(x, glVertex2d(x, f(xf(x));));

glEndglEnd();();glFlushglFlush();();

Problems:Problems:The picture produced will be impossibly tiny because The picture produced will be impossibly tiny because values of values of x x between 0 and 4 map to the first four pixels between 0 and 4 map to the first four pixels at the bottom left of the screen window. at the bottom left of the screen window. Further, the negative values of Further, the negative values of ff(.) will lie below the (.) will lie below the window and will not be seen at all. window and will not be seen at all. We therefore need to scale and position the values to be We therefore need to scale and position the values to be plotted so they cover the screen window area plotted so they cover the screen window area appropriately.appropriately.

Fitting it inFitting it in

The X coordinates of the window range The X coordinates of the window range over 640 values (from 0 to 639).over 640 values (from 0 to 639).The X values for the data range from 0 to The X values for the data range from 0 to 4.4.We need to modify the data values so that We need to modify the data values so that data point 0 maps to window coordinate 0 data point 0 maps to window coordinate 0 and data point 4 maps to window and data point 4 maps to window coordinate 640.coordinate 640.

Fitting it inFitting it in

In essence we want 4 to be plotted at 640.In essence we want 4 to be plotted at 640.4 * A = 640;4 * A = 640;A = 160; ….. or for all casesA = 160; ….. or for all cases

A = SCREENWIDTH/A = SCREENWIDTH/xxmaxmax

Therefore, x’ = x * ATherefore, x’ = x * A…. if x ranges from 0 .. …. if x ranges from 0 .. xxmaxmax

Fitting it inFitting it in

If x ranges from say 1 to 4 then we will If x ranges from say 1 to 4 then we will want to stretch a range of 3 out instead of want to stretch a range of 3 out instead of 4, therefore:4, therefore:

A = SCREENWIDTH/(A = SCREENWIDTH/(xxmaxmax –– xxminmin))The same applies for the y coordinates:The same applies for the y coordinates:

B = B = SCREENHEIGHT/(ySCREENHEIGHT/(ymaxmax-- yyminmin))

6

Dot Plots: scaling and shiftingDot Plots: scaling and shifting

Scaling x:

Scaling and shifting y:

Fitting InFitting In

x’ = Ax + C and y’ = By + Dx’ = Ax + C and y’ = By + D

A = A = SCREENWIDTH/(xmaxSCREENWIDTH/(xmax--xminxmin))C = C = --xminxmin*A*AB = B = SCREENHEIGHT/(ymaxSCREENHEIGHT/(ymax--yminymin))D = |D = |yminymin|*B|*B

A and B are A and B are scalarsscalarsC and D are C and D are translatorstranslators

Moving it aroundMoving it around Setting Values for A, B, C and DSetting Values for A, B, C and D

The conversions from The conversions from xx to to sxsx, and from , and from yy to to sysy, have the form:, have the form:

sxsx = = A A * * x x + + BBsysy = = C C * * y y + + DD

wherewhere

ExampleExample

void myDisplay(void){glBegin(GL_LINE_STRIP);

for(GLfloat x = -4.0; x < 4.0; x += 0.1){

GLfloat y = sin(3.14159 * x) / (3.14159 * x);glVertex2f(x, y);

}glEnd();glFlush();}