Computer Graphics. Making Pictures. Computer Graphics CSC470 1

Transcription

1 Computer Graphics Making Pictures Computer Graphics CSC470 1

2 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

3 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

4 OpenGL Inverted Windows Computer Graphics CSC470 4

5 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

6 OpenGL Right-side Up Windows Computer Graphics CSC470 6

7 Making Pictures OpenGL Full Screen Mode glutinitwindowsize(640,480); glutinitwindowposition(100, 150); glutcreatewindow( An OpenGL Window"); glutfullscreen(); Computer Graphics CSC470 7

8 Making Pictures OpenGL Full Screen Windows (0,0) Window size = Screen Resolution (100,410) (640,480) Computer Graphics CSC470 8

9 Making Pictures OpenGL Full Screen Windows (0,0) Window size = Screen Resolution (100,410) (640,480) Computer Graphics CSC470 9

10 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

11 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

12 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

13 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

14 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

15 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

16 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

17 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

18 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

19 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

20 Display for Dots Computer Graphics CSC470 20

21 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

22 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

23 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

24 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

25 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

26 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

27 Setting the Foreground Colour glcolor3f(r, G, B); glcolor4f(r, G, B, α); - colourexample.exe Computer Graphics CSC470 27

28 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

29 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

30 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

31 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

32 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

33 Setting Line Parameters Polylines and Polygons: lists of vertices. Polygons are closed (right); polylines need not be closed (left). Computer Graphics CSC470 33

34 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

35 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

36 Aligned Rectangles glrecti(glint x1, GLint y1, GLint x2, GLint y2); (x1,y1) (x2,y2) Computer Graphics CSC470 36

37 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

38 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

39 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 ɸ = Computer Graphics CSC470 39

40 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

41 Primitives and attributes glbegin(gl_points); ; glend(); Points Lines Polylines House Computer Graphics CSC470 41

42 Graphics Primitives Points glbegin(gl_points); glvertex2i(100,50); glvertex2i(100,130); glvertex2i(150,130); glend(); Computer Graphics CSC470 42

43 Graphics Primitives Points void drawdot(glint x, GLint y) { glbegin(gl_points); glvertex2i(x,y); glend(); } Computer Graphics CSC470 43

44 Graphics Primitives Lines glbegin(gl_lines); glvertex2i(10,50); glvertex2i(80,20); glvertex2i(20,10); glvertex2i(10,45); glend(); Computer Graphics CSC470 44

45 Graphics Primitives Polylines glbegin(gl_line_strip); glvertex2i(20,10); glvertex2i(50,10); glvertex2i(20,80); glvertex2i(50,80); glend(); Computer Graphics CSC470 45

46 Polygon types Computer Graphics CSC470 46

47 Graphics Primitives Polygon glbegin(gl_line_loop); glvertex2i(20,10); glvertex2i(50,10); glvertex2i(20,80); glvertex2i(50,80); glend(); Computer Graphics CSC470 47

48 Remember to Flush To ensure graphics are output to the drawing window, you must follow the plotting process with: glflush(); Computer Graphics CSC470 48

49 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

50 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

51 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