1. Graphics Programming (I)姜明
北京大学数学科学学院
Based on [EA], Chapter 2.
更新时间2018年9月22日星期六4时43分5秒

2. Outline The Sierpinski Gasket Programming 2D Applications
The OpenGL API

3. The Sierpinski Gasket
The Sierpinski gasket is the intersection of all the sets in this sequence, that is, the set of points that remain after this construction is repeated infinitely often.
Sierpinski, Warclaw. "Sur une courbe dont tout point est un point de ramification," Compt. Rendus Acad. Sci. Paris 160 (1915),

4. The Sierpinski gasket is an object that can be defined recursively or randomly.
However, it has properties that are not at all random.

5. Chaos game
Consider 3 vertices P1, P2, and P3 of a triangle as shown on the left.
Starting at any point on the plane, point 0, choose a vertex randomly of the three vertices.
Draw a point on the plane half way between the current point and the vertex chosen, point 1, this now becomes the current point.
Repeat this process indefinitely, each time drawing a point halfway between the current point and a randomly chosen vertex.

6. Result of the Game

7. Real World Gaskets

8. Sierpinski Algorithm Given 3 vertices of a triangle
Starting at any point P on the plane, initial point, choose a vertex V randomly.
Draw a point M half way P and V.
M now becomes the current point, P.
Repeat this process, each time drawing a point halfway between the current point and a randomly chosen vertex.

9. Pseudo-code
We use the drawing of the Sierpinski gasket as a sample problem.
A possible form for our 1st program might be as the left.
Although our final OpenGL program will have a different organization, it will be almost that simple.
main () {
initialize_the_system ();
for (some_number_of_points)
pt = generate_a_point ();
display_the_point (pt); }
clean_up ();

10. Sierpinski carpet
Instead of removing the central third of a triangle, the central square piece is removed from a square sliced into thirds horizontally and vertically.

11. Fractal Antenna
Fractal antenna based upon the carpet replaces the usual rubbery stalk. A fractal arrangement can combine the robustness of a random array and the efficiency of a regular array with a much lower number of elements.

12. Core of the Implementation
Core: generating and displaying points.
How do we represent points in space?
Should we use a 2D, 3D, or other representation?

13. Programming 2D Applications
We often use the term vertex, rather than point.
We represent a point as [x y z] in the 3D world.
We regard 2D plane as a subspace of 3D space.
We can represent a point in the 2D plane as [x y 0], or [x y].
OpenGL allows us to use either representations.

14. OpenGL has multiple forms for many functions.
If the user wants to work in 2D with integer coordinates, the following form is appropriate
glvertex2i (GLint xi, GLint yi);
The following form specifies a vertex in 3D space
glvertex3f (GLfloat x, GLfloat y, GLfloat z);
If we use an array to store the information for the 3D vertex
GLfloat p[3];
then we can use
glvertex3fv (p).
In OpenGL, we often use basic OpenGL types, such as GLfloat and GLint.
Use of the OpenGL types allows flexibility for implementation and portability.

15. Vertices can defined a variety of geometric objects; different numbers of vertices are required depending on the object.
We can group as many vertices as we wish, using the functions glBegin and glEnd.
The argument of glBegin specifies the geometric type that we want our vertices to define.

16. Now we can implement the display for the Sierpinski gasket program.
A line segment can be defined by
glBegin (GL_LINES)
glvertex2f (x1, y1);
glvertex2f (x2, y2);
glEnd;
A pair of points can be defined by
glBegin (GL_POINTS)
glvertex2f (x1, y1);
glvertex2f (x2, y2);
glEnd;
Now we can implement the display for the Sierpinski gasket program.

17. void display( void ) {
typedef GLfloat point2[2]; /* define a point data type */
point2 vertices [3] = {{0.0,0.0}, {250.0,500.0}, {500.0,0.0}}; /* a triangle */
int i, j, k;
int rand(); /* standard random number generator */
point2 p = {75.0, 50.0}; /* an arbitrary initial point inside triangle */
glClear (GL_COLOR_BUFFER_BIT); /*clear the window */
/* compute and plots 5000 new points */
for ( k=0; k<5000; k++)
j = rand () % 3; /* pick a vertex at random */
/* compute point halfway between selected vertex and old point */
p[0] = (p[0] + vertices[j][0]) / 2.0;
p[1] = (p[1] + vertices[j][1]) / 2.0;
/* plot new point */
glBegin (GL_POINTS);
glVertex2fv (p);
glEnd(); }
glFlush(); /* clear buffers */

18. The call to glFlush ensures that points are rendered to the screen as soon as possible.
If we leave it out, the program should work correctly, but you may notice a delay in a busy or networked environment.

19. Other Issues In what colors are we drawing?
Where does our image appear on the screen?
How large will the image be?
How do we create an area of the screen – a window – for our image?
How much of the 2D plane will appear on the screen?
How long will the image remain on the screen?

20. Coordinate Systems
How to interpret the values of x, y and z in the specification of vertices?
In what units are they?
Where is the origin?
Answer: it is up to you!

21. Originally, graphics systems required the specification directly in units of the display device.
Many problems with this method.
The most critical one: using the distance on the computer screen to describe natural objects.
The advent of device-independent graphics freed programmers from worrying about the details of input and output devices.
The user’s coordinate system became known as the world coordinate system or the application or problem coordinate system.
We can use any (float) numbers that fit our application.

22. Units on the display device were first called physical-device coordinantes or just device coordinates.
For raster devices, such as most CRT displays, we use the term raster coordinates or screen coordinates.
Screen coordinates are always expressed in some integer type, because pixels are inherently discrete and we can address them using integers.

23. At some point, the values in world coordinates must be mapped into device coordinates.
The graphics system is responsible for this task and the mapping is performed automatically as part of the rendering process.
The user only needs to specify only a few parameters – the area of the world to see and the size of the display – to define this mapping.

24. The OpenGL API Graphics Functions The Graphics State Machines
The OpenGL Interface

25. We use OpenGL API for those purposes.
We want to gain control
how our objects appear on the display
the flow of the program
interaction with the window system
We use OpenGL API for those purposes.

26. Graphics Functions
Our basic model of a graphics package is a black box.
We can take the simplified view of inputs as function call and outputs as primitives displayed on our CRT screen.
We describe an API through the functions in its library. It is helpful to divide them into seven groups by their functionality.

27. The primitive functions define the low-level objects or atomic entities that can be displayed.
Attribute functions govern the way that a primitive appears on the display.
Viewing functions allow us to specify various views.
Transformation functions allow us to carry out transformations of objects.
Input functions allow us to deal with diverse forms of input.
The control functions enable us to communicate with the windows system and/or operating system.
Inquiry functions enable us to use information within API, including camera parameters or values in the frame buffer.

28. The Graphics State Machines
We can think of the entire graphics system as a state machine, a black box that contains a finite state machine.
It has inputs from the application program that may change the state of the machine or cause the machine to produce a visible output.
From the perspective of the API, graphics functions are of two types:
those that define primitives that flow through a pipeline inside the state machine: e.g., glVertex, etc.
those that change the state of the machine: the others in OpenGL.

29. In OpenGL, most parameters are persistent; their values remains unchanged until we explicitly change them through functions that change the state.
E.g., once we set a color, that color remains the present color until it is changed through a color-altering function.
There can be annoying consequences if we neglect to make state changes when needed or lose track of the state.

30. The OpenGL Interface
High performance, window independent 3D graphics API.
Designed by SGI, 1982.
No commands for windowing tasks and user interaction.
Portable, device independent.
C library of about 350 functions.
All function names begin with gl.
All constant names begin with GL.
There a few related libraries that we also use.

31. GLU: graphics utility library; use only GL functions; create common objects; available in all OpenGL implementation.
GLUT: GL Utility Toolkit; minimal functionality in windowing systems.
GLX for X Window;
WGL for Microsoft Windows.

32. OpenGL makes heavy use of macros to increase code readability and to avoid the use of magic numbers.
Strings such as GL_LINES and GL_POINTS are defined in header files.
Using
#include <GL/glut.h> or
#include <glut.h>
is sufficient to read in glut.h, gl.h and glu.h.

33. OpenGL命名规范 函数名以gl, glu, glut开始，其中每一成份的首写字母大写，如glPolygonMode ()；
常数名以GL, GLU, GLUT开始，中间以下划线＿分离，如GLUT＿RGBA.

34. [gl,glu,glut]<Command>[234][sifd][v](args)
函数名的一般结构
[gl,glu,glut]<Command>[234][sifd][v](args)
[234]表示参数个数
[sifd]表示参数类型
[v]使用指针参数

35. OpenGL Data Type Suffix Number of bits C- type OpenGL-type b 8 char
GLbyte s 16
short int
GLshort i 32
long int
GLint f d 64
float
double
Glfloat
GLdouble ub
unsigned char
GLubyte us
unsigned short
GLushort ui
unsigned long
GLuint

36. The Gasket Program The C file is here. The Program is here.
To compile it, issue
cl gasket.c
in a command console.

37. Implementation #include <GL/glut.h>
void main(int argc, char** argv) {
/* Standard GLUT initialization */
glutInit (&argc,argv);
glutInitDisplayMode (GLUT_SINGLE | GLUT_RGB); /* default */
glutInitWindowSize (500,500); /* 500 x 500 pixel window */
glutInitWindowPosition (0,0); /* place window top left corner */
glutCreateWindow ("Sierpinski Gasket"); /* window title */
glutDisplayFunc(display); /* display callback invoked when window opened */
myinit(); /* set attributes (state variables) */
glutMainLoop(); /* enter event loop */ }

38. void myinit(void) {
/* attributes */
glClearColor(1.0, 1.0, 1.0, 1.0); /* white background */
glColor3f(1.0, 0.0, 0.0); /* draw in red */
/* set up viewing, camera */
/* 500 x 500 clipping window with lower left coner at
(0.0,0.0), world coordinates */
glMatrixMode(GL_PROJECTION);
glLoadIdentity();
gluOrtho2D(0.0, 500.0, 0.0, 500.0);
glMatrixMode(GL_MODELVIEW); }

39. Window Management Five routines necessary for initializing a window
glutInit (&argc,argv);
glutInitDisplayMode (GLUT_SINGLE | GLUT_RGB); /* default */
glutInitWindowSize (500,500); /* 500 x 500 pixel window */
glutInitWindowPosition (0,0); /* place window top left on display */
glutCreateWindow ("Sierpinski Gasket"); /* window title */
Five routines necessary for initializing a window