Computer Graphics (CoSc3121)

COMPUTER SCIENCE DEPARTMENT

DEBARK U N I V E R S I T Y

CHAPTER THREE-COORDINATE
TRANSFORMATIONS
 Computer Graphics Chapter Three
2

 2D/3D Transformation

 Rotations, Translations, Scaling

 Homogeneous Coordinates
 3
Transformations
 Transformation means changing some
graphics into something else.
Transformations

Defining  To reposition the graphics on the screen

Transformations in and change their size or orientation.
OpenGL
 4
2D Transformation

Transformations
 2x2 matrices
2D Transformations

a b e f  aebg af bh

Defining
Transformations in
     
OpenGL c d  g h  ce dg cf  dh
For example:

3 11 2 3112 3210 1 6

      
2 1 2 0 2112 2210 4 4
 5
2D Transformation…
 Matrix multiplication is not commutative
Transformations
 For two matrices A and B, AB≠BA.

2D Transformations

Defining
Transformations in  Matrix multiplication is associative.
OpenGL
 For three matrices A, B and C, then
(AB)C = A(BC).
 6
2D Translation
• Shifts all points by the same amount.
Transformations
• Two translation parameters: the x-translation tx
and the y-translation ty must be defined.
2D Transformations
• To translate a point P to P’ we add on a vector T:
 px   p    t 
 px   px   t x 
2-D Translation P    P    x  T   x   p    p    t 
 p  t   y   y   y 
 py  ,  y ,  y ,
2-D Rotation • The relationship between points before and after
the translation is:
2-D Scaling

Defining
p x  p x  t x and
Transformations in
OpenGL
py  py  t y
 7
2D Rotation
• Rotates all points about a centre of rotation.
Transformations
• The rotation transformation has a single parameter:
o The angle of rotation, θ.
2D Transformations
• To rotate a point P anti-clockwise by θo, we apply the
rotation matrix R:
2-D Translation  cos  sin    px   cos  sin  px 
R         
cos   p  sin cos  p 
 sin   y   y 
2-D Rotation • The relationship between points before and after the
rotation is:
2-D Scaling

px  px cos  py sin and

Defining
Transformations in
py  p y cos   p y sin 
OpenGL
 8
2D Scaling
Transformations
• Multiplies each coordinate of each point by a scale
factor.
2D Transformations
o Uniform scaling
o Differential scaling
2-D Translation • To scale a point P by scale factors Sx and Sy we
apply the scaling matrix S:
2-D Rotation
Sx 0  px  Sx 0  px 
2-D Scaling S 

    
 p   0 S  p 
 0 Sy   y  y  y 
Defining
Transformations in
OpenGL
px Sx px and py  Sy py
 9

Homogeneous Coordinates
Transformations

2D Transformations We add an extra coordinate:

oHomogenous parameter
Homogeneous • 2-D points are stored as three values.
Coordinates
• The relationship between homogeneous
Defining points and Cartesian points is:
Transformations in x
OpenGL o Homogeneous point =  
 y
h
 
 x/h
oCartesian point =  y / h 
 
 1 
 
 10
2D Homogeneous Coordinate Translation
Transformations We can express a translation transformation using
a single matrix multiplication:
2D Transformations
 p x   p x   1 0 tx 
     
P   p y , P    p y  , T   0 1 ty 
Homogeneous 
 1 
  1   0 0 1 
  
Coordinates

2-D Homogeneous  px  1 0 tx  px 

Translation     
 py    0 1 t y  py 
2-D Homogeneous  1   0 0 1  1 
Rotation
    

2-D Homogeneous • Therefore: px  px  tx py  py  t y

Scaling
Defining
Transformations in • Exactly the same as before.
OpenGL • we used a matrix multiplication instead of an addition.
 11
2D Homogeneous Coordinate Rotation
Transformations
 The rotation matrix R has an extra row and extra
column.  cos   sin  0
2D Transformations  
R   sin  cos  0
 0 0 1 
Homogeneous 
Coordinates
 px   cos   sin  0  px 
2-D Homogeneous     
Translation  py    sin  cos  0  p y 
1  0 0 1  1 
  
2-D Homogeneous
Rotation • Therefore:
2-D Homogeneous p x  p x cos   p y sin  and py  py cos  py sin
Scaling
Defining
Transformations in •Same outcome as before.
OpenGL
 12
2D Homogeneous Coordinate Scaling
Transformations
• Scalings using homogeneous coordinates:
2D Transformations Sx 0 0
 
S   0 Sy 0
Homogeneous  0 0 1 

Coordinates
 p x   S x 0 0  p x 
2-D Homogeneous     
Translation  p y    0 Sy 0  p y 
 1  0 0 1   1 
2-D Homogeneous   
Rotation

2-D Homogeneous •Therefore: px  Sx px and py  Sy py

Scaling
Defining • The same as before
Transformations in
OpenGL
 13
3D Transformations
Transformations
Introduce a fourth coordinate in addition
2D Transformations
to the x, y and z-coordinates.
Homogeneous
Coordinates

3D Transformations

Defining
Transformations in
OpenGL
 14

3D Homogeneous Translation
Transformations
Defined by three translation parameters: tx, ty and tz.
2D Transformations Given by:

1 0 0 t   px  1 0 0 t  px 
Homogeneous       
Coordinates 0 1 0 ty   py  0 1 0 ty  py 
T   p   0
0 0 1 tz  0 1 tz  pz 
3D Transformations    z   
0 0 0 1   1  0 0 0 1  1 
   
3D Homogeneous
Translation

3D Homogeneous • Therefore:
Rotation
3D Homogeneous
px  px tx py py ty and pz  pz tz
Scaling
Defining
Transformations in
OpenGL
 15
3D Homogeneous Rotation
Transformations There are three possible axes: x, y, and z
The form of the rotation matrix depends on which
2D Transformations type of rotation we want to perform.
1 0 0 0
Homogeneous  
Coordinates  0 cos   sin  0
Rx  
0 sin  cos  0
 
3D Transformations 0 0 0 1 

 cos  0 sin  0
3D Homogeneous  
Translation  0 1 0 0
Ry  
 sin  0 cos  0
3D Homogeneous  
 0 0 0 1 
Rotation 
3D Homogeneous  cos   sin  0 0
Scaling  
 sin  cos  0 0
Defining Rz  
0 0 1 0
Transformations in  
 0 0 0 1 
OpenGL 
 16
3D Homogeneous Scaling
Transformations • Are defined by three scaling parameters, Sx, Sy and
S z.
2D Transformations Sx 0 0 0
 
 0 Sy 0 0
Homogeneous S  
0 0 Sz 0
 
Coordinates  0 0 0 1 


3D Transformations
 p x   S x 0 0 0  p x 
    
3D Homogeneous  py   0 Sy 0 0  p y 
Translation  p    0 0 Sz 0  p z 
 z   
 1  0 0 0 1  1 
3D Homogeneous   
Rotation
3D Homogeneous • Therefore: px  Sx px py  Sy py and pz Sz pz
Scaling
Defining
Transformations in
OpenGL
 17

Defining Transformations in OpenGL

• When concatenating a sequence of matrices, a
Transformations graphics package may pre multiply or post multiply.

Defining o A is premultiplied by B: B A
Transformations in o A is postmultiplied by B: A B
OpenGL
E.g. we specify the sequence A, B, C:
o Using premultiplying, the composite matrix is C (B A)
o Using postmultiplying, the composite matrix is (A B) C

• Almost all transformations in OpenGL uses post

Multiply
• OpenGL always uses a right-handed coordinate
system
 18
Defining Transformations in OpenGL…
• OpenGL functions for defining transformations:
Transformations o glTranslate*(tx,ty,tz):
o E.g. glTranslated(320.0, 260.0, 0.0);
Defining
Transformations in o Suffix can be d or f
OpenGL
o glRotate*(θ,vx,vy,vz):
o1st argument: rotation angle in degree
o2nd/3rd/4th arguments are a vector that
defines the axis of rotation
oE.g. glRotated(45.0, 0.0, 0.0, 1.0);
o glScale*(Sx,Sy,Sz):
o E.g. glScalef(2.0, -3.0, 1.0)
 19

Defining Transformations in OpenGL…

o glLoadMatrix*(elements16):
Transformations o Argument is a one-dimensional array of 16
matrix coefficients
Defining o 4x4 matrix for homogeneous coordinates
Transformations in o Column-major order (i.e. coefficients of
OpenGL first column, then coefficients of second
column, etc.)

oglMultMatrix*(elements16):
oSame as glLoadMatrix*, except it multiplies
the specified matrix by the current matrix
oglLoadIdentity(elements16):

oUsed to set the current matrix to the

identity matrix
 20

Defining Transformations in OpenGL…

• OpenGL has an associated matrix stack.
Transformations • To remember previous transformations.
• There are two functions for manipulating the stack:
Defining o glPushMatrix:
Transformations in o Copy the current matrix to the next position
OpenGL down in the stack
o glPopMatrix:
o Destroy the current matrix, and move all
other matrices on the stack up one position.
o Example:

glLoadIdentity();
glTranslated(2.0, 2.0, 0.0);
glRotated(90.0, 0.0, 0.0, 1.0);
glTranslated(-2.0, -2.0, 0.0);
Any Question?

21
 22
Chapter 3 part Two: Attributes of
State Variables Graphics Primitives

Color Attributes Reading Assignment

Point and Line •Each Group should prepare 20 minutes

Attributes
presentation
•I will ask question
Fill Area Attribute
• Each group member should have a task
to answer the question
Character
Attributes •For next week (may 3 or 4)
•It will be out of ___ marks
Aliasing

Antialiasing