Chapter

Chapter 3 3

Chapter 3. 2D Transformations
3.1 Introduction
3.2 2D Transformation
3.3 Composing transformations
3.4 Geometric transformations around a point
3.5 Coordinate system transformations

Computer Graphics Chapter

Tema 3. 3. 2D Transformations
Transformaciones 2D 1 1
3.1 Introduction

• The model to visualize is on 2D or 3D geometric space

• Geometric transformations are generally compulsory in order to visualize our

model into a device

• Geometric transformations are also compulsory in CAD systems, simulation,

computer games etc.

• The transformations we are going to study are: translation, rotation and scaling

Computer Graphics Chapter

Tema 3. 3. 2D Transformations
Transformaciones 2D 2 2
3.1 Introduction

2D and 3D coordinate systems

Y Right-handed
coordinate system
Y
R2 R3
Point at (2,3)

X X

Z Point at (2,-2,2)

Computer Graphics Chapter

Tema 3. 3. 2D Transformations
Transformaciones 2D 3 3
3.1 Introduction

An example of geometric transformation

R2
There=(7,7)

Operation to move
sum 5 to x,
sum 4 to y Here=(2,3)

Computer Graphics Chapter

Tema 3. 3. 2D Transformations
Transformaciones 2D 4 4
3.1 Introduction

• How can relate different objects?

– Object position can be considered
respecting a central reference point Y
called origin
– A vector indicates which is the direction
(8,7.5)
to follow from origin and the path length
to reach the point
• Notation: row or column
– Ex.: the vector pointing to the center of
the car (2,3)
(10,2)
⎡10 ⎤
[10 2] ⎢2⎥
⎣ ⎦
X
• We will use column notation and
transformation matrices will be pre-
multiplied

Computer Graphics Chapter

Tema 3. 3. 2D Transformations
Transformaciones 2D 5 5
3.1 Introduction

• Vectors are used in computer graphics to: N

– Represent vertices positions
– Determine a surface orientation
• Surface normal vector
– Model light interaction
• Light vector

N
γ
θ L’
L

Computer Graphics Chapter

Tema 3. 3. 2D Transformations
Transformaciones 2D 6 6
3.1 Introduction

Sum of vectors

Y Y
⎡ 2⎤ ⎡ 4 ⎤ ⎡ 6 ⎤ P+P’
P' ' = P + P' = ⎢ ⎥ + ⎢ ⎥ = ⎢ ⎥
⎣3 ⎦ ⎣ 2 ⎦ ⎣ 5 ⎦
⎡ 2⎤
P=⎢ ⎥ P
⎣3 ⎦
⎡ 4⎤
P' = ⎢ ⎥
⎣ 2⎦
P’

X X

Computer Graphics Chapter

Tema 3. 3. 2D Transformations
Transformaciones 2D 7 7
3.1 Introduction

• Product by a scalar
• Linear dependency
– Two vector are linearly dependents
when one is multiple of the other

Y
Y αP
⎡2x ⎤ ⎡2 ⋅ 3⎤ ⎡6⎤
2P ⎢ ⎥ = ⎢
= ⎥ =⎢ ⎥
⎣ 2y ⎦ ⎣2 ⋅ 2⎦ ⎣ 4⎦
2P

⎡ x ⎤ ⎡3 ⎤ P
P=⎢ ⎥=⎢ ⎥
⎣ y ⎦ ⎣ 2⎦
X X
-P

Computer Graphics Chapter

Tema 3. 3. 2D Transformations
Transformaciones 2D 8 8
3.1 Introduction

• Base vectors of the plane

– The unit vectors (of length 1) in x and y axes are called standard base vectors of
the plane
– The collection of all the scalar multiples of [1 0] give us the first coordinate axis
– The collection of all the scalar multiples of [0 1] give us the second coordinate
axis
• Non-orthogonal base vectors
– Can we get any [n m] vector as a combination of two arbitrary vectors [a b] and
[c d]?

⎡n⎤ ⎡a ⎤ ⎡ c ⎤ ⎡α ⋅ a + β ⋅ c ⎤
⎢m⎥ = α ⋅ ⎢b ⎥ + β ⋅ ⎢d ⎥ = ⎢α ⋅ b + β ⋅ d⎥
⎣ ⎦ ⎣ ⎦ ⎣ ⎦ ⎣ ⎦
– It is always possible to find α and β meanwhile [a b] and [c d] do not be linearly
dependents

Computer Graphics Chapter

Tema 3. 3. 2D Transformations
Transformaciones 2D 9 9
3.1 Introduction

• Algebraic properties of vectors: – Distributive (vector):

– Commutative • r (P+Q)=rP+rQ
• P+Q=Q+P – Distributic (scalar):
– Associative • (r + s)P=rP+sP
• (P + Q) + R = P + (Q + R) – Associative (scalar):
– Identity (sum) • r(sP)=(rs)P
• There is a vector 0 / (P+0)=(0+P)=P – Identity (product):
for all P • For the real number 1,
– Reverse 1P=P for all P
• For any P exists a vector
-P / P + (-P) = 0

Computer Graphics Chapter

Tema 3. 3. 2D Transformations
Transformaciones 2D 10 10
3.1 Introduction
⎡x ⎤ ⎡ x'⎤
• Dot product of two vectors P • P' = ⎢ ⎥ • ⎢ ⎥ = x ⋅ x'+ y ⋅ y'
– The result is a scalar ⎣y ⎦ ⎣ y'⎦
– Defines the length of a vector P
2 2
P =+ P • P
(P*P)=x + y is the square of the
length
– Allows to normalize vectors
• The norm of a vector is its length θ (θ−φ) P’
• The vector is unitary if |P|=1
• To normalize: P/|P| φ
– Measures the angles between two
vectors
• If P and P’ are different of 0 then |P|sinθ P
P*P’ = |P||P’|cos(θ−φ)

|P|cosθ

Computer Graphics Chapter

Tema 3. 3. 2D Transformations
Transformaciones 2D 11 11
3.1 Introduction

– It allows to calculate the length of a – Determines if two vectors are

vector projection over an axis perpendicular
• If W is a unit vector, then P*W • The dot product of two
is the length of P projection perpendicular vectors is zero
over the line that contains W

⎡- 3 ⎤ Y
P' = ⎢ ⎥
⎣4⎦ ⎡ 4⎤
P=⎢ ⎥
P ⎣3 ⎦

X
θ (θ−φ)
P • P' = x ⋅ x' + y ⋅ y' = (4 ⋅ -3) + (3 ⋅ 4) = 0
φ W
P • P' = P ⋅ P' ⋅ cos(90 o ) = P ⋅ P' ⋅ 0 = 0

Computer Graphics Chapter

Tema 3. 3. 2D Transformations
Transformaciones 2D 12 12
 → → →
3.1 Introduction i j k
P × P' = x y z
• Cross product
– The result is a vector (orthogonal to the x' y' z'
two input vectors)
– Measures the angle between two vectors
• If P and P’ are different to 0 then P
|PxP’|= |P||P’|sen(θ−φ)
– Allows to calculate the point-to-line
distance θ (θ−φ) P’
• If W is a unit vector, then |PxW| is
the distance from P to the line that φ
contains W
– Determine is two vectors are parallel P
• The cross product modulus of two
parallel vectors is 0

θ (θ−φ)
φ W

Computer Graphics Chapter

Tema 3. 3. 2D Transformations
Transformaciones 2D 13 13
3.2 2D Transformations

• 2D Points: as column vectors

• Transformations: square matrices that pre-multiply the vector

• In case of considering the points as row columns, we will use the

transpose matrices (and post-multiplications)

Computer Graphics Chapter

Tema 3. 3. 2D Transformations
Transformaciones 2D 14 14
 3.2 2D Transformations

• Translation
– To move an object from one position to another different
X’ = X + Tx; Y’ = Y + Ty;

⎡X⎤ ⎡ X ′⎤ ⎡T x ⎤
P=⎢ ⎥ P′ = ⎢ ⎥ T =⎢ ⎥
⎣Y ⎦ ⎣Y ′ ⎦ ⎣T y ⎦

P’ = P + T

• Delete primitives of current position

• Sum shift to control points
• Redraw primitives in the new position

Computer Graphics Chapter

Tema 3. 3. 2D Transformations
Transformaciones 2D 15 15
3.2 2D Transformations

• Scaling
– Modifying the size of an object
X’ = X * Sx; Y’ = Y * Sy;

⎡ X⎤ ⎡ X ′⎤ ⎡Sx 0 ⎤
P=⎢ ⎥ P′ = ⎢ ⎥ S =⎢ ⎥
⎣Y ⎦ ⎣Y ′ ⎦ ⎣ 0 Sy ⎦

⎡X′⎤ ⎡Sx 0 ⎤ ⎡X⎤

⎢Y′ ⎥ = ⎢ 0 S ⎥ × ⎢Y⎥
⎣ ⎦ ⎣ y⎦ ⎣ ⎦

– If a scaling factor is less than 1, the object is reduced in that

dimension
– If a scaling factor us greater than 1, the object is magnified in that
dimension
– If a scaling factor is negative, the object is reversed in that
dimension
– If the scaling factors are different, proportions are not kept
– Scaling is undertaken with respect a fixed point (the origin)

Computer Graphics Chapter

Tema 3. 3. 2D Transformations
Transformaciones 2D 16 16
3.2 2D Transformations

• Scaling

Computer Graphics Chapter

Tema 3. 3. 2D Transformations
Transformaciones 2D 17 17
3.2 2D Transformations

• Rotation
– Rotation of a point with respect another one (in this case the origin)
– If a point in polar coordinates (r, β) a rotation is applied:

X’ = r*cos(β+α) = r*(cos(β)*cos(α) - sen(β)*sen (α)) =

(r*cos(β))*cos(α) - (r*sen(β))*sen (α) = X*cos(α) - Y*sen (α)

Y’ = r*sen(β+α) = r*(sen(β)*cos(α) + cos(β)*sen (α)) =

(r*sen(β))*cos(α) - (r*cos(β))*sen (α) = Y*cos(α) + X*sen (α)

P’ = R * P
⎡ cos (α ) − sen( α ) ⎤
R =⎢ ⎥
r ⎣sen( α ) cos( α ) ⎦

Computer Graphics Chapter

Tema 3. 3. 2D Transformations
Transformaciones 2D 18 18
3.3 Composing transformations

• Homogenous coordinates
– Homogenize the three transformations: a matrix product
– In order to get homogeneous coordinates the plane is included into
a 3D space in which the third dimension is constant
[X Y] ⇒ [X Y 1]
– In this manner several transformations can be accumulated into
just one matrix
– The new matrices are:

⎡1 0 Tx ⎤ ⎡Ex 0 0⎤ ⎡cos(α) −sen(α) 0⎤

T = ⎢0 1 Ty ⎥ E = ⎢ 0 Ey 0⎥ R = ⎢sen(α) cos(α) 0⎥
⎢ ⎥ ⎢ ⎥ ⎢ ⎥
⎢⎣0 0 1 ⎥⎦ ⎢⎣ 0 0 1⎥⎦ ⎢⎣ 0 0 1⎥⎦

Computer Graphics Chapter

Tema 3. 3. 2D Transformations
Transformaciones 2D 19 19
3.3 Composing transformations
– We can combine several transformations in
order to obtain more complex operations

– For example -> Rotation with respect an

arbitrary point (xc , yc)
• In three steps: Translation (-xc , -yc),
Rotation and Translation (xc , yc)
• As the matrices are squared, a unique
matrix is obtained
P3 = T(xc , yc) * R * T(-xc , -yc) * P

Computer Graphics Chapter

Tema 3. 3. 2D Transformations
Transformaciones 2D 20 20
3.3 Composing transformations

• Order of transformations
– The matrix product is not commutative
M1*M2<>M2*M1
– Transformations either
– Transformations that are commutative
• Translation-Translation
• Scaling-Scaling
• Rotation-Rotation
Translation after rotation
• Proportional scaling-Rotation
– Non-commutative transformations
• Translation-Scaling
• Traslation-Rotation
• Non-proportional scaling-Rotation

Rotation after translation

Computer Graphics Chapter

Tema 3. 3. 2D Transformations
Transformaciones 2D 21 21
3.4 Geometric transformations around a point

• Complex operations are divided into more simple ones

• Traslation: Translation does not depend on a reference point

• Scaling: Scaling around a reference point (x,y)

– Translating the object (-x,-y)
– Scaling
– Undo translation

• Rotation: Rotations around a center of rotation (CR)

– Translating the object(-CR)
– Rotation
– Undo translation

Computer Graphics Chapter

Tema 3. 3. 2D Transformations
Transformaciones 2D 22 22
3.5 Coordinate system transformations

• Real world coordinate system (RWC)

– Description of real physic system
– Metric units depend on the representation
– They have to be converted into device metrics (mapping)
– The mapping is composed by a scaling and a shift

• Device coordinate system (DC)

– Depends on the device
• Screen size, in pixels
• Where the origin is
• Positive direction of each coordinate

• Normalized device coordinate system (NDC)

– In order to carry out a normalized mapping, a ficticious device of
width and height 1 is used

Computer Graphics Chapter

Tema 3. 3. 2D Transformations
Transformaciones 2D 23 23
3.5 Coordinate system transformations

• How can we go from a coordinate system to another in

the most efficient and normalized way
• An area of the real world is defined: window
• An area of the device is defined: viewport
– The viewport size goes from a pixel to all the screen
windows
– What it is outside the windows goes outside the
viewport
• The coordinate transformation from RWC to DC is Real world coordinates
carried out into two steps:
– From RWC to NCD
• Normalized transformation
– From NCD to DC viewport
• Device transformation

Normalized coordinate system

Computer Graphics Chapter

Tema 3. 3. 2D Transformations
Transformaciones 2D 24 24
3.5 Coordinate system transformations wymax

• Window-viewport transformation:
– Windows bottom-left corner is moved to origin
– Scaling factor are applied in order to force window
wymin
an viewport identical sizes
– Origin is translated to viewport bottom-left corner Window
wxmin wxmax
Real world coordinates
vymax

Viewport

vymin

vxmin vxmax

Normalized device coordinates

Computer Graphics Chapter

Tema 3. 3. 2D Transformations
Transformaciones 2D 25 25
3.5 Coordinate system transformations

• NDC to DC is similar to the previous one

• In general, windows and viewports are rectangular
• Types of transformations between systems:

Without clipping

ISOTROPIC

ANISOTROPIC
Window

With clipping
• Isotropic (keeping proportions, 1 scaling factor) or
anisotropic (2 scaling factors). To achieve the isotropic,
viewport definition has to be proportional to the window
Viewport

Computer Graphics Chapter

Tema 3. 3. 2D Transformations
Transformaciones 2D 26 26