Computer Graphics Anatomy of GUI. Computer Graphics CSC470 1

Size: px

Start display at page:

Download "Computer Graphics Anatomy of GUI. Computer Graphics CSC470 1"

Alexina Greene
5 years ago
Views:

1 Computer Graphics Anatomy of GUI 1

2 Anatomy of GLUT keyboard mouse OpenGL Application if (key == f key == F ) { glutfullscreen(); } else if(key == w key == W ) { glutreshapewindow(640,480); } display reshape 2

3 Anatomy of GLUT void mykeyboard(unsigned char key, int mousex, int mousey) Runs whenever a keyboard event occurs (e.g. user presses a key) void mymouse(int button, int state, int x, int y) Runs whenever a mouse event occurs (e.g. user presses a mouse button, mouse moves) void mydisplay(void) Runs whenever the system determines that the window must be redrawn (e.g. window comes to the front, window has been moved) void myreshape(void) Runs whenever a window changes size 3

4 Anatomy of GLUT void mykeyboard(unsigned char key, int mousex, int mousey) { if (key == f key == F ) { glutfullscreen(); } else if(key == w key == W ) { glutreshapewindow(640,480); } } 4

5 Anatomy of GLUT int main() { //initialise things //create a screen window glutdisplayfunc(mydisplay); glutreshapefunc(myreshape); glutmousefunc(mymouse); glutkeyboardfunc(mykeyboard); //initialise other things glutmainloop(); } 5

6 Opening a Window Anatomy of GLUT int main(int argc,, char **argv argv) { glutinit(&argc, argv); glutinitdisplaymode(glut_single GLUT RGB); glutinitwindowsize(640,480); glutinitwindowposition(100,100); glutcreatewindow( My OpenGL Window ); glutdisplayfunc(mydisplay); glutreshapefunc(myreshape); glutmousefunc(mymouse); glutkeyboardfunc(mykeyboard); } myinit(); glutmainloop(); 6

7 Example: Mouse Plots How do you draw a dot in the window at the mouse location when the user clicks on the left mouse button? 7

8 Example: Mouse Plots void mymouse(int button, int state, int x, int y) { if(button == GLUT_LEFT_BUTTON && state == GLUT_DOWN) { drawdot(x,, y); } } why the 480 -? 8

9 Example: Keyboard Plots How do you plot points in the window at the current mouse location when the p key is pressed? 9

10 Example: Keyboard Plots void mykeyboard(unsigned char key, int mx, int my) { GLint x = mx,, y = my; switch(key) { case 'p': drawdot(x,y); break; case 27: //ESC exit(-1); default: break; } } 10

11 Example: Mouse Drawing How do you use the mouse to draw freehand in a window? 11

12 Example: Mouse Drawing void mymovedmouse(int mousex, int mousey) { GLint x = mousex; GLint y = mousey; GLint brushsize = 20; glrecti(x,y,, x+ brushsize,, y + brushsize); glflush(); } 12

13 Stippling Stippling means to add a pattern to a simple line or the filling of a polygon. OpenGL allows stippling to be performed using bit patterns. Turn stippling on with: glenable(gl_line_stipple); glenable(gl_poly_stipple); Turn off with: gldisable(gl_line_stipple); gldisable(gl_poly_stipple); 13

14 Line Stippling Defining a line stippling pattern: gllinestipple(glint factor, GLushort pattern); The pattern is a 16 bit sequence of 1s and 0s e.g The factor is a bit multiplier for the pattern (it enlarges it) e.g. factor = 2 turns the above pattern into: The pattern can be expressed in hexadecimal notation e.g. 0xEECC = e.g. gllinestipple(2, 0x7733); 14

15 Stippled Lines cont d To make stippled (dotted or dashed) lines, you use the command gllinestipple( ( ) to define the stipple pattern; Then you enable line stippling with glenable( ( ):) gllinestipple(1, 0x3F07); glenable(gl_line_stipple); Line stippling is disabled by passing argument GL_LINE_STIPPLE to gldisable( ( ).) gldisable(gl_line_stipple); 15

16 Wait a minute.. How do I convert binary to hexadecimal? Hexadecimal character equivalents to 4 bit binary expressions 2. Split the binary into groups of four digits and assign hex values = = E = 1C3 3. Then put 0x in front of the number in your code, e.g. 0xE9 16

17 Line Stippling Lets see it in action glenable(gl_line_stipple); gllinestipple(1, 0x7733); glbegin(gl_line_strip); glvertex2i(10,10); glvertex2i(600,450); glend(); gllinestipple(2, 0xFF00); glbegin(gl_line_strip); glvertex2i(10,30); glvertex2i(600,470); glend(); gllinestipple(5, 0xFF00); glbegin(gl_line_strip); glvertex2i(130,0); glvertex2i(600,430); glend(); glflush(); gldisable(gl_line_stipple); 17

18 Example gllinestipple(1, 0x3F07); The above example and the pattern 0x3F07 (which translates to in binary), a line would be drawn with 3 pixels on, then 5 off, 6 on, and 2 off. (If this seems backward, remember that the t low-order order bits are used first.) If factor had been 2, the pattern would have been elongated: 6 pixels on, 10 off, 12 on, and 4 off. Figure 4.1 shows lines drawn with different patterns and repeat factors. If you don't enable e line stippling, drawing proceeds as if pattern were 0xFFFF and factor 1. (Use gldisable() with GL_LINE_STIPPLE to disable stippling.) Note that stippling can be used in combination with wide lines to produce wide stippled lines. Fig. 4.1: Stippled Lines 18

19 Polygon Stippling Defining a polygon stippling pattern: glpolygonstipple(glubyte mask); The pattern is a 128 byte array of 1s and 0s (32 bits across and 32 bits down) e.g. GLubyte mask[ ] = {0xff, 0xfe, 0x34,..}; The pattern is tiled inside the polygon. e.g. glpolygonstipple(mask); Polygon stippling is enabled and disabled by using glenable( ( ) and gldisable( ( ) with GL_POLYGON_STIPPLE as an argument. 19

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

21 Polygon Stippling cont d 21

22 Example 2 - Polygon Stippling 22

23 Example 2 - output /* 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); 23

$Polygon Stippling Lets see it in action glenable(gl_polygon_stipple); GLubyte mask[] = {0x31, 0xfe, 0x34, 0x12, 0xff, 0xfc, 0x00, 0x12, 0xaa, 0xfe, 0x00, 0x12, 0xaa, 0xfe, 0x00, 0x12, 0xfc, 0xfe,$

24 Polygon Stippling Lets see it in action glenable(gl_polygon_stipple); GLubyte mask[] = {0x31, 0xfe, 0x34, 0x12, 0xff, 0xfc, 0x00, 0x12, 0xaa, 0xfe, 0x00, 0x12, 0xaa, 0xfe, 0x00, 0x12, 0xfc, 0xfe, 0x00, 0x12, 0xff, 0xfe, 0x00, 0x12, }; glpolygonstipple(mask); glbegin(gl_polygon); glvertex2i(10,10); glvertex2i(600,450); glvertex2i(45,300); glvertex2i(240,460); glend(); glflush(); gldisable(gl_polygon_stipple); 24

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

26 E.g. Let s plot Plotted with screen coordinates of 640 x 480 we will get: Fitting it in e x cos( 2πx) A data plot is no good if we can t see it!! 26

27 Fitting it in How do we MAGNIFY the data? Stretch out X Stretch out Y 27

28 Simple Dot Plots Draw a function for values of x between 0 and 4? Steps: sample it at a collection of equispaced x- values; plot a dot at each coordinate pair (xi, f(xi)); choose some suitable increment, say 0.005, between consecutive x-values. 28

29 Simple Dot Plots cont d glbegin(gl_points); for(gldouble x = 0; x < 4.0 ; x += 0.005) glvertex2d(x, f(x)); glend(); glflush(); Problems: The picture produced will be impossibly tiny because values of x between 0 and 4 map to the first four pixels at the bottom left of the screen window. Further, the negative values of f(.) will lie below the window and will not be seen at all. We therefore need to scale and position the values to be plotted so they cover the screen window area appropriately. 29

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

31 Fitting it in In essence we want 4 to be plotted at * A = 640; A = 160;.. or for all cases A = SCREENWIDTH/x max Therefore, x = x * A. if x ranges from 0.. x max 31

32 Fitting it in If x ranges from say 1 to 4 then we will want to stretch a range of 3 out instead of 4, therefore: A = SCREENWIDTH/(x max max x min ) The same applies for the y coordinates: B = SCREENHEIGHT/(y max max -y min ) 32

33 Dot Plots: scaling and shifting Scaling x: Scaling and shifting y: 33

34 Fitting In x = Ax + C and y = By + D A = SCREENWIDTH/(xmax-xmin xmin) C = -xmin*a B = SCREENHEIGHT/(ymax-ymin ymin) D = ymin ymin *B A and B are scalars C and D are translators 34

35 Moving it around 35

36 Setting Values for A, B, C and D The conversions from x to sx, and from y to sy, have the form: where sx = A * x + B sy = C * y + D 36

37 37

$Example void mydisplay(void) {glbegin(gl_line_strip); for(glfloat x = -4.0; x < 4.0; x += 0.$

38 Example void mydisplay(void) {glbegin(gl_line_strip); for(glfloat x = -4.0; x < 4.0; x += 0.1) { GLfloat y = sin( * x) / ( * x); glvertex2f(x, y); } glend(); glflush();} 38

void drawdot(glint x, GLint y) { glbegin(gl_points); glvertex2i(x,y); glend();

$void drawdot(glint x, GLint y) { glbegin(gl_points); glvertex2i(x,y); glend();$ CSC 706 Computer Graphics Primitives, Stippling, Fitting In OpenGL Primitives Examples: GL_POINTS GL_LINES GL_LINE_STRIP GL_POLYGON GL_LINE_LOOP GL_ TRIANGLES GL_QUAD_STRIP GL_TRIANGLE_STRIP GL_TRIANGLE_FAN