Graphics Graphics Korea University kucg.korea.ac.kr Graphics Programming 고려대학교 컴퓨터 그래픽스 연구실

KUCG Graphics Korea University kucg.korea.ac.kr Contents Our Goal in This Chapter Programming of the Sierpinski gasket How To? Programming with OpenGL and C/C++  OpenGL API (Application Programmer’s Interface)  Primitives  Attributes  Color  Viewing  Control Functions

KUCG Graphics Korea University kucg.korea.ac.kr The Sierpinski Gasket What is? Interesting shape in area such as fractal geometry Object that can be defined recursively and randomly How to? Start with three vertices in the plane 1. Pick an initial point at random inside the triangle 2. Select one of the three vertices at random 3. Find the point halfway between the initial point and the randomly selected vertex 4. Display this new point by putting some sort of marker, such as a small circle, at its location 5. Replace the initial point with this new point 6. Return to step 2

KUCG Graphics Korea University kucg.korea.ac.kr Generation of the Sierpinski Gasket v2v2 v1v1 v3v3 p0p0 p1p1 p2p2

KUCG Graphics Korea University kucg.korea.ac.kr Algorithm of the Sierpinski Gasket main( ) { initialize_the_system( ); for( some_number_of_points ) { pt = generate_a_point( ); display_the_point(pt); } cleanup( ); } main( ) { initialize_the_system( ); for( some_number_of_points ) { pt = generate_a_point( ); display_the_point(pt); } cleanup( ); }

KUCG Graphics Korea University kucg.korea.ac.kr The Pen-Plotter Model (1/3) Conceptual Model Referencing the Output Device Produce images by moving a pen held by a gantry 2 Drawing Functions moveto(x, y); lineto(x, y); Example : moveto(0, 0); (0, 0) (1, 0) lineto(1, 0); (1, 1) lineto(1, 1); (0, 1) lineto(0, 1); lineto(0, 0);

KUCG Graphics Korea University kucg.korea.ac.kr The Pen-Plotter Model (2/3) Vertex Location in space (2D, 3D, 4D) Define the atomic geometric objects  1 : point  2 : line segment  3 : triangle, circle  4 : quadrilateral OpenGL : glVertex*( ) glVertex2i(GLint xi, GLint yi); glVertex3f(GLfloat x, GLfloat y, GLfloat z); glVertex3fv(vertex);  #define GLfloat float  GLfloat vertex[3];

KUCG Graphics Korea University kucg.korea.ac.kr The Pen-Plotter Model (3/3) OpenGL: glBegin( ), glEnd( ) Specify the geometric type Line segment A pair of points glBegin(GL_LINES); glVertex2f(x1, y1); glVertex2f(x2, y2); glEnd( ); glBegin(GL_LINES); glVertex2f(x1, y1); glVertex2f(x2, y2); glEnd( ); glBegin(GL_POINTS); glVertex2f(x1, y1); glVertex2f(x2, y2); glEnd( ); glBegin(GL_POINTS); glVertex2f(x1, y1); glVertex2f(x2, y2); glEnd( ); (x1, y1) (x2, y2) (x1, y1) (x2, y2)

KUCG Graphics Korea University kucg.korea.ac.kr Function of “Display” of the Sierpinski Gasket void display(void) { typedef Glfloat point2[2]; /* arbitrary triangle */ point2 vertices[3] = { {0.0,0.0}, {250.0,500.0}, {500.0,0.0} }; /* any desired initial point */ point2 p = { 75.0,75.0 }; for(int i=0; i<5000; i++) { /* pick a random vertex from 0,1,2 */ int j=rand()%3; /* compute new point */ p[0] = (p[0]+vertices[j][0])/2.0; p[1] = (p[1]+vertices[j][1])/2.0; /* display new point */ glBegin(GL_POINTS); glVertex2fv(p); glEnd(); } glFlush(); } void display(void) { typedef Glfloat point2[2]; /* arbitrary triangle */ point2 vertices[3] = { {0.0,0.0}, {250.0,500.0}, {500.0,0.0} }; /* any desired initial point */ point2 p = { 75.0,75.0 }; for(int i=0; i<5000; i++) { /* pick a random vertex from 0,1,2 */ int j=rand()%3; /* compute new point */ p[0] = (p[0]+vertices[j][0])/2.0; p[1] = (p[1]+vertices[j][1])/2.0; /* display new point */ glBegin(GL_POINTS); glVertex2fv(p); glEnd(); } glFlush(); }

KUCG Graphics Korea University kucg.korea.ac.kr The Sierpinski Gasket Generated with 5000 Points

KUCG Graphics Korea University kucg.korea.ac.kr OpenGL API (1/3) API (Application Programmer’s Interface) Interface between an application program and a graphics system OpenGL API Easy to learn, compared with other APIs Nevertheless powerful Graphics Functions : Black Box Described by only its inputs and outputs Nothing known about its internal working Application Program Graphics Library (API) Hardware Input Device Output Device User Program User Program Graphics System Graphics System Input/Output Devices Input/Output Devices Function CallsOutput DataInput

KUCG Graphics Korea University kucg.korea.ac.kr OpenGL API (2/3) 6 Groups of Graphics Functions Primitive functions  what of an API - that object that can be displayed Attributes functions  how of an API : color, filling pattern Viewing functions  describe camera - position, orientation Transformation functions  rotation, translation,scaling Input functions  interactive application : keyboard, mice, data tablet Control functions  multiprocessing multiwindow environment - communicate the window system

KUCG Graphics Korea University kucg.korea.ac.kr OpenGL API (3/3) OpenGL Interface OpenGL functions(names : gl~) : GL Graphics utility library : GLU  Use only GL functions  Contain code for common objects such as spheres Graphics utility toolkit : GLUT  interface with the window system OpenGL Application Program OpenGL Application Program GLU GL GLUT GLX Xlib, Xtk Frame Buffer Frame Buffer

KUCG Graphics Korea University kucg.korea.ac.kr Primitives in OpenGL Points Lines Line segments Polylines Polygons Triangles and quadrilaterals Strips and fans Text Curved objects

KUCG Graphics Korea University kucg.korea.ac.kr Points in OpenGL glBegin(GL_POINTS); glVertex2fv(p0); glVertex2fv(p1); glVertex2fv(p2); glVertex2fv(p3); glVertex2fv(p4); glVertex2fv(p5); glVertex2fv(p6); glVertex2fv(p7); glEnd(); glBegin(GL_POINTS); glVertex2fv(p0); glVertex2fv(p1); glVertex2fv(p2); glVertex2fv(p3); glVertex2fv(p4); glVertex2fv(p5); glVertex2fv(p6); glVertex2fv(p7); glEnd(); p0 p1 p2 p3 p4 p5 p6 p7

KUCG Graphics Korea University kucg.korea.ac.kr Lines in OpenGL (1/3) Line Segments glBegin(GL_LINES); glVertex2fv(p0); glVertex2fv(p1); glVertex2fv(p2); glVertex2fv(p3); glVertex2fv(p4); glVertex2fv(p5); glVertex2fv(p6); glVertex2fv(p7); glEnd(); glBegin(GL_LINES); glVertex2fv(p0); glVertex2fv(p1); glVertex2fv(p2); glVertex2fv(p3); glVertex2fv(p4); glVertex2fv(p5); glVertex2fv(p6); glVertex2fv(p7); glEnd(); p0 p1 p2 p3 p4 p5 p6 p7

KUCG Graphics Korea University kucg.korea.ac.kr Lines in OpenGL (2/3) Polylines – Line Strip glBegin(GL_LINE_STRIP); glVertex2fv(p0); glVertex2fv(p1); glVertex2fv(p2); glVertex2fv(p3); glVertex2fv(p4); glVertex2fv(p5); glVertex2fv(p6); glVertex2fv(p7); glEnd(); glBegin(GL_LINE_STRIP); glVertex2fv(p0); glVertex2fv(p1); glVertex2fv(p2); glVertex2fv(p3); glVertex2fv(p4); glVertex2fv(p5); glVertex2fv(p6); glVertex2fv(p7); glEnd(); p0 p1 p2 p3 p4 p5 p6 p7

KUCG Graphics Korea University kucg.korea.ac.kr Lines in OpenGL (3/3) Polylines – Line Loop glBegin(GL_LINE_LOOP); glVertex2fv(p0); glVertex2fv(p1); glVertex2fv(p2); glVertex2fv(p3); glVertex2fv(p4); glVertex2fv(p5); glVertex2fv(p6); glVertex2fv(p7); glEnd(); glBegin(GL_LINE_LOOP); glVertex2fv(p0); glVertex2fv(p1); glVertex2fv(p2); glVertex2fv(p3); glVertex2fv(p4); glVertex2fv(p5); glVertex2fv(p6); glVertex2fv(p7); glEnd(); p0 p1 p2 p3 p4 p5 p6 p7

KUCG Graphics Korea University kucg.korea.ac.kr Polygons (1/2) Definition Object that is closed as a line loop, but that has an interior Simple Polygon No pair of edges of a polygon cross each other Simple Nonsimple

KUCG Graphics Korea University kucg.korea.ac.kr Polygons (2/2) Convexity If all points on the line segment between any two points inside the object, or on its boundary, are inside the object Convex Objects p1 p2

KUCG Graphics Korea University kucg.korea.ac.kr Polygons in OpenGL (1/6) Polygon glBegin(GL_POLYGON); glVertex2fv(p0); glVertex2fv(p1); glVertex2fv(p2); glVertex2fv(p3); glVertex2fv(p4); glVertex2fv(p5); glVertex2fv(p6); glVertex2fv(p7); glEnd(); glBegin(GL_POLYGON); glVertex2fv(p0); glVertex2fv(p1); glVertex2fv(p2); glVertex2fv(p3); glVertex2fv(p4); glVertex2fv(p5); glVertex2fv(p6); glVertex2fv(p7); glEnd(); p0 p1 p2 p3 p4 p5 p6 p7

KUCG Graphics Korea University kucg.korea.ac.kr Polygons in OpenGL (2/6) Quadrilaterals glBegin(GL_QUADS); glVertex2fv(p0); glVertex2fv(p1); glVertex2fv(p2); glVertex2fv(p3); glVertex2fv(p4); glVertex2fv(p5); glVertex2fv(p6); glVertex2fv(p7); glEnd(); glBegin(GL_QUADS); glVertex2fv(p0); glVertex2fv(p1); glVertex2fv(p2); glVertex2fv(p3); glVertex2fv(p4); glVertex2fv(p5); glVertex2fv(p6); glVertex2fv(p7); glEnd(); p0 p1 p2 p3 p4 p5 p6 p7

KUCG Graphics Korea University kucg.korea.ac.kr Polygons in OpenGL (3/6) Quadstrip glBegin(GL_QUAD_STRIP); glVertex2fv(p1); glVertex2fv(p2); glVertex2fv(p3); glVertex2fv(p0); glVertex2fv(p4); glVertex2fv(p7); glVertex2fv(p5); glVertex2fv(p6); glEnd(); glBegin(GL_QUAD_STRIP); glVertex2fv(p1); glVertex2fv(p2); glVertex2fv(p3); glVertex2fv(p0); glVertex2fv(p4); glVertex2fv(p7); glVertex2fv(p5); glVertex2fv(p6); glEnd(); p0 p1 p2 p3 p4 p5 p6 p7

KUCG Graphics Korea University kucg.korea.ac.kr Polygons in OpenGL (4/6) Triangles glBegin(GL_TRIANGLES); glVertex2fv(p0); glVertex2fv(p1); glVertex2fv(p2); glVertex2fv(p3); glVertex2fv(p4); glVertex2fv(p5); glVertex2fv(p6); glVertex2fv(p7); glEnd(); glBegin(GL_TRIANGLES); glVertex2fv(p0); glVertex2fv(p1); glVertex2fv(p2); glVertex2fv(p3); glVertex2fv(p4); glVertex2fv(p5); glVertex2fv(p6); glVertex2fv(p7); glEnd(); p0 p1 p2 p3 p4 p5 p6 p7

KUCG Graphics Korea University kucg.korea.ac.kr Polygons in OpenGL (5/6) Triangle Strip glBegin(GL_TRIANGLE_STRIP); glVertex2fv(p0); glVertex2fv(p7); glVertex2fv(p1); glVertex2fv(p6); glVertex2fv(p2); glVertex2fv(p5); glVertex2fv(p3); glVertex2fv(p4); glEnd(); glBegin(GL_TRIANGLE_STRIP); glVertex2fv(p0); glVertex2fv(p7); glVertex2fv(p1); glVertex2fv(p6); glVertex2fv(p2); glVertex2fv(p5); glVertex2fv(p3); glVertex2fv(p4); glEnd(); p0 p1 p2 p3 p4 p5 p6 p7

KUCG Graphics Korea University kucg.korea.ac.kr Polygons in OpenGL (6/6) Triangle Fan glBegin(GL_TRIANGLE_FAN); glVertex2fv(p0); glVertex2fv(p1); glVertex2fv(p2); glVertex2fv(p3); glVertex2fv(p4); glVertex2fv(p5); glVertex2fv(p6); glVertex2fv(p7); glEnd(); glBegin(GL_TRIANGLE_FAN); glVertex2fv(p0); glVertex2fv(p1); glVertex2fv(p2); glVertex2fv(p3); glVertex2fv(p4); glVertex2fv(p5); glVertex2fv(p6); glVertex2fv(p7); glEnd(); p0 p1 p2 p3 p4 p5 p6 p7

KUCG Graphics Korea University kucg.korea.ac.kr Attributes Properties that Determines How to Render a Geometric Primitive Color, thickness, pattern of filling, etc. Color Three color theory Color Solid Red Blue Green M Y C Cyan Yellow Magenta G B R Additive ColorSubtractive Color

KUCG Graphics Korea University kucg.korea.ac.kr Color in OpenGL Set the Clear Color glClearColor(1.0, 1.0, 1.0, 1.0)  Opaque: opacity is 1.0  Window is cleared by white color Set the Color State Varible glColor3f(1.0, 0.0, 0.0);  RGB color – red color Set the Size of Points glPointSize(2.0);  2 pixel wide

KUCG Graphics Korea University kucg.korea.ac.kr Viewing Viewing Volume glOrtho(GLdouble left, GLdouble right, GLdouble bottom, GLdouble top, GLdouble near, GLdouble far); gluOrtho2D(GLdouble left, GLdouble right, GLdouble bottom, GLdouble top); Matrix Mode 2 types: model-view, projection glMatrixMode(GL_PROJECTION); glLoadIdentity( ); gluOrtho2D(0.0, 500.0, 0.0, 500.0); glMatrixMode(GL_MODELVIEW); glMatrixMode(GL_PROJECTION); glLoadIdentity( ); gluOrtho2D(0.0, 500.0, 0.0, 500.0); glMatrixMode(GL_MODELVIEW);

KUCG Graphics Korea University kucg.korea.ac.kr Control (1/2) Interaction with Window Systems glutInit(int *argc, char *argv); glutInitDisplayMode(GLUT_RGB | GLUT_DEPTH | GLUT_DOUBLE); glutInitWindowSize(480, 640); glutIntiWindowPosition(0, 0); Aspect Ratio and Viewport glViewprot(GLint x, GLint y,GLsizei w, GLsizei h);

KUCG Graphics Korea University kucg.korea.ac.kr Control (2/2) Example – “main”, “display”, and “myinit” Functions void myinit(void){ /* attributes */ glClearColor(1.0, 1,0, 1,0, 1,0); glColor3f(1.0, 0.0, 0.0); /* set up viewing */ glMatrixMode(GL_PROJECTION); gluLoadIdentity(); gluOrtho2D(0.0, 500.0, 0.0, 500.0); glMatrixMode(GL_MODELVIEW); } void myinit(void){ /* attributes */ glClearColor(1.0, 1,0, 1,0, 1,0); glColor3f(1.0, 0.0, 0.0); /* set up viewing */ glMatrixMode(GL_PROJECTION); gluLoadIdentity(); gluOrtho2D(0.0, 500.0, 0.0, 500.0); glMatrixMode(GL_MODELVIEW); } #include void main(int argc, char **argv){ glutInit(&argc, argv); glutInitDisplayMode(GLUT_SINGLE|GLUT_RGB); glutInitWindowSize(500, 500); glutInitWindowPosition(0, 0); glutCreateWindow(“simple OpenGL example”); glutDisplayFunc(display); myinit(); glutMainLoop(); } #include void main(int argc, char **argv){ glutInit(&argc, argv); glutInitDisplayMode(GLUT_SINGLE|GLUT_RGB); glutInitWindowSize(500, 500); glutInitWindowPosition(0, 0); glutCreateWindow(“simple OpenGL example”); glutDisplayFunc(display); myinit(); glutMainLoop(); }