Chapter02 graphics-programming

Chapter 2:
Graphics Programming
www.themegallery.com
Instructor: Shih-Shinh Huang
1

Outlines
Introduction
OpenGL API
Primitives and Attributes
OpenGL Viewing
Sierpinski Gasket Example
Implicit Functions Plotting
2

Introduction
Graphics System
 The basic model of a graphics package is a
black box described by its input and output.
 Input Interface
• Function Calls from User Program
• Measurements from Input Devices
 Output Interface
• Graphics to Output Device.
3

Introduction
Graphics System
 API Categories
• Primitive Functions
• Attribute Functions
• Viewing Functions
• Transformation Functions
• Input Functions
• Control Functions
• Query Functions
4

Introduction
Coordinate System
 It is difficult to specify the vertices in units of
the physical device.
 Device-independent graphics makes users
easy to define their own coordinate system
• World Coordinate System
• Application Coordinate System.
Rendering Process
5

Introduction
Running OpenGL on Windows VC++
 Step 1: Download the GLUT for windows from website.
 Step 2: Put the following files in the locations
• glut32.dll -> C:windowssystem32
• glut32.lib -> <VC Install Dir>lib
• glut.h -> <VC Install Dir>include
 Step 3: Create a VC++ Windows Console Project
 Step 4: Add a C++ File to the created project
 Step 5: Add opengl32.lib glu32.lib glut32.lib to
• Project->Properties->Configuration Properties->Linker->Input-
>Additional Dependencies
6

OpenGL API
What is OpenGL (Open Graphics Library)
 It is a layer between programmer and
graphics hardware.
 It is designed as hardware-independent
interface to be implemented on many different
hardware platforms
 This interface consists of over 700 distinct
commands.
• Software library
• Several hundred procedures and functions
7

OpenGL API
What is OpenGL
Applicaton
Graphics Package
OpenGL Application Programming Interface
Hardware and software
Output Device Input Device
Applicaton
Input Device
8

OpenGL API
Library Organization
 OpenGL (GL)
• Core Library
• OpenGL on Windows.
 OpenGL Utility Library (GLU)
• It uses only GL functions to create common objects.
• It is available in all OpenGL implementations.
 OpenGL Utility Toolkit (GLUT)
• It provides the minimum functionalities expected for
interacting with modern windowing systems.
9

OpenGL API
Library Organization
GLX for X window systems
WGL for Windows
AGL for Macintosh
10

OpenGL API
Program Structure
 Step 1: Initialize the interaction between windows
and OpenGL.
 Step 2: Specify the window properties and further
create window.
 Step 3: Set the callback functions
 Step 4: Initialize the program attributes
 Step 5: Start to run the program
11

OpenGL API
Program Framework
#include <GL/glut.h>
int main(int argc, char** argv)
{
glutInit(&argc,argv);
glutInitDisplayMode(GLUT_SINGLE|GLUT_RGB);
glutInitWindowSize(500,500);
glutInitWindowPosition(0,0);
glutCreateWindow("simple");
glutDisplayFunc(myDisplay);
myInit();
glutMainLoop();
}
includes gl.h
define window properties
set OpenGL state
enter event loop
display callback
interaction initialization
12

OpenGL API
Program Framework: Window Management
 glutInit():initializes GLUT and should be
called before any other GLUT routine.
 glutInitDisplayMode():specifies the
color model (RGB or color-index color model)
 glutInitWindowSize(): specifies the size,
in pixels, of your window.
 glutInitWindowPosition():specifies the
screen location for the upper-left corner
 glutCreateWindow():creates a window
with an OpenGL context.
13

OpenGL API
Program Framework
void myDisplay(){
/* clear the display */
glClear(GL_COLOR_BUFFER_BIT);
glFlush();
}/* End of GasketDisplay */
void myInit(){
/* set colors */
glClearColor(1.0, 1.0, 1.0, 0.0);
}/* End of myInit */
14

OpenGL API
Program Framework: Color Manipulation
 glClearColor():establishes what color the
window will be cleared to.
 glClear():actually clears the window.
 glColor3f():establishes what color to use
for drawing objects.
 glFlush():ensures that the drawing
command are actually executed.
15
Remark: OpenGL is a state machine. You put it into various
states or modes that remain in effect until you change them

Primitives and Attributes
Primitive Description
 An API should contain a small set of primitives
that the hardware can be expected to support.
 The primitives should be orthogonal.
OpenGL Primitive
 Basic Library: has a small set of primitives
 GLU Library: contains a rich set of objects
derived from basic library.
16

Primitive Classes
 Geometric Primitives
• They are subject to series of geometric operations.
• They include points, line segments, curves, etc.
 Raster Primitives
• They are lack of geometric properties
• They may be array of pixels.
17

Program Form of Primitives
 The basic ones are specified by a set of vertices.
 The type specifies how OpenGL assembles the
vertices.
glBegin(type);
glVertex*(…);
glVertex*(…);
.
.
glVertex*(…);
glEnd();
18

Program Form of Primitives
 Vertex Function: glVertex*()
• * : can be as the form [nt | ntv]
• n : the number of dimensions (2, 3, 4)
• t : data type (i: integer, f: float, and d: double)
• v : the variables is a pointer.
glVertex2i (GLint x, GLint y);
glVertex3f(GLfloat x, GLfloat y, GLfloat z);
glVertex2fv(p); // int p[2] = {1.0, 1.0}
19

Points and Line Segment
 Point: GL_POINTS
 Line Segments: GL_LINES
 Polygons:
• GL_LINE_STRIP
• GL_LINE_LOOP
20

Polygon Definition
 It is described by a line loop
 It has a well-defined interior.
Polygon in Computer Graphics
 The polygon can be displayed rapidly.
 It can be used to approximate arbitrary surfaces.
21

Polygon Properties
 Simple: no two edges cross each other
 Convex: all points on the line segment
between two points inside the object.
 Flat: any three no-collinear determines a
plane where that triangle lies.
Simple Non-Simple Convexity
22

Polygon Primitives
 Polygons: GL_POLYGON
 Triangles: GL_TRIANGLES
 Quadrilaterals: GL_QUADS
 Stripes: GL_TRIANGLE_STRIP
 Fans: GL_TRIANGLE_FAN
23

Attributes
 An attribute is any property that determines
how a geometric primitive is to be rendered.
 Each geometric primitive has a set of attributes.
• Point: Color
• Line Segments: Color, Thickness, and Pattern
• Polygon: Pattern
24

Example: Sphere Approximation
 A set of polygons are used to construct an
approximation to a sphere.
• Longitude
• Latitude
25

Example: Sphere Approximation
 We use quad strips primitive to approximate
the sphere.



sin),(
coscos),(
cossin),(



z
y
x
26

void myDisplay(){
for(phi=-80; phi <= 80; phi+=20.0){
glBegin(GL_QUAD_STRIP);
phi20 = phi+20;
phir = (phi * 3.14159 / 180);
phir20 = (phi20 * 3.14159 / 180);
for(theta=-180; theta <= 180; theta += 20){
}/* End of for-loop */
glEnd();
}/* End for-loop */
glFlush();
}/* End of Sphere */
27

thetar = (theta * 3.14159 / 180);
/* compute the point coordinate */
x = sin(thetar)*cos(phir);
y = cos(thetar)*cos(phir);
z = sin(phir);
glVertex3d(x,y,z);
x = sin(thetar)*cos(phir20);
y = cos(thetar)*cos(phir20);
z = sin(phir20);
glVertex3d(x,y,z);
28

Color
 From the programmer’s view, the color is
handled through the APIs.
 There are two different approaches
• RGB-Color Model
• Index-Color Model
 Index-Color model is easier to support in
hardware implementation
• Low Memory Requirement
• Limited Available Color
29

RGB-Model
 Each color component is stored separately in
the frame buffer
 For hardware independence consideration,
color values range from 0.0 (none) to 1.0 (all),
30

RGB-Model
 Setting Operations
 Clear Color Setting
• Transparency: alpha = 0.0
• Opacity: alpha = 1.0;
glColor3f(r value, g value, b value);
glClearColor(r value, g value, b value, alpha);
31

Indexed Color
 Colors are indexed into tables of RGB values
 Example
• For k=m=8, we can choose 256 out of 16M colors.
glIndex(element);
glutSetColor(color, r value, g value, b value);
32

OpenGL Viewing
Description
 The viewing is to describe how we would like
these objects to appear.
 The concept is just as what we record in a
photograph
• Camera Position
• Focal Lens
 View Models
• Orthographic Viewing
• Two-Dimensional Viewing
33

OpenGL Viewing
Orthographic View
 It is the simple and OpenGL’s default view
 It is what we would get if the camera has an
infinitely long lens.
 All projections become parallel
34

OpenGL Viewing
 There is a reference point in the projection
plane where we can make measurements.
• View Volume
• Projection Direction
35

OpenGL Viewing
 The parameters are distances measured from
the camera
 It sees only the objects in the viewing volume.
 OpenGL Default
• Cube Volume: 2x2x2
void glOrtho(GLdouble left, GLdouble right, GLdouble bottom,
GLdouble top, GLdouble near, GLdouble far)
36

OpenGL Viewing
Two-Dimensional Viewing
 It is a special case of three-dimensional graphics
 Viewing rectangle is in the plane z=0.
void gluOrtho2D(GLdouble left, GLdouble bottom,
GLdouble right, GLdouble top);
37

OpenGL Viewing
Two-Dimensional Viewing
 It directly takes a viewing rectangle (clipping
rectangle) of our 2D world.
 The contents of viewing rectangle is
transferred to the display.
38

OpenGL Viewing
Aspect Ratio
 It is the ratio of rectangle’s width to its height.
 The independence of the object and viewing
can cause distortion effect.
void gluOrtho2D(left, bottom, right, top);
void glutInitWIndowSize(width, height)
39

OpenGL Viewing
Aspect Ratio
 The distortion effect can be avoided if clipping
rectangle and display have the same ratio.
void glViewport(Glint x, Glint y, Glsizei w, Glsizei h);
40
(x,y): lower-left corner

Sierpinski Gasket Example
Description
 It is shape of interest in areas such as fractal
geometry.
 It is an object that can be defined recursively
and randomly.
 The input is the three points that are
not collinear.
},,{ 210 vvv
41

Construction Process
 Step 1: Pick an initial point inside the triangle.
 Step 2: Select one of the three vertices
randomly.
 Step 3: Display a marker at the middle point.
 Step 4: Replace with the middle point
 Step 5: Return to Step 2.
p
p
},,{ 210 vvv
42

43
void myInit(){
/* set colors */
glClearColor(1.0, 1.0, 1.0, 0.0);
glColor3f(1.0, 0.0, 0.0);
/* set the view */
gluOrtho2D(0.0, 50.0, 0.0, 50.0);
}/* End of myInit */
int main(int argc, char** argv){
/* initialize the interaction */
glutInit(&argc, argv);
glutInitWindowSize(500, 500);
glutInitWindowPosition(0, 0);
glutCreateWindow("simple");
/* set the callback function */
glutDisplayFunc(myDisplay);
myInit();
/* start to run the program */
glutMainLoop();
}/* End of main */

Sierpinski Gasket Example: 2D
void myDisplay(){
/* declare three points */
GLfloat vertices[3][2]={{0.0,0.0},{25.0, 50.0},{50.0, 0.0}};
GLfloat p[2] = {25.0, 25.0};
glBegin(GL_POINTS);
for(int k=0; k < 5000; k++){
/* generate the random index */
int j = rand() % 3;
p[0] = (p[0] + vertices[j][0]) / 2;
p[1] = (p[1] + vertices[j][1]) / 2;
glVertex2fv(p);
glEnd();
glFlush();
44

Sierpinski Gasket Example: 2D
45

Implicit Function Plotting
What is Implicit Function
 A function equals to a specific value
 It is a contour curves that correspond to a set
of fixed values
zyxf ),( 1),( 22
 yxyxf
z
Cutoff Value
z
),( yxf
46

Marching Squares
 An algorithm finds an approximation of the
desired function from a set of samples.
 It starts from a set of samples )},({ jiij yxff 
xixxi  0
yjyyj  0
1,...2,1,0  Ni
1,...2,1,0  Mj
47

Marching Squares
 The contour curves passes through the edge
• One Vertex:
• Adjacent Vertex:
0),(  zyxf
0),(  zyxf
Solution 1 Solution 2
Principle of Occam’s Razor: if there are multiple possible
explanation of phenomenon, choose the simplest one.
48

Marching Squares
 Intersection Points
• Midpoint
• Interpolation
ba
xca
xx i



)(
Halfway Interpolation
49

Marching Squares
16 possibilities
ambiguity
Translation
Inversion
50

Marching Squares
 Ambiguity Effect
• We have no idea to prefer one over the other.
 Ambiguity Resolving
• Subdivide the cell into four smaller cells.
• Analyze these four cells until no ambiguity occurs.
51

Example
04)(),( 4222222
 bxaayxyxf
Midpoint Interpolation
49.0a
5.0b
52

53
void myDisplay(){
double data[N_X][N_Y];
double sx, sy;
glBegin(GL_POINTS);
for(int i=0; i < N_X; i++)
for(int j=0; j < N_Y; j++){
sx = MIN_X + (i * (MAX_X - MIN_X) / N_X);
sy = MIN_Y + (j * (MAX_Y - MIN_Y) / N_Y);
data[i][j] = myFunction(sx, sy);
glVertex2d(sx,sy);
glEnd();
……………
}
(sx,sy)
N_X=4
N_Y=4
(MIN_X,MIN_Y)
(MAX_X,MAX_Y)

54
void myDisplay(){
…………
/* process each cell */
for(int i=0; i < N_X; i++)
for(int j=0; j < N_Y; j++){
int c;
/* check the cell case */
c = cell(data[i][j], data[i+1][j], data[i+1][j+1], data[i][j+1]);
/* drawing lines depending on the cell case */
drawLine(c, i, j, data[i][j], data[i+1][j], data[i+1][j+1], data[i][j+1]);
glFlush();

Example: Implementation
55
double myFunction(double x, double y){
double a=0.49, b=0.5;
/* compute ovals of cassini */
return (x*x + y*y + a*a)*(x*x + y*y + a*a) - 4*a*a*x*x - b*b*b*b;
}/* End of myFunction */

Example: Implementation
56
int cell(double a, double b, double c, double d){
int n=0;
if(a > 0) n = n+1;
if(b > 0) n = n+2;
if(c > 0) n = n+4;
if(d > 0) n = n+8;
return n;
}/* End of cell */
a b
cd
0
15
1
14
2
13
3
12

57
void drawLine(int state, int i, int j, double a, double b, double c, double d){
x = MIN_X + (double) i * (MAX_X - MIN_X) / N_X;
y = MIN_Y + (double) j * (MAX_Y - MIN_Y) / N_Y;
halfx = (MAX_X - MIN_X) / (2 * N_X);
halfy = (MAX_Y - MIN_Y) / (2 * N_Y);
x1 = x2 = x;
y1 = y2 = y;
; determine (x1, y1) and (x2, y2)
……………….
glBegin(GL_LINES);
glVertex2d(x1, y1);
glVertex2d(x2, y2);
glEnd();
}/* End of drawLines */
(x,y)
2*halfy
2*halfx

58
void drawLine(int state, int i, int j, double a, double b, double c, double d){
……….
switch(state){
/* draw nothing */
case 0: case 15:
break;
case 1: case 14:
x1 = x; y1 = y + halfy;
x2 = x + halfx; y2 = y;
break;
case 2: case 13:
x1 = x + halfx; y1 = y;
x2 = x + halfx * 2; y2 = y + halfy;
break;
}/* End of switch */
…………
}/* End of drawLines */
(x1,y1)
(x2,y2)

Chapter02 graphics-programming

Recommended

More Related Content

What's hot (20)

Viewers also liked (20)

Similar to Chapter02 graphics-programming (20)

More from Mohammed Romi (12)

Recently uploaded (20)

Chapter02 graphics-programming