1. Coordinate Systems and Transforming the Coordinates
from one to another
Introduction to Computer Graphics David J.Eck
Hearn, Baker, Carithers Computer Graphics with Open GL,
Huamin Wang Lecture Notes

2. Transformation sequence from modeling coordinates to device coordinates
1.step:Object shapes can be individually defined in modeling-coordinate reference systems.
2.step: The shapes are positioned within the world-coordinate scene.
3.step:World-coordinate specifications are transformed through the viewing pipeline to viewing and projection coordinates and then to normalized coordinates.
4.step: Viewing coordinates translates to normalized coordinate
5. step: individual device drivers transfer the normalized-coordinate representation of the scene to the output devices for display.

3. Model Coordinate System (Object Coordinates)
2D Regular Cartesian Grid
Origin (0,0) at lower left
corner (OpenGL convention)
Horizontal axis – x
Vertical axis – y
Pixels are defined at the grid
intersections
Model coordinate system is defined relative to the display window origin (OpenGL: the lower left corner of the window) y x
(0,0)
(2,2)

4. A character defined as a rectangular grid of pixel positions.
A character defined as an outline shape.
A character defined as a rectangular grid of pixel positions.

5. World Coordinate System
glBegin(GL_LINE_STRIP);
for (x = -4.0; x <4.0; x+=0.1){
Glfloat y = sin(3.14 * x) / (3.14 * x);
glVertex2f (x,y); }
glEnd();
plot a sinc function:
sinc(x) = sin(PI*x)/PI*x
x =
The unnormalized sinc function is defined as sinc(x) = sinx/ x
This function is used in signal processing, a field which includes sound recording and radio transmission

6. Line segments in OpenGL using a list of five endpoint coordinates (a) An unconnected set of lines generated with the primitive line constant GL_LINES (b) A polyline generated with GL_LINE_STRIP. (c) A closed polyline generated with GL_LINE_LOOP.

7. 400 by 300 display window at position (50, 100) relative to the top-left corner of the video display

8. Display window and line segment produced by the example program

9. World Coordinate System
Model (Object) coordinate system is not easy to use.
Therefore a new coordinate system must be defined
Model Coordinate System
10 feet
20 feet

10. Define a World Window

11. World Window
World window – a rectangular region in the world that is to be displayed
Define by
W_L, W_R, W_B, W_T
W_B
W_T
W_L
W_R
OpenGL command:
gluOrtho2D(left, right, bottom, top)

12. Viewport
The rectangular region in the screen for displaying the graphical objects defined in the world window
Defined in the screen coordinate system
V_L
V_R
V_B
V_T
glViewport(int left, int bottom,
int (right-left),int (top-bottom));
call this function before drawing
(glBegin() and glEnd() )

13. Viewing and Modeling
In a typical example, we have a rectangle made of pixels, with its natural pixel coordinates, where an image will be displayed.
This rectangle will be called the viewport.
We also have a set of geometric objects that are defined in a possibly different coordinate system
These objects make up the "scene" or "world" that we want to view,
The coordinates that we use to define the scene are called world coordinates.

14. Viewing and Modeling For 2D graphics, the world lies in a plane.
It's not possible to show a picture of the entire infinite plane.
We need to pick some rectangular area in the plane to display in the image.
We call the rectangular area the window, or view window.
A coordinate transform is used to map the window to the viewport

15. Where the pixels are located in 2D?
A raster image is indexed by the pair (i, j)
i indicates the column(widht) and j indicates row (height) of the pixel
Pixel is counted from the bottom left.
If an image has nx columns and ny rows of pixels, the bottom-left pixel is (0, 0) and the top-right is pixel (nx − 1, ny − 1).
We need 2D real screen coordinates to specify pixel positions.
We will place the pixels’ sample points at integer coordinates, as shown by the 4 × 3 screen i
Coordinates of a four pixel × three pixel screen
in some APIs the y-axis will point downward

16. Where the pixels are located in 2D?
In some APIs, and many file formats, the rows of an image are organized top-to-bottom, so that (0, 0) is at the top left.
the rows in analog television transmission started from the top.
The rectangular domain of the image has width nx and height ny and is centered on this grid,
it extends half a pixel beyond the last sample point on each side. So the rectangular domain of a nx × ny image is
R=[−0.5,nx−0.5]×[−0.5,ny−0.5] I(x,y):R→V

17. Viewing and Modeling T represents the coordinate transformation
T is a function
This function takes world coordinates (x,y) in some window and maps them to pixel coordinates T(x,y) in the viewport.
T(x,y) = ( 800*(x+4)/8, 600*(3-y)/6 )
The rectangle with corners is at (-1,2) and (3,-1) in the window.
When this rectangle is displayed in the viewport, it is displayed as the rectangle with corners T(-1,2) and T(3,-1).
In the example, T(-1,2) = (300,100) and T(3,-1) = (700,400)

18. The coordinates that we use to define an object are called object coordinates for the object. When we want to place the object into a scene, we need to transform the object coordinates into the world coordinate system that we are using for the scene. The transformation that we need is called a modeling transformation. An object defined in its own object coordinate system and then mapped by three different modeling transformations into the world coordinate system:

19. In order to view the scene, there will be another transformation that maps the object from a view window in world coordinates into the viewport.
The choice of a view window tells which part of the scene is shown in the image.
Moving, resizing, or even rotating the window will give a different view of the scene.
Suppose we make several images of the same car:

20. Viewport Transformation
When we modify the view window, we change the coordinate system that is applied to the viewport.
This is the same as leaving that coordinate system in place and moving the objects in the scene instead.
To get the same effect in the final image, you have to apply the opposite transformation to the objects
Moving the window to the left is equivalent to moving the objects to the right
Finally:
There is no essential distinction between transforming the window and transforming the object.

21. Modeling and Coordinate Transforms
We specify a geometric primitive by giving coordinates in some natural coordinate system.
The computer applies a sequence of transformations to those coordinates to produce the coordinates that are used to actually draw the primitive in the image.
Some of those transformations are modeling transforms and some are as coordinate transforms,
It's all the same to the computer

22. Drawing in world coordinate system in 2D
We need two tasks to be done
We define a rectangular world window (call an OpenGL function)
We define a viewport (call an OpenGL function)
Perform window to viewport mapping (OpenGL internals will do this for us)

23. An OpenGL example DrawQuad() {glViewport(0,0,300,200);
glMatrixMode(GL_PROJECTION);
glLoadIndentity();
glOrtho2D(-1,1,-1,1);
glBegin(GL_QUADS);
glColor3f(1,1,0);
glVertex2i(-0.5,-0.5);
glVertex2i(+0.5,-0.5);
glVertex2i(+0.5,+0.5);
glVertex2i(-0.5,+0.5);
glEnd(); }
(300,200)
(0,0)
viewport

26. Mapping from World Window to Viewport Coordinates
The objects in the world window will be drawn onto the viewport
viewport
(x,y)
World window
(Sx, Sy)

27. Mapping from World Window to Viewport Coordinates
How can we calculate (sx, sy) from (x,y) in the screen coordinate system ?
(x,y)
(Sx, Sy)
world window (W_L, W_R, W_B, W_T)
viewport (V_L, V_R, V_B, V_T)

28. Mapping from World Window to Viewport Coordinates
gluortho2D(Left, Right, Bottom, Top);
Before calling gluOrtho2D(), we need to have the following two lines of code

29. Mapping from World Window into
Viewport Coordinates
The mapping should be proportional
(x,y)
(sx,sy)
(x – W_L) / (W_R – W_L) = (sx – V_L) / (V_R – V_L)
(y - W_B) / (W_T – W_B) = (sy – V_B) / (V_T – V_B)
sx = x * (V_R-V_L)/(W_R-W_L) - W_L * (V_R – V_L)/(W_R-W_L) + V_L
sy = y * (V_T-V_B)/(W_T-W_B) – W_B * (V_T-V_B)/(W_T-W_B) + V_B

30. Some Questions and Answers in OpenGL
How to set up an appropriate world window automatically?
How to zoom in the picture?
How to set up an appropriate viewport, so that the picture is not going to be distorted?
OpenGL will do it for ıs
We just need to define the viewport with glViewport()
and a world window with gluOrtho2D()
We can define a world window as follow: we can define viewport as:
glMatrixMode(GL_PROJECTION); glViewport(0,0,300,200)
glLoadIdentity();
gluOrtho2D(Left, Right, Bottom, Top);

31. World Window set up
The basic idea is to see all the objects in the world
This can just be initial view, and the user can change it later
min X
max X
min Y
max Y

32. Zoom into the picture Shrink the world window
call gluOrtho2D() with a new range
Viewport
If world window and display window have different aspect ratios, distortion happens
R = W / H aspect ratio

33. Comparing the aspect ratiosW
World window
Aspect Ratio = R
Display window
Aspect Ratio = W / H
R > W / H

34. Matching the Aspect Ratios
W/R W
World window
Aspect Ratio = R
Display window
Aspect Ratio = W / H
R > W / H
glViewport(0, 0, W, W/R)

35. Comparing the aspect ratiosW
World window
Aspect Ratio = R
Display window
Aspect Ratio = W / H
R < W / H

36. Matching the aspect ratios
H * R H W
World window
Aspect Ratio = R
Display window
Aspect Ratio = W / H
R < W / H
glViewport(0, 0, H*R, H)

37. When to call the function glViewport() ?
First: At the initialization phase of the OpenGL
If the function is not used, it is accepted default same as the window size
Second: When the user resizes the display window

38. Resize (Reshape) window
void winReshapeFcn (GLint newWidth, GLint newHeight) {
glMatrixMode (GL_PROJECTION);
glLoadIdentity ( );
gluOrtho2D (xwcMin, xwcMax, ywcMin, ywcMax);
glClear (GL_COLOR_BUFFER_BIT); }
void main (int argc, char ** argv)
glutInit (&argc, argv);
glutInitDisplayMode (GLUT_SINGLE | GLUT_RGB);
glutInitWindowPosition (50, 50);
glutInitWindowSize (winWidth, winHeight);
glutCreateWindow ("Geometric Transformation Sequence");
init ( );
glutDisplayFunc (displayFcn);
glutReshapeFunc (winReshapeFcn);
glutMainLoop ( );
Whenever the size of display window is changed, the new width and height are passes to its
arguments.
This callback function is used to change the parameters of viewport, so that original aspect ration of scene is maintained.

39. GLUT (OpenGL Utility Toolkit)
We can use GLUT to interface with different window systems for fast prototyping
GLUT is a window independent API
Programs written using OpenGL and GLUT can be ported to Xwindows, MS windows, and Macintosh with no effort
GLUT Basics
Configure OpenGL frame buffer
Create a drawing area (window)
Register input callback functions
Render,Resize, input: keyboard, mouse, etc
Enter event processing loop

41. Callback Functions Most of window-based programs are event-driven
We do nothing until an event happens, then execute some pre-defined functions
Events are key press, mouse button press and release, window resize, etc.
glutKeyboardFunc() : register the callback that will be called when a key is pressed
glutMouseFunc() : register the callback that will be called when a mouse button is pressed
glutMotionFunc() : register the callback that will be called when the mouse is in motion while a butonis pressed
glutIdleFunc(): register the callback that will be called when nothing is going on (no event)