Computer Graphics

Chapter Three:
Geometrical Transformations

Compiled by: Shambel D.

 Chapter Contents

⦁ 2D Transformations

⦁ Matrix representation

⦁ Homogeneous Coordinates

⦁ 3D Transformations

⦁ Combination of Transformation

⦁ DefiningTransformations in OpenGL

2
Transformations
⦁ What are transformations?
⦁ changing something to something else via rules
⦁ Mathematics: mapping between values in a range set and
domain set (function/relation)
⦁ G eometric:translate,rotate,scale,shear,reflection…
⦁ Why are they important to graphics?
⦁ Moving objects on screen or in space
⦁ Specifying the camera’s view of a 3D scene
⦁ Mapping from model space to world space to camera
space to screen space
⦁ Specifying parent/child relationships

3
Transformations…
❖ In Computer graphics, Transformation is a process of
modifying and re-positioning the existing graphics.
❖ 2D Translation is a process of moving an object from
one position to another in a two dimensional plane.
Transformation Techniques are:
➢ Position (translation)
➢ Size (scaling)
➢ Orientation (rotation)
➢ Shapes (shear)
➢ Mirror(reflection)

4
2D Transformations
⦁ 2D MatrixTransformations
⦁ We can use a column vector (a 2x1 matrix) to represent a 2D point
(x,y)  x 
 
y 
⦁ Matrix addition and multiplication
⦁ Addition
⦁ nxn + nxn matrix resulting in nxn matrix
⦁ Matrix addition is commutative and associative
⦁ Consider a 2x2 matrix

 a b  +  e f  a+e b+ f 
= 
c d  g h  c + g d + h
5
2D Transformations…
⦁ Multiplication
⦁ To perform multiplication we need nxm * mxp or square matrix
⦁ Consider a 2x2 matrices
 a b  e f   ae + bg af + bh 
 = 
 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
⦁ Matrix multiplication is not commutative
⦁ For two matrices A and B,AB≠BA.
⦁ Matrix multiplication is associative.
⦁ For three matrices A,B and C,then (AB)C = A(BC)

6
2D Translation
⦁ Shifts all points by the same amount
⦁ In translation the size and shape of object cannot changed
⦁ It is rigid object transformation

xnew = xold + tx; ynew = yold + t

7
2D Translation…
⦁ Two translation parameters: the x-translation tx and the y-
translation tyto the original position (x,y) to move the point to
the new position(x’,y’).
⦁ To translate a point P to P’we add on a vector T:

 px   px   p x   t x 
P =   P  =  p x   tx 
T =  
  =  + 
p p t
 p   y  y  y
 py   y ty 
• The relationship between points
before and after the translation
is:
px = p x + t x and

py = p y + t y
8
 2D Rotation
⦁ Rotation is rigid body transformation
⦁ Rotates all points about a centre of rotation
⦁ The rotation transformation has a single parameter:
⦁ The angle of rotation,θ

⦁ To rotate a point P anti-clockwise by θo, we apply the rotation matrix R:

⦁ The relationship between points before and after the rotation is:

R =  cos − sin   px   cos −sin  px 

= 
 sin cos   py   sin cos  py 

px = px cos  − py sin  and

py = p x sin + p y cos

9
 2D Rotation…
⦁ Default rotation center:Origin (0,0)
⦁ θ> 0 :Rotate counter clockwise
⦁ θ< 0 : Rotate clockwise
⦁ Rotation of object about an arbitrary pivot point

y
P’(x’,y’)

P(x,y)
Θ
yr

xr
x
⦁ X’ = xr +(x-xr)cosΘ –(y-yr)sinΘ
⦁ Y’ =yr + (x-xr)sinΘ +(y-yr)cosΘ

10
2D Scaling
⦁ Multiplies each coordinate point by a scale factor.
⦁ Uniform scaling (Sx = Sy),shape of an object is not changed
⦁ Differential scaling (Sx ≠ Sy),shape changed

⦁ Scaling alters the size of an object

⦁ Scaling is not rigid body transformation
⦁ To scale a point P by scale factors Sx and Sy we apply the scaling matrix S:

Sx 0  px  Sx 0 

 
px 

S= =
 0 Sy  py   0 Sy  py 

px =Sx px and py =Sy py

11
Exercise
⦁ Apply the following transformations: translation tx=3, ty=2,
rotation θ =600 counter clockwise and scaling sx= 2, sy =1) to
object given below.Keep center of rotation and scaling at (2,2).

y (2,7) (7,7)

(2,2) (7,2)

x
12
Homogeneous Coordinates
⦁ We add an extra coordinate:
⦁ Homogenous parameter
⦁ 2D points are stored as three values.
⦁ The relationship between homogeneous points and Cartesian
points is:
x
o Homogeneou s point = y 

 
 
h
 x/h
oC a rtesian point =  
 y / h 
 1 
 

13
2D Homogeneous Coordinate Translation
⦁ We can express a translation transformation using a single matrix
multiplication:

  p x 
,  1 tx 
p  0
 x
    
P =  p y   
P =  p y  T =  0 1 ty 
   1  
 1     0 0 1 

 px  1 0 tx  px 
    
 py  =  0 1 ty  py 
 1   0 0 1  1 
    

•Therefore: px = px +tx py = py + t y

• Exactly the same as before.
• we used a matrix multiplication instead of an
addition.
14
2D Homogeneous Coordinate Rotation
⦁ The rotation matrix R has an extra row and extra column.
 co s − sin  0


R =  sin  co s 0
 0
 0 1 

 p x   cos − sin
 0  px 
 
 py  =  sin cos 0  p y 
   1  
1   0 0  1 
• Therefore:

px= p x cos − p y sin  py = py cos  + py sin 

•Same outcome as before.

15
2D Homogeneous Coordinate Scaling
⦁ Scaling using homogeneous coordinates:
Sx 0 0 

S =  0 Sy 0
 1 
 0 0

p
 x   x
S 0 0  p x 
 
 p y  =  0 Sy 0  p y 
   1  
 1  0 0  1 

•Therefore: px = Sx px and py = Sy py

• The same as before

16
Composite Transformations

⦁ Is a sequence of many transformation

⦁ Is done by calculating matrix addition or multiplication of

individual transformations
⦁ SuccessiveTranslations

⦁ Successive Rotations

⦁ Successive Scaling

17
Successive Translations

⦁ If two successive translation vectors (tx1, ty1) and (tx2,ty2)

are applied to a coordinate position P,the final
transformed P’ is calculated as:
⦁ P’ = P + t1
⦁ P’’ = P’ + t2
⦁ Or
⦁ P’’ = (P + t1) + t2
⦁ P’’ = P + (t1+ t2)
⦁ This implies that two successive translations are additive

18
Successive Rotations
⦁ Two successive rotations applied to a point P produce the
transformed position.
⦁ P’ = R(θ1).P
⦁ P’’ = R(θ2).P’
⦁ Or
⦁ P’’ = R(θ2).R(θ1).P
⦁ Two successive rotations are additive
⦁ P’ = R(θ1 + θ2).P

19
Successive Scaling

⦁ Two successive scaling applied to a

point P produce the transformed
position.
⦁ P’ = S1. P
⦁ P’’ = S2.P’ = S2.S1P
⦁ Two successive scaling are
multiplicative
20
Other 2D Transformations
⦁ Reflection
⦁ Shearing

Reflection
⦁ Is transformation that produce a mirror images of an object.
⦁ The mirror images for a 2D reflection is generated relative to
an axis of reflection by rotating the object about 180 degree
about the reflection axis.
⦁ Reflection about x axis (y=0)
⦁ Reflection about y axis (x=0)
⦁ Reflection about an axis perpendicular to xy to plane passes through
origin
⦁ Reflection about diagonal line (y=x)

21
Reflection...

sx = -1 sy = 1 original

sx = -1 sy = -1 sx = 1 sy = -1
Reflection about x axis (y=0)
⦁ Reflection about x axis keeps x values same, but flips the y
value
⦁ Transformation can be represented in matrix.
P=  1 0   x'
x
Rf =  =
P'
 y 0 −1  y'

P’ = Rf.P = 1 0   x =  x 

0 −1  y −y

x’ = x
y’ = -y

23
Reflection about y axis (x=0)
⦁ Reflection about y axis keep y values the same but flips the
x value
⦁ Transformation can be represented in matrix.

P=  −1 0
P'=  
x x'
Rf = 
 y 0 1  y'

P’ = Rf.P = −1 0  x = −x

 0 1  y  y
x’ = -x
y’ = y

24
Reflection about an axis perpendicular to xy to
plane passes through origin
⦁ It flips both x and y values
⦁ Transformation can be represented in matrix.

P= 
x −1 0   x' 
Rf = P'= 
 y  0 −1  y' 
 −1 0   x  − x
P’ = Rf. P =   =  
 0 −1  y − y

x’ = -x
y’ = -y

25
Reflection about diagonal line (y=x)
⦁ It changes the value of x with y value and y value with
x value
⦁ Transformation can be represented in matrix.
 x 0 1
P=  P'=  
x'
Rf =
 y 1 0  y'

0 1  x  y
    
P’ = Rf.P = 1 0  y =  x

x’ = y
y’ = x

26
Shearing
⦁ Shearing is a transformation that distort the shape of an object
⦁ Shearing will not change the area of the object
⦁ Positive shear factor shift to right while negative shear factor
shift to left.
⦁ Any 2D shearing can be done by a rotation, followed by a
scaling, and followed by a rotation
⦁ Two form of shearing
⦁ Shift coordinate x value(x-direction shear)
⦁ Shift coordinate y value(y-direction shear)

27
X-direction Shearing
⦁ x-direction shear is relative to x axis
⦁ Y coordinates are unaffected,but x coordinates are translated
linearly with y.

⦁ x-direction shear is produced matrix:

1 shx  x  x + shx* y 
 
 0 1   y  y 
⦁ That is:
⦁ x’ = x + y * shx
⦁ y’ = y
28
Y-direction Shearing
⦁ Y-direction is relative to line x=0, that is x value is not
affected.

⦁ Y-direction is generated with matrix:

 1 0  x  x 

shy 1  y  x.shy + y 
⦁ x’= x
⦁ y’= x*shy + y

29
3D Transformations
⦁ Introduce a one coordinate in addition to the x, and y coordinates,
that is z-coordinate.
1. 3D HomogeneousTranslation
• Defined by three translation parameters: tx, ty and tz.
• Given by:

1 0 0 tx   px  1 0 0 tx  px 
      
T = 
0 1 0 ty   py  = 0 1 0 ty  py 
0 1 t z   p  0

0
0 1 tz  pz 
 z   
0 0 0 1
 1  0 0 0 1  1 
    

• Therefore:

px =px +tx py =py +ty and pz = pz +tz

30
2. 3D Homogeneous Rotation
⦁ There are three possible axes: x, y,and z
⦁ The form of the rotation matrix depends on which type of
rotation we want to perform.
1 0 0 0
 🞂 Matrix, rotation about the x-axis

 0 cos  − sin  0 ⦁ x’ = x
Rx = 
0 sin  co s 0 ⦁ y’ = ycosθ –zsinθ
 
0 0 0 1 ⦁ z’ = ysinθ + zcosθ
 cos  0 sin  0
 
 0 1 0 0 🞂 Matrix , rotation about the y-axis
Ry = 
− sin  0 co s  0 ⦁ x’ = xcosθ + zsinθ
 
 0 0 0 1 ⦁ y’ = y
 cos  − sin 0 0 ⦁ z’ = zcosθ - xsinθ
 
 sin cos 0 0 ⦁ Matrix, rotation about the z-axis
Rz = 
0 0 1 0 ⦁ x’ = xcosθ - ysinθ
 
 0 0 0 1 ⦁ y’ = xsinθ + ycosθ
⦁ z’ = z
31
3. 3D Homogeneous Scaling
⦁ Are defined by three scaling parameters, Sx, Sy and Sz.
 Sx 0 0 0
 
0
S = 
0 Sy 0
0 0 Sz 0
 
 0 0 0 1

 px   S x 0 0 0  p x 
 
 py  =  0 Sy 0 0  p y 
 p   0 0 Sz 0  p z 
 z   
 1  0 0 0 1  1 

•Therefore: px =Sx px py =Sy py and pz =Sz pz

32
Defining Transformations in OpenGL
⦁ When concatenating a sequence of matrices, a graphics package may pre
multiply or post multiply.
⦁ A is premultiplied by B:B A
⦁ A is postmultiplied by B:A B
⦁ For example, if we pre multiply matrix A by matrix B,the result will be BA.

⦁ If we post multiply matrix A by matrix B the result will be AB.

•
⦁ E.g.we specify the sequenceA, B, C :
⦁ Using premultiplying, the composite matrix is C (B A)
⦁ 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

33
Defining Transformations in OpenGL…
⦁ OpenGL functions for defining transformations:
⦁ glTranslate*(tx,ty,tz):
⦁ E.g.glTranslated(320.0,260.0,0.0);
⦁ Suffix can be d or f
⦁ glRotate*(θ,vx,vy,vz):
⦁ 1st argument:rotation angle in degree
⦁ 2nd/3rd/4th arguments are a vector that defines the axis of rotation
⦁ E.g.glRotated(45.0,0.0,0.0,1.0);
⦁ glScale*(Sx,Sy,Sz):
⦁ E.g.glScalef(2.0,-3.0,1.0)

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

⦁ glMultMatrix*(elements16):
⦁ Same as glLoadMatrix*, except it multiplies the specified matrix by
the current matrix
⦁ glLoadIdentity(elements16):
⦁ Used to set the current matrix to the identity matrix

35
Defining Transformations in OpenGL…
⦁ OpenGL has an associated matrix stack.
⦁ To remember previous transformations.
⦁ There are two functions for manipulating the stack:
⦁ glPushMatrix:
⦁ Copy the current matrix to the next position down in the stack
⦁ glPopMatrix:
⦁ Destroy the current matrix, and move all other matrices on the
stack up one position.
⦁ 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);

36