Graphics Programming

1
Graphics Programming

• ????? ??? ???? ???

2
Contents

• Our Goal in This Chapter
• Programming of the Sierpinski gasket
• How To?
• Programming with OpenGL and C/C
• OpenGL API (Application Programmers Interface)
• Primitives
• Attributes
• Color
• Viewing
• Control Functions

3
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
• Pick an initial point at random inside the
  triangle
• Select one of the three vertices at random
• Find the point halfway between the initial point
  and the randomly selected vertex
• Display this new point by putting some sort of
  marker, such as a small circle, at its location
• Replace the initial point with this new point
• Return to step 2

4
Generation of the Sierpinski Gasket
5
Algorithm of the Sierpinski Gasket
main( ) initialize_the_system( ) for(
some_number_of_points ) pt
generate_a_point( ) display_the_point(pt)
cleanup( )
6
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

lt Pen plotter gt
7
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 vertex3

8
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_POINTS) glVertex2f(x1,
y1) glVertex2f(x2, y2) glEnd( )
9
Function of display of the Sierpinski Gasket
void display(void) typedef Glfloat
point22 / arbitrary triangle /
point2 vertices3 0.0,0.0, 250.0,500.0,
500.0,0.0 / any desired initial point
/ point2 p 75.0,75.0 for(int i0
ilt5000 i) / pick a random vertex from
0,1,2 / int jrand()3 / compute new point
/ p0 (p0verticesj0)/2.0 p1
(p1verticesj1)/2.0 / display new point
/ glBegin(GL_POINTS) glVertex2fv(p) glEnd()
glFlush()
10
The Sierpinski Gasket Generated with 5000 Points
11
OpenGL API (1/3)

• API (Application Programmers 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

Input Device
Application Program
Graphics Library (API)
Hardware
Output Device
Function Calls
Output
User Program
Graphics System
Input/Output Devices
Data
Input
12
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

13
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

GLU
OpenGL Application Program
Frame Buffer
GL
GLUT
Xlib, Xtk
GLX
14
Primitives in OpenGL

• Points
• Lines
• Line segments
• Polylines
• Polygons
• Polygons
• Triangles and quadrilaterals
• Strips and fans
• Text
• Curved objects

15
Points in OpenGL
glBegin(GL_POINTS) glVertex2fv(p0) glVertex2fv
(p1) glVertex2fv(p2) glVertex2fv(p3) glVerte
x2fv(p4) glVertex2fv(p5) glVertex2fv(p6) glV
ertex2fv(p7) glEnd()
16
Lines in OpenGL (1/3)

• Line Segments

glBegin(GL_LINES) glVertex2fv(p0) glVertex2fv(
p1) glVertex2fv(p2) glVertex2fv(p3) glVertex
2fv(p4) glVertex2fv(p5) glVertex2fv(p6) glVe
rtex2fv(p7) glEnd()
17
Lines in OpenGL (2/3)

• Polylines Line Strip

glBegin(GL_LINE_STRIP) glVertex2fv(p0) glVerte
x2fv(p1) glVertex2fv(p2) glVertex2fv(p3) glV
ertex2fv(p4) glVertex2fv(p5) glVertex2fv(p6)
glVertex2fv(p7) glEnd()
18
Lines in OpenGL (3/3)

• Polylines Line Loop

glBegin(GL_LINE_LOOP) glVertex2fv(p0) glVertex
2fv(p1) glVertex2fv(p2) glVertex2fv(p3) glVe
rtex2fv(p4) glVertex2fv(p5) glVertex2fv(p6)
glVertex2fv(p7) glEnd()
19
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
20
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

p1
p2
Convex Objects
21
Polygons in OpenGL (1/6)

• Polygon

glBegin(GL_POLYGON) glVertex2fv(p0) glVertex2f
v(p1) glVertex2fv(p2) glVertex2fv(p3) glVert
ex2fv(p4) glVertex2fv(p5) glVertex2fv(p6) gl
Vertex2fv(p7) glEnd()
22
Polygons in OpenGL (2/6)

• Quadrilaterals

glBegin(GL_QUADS) glVertex2fv(p0) glVertex2fv(
p1) glVertex2fv(p2) glVertex2fv(p3) glVertex
2fv(p4) glVertex2fv(p5) glVertex2fv(p6) glVe
rtex2fv(p7) glEnd()
23
Polygons in OpenGL (3/6)

• Quadstrip

glBegin(GL_QUAD_STRIP) glVertex2fv(p1) glVerte
x2fv(p2) glVertex2fv(p3) glVertex2fv(p0) glV
ertex2fv(p4) glVertex2fv(p7) glVertex2fv(p5)
glVertex2fv(p6) glEnd()
24
Polygons in OpenGL (4/6)

• Triangles

glBegin(GL_TRIANGLES) glVertex2fv(p0) glVertex
2fv(p1) glVertex2fv(p2) glVertex2fv(p3) glVe
rtex2fv(p4) glVertex2fv(p5) glVertex2fv(p6)
glVertex2fv(p7) glEnd()
25
Polygons in OpenGL (5/6)

• Triangle Strip

glBegin(GL_TRIANGLE_STRIP) glVertex2fv(p0) glV
ertex2fv(p7) glVertex2fv(p1) glVertex2fv(p6)
glVertex2fv(p2) glVertex2fv(p5) glVertex2fv(p
3) glVertex2fv(p4) glEnd()
26
Polygons in OpenGL (6/6)

• Triangle Fan

glBegin(GL_TRIANGLE_FAN) glVertex2fv(p0) glVer
tex2fv(p1) glVertex2fv(p2) glVertex2fv(p3) g
lVertex2fv(p4) glVertex2fv(p5) glVertex2fv(p6)
glVertex2fv(p7) glEnd()
27
Attributes

• Properties that Determines How to Render a
  Geometric Primitive
• Color, thickness, pattern of filling, etc.
• Color
• Three color theory

Color Solid
Additive Color
Subtractive Color
28
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

29
Viewing

• Viewing Volume
• glOrtho(GLdouble left, GLdouble right, GLdouble
  bottom, GLdouble top, GLdouble near, GLdouble
  far)
• glOrtho2D(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) glMatrixMod
e(GL_MODELVIEW)
30
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)

ltAspect-Ratio Mismatchgt
ltMapping to the Viewpotgt
31
Control (2/2)

• Example main , display, and myinit
  Functions

include ltGL/glut.hgt void main(int argc, char
argv) glutInit(argc, argv)
glutInitDisplayMode(GLUT_SINGLEGLUT_RGB)
glutInitWindowSize(500, 500)
glutInitWindowPosition(0, 0)
glutCreateWindow(simple OpenGL example)
glutDisplayFunc(display) myinit()
glutMainLoop()
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() gluOrth2D(0.0, 500.0, 0.0,
500.0) glMatrixMode(GL_MODELVIEW)