Computer Graphics Making Pictures Computer Graphics CSC470 1
Getting Started Making Pictures Graphics display: Entire screen (a); windows system (b); [both have usual screen coordinates, with y-axis y down]; windows system [inverted coordinates] (c) Computer Graphics CSC470 2
Making Pictures OpenGL Inverted Windows glutinitwindowsize(640,480); void gluortho2d(gldouble left, glutinitwindowposition(100, 150); GLdouble right, glutcreatewindow( An OpenGL GLdouble Window"); bottom, GLdouble top) gluortho2d(0.0, 640.0, 480.0, 0.0); Computer Graphics CSC470 3
OpenGL Inverted Windows Computer Graphics CSC470 4
Making Pictures OpenGL Right-side Up Windows glutinitwindowsize(640,480); glutinitwindowposition(100, 150); glutcreatewindow( An OpenGL Window"); gluortho2d(0.0, 640.0, 0.0, 480.0); Computer Graphics CSC470 5
OpenGL Right-side Up Windows Computer Graphics CSC470 6
Making Pictures OpenGL Full Screen Mode glutinitwindowsize(640,480); glutinitwindowposition(100, 150); glutcreatewindow( An OpenGL Window"); glutfullscreen(); Computer Graphics CSC470 7
Making Pictures OpenGL Full Screen Windows (0,0) Window size = Screen Resolution (100,410) (640,480) Computer Graphics CSC470 8
Making Pictures OpenGL Full Screen Windows (0,0) Window size = Screen Resolution (100,410) (640,480) Computer Graphics CSC470 9
Basic System Drawing Commands setpixel(x,, y, color) Pixel at location (x,( y) ) gets color specified by color Other names: putpixel(), setpixel(), or drawpoint() line(x1, y1, x2, y2) Draws a line between (x1, y1) and (x2, y2) Other names: drawline() or Line(). Computer Graphics CSC470 10
Alternative Basic Drawing current position (cp( cp),, specifies where the system is drawing now. moveto(x,y) moves the pen invisibly to the location (x, y) and then updates the current position to this position. lineto(x,y) draws a straight line from the current position to (x, y) and then updates the cp to (x, y). Computer Graphics CSC470 11
Example: A Square moveto(4, 4); //move to starting corner lineto(-2, 4); lineto(-2, -2); lineto(4, -2); lineto(4, 4); //close the square Computer Graphics CSC470 12
A GL Program to Open a Window // appropriate #includes go here void main(int argc,, char** argv) { glutinit(&argc, argv); // initialize the toolkit glutinitdisplaymode(glut_single GLUT_RGB); // set the display mode glutinitwindowsize(640,480); // set window size glutinitwindowposition(100, 150); // set window upper left corner position on screen glutcreatewindow("my first attempt"); // open the screen window (Title: my first attempt) Computer Graphics CSC470 13
Open a Window cont d } // register the callback functions glutdisplayfunc(mydisplay); glutreshapefunc(myreshape); glutmousefunc(mymouse); glutkeyboardfunc(mykeyboard); myinit(); // additional initializations as necessary glutmainloop(); // go into a perpetual loop Computer Graphics CSC470 14
What the Code Does glutinit (&argc argc, argv) ) initializes Open-GL Toolkit glutinitdisplaymode (GLUT_SINGLE GLUT_RGB) allocates a single display buffer and uses colors to draw glutinitwindowsize (640, 480) makes the window 640 pixels wide by 480 pixels high Computer Graphics CSC470 15
What the Code Does cont d glutinitwindowposition (100, 150) puts upper left window corner at position 100 pixels from left edge and 150 pixels down from top edge glutcreatewindow ( my first attempt ) opens and displays the window with the title my first attempt Remaining functions register callbacks Computer Graphics CSC470 16
What the Code Does cont d The call-back functions you write are registered, and then the program enters an endless loop, waiting for events to occur. When an event occurs, GL calls the relevant handler function. Computer Graphics CSC470 17
Drawing Dots in OpenGL We start with a coordinate system based on the window just created: 0 to 679 in x and 0 to 479 in y. OpenGL drawing is based on vertices (corners). To draw an object in OpenGL, you pass it a list of vertices. The list starts with glbegin(arg); and ends with glend(); arg determines what is drawn. glend() sends drawing data down the OpenGL pipeline. Computer Graphics CSC470 18
Example glbegin (GL_POINTS); glvertex2i (100, 50); glvertex2i (100, 130); glvertex2i (150, 130); glend(); GL_POINTS is constant built-into into Open-GL (also GL_LINES, GL_POLYGON, ) Complete code to draw the 3 dots is in next slide Computer Graphics CSC470 19
Display for Dots Computer Graphics CSC470 20
Example of Construction glvertex2i ( ) takes integer values glvertex2d ( ) takes floating point values OpenGL has its own data types to make graphics device-independent independent Use these types instead of standard ones Computer Graphics CSC470 21
Open-GL Data Types suffix data type C/C++ type OpenGL type name b 8-bit integer signed char GLbyte s 16-bit bit integer Short GLshort i 32-bit integer int or long GLint, GLsizei f 32-bit float Float GLfloat, GLclampf d 64-bit float Double GLdouble,GLclampd ub us ui 8-bit unsigned number 16-bit unsigned number 32-bit unsigned number unsigned char unsigned short unsigned int or unsigned long GLubyte,GLboolean GLushort GLuint,Glenum,GLbitfield Computer Graphics CSC470 22
Colors in OpenGL OpenGL uses RGB color model The values of red, green, and blue are numbers from 0.0 to 1.0. Computer Graphics CSC470 23
Colors in OpenGL The instruction glcolor3f( float red,, float green,, float blue ) sets a color. Syntax of OpenGL instructions: FunctionName2i or FunctionName3f 2 or 3 means number of parameters: 2 or 3 i - integer values, f-f float values, d-double d double values. All the following instructions will give the same color - red: glcolor1f( 1.0 ); glcolor1d( 1.0 ); glcolor4i( 1, 0, 0, 0 );. Computer Graphics CSC470 24
Colors in OpenGL There is an optional fourth value in the color definition called the alpha value. Alpha values are used for displaying different effects, e.g., blending, transparency, lighting and shadows. OpenGL may interpolate different colors. Problem: Use the sample triangle program and assign different colors for each vertex. Describe the result. Computer Graphics CSC470 25
Setting Drawing Colors in GL glcolor3f(red, green, blue); // set drawing color glcolor3f(1.0, 0.0, 0.0); glcolor3f(0.0, 1.0, 0.0); glcolor3f(0.0, 0.0, 1.0); glcolor3f(0.0, 0.0, 0.0); glcolor3f(1.0, 1.0, 1.0); glcolor3f(1.0, 1.0, 0.0); glcolor3f(1.0, 0.0, 1.0); // red // green // blue // black // bright white // bright yellow // magenta Computer Graphics CSC470 26
Setting the Foreground Colour glcolor3f(r, G, B); glcolor4f(r, G, B, α); - colourexample.exe Computer Graphics CSC470 27
Setting Background Color in GL glclearcolor (red, green, blue, alpha); Sets background color. Alpha is degree of transparency; use 0.0 for now. glclear(gl_color_buffer_bit); clears window to background color Computer Graphics CSC470 28
Setting the Background Colour glclearcolour(r,, G, B, α); glclearcolour(1,0,0,0); glclearcolour(0,1,0,0); glclearcolour(0,0,1,0); Computer Graphics CSC470 29
Colors in OpenGL glbegin( ( GL_TRIANGLES ); // Begin a triangle glcolor3f( 1.0, 0.0, 0.0 ); // Red color glvertex3f( 0.25, 0.25, 0.0 ); glcolor3f( 0.0, 1.0, 0.0 ); // Green color glvertex3f( 0.75, 0.25, 0.0 ); glcolor3f( 0.0, 0.0, 1.0 ); // Blue color glvertex3f( 0.75, 0.75, 0.0 ); glend(); // End the triangle Computer Graphics CSC470 30
Setting Up a Coordinate System void myinit(void) { glmatrixmode(gl_projection); glloadidentity(); gluortho2d(0, 640.0, 0, 480.0); } // sets up coordinate system for window from (0,0) to (679, 479) Computer Graphics CSC470 31
Drawing Lines glbegin (GL_LINES); //draws one line glvertex2i (40, 100); // between 2 vertices glvertex2i (202, 96); glend (); glflush(); If more than two vertices are specified between glbegin(gl_lines) ) and glend() they are taken in pairs, and a separate line is drawn between each pair. Computer Graphics CSC470 32
Setting Line Parameters Polylines and Polygons: lists of vertices. Polygons are closed (right); polylines need not be closed (left). Computer Graphics CSC470 33
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. Computer Graphics CSC470 34
Rectangles A special type of polygon with four sides and with aligned with the coordinate axis is called an aligned rectangle. Computer Graphics CSC470 35
Aligned Rectangles glrecti(glint x1, GLint y1, GLint x2, GLint y2); (x1,y1) (x2,y2) Computer Graphics CSC470 36
Drawing rectangles void mydisplay(void) { glclear(gl_color_buffer_bit); glclearcolor(1.0,1.0,1.0,0.0); // white background glcolor3f(0.6,0.6,0.6); // bright gray glrecti(20,20,100,70); glcolor3f(0.2,0.2,0.2); // dark gray glrecti(70, 50, 150, 130); glflush(); } by the opposite corners by the center point, height and width by the upper left corner, width and aspect ratio Computer Graphics CSC470 37
Aligned Rectangles glrecti(glint x1, GLint y1, GLint x2, GLint y2); The rectangle will be drawn, filled with the current foreground colour. Computer Graphics CSC470 38
Aligned Rectangles Aspect Ratio The shape of a rectangle can be described as it s aspect ratio. The aspect ratio is calculated thus: AR = Width/Height Landscape 29.5/21.2 Portrait 21.2/29.5 Golden Rectangle ɸ = 1.61803399 Computer Graphics CSC470 39
OpenGL Primitives GL_POINTS GL_LINES GL_LINE_STRIP GL_POLYGON GL_LINE_LOOP GL_TRIANGLES GL_QUAD_STRIP GL_TRIANGLE_STRIP GL_TRIANGLE_FAN Computer Graphics CSC470 40
Primitives and attributes glbegin(gl_points); ; glend(); Points Lines Polylines House Computer Graphics CSC470 41
Graphics Primitives Points glbegin(gl_points); glvertex2i(100,50); glvertex2i(100,130); glvertex2i(150,130); glend(); Computer Graphics CSC470 42
Graphics Primitives Points void drawdot(glint x, GLint y) { glbegin(gl_points); glvertex2i(x,y); glend(); } Computer Graphics CSC470 43
Graphics Primitives Lines glbegin(gl_lines); glvertex2i(10,50); glvertex2i(80,20); glvertex2i(20,10); glvertex2i(10,45); glend(); Computer Graphics CSC470 44
Graphics Primitives Polylines glbegin(gl_line_strip); glvertex2i(20,10); glvertex2i(50,10); glvertex2i(20,80); glvertex2i(50,80); glend(); Computer Graphics CSC470 45
Polygon types Computer Graphics CSC470 46
Graphics Primitives Polygon glbegin(gl_line_loop); glvertex2i(20,10); glvertex2i(50,10); glvertex2i(20,80); glvertex2i(50,80); glend(); Computer Graphics CSC470 47
Remember to Flush To ensure graphics are output to the drawing window, you must follow the plotting process with: glflush(); Computer Graphics CSC470 48
Remember to Flush glbegin(gl_line_loop); glvertex2i(20,10); glvertex2i(50,10); glvertex2i(20,80); glvertex2i(50,80); glend(); glflush(); Computer Graphics CSC470 49
Polygon 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 polygon nonconvex polygon Computer Graphics CSC470 50
Attributes Attributes are part of the OpenGL state and determine the appearance of objects Color (points, lines, polygons) Size and width (points, lines) Stipple pattern (lines, polygons) Polygon mode Display as filled: solid color or stipple pattern Display edges Display vertices Computer Graphics CSC470 51