computer graphics

1. COMPUTER GRAPHICS
Lecture 3
Geometric Transformations
2D and 3D
Tekeste D © 04/08/19 1/47

2. COMPUTER GRAPHICS
⦁ Objects in a scene at the lowest level are a collection of vertices…
⦁ These objects have location, orientation, size
⦁ Correspond to transformations: Translation (T), Rotation (R), and
Scaling (S)
How do we use Geometric Transformations? (1/2)
Tekeste D © 04/08/19 2/47

3. COMPUTER GRAPHICS
⦁ A scene has a camera/view point from which the scene is viewed
⦁ The camera has some location and some orientation in 3D-space …
⦁ These correspond to Translation and Rotation transformations
⦁ Need other types of viewing transformations as well—we’ll learn about
them soon!
How do we use Geometric Transformations? (2/2)
Tekeste D © 04/08/19 3/47

4. COMPUTER GRAPHICS
Some Linear Algebra Concepts...
Tekeste D © 04/08/19 4/47
⦁ 3D coordinate geometry
⦁ Vectors in 2D space and 3D space
⦁ Dot product and cross product—definitions and uses
⦁ Vector and matrix notation and algebra
⦁ Identity matrix
⦁ Multiplicative associativityfor matrices
⦁ E.g. A(BC) = (AB)C
⦁ Matrix transpose and inverse—definition, use, and calculation
⦁ Homogeneous coordinates(x, y, z, w)
You will need to understand these concepts!
Linear algebra help session notes:
http://cs.brown.edu/courses/cs123/docs/helpsessions/linearalgebra.pdf

5. COMPUTER GRAPHICS
⦁ Basically, a vertex is a position in XYZ coordinate space,
⦁ and a given position in space is defined by exactly one and only
one unique XYZ triplet
⦁ An XYZ value, however, can also represent a vector
⦁ (in fact, for the mathematically pure in heart, a vertex is actually a
vector too…)
⦁ A vector is perhaps the single most important foundational concept
to understand when it comes to manipulating 3D geometry.
⦁ Those three values (X, Y, and Z) combined represent two important
values: a direction and a magnitude.
Tekeste D © 04/08/19 5/47
Vectors I

6. COMPUTER GRAPHICS
⦁ The point can be thought of as a vertex when
you are stitching together triangles, but the
arrow can be thought of as a vector
⦁ Vector is first, simplya direction from the
origin toward the point in space
⦁ We use vectors to represent directional
quantities
⦁ For example, the x-axis is the vector (1, 0, 0)
⦁ Go positive one unit in the X direction, and zero
in the Y and Z direction
⦁ A vector is also:
⦁ how we point where,
⦁ we are going,
⦁ for example, which way is the camera pointing,
⦁ or in which direction do we want to move to get
away from that crocodile!
Vectors II (direction)
Tekeste D © 04/08/19 6/47

7. COMPUTER GRAPHICS
⦁ The magnitude of a vector is the length of the vector
⦁ For our X-axis vector (1, 0, 0), the length of the vector is one
⦁ A vector with a length of one, we call a unit vector
⦁ If a vector is not a unit vector and we want to scale it to make it one, we call
that normalization.
⦁ Normalizing a vector scales it such that its length is one
⦁ Unit vectors are important when we only want to represent a direction and
not a magnitude
⦁ A magnitude can be important as well
⦁ for example, it can tell us how far we need to move in a given direction,
⦁ how far away I need to get from that crocodile.
Tekeste D © 04/08/19 7/47
Vectors III (magnitude)

8. COMPUTER GRAPHICS
⦁ Vectors can be added, subtracted, and scaled by simply adding, subtracting,
or scaling their individual XYZ components
⦁ However, that can be applied only to two vectors is called the dot product
⦁ The dot product between two (three-component) unit vectors returns a
scalar
⦁ One value that represents the angle between the two vectors.
⦁ Two vectors must be unit length, and the value returned falls between -1.0
and +1.0
⦁ The number is actually the cosine of the angle between the vectors.
⦁ This operation is done extensively between a surface normal vector and a
vector pointing toward a light source in diffuse lighting calculations
(Shaders)
Tekeste D © 04/08/19 8/47
Dot Product

9. COMPUTER GRAPHICS
⦁ Figure: two vectors, V1 and V2, and how the angle between them is represented
Dot Product
Tekeste D © 04/08/19 9/47

10. COMPUTER GRAPHICS
⦁ Vectors can be multiplied using the "Dot Product“
⦁ The Dot Product is written using a central dot:
a · b
⦁ This means the Dot Product of a and b
⦁ We can calculate the Dot Product of two vectors this way:
a · b = |a| × |b| × cos(θ)
⦁ Where:
|a| is the magnitude (length) of vector a
|b| is the magnitude (length) of vector b
θ is the angle between a and b
Dot Product (Calculating)
Tekeste D © 04/08/19 10/47

11. COMPUTER GRAPHICS
⦁ OR we can calculate it this way:
a · b = ax × bx + ay × by
⦁ So we multiply the x's, multiply the y's, then add.
⦁ The result is a number (called a "scalar" so we know it is not a
vector).
Dot Product (Calculating)
Tekeste D © 04/08/19 11/47

12. COMPUTER GRAPHICS
⦁ Example: Calculate the dot product of vectors a and b:
⦁ a · b = |a| × |b| × cos(θ)
⦁ a · b = 10 × 13 × cos(59.5°)
⦁ a · b = 10 × 13 × 0.5075...
⦁ a · b = 65.98... = 66 (rounded)
⦁ OR we can calculate it this way:
⦁ a · b = ax × bx + ay × by
⦁ a · b = -6 × 5 + 8 × 12
⦁ a · b = -30 + 96
⦁ a · b = 66
Dot Product (Calculating)
Tekeste D © 04/08/19 12/47

13. COMPUTER GRAPHICS
⦁ When two vectors are at right angles to each other the dot product
is zero.
⦁ Example: calculate the Dot Product for:
⦁ a · b = |a| × |b| × cos(θ)
⦁ a · b = |a| × |b| × cos(90°)
⦁ a · b = |a| × |b| × 0
⦁ a · b = 0
⦁ Or we can calculate it this way:
⦁ a · b = ax × bx + ay × by
⦁ a · b = -12 × 12 + 16 × 9
⦁ a · b = -144 + 144
⦁ a · b = 0
Dot Product (Right Angles)
Tekeste D © 04/08/19 13/47

14. COMPUTER GRAPHICS
Dot Product (General Formula)
⦁ a = [a1, a2, …, an] and b = [b1, b2, …, bn]
⦁ a . b = = σ𝑛 𝑎𝑖 𝑏𝑖
𝑘=0
⦁ a . b = a1 b1 + a2 b2 + a3 b3 + ……………
Tekeste D © 04/08/19 14/47

15. COMPUTER GRAPHICS
Cross Product
⦁ The cross product between two
vectors is a third vector perpendicular
to the plane defined by the first two
vectors
⦁ For the cross product to work, the two
vectors don’t have to be unit length
either
⦁ Figure 4.3 shows two vectors, V1 and
V2, and their cross product V3
Vectors, V1 and V2, and their cross product V3
Tekeste D © 04/08/19 15/47

16. COMPUTER GRAPHICS
⦁ Unlike the dot product, the order of the vectors is important
⦁ V3 is the result of V2 cross V1
⦁ If you reversed the order of V1 and V2, the resulting vector
V3 would point in the opposite direction
⦁ Applications of the cross product are numerous, from
finding surface normals of triangles, to constructing
transformation matrices
Tekeste D © 04/08/19 16/47
Cross Product

17. COMPUTER GRAPHICS
⦁ Two vectors can be multiplied using the "Cross Product“
⦁ The Cross Product a × b of two vectors is another vector that is at
right angles to both:
⦁ The magnitude (length) of the cross product equals the area of a
parallelogram with vectors a and b for sides:
⦁ The cross product is:
⦁ Zero in length when vectors a and b point in the same, or opposite, direction
⦁ Reaches maximum length when vectors a and b are at right angles
Cross Product
Tekeste D © 04/08/19 17/47

18. COMPUTER GRAPHICS
⦁ We can calculate the Cross Product this way:
⦁ a × b = |a| |b| sin(θ) n
⦁ Where
⦁ |a| is the magnitude (length) of vector a
⦁ |b| is the magnitude (length) of vector b
⦁ θ is the angle between a and b
⦁ n is the unit vector at right angles to both a and b
⦁ Then we multiply by the vector n so it heads in the correct direction (at right
angles to both a and b).
Cross Product (Calculating)
Tekeste D © 04/08/19 18/47

19. COMPUTER GRAPHICS
⦁ OR we can calculate it this way:
⦁ When a and b start at the origin point (0,0,0), the Cross Product
will end at:
⦁ cx = aybz − azby
⦁ cy = azbx − axbz
⦁ cz = axby − aybx
Cross Product (Calculating)
Tekeste D © 04/08/19 19/47

20. COMPUTER GRAPHICS
⦁ Example: The cross product of a = (2,3,4) and b = (5,6,7)
⦁ Solution
⦁ cx = aybz − azby = 3×7 − 4×6 = −3
⦁ cy = azbx − axbz = 4×5 − 2×7 = 6
⦁ cz = axby − aybx = 2×6 − 3×5 = −3
⦁ Answer: a × b = (−3,6,−3)
⦁ Which Direction?
⦁ The cross product could point in the completely opposite direction and
still be at right angles to the two other vectors, so we have the:
"Right Hand Rule"
Cross Product (Calculating)
Tekeste D © 04/08/19 20/47

21. COMPUTER GRAPHICS
⦁ One common use that heart graphics programmers is coordinate
transformations
⦁ Suppose you have a point in space represented by x, y, and z coordinates, and
you need to know where that point is if you rotate it some number of degrees
around some arbitrary point and orientation.
⦁ You would use a matrix. Why?
⦁ The new x coordinate depends not only on the old x coordinate and the other
rotation parameters,
⦁ but also on what the y and z coordinates were as well
⦁ This kind of dependency between the variables and solution is just the sort of
problem that matrices excel at.
⦁ For fans of the Matrix movies who have a mathematical inclination, the term
matrix is indeed an appropriate title.
Tekeste D © 04/08/19 21/47
Matrix

22. COMPUTER GRAPHICS
⦁ A Matrix is an array of numbers:
This one has 2 Rows and 3 Columns
⦁ To multiply a matrix by a single number is easy:
⦁ We call the number ("2" in this case) a scalar, so this is called "scalar
multiplication".
How to Multiply Matrices
Tekeste D © 04/08/19 22/47

23. COMPUTER GRAPHICS
⦁ But to multiply a matrix by another matrix we need to do the "dot product" of
rows and columns ... what does that mean? Let us see with an example:
⦁ To work out the answer for the 1st row and 1st column:
⦁ The "Dot Product" is where we multiply matching members,
then sum up:
(1, 2, 3) • (7, 9, 11) = 1×7 + 2×9 + 3×11
= 58
How to Multiply Matrices
Tekeste D © 04/08/19 23/47

24. COMPUTER GRAPHICS
⦁ When we do multiplication:
⦁ The number of columns of the 1st matrix must equal the number of rows of the 2nd
matrix.
⦁ And the result will have the same number of rows as the 1st matrix, and the same
number of columns as the 2nd matrix.
In General:
⦁ Tomultiply an m×n matrix by an n×p matrix, the ns must be the same,
and the result is an m×p matrix.
⦁ So ... multiplying a 1×3 by a 3×1 gets a 1×1 result:
⦁ But multiplying a 3×1 by a 1×3 gets a 3×3 result:
⦁ Matrix multiplication is not commutative:
⦁ AB ≠ BA
How to Multiply Matrices
Tekeste D © 04/08/19 24/47

25. COMPUTER GRAPHICS
⦁ When dealing with these quantities, you also see the term scalar
⦁ A scalar is just an ordinary single number used to represent magnitude or a specific
quantity (you know—a regular old, plain, simple number…like before you cared or had
all this jargon added to your vocabulary).
⦁ Matrices can be multiplied and added together, but they can also be multiplied
by vectors and scalar values
⦁ Multiplying a point (a vector) by a matrix (a transformation) yields a new
transformed point (a vector)
Tekeste D © 04/08/19 25/47
Matrix and vector

26. COMPUTER GRAPHICS
Transformation
Tekeste D © 04/08/19 26/47
Scaling, Translation, and Rotation

27. COMPUTER GRAPHICS
⦁ To change the size of an object, scaling transformation is used.
⦁ In the scaling process, you either expand or compress the dimensions of the
object.
⦁ Scaling can be achieved by multiplying the original coordinates of the object
with the scaling factor to get the desired result.
⦁ Let us assume that the original coordinates are (X, Y),
⦁ the scaling factors are (SX, SY),
⦁ and the produced coordinates are (X’, Y’).
⦁ This can be mathematically represented as shown below −
X' = X . SX and Y' = Y . SY
⦁ The scaling factor SX, SY scales the object in X and Y direction respectively.
Tekeste D © 04/08/19 27/47
Scaling

28. COMPUTER GRAPHICS
⦁ The above equations can also be represented in matrix form as below:
Tekeste D © 04/08/19 28/47
OR
P’ = P . S
⦁ Where S is the scaling matrix.
⦁ If we provide values less than 1 to the scaling factor S, then we can reduce the
size of the object.
⦁ If we provide values greater than 1, then we can increase the size of the object.
Scaling

 
 s
 X  x 0 
Y'   
X'

29. COMPUTER GRAPHICS
Scaling in 2D
Tekeste D © 04/08/19 29/47
⦁ S is a diagonal matrix; we can quickly
check using matrix multiplication
that our derivation is correct:
⦁ S multiplies each coordinate of v by
the appropriate scaling factor, as
expected
⦁ In general, the ith entry of Dv, where
D is diagonal, is (D[i,i] * v[i]), product
of two scalars
 0
0 x

s s x
Sv  
x
⦁ Properties of scaling to look out for:
⦁ Does not preserve angles between lines
in the plane (except when scaling is
uniform, i.e. sx = sy)
⦁ If the object doesn’t start at the origin,
scaling will move it closer to or farther
from the origin (often not desired)

30. COMPUTER GRAPHICS
⦁ A translation moves an object to a different position on the screen.
⦁ You can translate a point in 2D by adding translation coordinate (tx, ty) to the original
coordinate (X, Y) to get the new coordinate (X’, Y’)
⦁ From the above figure, you can write that −
X’ = X + tx
Y’ = Y + ty
⦁ The pair (tx, ty) is called the translation vector or shift vector.
⦁ The above equations can also be represented using the column vectors.
Tekeste D © 04/08/19 30/47
Translation
 
We can write it as −
P’ = P + T
Y 
P 
X 
 
ty
T 
tx
P'
X

31. COMPUTER GRAPHICS
 
Tekeste D © 04/08/19 31/47
5,6
Example
⦁ Translate it to [4, 6]
3,0
Triangle  2,4

32. COMPUTER GRAPHICS
⦁ In rotation, we rotate the object at
particular angle θ (theta) from its
origin.
⦁ From the following figure, we can
see that the point P(X, Y) is located
at angle φ from the horizontal X
coordinate with distance r from the
origin.
⦁ After rotating it to a new location,
you will get a new point P’ (X’, Y’).
Rotation in 2D

Tekeste D © 04/08/19 32/47

33. COMPUTER GRAPHICS
⦁ Using standard trigonometric the
original coordinate of point P(X, Y)
can be represented as:
⦁ X = rcosϕ......(1)
Y = rsinϕ......(2)
⦁ Same way we can represent the
point P’ (X’, Y’) as:
x′=rcos(ϕ+θ)
=rcosϕcosθ − rsinϕsinθ.......(3)
y′=rsin(ϕ+θ)
=rcosϕsinθ + rsinϕcosθ .......(4)
Rotation in 2D

Tekeste D © 04/08/19 33/47

34. COMPUTER GRAPHICS
⦁ Substituting equation (1) & (2) in (3) & (4) respectively, we will get
x′=xcosθ−ysinθ
y′=xsinθ+ycosθ
⦁ Representing the above equation in matrix form, (Dot Product)
P’ = P . R
⦁ Where R is the rotation matrix
Rotation in 2D
⇒ [X′Y′]=[XY]=
OR
𝑐𝑜𝑠(𝜃)
−𝑠𝑖𝑛(𝜃)
𝑠𝑖𝑛(𝜃)
𝑐𝑜𝑠(𝜃)
R =
𝒄𝒐𝒔(𝜽)
−𝒔𝒊𝒏(𝜽)
Tekeste D © 04/08/19 34/47
𝒔𝒊𝒏(𝜽)
𝒄𝒐𝒔(𝜽)

35. COMPUTER GRAPHICS
⦁ The rotation angle can be positive and negative.
⦁ For positive rotation angle, we can use the above rotation matrix. However,for
negative angle rotation, the matrix will change as shown below
cos(−θ) = cosθ and sin(−θ) = −sinθ
Rotation in 2D
R =
𝑐𝑜𝑠(−𝜃)
−𝑠𝑖𝑛(−𝜃)
𝑠𝑖𝑛(−𝜃)
𝑐𝑜𝑠(−𝜃)
R =
𝒄𝒐𝒔(𝜽)
𝒔𝒊𝒏(𝜽)
Tekeste D © 04/08/19 35/47
−𝒔𝒊𝒏(𝜽)
𝒄𝒐𝒔(𝜽)

36. COMPUTER GRAPHICS
Example
⦁ Rotate a vertex [0, 1] to 90 degree
Tekeste D © 04/08/19 36/47

37. COMPUTER GRAPHICS
Further More
Tekeste D © 04/08/19 37/47

38. COMPUTER GRAPHICS
⦁ Let’s homogenize our all matrices! Doesn’t affect linearity of scaling and rotation
⦁ Our new transformation matrices look like this…
⦁ Note: These transformations are called affine transformations, which means they
preserve ratios of distances between points on a straight line (but not necessarily (0, 0) )
Transformations Homogenized
Transformation Matrix
Scaling 𝑠𝑥
0
0
0 0
𝑠𝑦 0
0 1
Rotation 𝑐𝑜𝑠(𝜃) −𝑠𝑖𝑛(𝜃) 0
𝑠𝑖𝑛(𝜃) 𝑐𝑜𝑠(𝜃) 0
0 0 1
Translation 1
0
0 𝑑𝑥
1 𝑑𝑦
0 0 1
Tekeste D © 04/08/19 38/47

39. COMPUTER GRAPHICS
Examples
⦁ Scaling: Scale by 15 in the x direction, 17 in the y direction
𝑐𝑜𝑠(123)
𝑠𝑖𝑛(123)
0
−𝑠𝑖𝑛(123) 0
𝑐𝑜𝑠(123) 0
0 1
15
0
0 0
17 0
0 0 1
⦁ Rotation: Rotate by 123o
⦁ Translation: Translate by -16 in the x direction, +18 in the y direction
1 0 −16
0 1 18
0 0 1
Tekeste D © 04/08/19 39/47

40. COMPUTER GRAPHICS
Composition of Transformations (2D) (1/2)
Tekeste D © 04/08/19 40/47
⦁ We now have a number of tools at our disposal; we can combine them!
⦁ An object in a scene uses many transformations in sequence. How do we
represent this in terms of functions?
⦁ Transformation is a function; by associativity, we can compose functions:
⦁ (f o g)( i )
⦁ This is the same as first applying g, then applying f:
⦁ f( g( i ) )
⦁ Consider our functions f and g as matrices (M1 and M2) and our input as a
vector v
⦁ Our composition is equivalent to M1M2v

41. COMPUTER GRAPHICS
Transformations in General are not Commutative
0
1 2 3 4 5 6 7 8 9 10
5
4
3
2
1
6
X
0
1 2 3 4 5 6 7 8 9 10
5
4
3
2
1
Y 6
Translate by
x = 6, y = 0, then
rotate by 45o
Tekeste D © 04/08/19 41/47
Rotate by 45o,
then translate
by x = 6, y = 0

42. COMPUTER GRAPHICS
⦁ Start: Goal:
⦁ Important concept: make the problem simpler
⦁ Translate object to origin first, scale, rotate, and translate back:
⦁ Applyto all vertices
Composition (an example) (2D) (1/2)
Tekeste D © 04/08/19 42/47

1 3

0 10 0 1 
00
00
04 0 01 0 3
4
sin 90
cos90 
0 10
 
0 0 1 0
1 0 3cos90
T 1
RST  0 1 3sin90
-Rotate 90o
-Uniform scale 4x
-Both around object’s
center, not the origin

43. COMPUTER GRAPHICS
Composition (an example) (2D) (2/2)
⦁ T-1RST
⦁ But what if we mixed up the
order? Let’s try RT-1ST:
Tekeste D © 04/08/19 43/47
⦁ Oops! We scaled properly, but
when we rotated the object, it’s
center was not at the origin, so its
position was shifted. Order
matters!
3
00
01
0
4
30
0
   1 3

10 0 10 0 10 0 1 
00
01 0 34
1
 sin90
sin90 cos90

 0 0
cos90

44. COMPUTER GRAPHICS
Tekeste D ©
04/08/19
44/47
Inverses Revisited
⦁ What is the inverse of a sequence of transformations?
⦁ (M1M2…Mn)-1 = Mn
-1Mn-1
-1…M1
-1
⦁ Inverse of a sequence of transformations is the composition of the inverses of
each transformation in reverse order (why?)
⦁ Say we want to do the opposite transformation of the example on slide 27
What will our sequence look like?
⦁ (T-1RST)-1 = T-1S-1R-1T
⦁ We still translate to the origin first, then translate back at the end!



0 cos90 sin90 0
0
0
1/ 3
3 0
1 0 31/ 3
1
T -1
S-1
R-1
T  0

45. COMPUTER GRAPHICS
Tekeste D ©
END
Any Question?
04/08/19 45/47