Computer Graphics - Computer Sciencenatacha/TeachSpring_12/CSC470/Notes/Lec3/lec3.pdfComputer Graphics CSC470 40 OpenGL Primitives GL_QUAD_STRIP ... To ensure graphics are output to

Computer Graphics CSC470Computer Graphics CSC470 11

Computer GraphicsComputer Graphics

Making PicturesMaking Pictures


Getting Started Making PicturesGetting Started Making Pictures

Graphics display: Entire screen (a); windows Graphics display: Entire screen (a); windows system (b); [both have usual screen system (b); [both have usual screen coordinates, with ycoordinates, with y--axis down]; windows axis down]; windows system [inverted coordinates] (c)system [inverted coordinates] (c)



OpenGL OpenGL –– Inverted WindowsInverted WindowsglutInitWindowSize(640,480); glutInitWindowPosition(100, 150); glutCreateWindow(“An OpenGL Window");

gluOrtho2D(0.0, 640.0, 480.0, 0.0);

void gluOrtho2D(GLdouble left,GLdouble right,GLdouble bottom, GLdouble top)


OpenGL OpenGL –– Inverted WindowsInverted Windows



OpenGL OpenGL –– “Right“Right--side Up” Windowsside Up” WindowsglutInitWindowSize(640,480); glutInitWindowPosition(100, 150); glutCreateWindow(“An OpenGL Window");

gluOrtho2D(0.0, 640.0, 0.0, 480.0);


OpenGL OpenGL –– “Right“Right--side Up” Windowsside Up” Windows



OpenGL OpenGL –– Full Screen ModeFull Screen Mode

glutInitWindowSize(640,480); glutInitWindowPosition(100, 150); glutCreateWindow(“An OpenGL Window");

glutFullScreen();


Making PicturesMaking PicturesOpenGL OpenGL –– Full Screen WindowsFull Screen Windows

Window size = Screen Resolution

(640,480)

(0,0)

(100,410)


Making PicturesMaking PicturesOpenGL OpenGL –– Full Screen WindowsFull Screen Windows

Window size = Screen Resolution

(640,480)

(0,0)

(100,410)


Basic System Drawing CommandsBasic System Drawing Commands

setPixel(xsetPixel(x, y, color), y, color)–– Pixel at location (Pixel at location (xx, , yy) gets color specified by ) gets color specified by

colorcolor–– Other names: Other names: putPixelputPixel(), (), setPixelsetPixel(),(), or or

drawPointdrawPoint()()line(x1, y1, x2, y2) line(x1, y1, x2, y2) –– Draws a line between (x1, y1) and (x2, y2)Draws a line between (x1, y1) and (x2, y2)–– Other names: Other names: drawLinedrawLine()() or or Line().Line().


Alternative Basic DrawingAlternative Basic Drawing

current position (current position (cpcp)), specifies where the , specifies where the system is drawing now.system is drawing now.moveTo(x,ymoveTo(x,y)) moves the pen invisibly to the moves the pen invisibly to the location (x, y) and then updates the current location (x, y) and then updates the current position to this position. position to this position. lineTo(x,ylineTo(x,y)) draws a straight line from the draws a straight line from the current position to (x, y) and then updates current position to (x, y) and then updates the the cpcp to (x, y).to (x, y).


Example: A SquareExample: A Square

moveTo(4, 4);moveTo(4, 4); //move //move to starting cornerto starting cornerlineTo(lineTo(--2, 4);2, 4);lineTo(lineTo(--2, 2, --2);2);lineTo(4, lineTo(4, --2);2);lineTo(4, 4);lineTo(4, 4); //close //close the squarethe square


A GL Program to Open a Window A GL Program to Open a Window // appropriate #includes go here // appropriate #includes go here void void main(intmain(int argcargc, char** , char** argvargv)){ {

glutInit(&argcglutInit(&argc, , argvargv); ); // initialize the toolkit// initialize the toolkitglutInitDisplayMode(GLUT_SINGLEglutInitDisplayMode(GLUT_SINGLE | GLUT_RGB); | GLUT_RGB); // set the display mode// set the display modeglutInitWindowSize(640,480); glutInitWindowSize(640,480); // set window size// set window sizeglutInitWindowPosition(100, 150); glutInitWindowPosition(100, 150);

// set window upper left corner position on screen// set window upper left corner position on screenglutCreateWindow("myglutCreateWindow("my first attempt"); first attempt");

// open the screen window (Title: my first attempt)// open the screen window (Title: my first attempt)


Open a Window cont’dOpen a Window cont’d

// register the callback functions// register the callback functionsglutDisplayFunc(myDisplayglutDisplayFunc(myDisplay); ); glutReshapeFunc(myReshapeglutReshapeFunc(myReshape); ); glutMouseFunc(myMouseglutMouseFunc(myMouse); ); glutKeyboardFunc(myKeyboardglutKeyboardFunc(myKeyboard); ); myInitmyInit();(); // additional initializations as necessary// additional initializations as necessaryglutMainLoopglutMainLoop();(); // go into a perpetual loop// go into a perpetual loop

}}


What the Code DoesWhat the Code Does

glutInitglutInit (&(&argcargc, , argvargv) initializes Open) initializes Open--GL GL ToolkitToolkitglutInitDisplayModeglutInitDisplayMode (GLUT_SINGLE | (GLUT_SINGLE | GLUT_RGB) allocates a single display GLUT_RGB) allocates a single display buffer and uses colors to drawbuffer and uses colors to drawglutInitWindowSizeglutInitWindowSize (640, 480) makes the (640, 480) makes the window 640 pixels wide by 480 pixels highwindow 640 pixels wide by 480 pixels high


What the Code Does cont’dWhat the Code Does cont’d

glutInitWindowPositionglutInitWindowPosition (100, 150) puts (100, 150) puts upper left window corner at position 100 upper left window corner at position 100 pixels from left edge and 150 pixels down pixels from left edge and 150 pixels down from top edgefrom top edgeglutCreateWindowglutCreateWindow (“my first attempt”) opens (“my first attempt”) opens and displays the window with the title “my and displays the window with the title “my first attempt”first attempt”Remaining functions register callbacks Remaining functions register callbacks


What the Code Does cont’dWhat the Code Does cont’d

The callThe call--back functions you write are back functions you write are registered, and then the program enters an registered, and then the program enters an endless loop, waiting for events to occur.endless loop, waiting for events to occur.When an event occurs, GL calls the relevant When an event occurs, GL calls the relevant handler function.handler function.


Drawing Dots in OpenGLDrawing Dots in OpenGL

We start with a coordinate system based on We start with a coordinate system based on the window just created: 0 to 679 in x and 0 the window just created: 0 to 679 in x and 0 to 479 in y.to 479 in y.OpenGL drawing is based on vertices OpenGL drawing is based on vertices (corners). To draw an object in OpenGL, (corners). To draw an object in OpenGL, you pass it a list of vertices.you pass it a list of vertices.–– The list starts with The list starts with glBegin(argglBegin(arg);); and ends with and ends with

glEndglEnd();();–– argarg determines what is drawn.determines what is drawn.–– glEndglEnd()() sends drawing data down the sends drawing data down the OpenGL OpenGL

pipelinepipeline..


ExampleExample

glBeginglBegin (GL_POINTS);(GL_POINTS);–– glVertex2i (100, 50);glVertex2i (100, 50);–– glVertex2i (100, 130);glVertex2i (100, 130);–– glVertex2i (150, 130);glVertex2i (150, 130);glEndglEnd();();GL_POINTS is constant builtGL_POINTS is constant built--into Openinto Open--GL GL (also GL_LINES, GL_POLYGON, …)(also GL_LINES, GL_POLYGON, …)Complete code to draw the 3 dots is in next Complete code to draw the 3 dots is in next slideslide


Display for Dots Display for Dots


Example of ConstructionExample of Construction

glVertex2i (…) takes integer valuesglVertex2i (…) takes integer valuesglVertex2d (…) takes floating point valuesglVertex2d (…) takes floating point values

OpenGL has its own data types to make OpenGL has its own data types to make graphics devicegraphics device--independentindependent–– Use these types instead of standard onesUse these types instead of standard ones


OpenOpen--GL Data TypesGL Data Types

GLuint,Glenum,GLbitfieldGLuint,Glenum,GLbitfieldunsigned unsigned intint or or unsigned longunsigned long

3232--bit unsigned bit unsigned numbernumber

uiui

GLushortGLushortunsigned shortunsigned short1616--bit unsigned bit unsigned numbernumber

usus

GLubyte,GLbooleanGLubyte,GLbooleanunsigned charunsigned char88--bit unsigned bit unsigned numbernumber

ubub

GLdouble,GLclampdGLdouble,GLclampdDoubleDouble6464--bit floatbit floatdd

GLfloatGLfloat, , GLclampfGLclampfFloatFloat3232--bit floatbit floatff

GLintGLint, , GLsizeiGLsizeiintint or longor long3232--bit integerbit integerii

GLshortGLshortShortShort1616--bit integerbit integerss

GLbyteGLbytesigned charsigned char88--bit integerbit integerbb

OpenGL type name OpenGL type name C/C++ type C/C++ type data type data type suffix suffix


Colors in OpenGLColors in OpenGL

•• OpenGL uses RGB color modelOpenGL uses RGB color model•• The values of red, green, and blue are The values of red, green, and blue are

numbers from 0.0 to 1.0. numbers from 0.0 to 1.0.


Colors in OpenGLColors in OpenGL•• The instructionThe instruction

glColor3fglColor3f(( float float redred, float , float greengreen, float, float blueblue ))sets a color.sets a color.

•• Syntax of OpenGL instructions:Syntax of OpenGL instructions:

FunctionName2i or FunctionName3fFunctionName2i or FunctionName3f

•• 2 or 3 means number of parameters: 2 or 32 or 3 means number of parameters: 2 or 3•• i i -- integer values, finteger values, f-- float values, dfloat values, d--double values.double values.

•• All the following instructions will give the same color All the following instructions will give the same color -- red:red:glColor1f( 1.0 );glColor1f( 1.0 );glColor1d( 1.0 );glColor1d( 1.0 );glColor4i( 1, 0, 0, 0 );glColor4i( 1, 0, 0, 0 );..



•• There is an optional fourth value in the color There is an optional fourth value in the color definition called the definition called the alpha valuealpha value. .

•• Alpha values are used for displaying different Alpha values are used for displaying different effects, e.g., blending, transparency, lighting effects, e.g., blending, transparency, lighting and shadows. and shadows.

•• OpenGL may OpenGL may interpolate different colors.interpolate different colors.•• Problem:Problem: Use the sample triangle program and Use the sample triangle program and

assign different colors for each vertex. Describe assign different colors for each vertex. Describe the result.the result.


Setting Drawing Colors in GLSetting Drawing Colors in GL

glColor3f(red, green, blue);glColor3f(red, green, blue);// set drawing color// set drawing color–– glColor3f(1.0, 0.0, 0.0);glColor3f(1.0, 0.0, 0.0); // red // red –– glColor3f(0.0, 1.0, 0.0);glColor3f(0.0, 1.0, 0.0); // green // green –– glColor3f(0.0, 0.0, 1.0);glColor3f(0.0, 0.0, 1.0); // blue // blue –– glColor3f(0.0, 0.0, 0.0);glColor3f(0.0, 0.0, 0.0); // black // black –– glColor3f(1.0, 1.0, 1.0);glColor3f(1.0, 1.0, 1.0); // bright white // bright white –– glColor3f(1.0, 1.0, 0.0);glColor3f(1.0, 1.0, 0.0); // bright yellow // bright yellow –– glColor3f(1.0, 0.0, 1.0);glColor3f(1.0, 0.0, 1.0); // magenta// magenta


Setting the Foreground ColourSetting the Foreground ColourglColor3f(R, G, B);glColor3f(R, G, B);

glColor4f(R, G, B, glColor4f(R, G, B, αα););

-- colourExample.execolourExample.exe


Setting Background Color in GLSetting Background Color in GL

glClearColorglClearColor (red, green, blue, alpha);(red, green, blue, alpha);–– Sets background color.Sets background color.–– Alpha is degree of transparency; use 0.0 for Alpha is degree of transparency; use 0.0 for

now.now.glClear(GL_COLOR_BUFFER_BITglClear(GL_COLOR_BUFFER_BIT););–– clears window to background color clears window to background color


Setting the Background ColourSetting the Background ColourglClearColour(RglClearColour(R, G, B, , G, B, αα););

glClearColour(1,0,0,0);glClearColour(1,0,0,0);





glBeginglBegin( GL_TRIANGLES );( GL_TRIANGLES ); // Begin a triangle// Begin a triangleglColor3f( 1.0, 0.0, 0.0 );glColor3f( 1.0, 0.0, 0.0 ); // Red color // Red color glVertex3f( 0.25, 0.25, 0.0 );glVertex3f( 0.25, 0.25, 0.0 );glColor3f( 0.0, 1.0, 0.0 );glColor3f( 0.0, 1.0, 0.0 ); // Green color // Green color glVertex3f( 0.75, 0.25, 0.0 );glVertex3f( 0.75, 0.25, 0.0 );glColor3f( 0.0, 0.0, 1.0 );glColor3f( 0.0, 0.0, 1.0 ); // Blue color// Blue colorglVertex3f( 0.75, 0.75, 0.0 );glVertex3f( 0.75, 0.75, 0.0 );

glEndglEnd();(); // End the triangle// End the triangle


Setting Up a Coordinate SystemSetting Up a Coordinate System

void void myInit(voidmyInit(void)){{

glMatrixMode(GL_PROJECTIONglMatrixMode(GL_PROJECTION); ); glLoadIdentityglLoadIdentity();();gluOrtho2D(0, 640.0, 0, 480.0);gluOrtho2D(0, 640.0, 0, 480.0);

}}// sets up coordinate system for window from // sets up coordinate system for window from

(0,0) to (679, 479)(0,0) to (679, 479)


Drawing LinesDrawing Lines

glBeginglBegin (GL_LINES); //draws one line(GL_LINES); //draws one line–– glVertex2i (40, 100); // between 2 verticesglVertex2i (40, 100); // between 2 vertices–– glVertex2i (202, 96);glVertex2i (202, 96);glEndglEnd ();();glFlushglFlush();();If more than two vertices are specified If more than two vertices are specified between between glBegin(GL_LINESglBegin(GL_LINES) and ) and glEndglEnd() () they are taken in pairs, and a separate line they are taken in pairs, and a separate line is drawn between each pair. is drawn between each pair.


Setting Line ParametersSetting Line Parameters

PolylinesPolylines and Polygons: lists of vertices.and Polygons: lists of vertices.Polygons are closed (right); Polygons are closed (right); polylinespolylines need need not be closed (left).not be closed (left).


Polygons - object with border and interior

Polygon can be simple, convex, and flat.

Convex polygon:a polygon is convex if a line connecting any two points of the polygon lies entirely within the polygon.


RectanglesRectangles

A special type of polygon with four sides and A special type of polygon with four sides and with aligned with the coordinate axis is with aligned with the coordinate axis is called an called an aligned rectanglealigned rectangle..


Aligned RectanglesAligned RectanglesglRecti(GLintglRecti(GLint x1, x1, GLintGLint y1, y1, GLintGLint x2, x2, GLintGLint y2);y2);

(x1,y1)(x1,y1)

(x2,y2)(x2,y2)


void myDisplay(void){

glClear(GL_COLOR_BUFFER_BIT);glClearColor(1.0,1.0,1.0,0.0); // white backgroundglColor3f(0.6,0.6,0.6); // bright grayglRecti(20,20,100,70);glColor3f(0.2,0.2,0.2); // dark grayglRecti(70, 50, 150, 130);glFlush();

}

Drawing rectangles

• by the opposite corners

• by the center point, height and width

• by the upper left corner, width and aspect ratio


Aligned RectanglesAligned RectanglesglRecti(GLintglRecti(GLint x1, x1, GLintGLint y1, y1, GLintGLint x2, x2, GLintGLint y2);y2);

The rectangle will be drawn, filled with the The rectangle will be drawn, filled with the current foreground colour.current foreground colour.


Aligned RectanglesAligned Rectangles

Aspect RatioAspect Ratio–– The shape of a rectangle can be described as it’s The shape of a rectangle can be described as it’s

aspect ratioaspect ratio..–– The aspect ratio is calculated thus:The aspect ratio is calculated thus:

AR = Width/HeightAR = Width/Height

LandscapeLandscape

29.5/21.229.5/21.2

PortraitPortrait

21.2/29.521.2/29.5Golden RectangleGolden Rectangle

ɸɸ = = 1.618033991.61803399


OpenGL PrimitivesOpenGL Primitives

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


Primitives and attributes

glBegin(GL_POINTS);………;

glEnd();

Points

Lines Polylines

House


Graphics PrimitivesGraphics Primitives

PointsPoints

glBegin(GL_POINTSglBegin(GL_POINTS););glVertex2i(100,50);glVertex2i(100,50);glVertex2i(100,130);glVertex2i(100,130);glVertex2i(150,130);glVertex2i(150,130);

glEndglEnd();();



PointsPoints

void void drawDot(GLintdrawDot(GLint x, x, GLintGLint y)y){{

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

glEndglEnd();();}}



LinesLines

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

glEndglEnd();();



PolylinesPolylines

glBegin(GL_LINE_STRIPglBegin(GL_LINE_STRIP););glVertex2i(20,10);glVertex2i(20,10);

glVertex2i(50,10);glVertex2i(50,10);



glEndglEnd();();


Polygon types



PolygonPolygon

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




glEndglEnd();();


Remember to FlushRemember to Flush

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

glFlushglFlush();();


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 IssuesOpenGL will only display polygons correctly that areOpenGL will only display polygons correctly that are–– SimpleSimple: edges cannot cross: edges cannot cross–– ConvexConvex: All points on line segment between two points in : All points on line segment between two points in

a polygon are also in the polygona polygon are also in the polygon–– FlatFlat: all vertices are in the same plane: all vertices are in the same plane

User program can check if above trueUser program can check if above true–– OpenGL will produce output if these conditions are OpenGL will produce output if these conditions are

violated but it may not be what is desiredviolated but it may not be what is desired

Triangles satisfy all conditionsTriangles satisfy all conditionsnonsimple polygon

nonconvex polygon


AttributesAttributesAttributes are part of the OpenGL state and Attributes are part of the OpenGL state and determine the appearance of objectsdetermine the appearance of objects–– Color (points, lines, polygons)Color (points, lines, polygons)–– Size and width (points, lines)Size and width (points, lines)–– Stipple pattern (lines, polygons)Stipple pattern (lines, polygons)–– Polygon modePolygon mode

Display as filled: solid color or stipple Display as filled: solid color or stipple patternpatternDisplay edgesDisplay edgesDisplay verticesDisplay vertices

Documents

Computer Graphics - Computer Sciencenatacha/TeachSpring_12/CSC470/Notes/Lec3/lec3.pdfComputer Graphics CSC470 40 OpenGL Primitives GL_QUAD_STRIP ... To ensure graphics are output to