2 transformation computer graphics

1. SBE 306B: Computer Systems III
Computer Graphics
Transformation
Dr. Ayman Eldeib
Systems & Biomedical
Engineering Department
Spring 2019

2. Computer Graphics Transformation
Transformation
 Transformation is a fundamental corner stone of computer
graphics and is a central to OpenGL as well as most other
graphics systems.(2D and 3D Transformation)
 Given an object, transformation is to change the object’s
Position (translation)
Size (scaling)
Orientation (rotation)
Shapes (shear)

3. Computer Graphics Transformation
Translations
Translate individual
vertices
 We can translate or move points to a new position by
adding offsets to their coordinates

4. Computer Graphics Transformation
 We can translate or move points to a new position by
adding offsets to their coordinates
 Translate individual vertices
y
x
tyy
txx




















y
x
t
t
y
x
y
x
'
'































1100
10
01
1
'
'
y
x
t
t
y
x
y
x
2D
Cont.
Translations

5. Computer Graphics Transformation
Homogeneous Coordinates
 Homogeneous coordinates: representing
coordinates in 2 dimensions with a 3-vector and
coordinates in 3 dimensions with a 4-vector
(Note that typically w = 1 in object coordinates)













w
z
y
x
zyx ),,(

6. Computer Graphics Transformation
 Homogeneous coordinates seem unintuitive, but
they make graphics operations much easier
 Our transformation matrices are now 4x4 for 3D
1 0 0
0 1 0
0 0 1
0 0 0 1
x
y
z
T
T
T
 
 
 
 
 
 
T
Translation matrix
P'P T
Homogeneous Coordinates

7. Computer Graphics Transformation
 We can translate or move points to a new position by
adding offsets to their coordinates
 Translate individual vertices





































11000
100
010
001
1
'
'
'
z
y
x
t
t
t
z
y
x
z
y
x
3D
z
y
x
tzz
tyy
txx



'
































z
y
x
t
t
t
z
y
x
z
y
x
'
'
'
P'P T
Cont.
Translations

8. Computer Graphics Transformation
Translate individual
vertices
 We can translate or move points to a new position by
adding offsets to their coordinates
 To transform an object multiply each vertex by the same
matrix
 A square translation can be done as follows:
]PPPP[]'P'P'P'[P 43214321 T
Cont.
Translations

9. Computer Graphics Transformation
Scaling
 Scaling a coordinate means multiplying each of its
components by a scalar
 Uniform scaling means this scalar is the same for all
components
 2

10. Computer Graphics Transformation
 Scaling a coordinate means multiplying each of its
components by a scalar
 2
ysy
xsx
y
x


Cont.
Scaling

11. Computer Graphics Transformation
 Scaling a coordinate means multiplying each of its
components by a scalar
ysy
xsx
y
x






















y
x
s
s
y
x
y
x
0
0

































1100
00
00
1
y
x
s
s
y
x
y
x
2D
3D
P
11000
000
000
000
1
P' S
z
y
x
s
s
s
z
y
x
z
y
x










































Scaling matrix
Cont.
Scaling

12. Computer Graphics Transformation
 Scaling a coordinate means multiplying each of its
components by a scalar
 Non-uniform scaling: different scalars per component
X  2,
Y  0.5
Cont.
Scaling

13. Computer Graphics Transformation
Fixed Point Scaling

14. Computer Graphics Transformation
Fixed Point Scaling Cont.

15. Computer Graphics Transformation

































1100
00
00
1
y
x
s
s
y
x
y
x
Fixed Point Scaling Cont.

16. Computer Graphics Transformation

































1100
00
00
1
y
x
s
s
y
x
y
x
Step 1:
Translate to the origin
Fixed Point Scaling Cont.

17. Computer Graphics Transformation

































1100
00
00
1
y
x
s
s
y
x
y
x
Step 2:
Scale the object
Fixed Point Scaling Cont.

18. Computer Graphics Transformation

































1100
00
00
1
y
x
s
s
y
x
y
x
Step 3:
Translate the object back
Fixed Point Scaling Cont.

19. Computer Graphics Transformation
1. Translate to origin
2. Scale
3. Translate back
  pTSTp 1

Fixed Point Scaling Cont.

20. Computer Graphics Transformation
Rotation

(x, y)
(x’, y’) x’ = x cos() - y sin()
y’ = x sin() + y cos()
   
    



















y
x
y
x
cossin
sincos
'
'
2D

21. Computer Graphics Transformation
 3-D is more complicated
 Need to specify an axis of rotation
 There are four ways to specify a 3D rotation
 Simple cases: rotation about X, Y, Z axes
 3-D rotation matrix look like
Rotation about the X-axis

































z
y
x
z
y
x
100
0)cos()sin(
0)sin()cos(
'
'
'
Rotation about the Y-axis Rotation about the Z-axis

































z
y
x
z
y
x
)cos(0)sin(
010
)sin(0)cos(
'
'
'
































z
y
x
z
y
x
)cos()sin(0
)sin()cos(0
001
'
'
'
Rotation Cont.
3D

22. Computer Graphics Transformation
Rotation about the X-axis Rotation about the Y-axis Rotation about the Z-axis


























11000
0cossin0
0sincos0
0001
)(
z
y
x
Rx 




























11000
0cos0sin
0010
0sin0cos
)(
z
y
x
Ry 

























 

11000
0100
00cossin
00sincos
)(
z
y
x
Rz



 3-D is more complicated
 Need to specify an axis of rotation
 There are four ways to specify a 3D rotation
 Simple cases: rotation about X, Y, Z axes
 3-D rotation matrix look like
Rotation Cont.
3D

23. Computer Graphics Transformation
 3-D is more complicated
 Need to specify an axis of rotation
 There are four ways to specify a 3D
rotation
 3D rotations – axis angle representation
 3-D rotation matrix look like
y
z
x
a

Rotate a point about an arbitrary axis a = (x,y,z) going through the origin
Note: the axis a should be of unit length
2
2
2
1 0 0 0
( , ) cos 0 1 0 (1 cos ) sin 0
0 0 1 0
x xy xz z y
R a xy y yz z x
xz yz z y x
   
     
    
        
         
Rotation Cont.
3D

24. Computer Graphics Transformation
Fixed Point Rotating
1. Translate to origin
2. Rotate
3. Translate back
 pTRTp 1


25. Computer Graphics Transformation
Matrix Composition
 Matrix multiplication does not commute
 Transformation products may not be
commutative
BAAB 

26. Computer Graphics Transformation
Shearing
 Y coordinates are unaffected, but x coordinates are
translated linearly with y, i.e.
 y’ = y
 x’ = x + y * h































1100
010
01
1
'
'
y
xh
y
x

27. Computer Graphics Transformation
 X coordinates are unaffected, but y coordinates are
translated linearly with y, i.e.
 x’ = x
 y’ = y + x * g































1100
01
001
1
'
'
y
x
gy
x
Cont.
Shearing

28. Computer Graphics Transformation
Inverse Transformations
Translate Scale
Shear Rotate

29. Computer Graphics Transformation
OpenGL: Modeling Transformations
 OpenGL provides several commands for performing modeling transforms:
 glTranslate{fd}(x, y, z)
• Creates a matrix T that transforms an object by translating (moving)
it by the specified x, y, and z values
 glRotate{fd}(angle, x, y, z)
• Creates a matrix R that transforms an object by rotating it
counterclockwise angle degrees about the vector {x, y, z}
 glScale{fd}(x, y, z)
• Creates a matrix S that scales an object by the specified factors in
the x, y, and z directions

30. Computer Graphics Transformation
OpenGL: Matrix Manipulation
 Each of these post multiplies the current matrix
 E.g., if current matrix is C, then C=CS
 The current matrix is either the modelview matrix or the
projection matrix (also a texture matrix, won’t discuss for now)
 Set these with glMatrixMode(), e.g.:
glMatrixMode(GL_MODELVIEW);
glMatrixMode(GL_PROJECTION);
– WARNING: common mistake ahead!
• Be sure that you are in GL_MODELVIEW mode before making
modeling or viewing calls!
• Ugly mistake because it can appear to work, at least for a while…

31. Computer Graphics Transformation
 More matrix manipulation calls
 To replace the current matrix with an identity matrix:
glLoadIdentity()
 Postmultiply the current matrix with an arbitrary matrix:
glMultMatrix{fd}(float/double m[16])
 Copy the current matrix and push it onto a stack:
glPushMatrix()
 Discard the current matrix and replace it with whatever’s on top
of the stack:
glPopMatrix()
 Note that there are matrix stacks for both modelview and
projection modes
Cont.
OpenGL: Matrix Manipulation

32. Computer Graphics Transformation
glMatrixMode (GL_MODELVIEW)
glLoadIdentity ( );
glMultMatrtixf (m2);
glMultMatrixf (m1);
12 MMM 
OpenGL uses post multiplication when multiplying
matrices thus, transformations are applied in the inverse
order. The last one specified is the first one applied.
Cont.
OpenGL: Matrix Manipulation

33. Computer Graphics Transformation
glMatrixMode (GL_MODELVIEW)
glLoadIdentity ( );
glRotationf (theta,0,0,1);
drawCube ( );
glTranslatef (a,b,c);
drawCube ( );
y
z
x
Cont.
OpenGL: Matrix Manipulation

34. Computer Graphics Transformation
glTranslatef(a1,b1,c1);
glPushMatrix ( );
glRotatef(theta1,a2,b2,c2);
glScale(a3,b3,c3);
glPopMatrix ( );
glTranslatef(a4,b4,c4);
1T
21RT
4
TT1
321 SRT
Cont.
OpenGL: Matrix Manipulation

35. Computer Graphics Transformation
OpenGL: Transformation Hierarchies
glPushMatrix();
glPushMatrix();
glPopMatrix();
glPopMatrix();
// translate to shoulder position
// rotate by shoulder joint
// draw shoulder (circle and rectangle)
// translate to elbow position
// rotate by elbow joing
// draw elbow (circle and rectangle)

36. Computer Graphics Transformation
OpenGL: Specifying Color
 Can specify other properties such as color
 To produce a single aqua-colored triangle:
glColor3f(0.1, 0.5, 1.0);
glVertex3fv(v0);
glVertex3fv(v1);
glVertex3fv(v2);
 To produce a Gouraud-shaded triangle:
glColor3f(1, 0, 0); glVertex3fv(v0);
glColor3f(0, 1, 0); glVertex3fv(v1);
glColor3f(0, 0, 1); glVertex3fv(v2);
 In OpenGL, colors can also have a fourth component  (opacity)
Generally want  = 1.0 (opaque);

37. Thank You