Download Introduction - Computer Science

COMP 175 | COMPUTER GRAPHICS
Lecture 04:
Transform 1
COMP 175: Computer Graphics
February 3, 2015
Remco Chang
04 – Transform 1
1/59
COMP 175 | COMPUTER GRAPHICS
Admin

Algorithm sheet due tomorrow at midnight!

Office hours
Remco Chang
04 – Transform 1
2/59
COMP 175 | COMPUTER GRAPHICS
Geometric Transform

Apply transforms to a hierarchy of objects /
vertices…

Specifically, translate (T), rotate (R), scale (S)
Remco Chang
04 – Transform 1
3/59
COMP 175 | COMPUTER GRAPHICS
Concepts in Linear Algebra






3D Coordinate System
Vectors and Points in 3D space
Dot and Cross products
Matrix notation and manipulation with other matrices, 3D
vectors, and 3D points
Homogeneous coordinates (x, y, z, w)
Associativity prosperity of matrix multiplication (But NOT
communicative property!!)



Associative => (5 + 2) + 1 = 5 + (2 + 1)
Commutative => 5 +2 + 1 = 1 + 2 + 5
Matrix transpose and inverse
Remco Chang
04 – Transform 1
4/59
COMP 175 | COMPUTER GRAPHICS
Vector and Matrix Notation

Let’s say I need:


6 apples, 5 cans of soup, 1 box of tissues, 2 bags of chips
4 Stores, A, B, C, and D (Stop and Shop, Shaw’s,
Trader Joe’s, and Whole Foods)
1 apple
1 can of soup
1 box of tissue
1 bag of chips
Stop and Shop $0.20
$0.93
$0.64
$1.20
Shaw’s
$0.65
$0.82
$0.75
$1.40
Trader Joe’s
$0.95
$1.10
$0.52
$3.20
Whole Foods
$1.15
$0.20
$1.25
$2.25
Remco Chang
04 – Transform 1
5/59
COMP 175 | COMPUTER GRAPHICS
Shopping Example

Which store do you go to?





Find the total cost from each store
Find the minimum of the four
stores
More formally, let 𝑞𝑖 denote the
quantity of item 𝑖.
Let 𝐴𝑖 be the unit price of item 𝑖
at store 𝐴.
Then:

𝑞1
𝑞2
𝑞3
𝑞4
𝑡𝑜𝑡𝑎𝑙𝐶𝑜𝑠𝑡𝐴 =
4
𝑖=1 𝐴𝑖 𝑞𝑖
q1
=𝟔
=𝟓
=𝟏
=𝟐
q2
q3
q4
A
$0.20 $0.93 $0.64 $1.20
B
$0.65 $0.82 $0.75 $1.40
C
$0.95 $1.10 $0.52 $3.20
D
$1.15 $0.20 $1.25 $2.25
Total_A = (0.2 * 6) + (0.93 * 5) + (0.64 * 1) + (1.20 * 2) = 8.89
Remco Chang
04 – Transform 1
6/59
COMP 175 | COMPUTER GRAPHICS
Matrix Form

𝑞1
𝑞2
𝑞3
𝑞4
q1
=𝟔
6
=𝟓
: Let’s rewrite that in matrix form: 𝑞 = 5
1
=𝟏
2
=𝟐
q2
q3
q4
A
$0.20 $0.93 $0.64 $1.20
B
$0.65 $0.82 $0.75 $1.40
C
$0.95 $1.10 $0.52 $3.20
D
$1.15 $0.20 $1.25 $2.25
Remco Chang
04 – Transform 1

For the prices, let’s also rewrite
it:
0.20
0.65
0.95
1.15
0.93
0.82
1.10
0.20
0.64
0.75
0.52
1.25
1.20
1.40
3.20
2.25
7/59
COMP 175 | COMPUTER GRAPHICS
Using the Matrix Notation
𝑡𝑜𝑡𝑎𝑙𝐶𝑜𝑠𝑡𝐴
0.20
𝑡𝑜𝑡𝑎𝑙𝐶𝑜𝑠𝑡𝐵
0.65
=
=
0.95
𝑡𝑜𝑡𝑎𝑙𝐶𝑜𝑠𝑡𝐶
1.15
𝑡𝑜𝑡𝑎𝑙𝐶𝑜𝑠𝑡𝐷
0.93
0.82
1.10
0.20
0.64
0.75
0.52
1.25
1.20
1.40
3.20
2.25
6
5
1
2

𝑃𝑎𝑙𝑙

Determine totalCost vector using row-column
multiplication


Dot product is the sum of the pairwise multiplications
Apply this operation to rows of prices and column of quantities
𝑎
Remco Chang
𝑏
𝑐
𝑥
𝑦
𝑑 𝑧 = 𝑎𝑥 + 𝑏𝑦 + 𝑐𝑧 + 𝑑𝑤
𝑤
04 – Transform 1
8/59
COMP 175 | COMPUTER GRAPHICS
Reminder: Matrix Multiplication

Each entry in the resulting matrix L is the dot
product of a row of M with a column of N:
𝐿 = 𝑀𝑁
𝑙𝑥𝑥 𝑙𝑥𝑦
𝑙𝑦𝑥 𝑙𝑦𝑦
𝑙𝑧𝑥 𝑙𝑧𝑦
𝑙𝑤𝑥 𝑙𝑤𝑦
𝑙𝑥𝑧 𝑙𝑥𝑤
𝑚𝑥𝑥 𝑚𝑥𝑦
𝑙𝑦𝑧 𝑙𝑦𝑤
𝑚𝑦𝑥 𝑚𝑦𝑦
=
𝑚𝑧𝑥 𝑚𝑧𝑦
𝑙𝑧𝑧 𝑙𝑧𝑤
𝑚𝑤𝑥 𝑚𝑤𝑦
𝑙𝑤𝑧 𝑙𝑤𝑤
𝑚𝑥𝑧 𝑚𝑥𝑤
𝑛𝑥𝑥 𝑛𝑥𝑦
𝑚𝑦𝑧 𝑚𝑦𝑤
𝑛𝑦𝑥 𝑛𝑦𝑦
𝑚𝑧𝑧 𝑚𝑧𝑤
𝑛𝑧𝑥 𝑛𝑧𝑦
𝑚𝑤𝑧 𝑚𝑤𝑤 𝑛𝑤𝑥 𝑛𝑤𝑦
𝑛𝑥𝑧 𝑛𝑥𝑤
𝑛𝑦𝑧 𝑛𝑦𝑤
𝑛𝑧𝑧 𝑛𝑧𝑤
𝑛𝑤𝑧 𝑛𝑤𝑤
𝑙𝑥𝑦 = 𝑚𝑥𝑥 𝑛𝑥𝑦 + 𝑚𝑥𝑦 𝑛𝑦𝑦 + 𝑚𝑥𝑧 𝑛𝑧𝑦 + 𝑚𝑥𝑤 𝑛𝑤𝑦

Does 𝐿 = 𝑀𝑁 and 𝐿 = 𝑁𝑀 the same?
Remco Chang
04 – Transform 1
9/59
COMP 175 | COMPUTER GRAPHICS
Using the Matrix Notation
𝑡𝑜𝑡𝑎𝑙𝐶𝑜𝑠𝑡𝐴
0.20
𝑡𝑜𝑡𝑎𝑙𝐶𝑜𝑠𝑡𝐵
0.65
=
=
0.95
𝑡𝑜𝑡𝑎𝑙𝐶𝑜𝑠𝑡𝐶
1.15
𝑡𝑜𝑡𝑎𝑙𝐶𝑜𝑠𝑡𝐷
0.93
0.82
1.10
0.20
0.64
0.75
0.52
1.25
1.20
1.40
3.20
2.25
6
5
1
2

𝑃𝑎𝑙𝑙

TotalCost_A = (0.2 * 6) + (0.93 * 5) + (0.64 * 1) + (1.20 * 2) =
8.89
Remco Chang
04 – Transform 1
10/59
COMP 175 | COMPUTER GRAPHICS
Identity Matrix


What if our price matrix is of the following?
1 0 0 0
0 1 0 0
0 0 1 0
0 0 0 1
𝑃𝑎𝑙𝑙
𝑡𝑜𝑡𝑎𝑙𝐶𝑜𝑠𝑡𝐴
1 0
𝑡𝑜𝑡𝑎𝑙𝐶𝑜𝑠𝑡𝐵
0 1
=
=
0 0
𝑡𝑜𝑡𝑎𝑙𝐶𝑜𝑠𝑡𝐶
0 0
𝑡𝑜𝑡𝑎𝑙𝐶𝑜𝑠𝑡𝐷
Remco Chang
04 – Transform 1
0
0
1
0
0
0
0
1
6
5
1
2
11/59
COMP 175 | COMPUTER GRAPHICS
Identity Matrix

What if our price matrix is of the following?
1 0 0 0
0 1 0 0
0 0 1 0
0 0 0 1
𝑡𝑜𝑡𝑎𝑙𝐶𝑜𝑠𝑡𝐴
1 0
𝑡𝑜𝑡𝑎𝑙𝐶𝑜𝑠𝑡𝐵
=
= 0 1
0 0
𝑡𝑜𝑡𝑎𝑙𝐶𝑜𝑠𝑡𝐶
0 0
𝑡𝑜𝑡𝑎𝑙𝐶𝑜𝑠𝑡𝐷
0
0
1
0
0
0
0
1
6
6
5 = 5
1
1
2
2

𝑃𝑎𝑙𝑙

We call this matrix the “identity matrix”
Remco Chang
04 – Transform 1
12/59
COMP 175 | COMPUTER GRAPHICS
Identity Matrix


What if our price matrix is of the following?
2 0 0 0
0 2 0 0
0 0 2 0
0 0 0 2
𝑃𝑎𝑙𝑙
𝑡𝑜𝑡𝑎𝑙𝐶𝑜𝑠𝑡𝐴
2 0
𝑡𝑜𝑡𝑎𝑙𝐶𝑜𝑠𝑡𝐵
0 2
=
=
0 0
𝑡𝑜𝑡𝑎𝑙𝐶𝑜𝑠𝑡𝐶
0 0
𝑡𝑜𝑡𝑎𝑙𝐶𝑜𝑠𝑡𝐷
Remco Chang
04 – Transform 1
0
0
2
0
0
0
0
2
6
5
1
2
13/59
COMP 175 | COMPUTER GRAPHICS
Identity Matrix

What if our price matrix is of the following?
2 0 0 0
0 2 0 0
0 0 2 0
0 0 0 2
𝑡𝑜𝑡𝑎𝑙𝐶𝑜𝑠𝑡𝐴
2 0
𝑡𝑜𝑡𝑎𝑙𝐶𝑜𝑠𝑡𝐵
=
= 0 2
0 0
𝑡𝑜𝑡𝑎𝑙𝐶𝑜𝑠𝑡𝐶
0 0
𝑡𝑜𝑡𝑎𝑙𝐶𝑜𝑠𝑡𝐷

𝑃𝑎𝑙𝑙

So this is a “scaling matrix”
Remco Chang
04 – Transform 1
0
0
2
0
0
0
0
2
6
12
5 = 10
1
2
2
4
14/59
COMP 175 | COMPUTER GRAPHICS
Note!
𝑡𝑜𝑡𝑎𝑙𝐶𝑜𝑠𝑡𝐴
2 0
𝑡𝑜𝑡𝑎𝑙𝐶𝑜𝑠𝑡𝐵
0 2
=
=
0 0
𝑡𝑜𝑡𝑎𝑙𝐶𝑜𝑠𝑡𝐶
0 0
𝑡𝑜𝑡𝑎𝑙𝐶𝑜𝑠𝑡𝐷
0
0
2
0
0
0
0
2
6
12
5 = 10
1
2
2
4

𝑃𝑎𝑙𝑙

In this example, notice the first column of the
matrix is only affecting the first value of the result

Why is this important??
Remco Chang
04 – Transform 1
15/59
COMP 175 | COMPUTER GRAPHICS
Note!
𝑡𝑜𝑡𝑎𝑙𝐶𝑜𝑠𝑡𝐴
2 0
𝑡𝑜𝑡𝑎𝑙𝐶𝑜𝑠𝑡𝐵
0 2
=
=
0 0
𝑡𝑜𝑡𝑎𝑙𝐶𝑜𝑠𝑡𝐶
0 0
𝑡𝑜𝑡𝑎𝑙𝐶𝑜𝑠𝑡𝐷
0
0
2
0
0
0
0
2
6
12
5 = 10
1
2
2
4

𝑃𝑎𝑙𝑙

In this example, notice the first column of the
matrix is only affecting the first value of the result

So each column acts like a “basis vector”…
Remco Chang
04 – Transform 1
16/59
COMP 175 | COMPUTER GRAPHICS
Matrix Multiplication Explained (Visually)
1 1
, and we
1 2
want to know what it’ll do to a 2D point.

Suppose we have some matrix, like

First, we multiply this matrix by two unit basis
vectors, the x-axis and the y-axis:
1 1 1
1
1 1 0
1
=
=
1 2 0
1
1 2 1
2


Notice the results are the two columns of the matrix…
So let’s visualize how the x and y axes have been
transformed using our matrix
Remco Chang
04 – Transform 1
17/59
COMP 175 | COMPUTER GRAPHICS
Matrix Multiplication Explained (Visually)

Original Coordinate System
Remco Chang
04 – Transform 1

After we apply the transform
18/59
COMP 175 | COMPUTER GRAPHICS
Matrix Multiplication Explained (Visually)
Let’s test the new coordinate
2
system on a new point .
3



We see what this looks like in the
original Cartesian coordinate
system:
This demonstrates the concept of “change of basis”. The row vectors
of the new matrix define the new basis
Remco Chang
04 – Transform 1
19/59
COMP 175 | COMPUTER GRAPHICS
Questions?
Remco Chang
04 – Transform 1
20/59
COMP 175 | COMPUTER GRAPHICS
Transformations in Computer Graphics

Elemental Transformations:





Of the four, three of them are affine and linear:


Translation
Rotation
Scaling
Shearing
Rotation, Scaling, and Shearing
One is affine but non-linear

Translation
Remco Chang
04 – Transform 1
21/59
COMP 175 | COMPUTER GRAPHICS
Definitions of Transformations

Projective ⊃ Affine ⊃ Linear



Meaning that all linear transforms are also affine
transforms, which are also projective transforms.
However, not all affine transforms are linear transforms,
and not all projective transforms are affine.
Definitions:

Linear Transform:




Preserves all parallel lines
Acts on a line to yield either a line or a point
The vector [0, 0] is always transformed to [0, 0]
Examples: scale and rotate
Remco Chang
04 – Transform 1
22/59
COMP 175 | COMPUTER GRAPHICS
Definitions of Transformations

Definitions:

Linear Transform:





Affine Transform:





Preserves parallel lines
Acts on a line to yield either a line or a point
The vector [0, 0] is always transformed to [0, 0]
Examples: scale and rotate
Preserves parallel lines
Acts on a line to yield either a line or a point
The vector [0, 0] is NOT always transformed to [0, 0]
Examples: translate
Projective Transform:



Does NOT preserve parallel lines
Acts on a line to yield either a line or a point
Examples: perspective camera (assignment 2)
Remco Chang
04 – Transform 1
23/59
COMP 175 | COMPUTER GRAPHICS
2D Scaling



Component-wise scalar multiplication of vectors
𝑣 ′ = 𝛼𝑣
′
𝑣𝑥
𝑣
𝑥
Where 𝛼 is a scalar, and 𝑣 = 𝑣 and 𝑣 ′ = ′
𝑣𝑦
𝑦
Without using a matrix, we would have:


𝑣𝑥′ = 𝛼𝑣𝑥 and 𝑣𝑦′ = 𝛼𝑣𝑦
What would we do with using a matrix?
Remco Chang
04 – Transform 1
24/59
COMP 175 | COMPUTER GRAPHICS
2D Scaling



Component-wise scalar multiplication of vectors
𝑣 ′ = 𝑆𝑣
𝑠𝑥
Where 𝑆 is a 2x2 matrix 0
′
𝑣
𝑥
′
𝑣 = ′
𝑣𝑦
𝑣𝑥
0
,
and
𝑣
=
and
𝑣
𝑠𝑦
𝑦
Now:

𝑣𝑥′ = 𝑠𝑥 𝑣𝑥 + 0𝑣𝑦 and 𝑣𝑦′ = 0𝑣𝑥 + 𝑠𝑦 𝑣𝑦
Remco Chang
04 – Transform 1
25/59
COMP 175 | COMPUTER GRAPHICS
2D Scaling, An Example

3 0
, what happens to the following 2
0 2
vertices of the house?
Given 𝑆 =
Y
sx  3
sy  2
6
5
4
3
2
2
1 
 
1
3
1
 
0
1
Remco Chang
04 – Transform 1
2
3
4
5
6
7
8
9
10
X
26/59
COMP 175 | COMPUTER GRAPHICS
2D Scaling, An Example

Given 𝑆 =
3
0
0
, what happens to the following?
2
Y
sx  3
sy  2
6
5
4
3
2
2
1 
 
1
6 
2
 
3
1
 
9 
2
 
0
1

2
3
4
5
6
7
8
9
10
X
Uh… Something looks wrong…
Remco Chang
04 – Transform 1
27/59
COMP 175 | COMPUTER GRAPHICS
2D Scaling, An Example

3 0
Given 𝑆 =
, what happens to the following?
0 2
Y
sx  3
sy  2
6
5
4
3
2
2
1 
 
1
6 
2
 
3
1
 
9 
2
 
0
1

2
3
4
5
6
7
8
What’s the problem?


9
10
X
Lengths of the edges are not preserved!
Angles between edges are not preserved!

Except if 𝑆𝑥 = 𝑆𝑦
Remco Chang
04 – Transform 1
28/59
COMP 175 | COMPUTER GRAPHICS
2D Rotation

Rotation of vectors around an angle q
′
𝑣
𝑣
𝑥
𝑥
′
′
𝑣 = 𝑅𝜃 𝑣, where 𝑣 = 𝑣 and 𝑣 = ′
𝑣𝑦
𝑦

𝑅𝜃 =
cos 𝜃
sin 𝜃
− sin 𝜃
, which means
cos 𝜃

𝑣𝑥′ = 𝑣𝑥 cos 𝜃 − 𝑣𝑦 sin 𝜃

𝑣𝑦′ = 𝑣𝑥 sin 𝜃 + 𝑣𝑦 cos 𝜃
Remco Chang
04 – Transform 1
29/59
COMP 175 | COMPUTER GRAPHICS
2D Rotation, Proof 1

Derive 𝑹Ө by determining how 𝑒1 and 𝑒2 should be
transformed



1
cos𝜃

, first column of 𝑹𝜽
0
sin𝜃
0
−sinθ
𝑒2 =

, second column of 𝑹𝜽
1
cosθ
𝑒1 =
Thus we obtain 𝑹𝜽 :
Remco Chang
cos𝜃
𝑠𝑖𝑛𝜃
04 – Transform 1
−𝑠𝑖𝑛𝜃
𝑐𝑜𝑠𝜃
30/59
COMP 175 | COMPUTER GRAPHICS
2D Rotation, Proof 2
Remco Chang
04 – Transform 1
31/59
COMP 175 | COMPUTER GRAPHICS
2D Rotation, Proof 2
1. ∆𝑦
= 𝑦 ′ + ∆𝑦′
2. From the triangle EY’P,
∆𝑦 ′
𝑥′
=
tan 𝜃
3. So ∆𝑦 = 𝑦 + 𝑥′ tan 𝜃
4. Multiply both sides by cos 𝜃:
∆𝑦 cos 𝜃 = 𝑦′ cos 𝜃 + 𝑥′ sin 𝜃
5. Finally, from the triangle OYE,
𝑦
= cos 𝜃, or 𝑦 = ∆𝑦 cos 𝜃
∆𝑦
6. Therefore: 𝑦
Remco Chang
= 𝑥′ sin 𝜃 + 𝑦′ cos 𝜃
04 – Transform 1
32/59
COMP 175 | COMPUTER GRAPHICS
2D Rotation Example


What would the outcome be?
How would you do this in pseudo code?
q 

6
q
Remco Chang
04 – Transform 1
33/59
COMP 175 | COMPUTER GRAPHICS
2D Rotation Example

Result:
Y
6
q 
5

6
4
3
2
q
1
0
1
Remco Chang
2
3
04 – Transform 1
4
5
6
7
8
9
10
X
34/59
COMP 175 | COMPUTER GRAPHICS
Recap

For Scaling, we have:

𝑣 ′ = 𝑆𝑣


0
𝑆𝑦
For Rotation, we have:

𝑣 ′ = 𝑅𝜃 𝑣


𝑥
𝑆𝑥
𝑥′
′
where 𝑣 = 𝑦 and 𝑣 =
, and 𝑆 = 0
𝑦′
𝑥
𝑥′
cos𝜃
where 𝑣 = 𝑦 and 𝑣 ′ =
, and 𝑅𝜃 =
𝑦′
𝑠𝑖𝑛𝜃
−𝑠𝑖𝑛𝜃
𝑐𝑜𝑠𝜃
Hmmm… Maybe we can start stringing things together
one’s 𝑣 ′ becomes another’s 𝑣

More on that later… We’re still missing translation
Remco Chang
04 – Transform 1
35/59
COMP 175 | COMPUTER GRAPHICS
Sets of Linear Equations and Matrices


To translate, scale, and rotate vectors we need a
function to give a new value of x, and a function to give
a new value of y
Examples:


Rotation:


𝑣𝑥′ = 𝑣𝑥 cos 𝜃 − 𝑣𝑦 sin 𝜃

𝑣𝑥′ = 𝑠𝑥 𝑣𝑥 + 0𝑣𝑦

𝑣𝑦′ = 𝑣𝑥 sin 𝜃 + 𝑣𝑦 cos 𝜃

𝑣𝑦′ = 0𝑣𝑥 + 𝑠𝑦 𝑣𝑦
These are both of the form:



Scaling
𝑥 ′ = 𝑎𝑥 + 𝑏𝑦
𝑦 ′ = 𝑐𝑥 + 𝑑𝑦
Since the transforms are given by a system of linear equations,
they are called linear transformations, and is represented by
𝑎 𝑏
the matrix:
𝑐 𝑑
Remco Chang
04 – Transform 1
36/59
COMP 175 | COMPUTER GRAPHICS
2D Translation

Goal: moving a house from location A to location B:
R2
Y
B = (7, 6)
6
5
4
3
A = (2, 3)
2
1
0
1


2
3
4
5
6
7
8
9
10
X
Pretty easy… Just add 5 to x and 3 to y
If there are multiple vertices in the house, apply the
addition to each and every vertex
Remco Chang
04 – Transform 1
37/59
COMP 175 | COMPUTER GRAPHICS
Questions?
Remco Chang
04 – Transform 1
38/59
COMP 175 | COMPUTER GRAPHICS
Refresher

How do you multiply a (3x3) matrix by 3D vector?

How do you multiply two 3x3 matrices?

0.20
0.65
Given this matrix:
0.95
1.15
basis vectors?


0.93
0.82
1.10
0.20
0.64
0.75
0.52
1.25
1.20
1.40 , what are the 4
3.20
2.25
How did you find those?
Matrix as a coordinate transform


What happens if you have a 2x3 matrix (2 rows, 3 columns) and we
multiply it by a 3D vector?
What happens if we have a 3x2 matrix (3 rows, 2 columns) and we
multiply it by a 3D vector?
Remco Chang
04 – Transform 1
39/59
COMP 175 | COMPUTER GRAPHICS
Questions?
Remco Chang
04 – Transform 1
40/59
COMP 175 | COMPUTER GRAPHICS
2D Translate

In matrix notation, this means:



𝑥
𝑑𝑥
𝑥′
𝑣 = 𝑣 + 𝑡 where 𝑣 =
, 𝑣 = 𝑦 , and 𝑡 =
𝑑𝑦
𝑦′
which means: 𝑥 ′ = 𝑥 + 𝑑𝑥 and 𝑦 ′ = 𝑦 + 𝑑𝑦
′
′
Translation:


Preserves lengths
(isometric)
Preserves angles
(conformal)
Y
6
4
4
 
5
4
dx = 2
dy = 3
3
2
2
1 
 
1
0
1
Remco Chang
04 – Transform 1
2
3
4
5
6
7
8
9
10
41/59
X
COMP 175 | COMPUTER GRAPHICS
2D Translation

Exercise: consider linear transformations




𝑥′
𝑎
In matrix form:
=
𝑦′
𝑐
𝑏 𝑥
𝑑 𝑦
Can translation be expressed as a linear
transformation?



𝑥 ′ = 𝑎𝑥 + 𝑏𝑦
𝑦 ′ = 𝑐𝑥 + 𝑑𝑦
𝑥 ′ = 𝑥 + 𝑑𝑥
𝑦 ′ = 𝑦 + 𝑑𝑦
Think back to the previous translation example…
Remco Chang
04 – Transform 1
42/59
COMP 175 | COMPUTER GRAPHICS
2D Translation

Consider the example on the
right:


In matrix form:



Moving a point from (2,3) to (7,6)
implies a translation of (5,3)
𝑥
𝑑𝑥
𝑥′
= 𝑦 +
𝑑𝑦
𝑦′
7
2
5
=
+
6
3
3
Or:


R2
Y6
there =
(7, 6)
5
4
3
here = (2, 3)
2
1
0
1
2
3
4
5
6
7
8
9
10
X
𝑥 ′ = 𝑥 + 𝑑𝑥
𝑦 ′ = 𝑦 + 𝑑𝑦
Remco Chang
04 – Transform 1
43/59
COMP 175 | COMPUTER GRAPHICS
2D Translation

Let’s rewrite this:



As:



𝑥 ′ = 𝑥 + 𝑑𝑥
𝑦 ′ = 𝑦 + 𝑑𝑦
𝑥 ′ = 𝟏 ∗ 𝑥 + 𝟎 ∗ 𝑦 + 𝟏 ∗ 𝑑𝑥
𝑦 ′ = 𝟎 ∗ 𝑥 + 𝟏 ∗ 𝑦 + 𝟏 ∗ 𝑑𝑦
Now can you write this in matrix form in the form
of: 𝑣′ = 𝑇𝑣 using the variables: 𝑥 ′ , 𝑦 ′ , 𝑥, 𝑦, 𝑑𝑥, 𝑑𝑦?
Remco Chang
04 – Transform 1
44/59
COMP 175 | COMPUTER GRAPHICS
2D Translation

Intuitively, what we want to write is:


𝑑𝑥 𝑥
𝑑𝑦 𝑦
But this doesn’t work because the dimensions
don’t line up right!


1 0
𝑥′
=
0 1
𝑦′
That is, the matrix is 2x3, and the vector is 2x1
But what if…
Remco Chang
04 – Transform 1
45/59
COMP 175 | COMPUTER GRAPHICS
2D Translation

Intuitively, what we want to write is:


𝑑𝑥 𝑥
𝑑𝑦 𝑦
But this doesn’t work because the dimensions
don’t line up right!


1 0
𝑥′
=
0 1
𝑦′
That is, the matrix is 2x3, and the vector is 2x1
But what if…

1 0
𝑥′
𝑦′ = 0 1
0 0
1
Remco Chang
𝑑𝑥 𝑥
𝑑𝑦 𝑦
1 1
04 – Transform 1
46/59
COMP 175 | COMPUTER GRAPHICS
Composite Matrix Transform

This is huge! Because now we can string together
Scaling, Rotation, and Translation

Recall, we had:

For Scaling, we have:


For rotation, we have:


𝑣 ′ = 𝑅𝜃 𝑣
Now we add:

For translation, we have:


𝑣 ′ = 𝑆𝑣
𝑣 ′ = 𝑇𝑣
Except that the Translation matrix is slightly bigger…

What can we do?
Remco Chang
04 – Transform 1
47/59
COMP 175 | COMPUTER GRAPHICS
Recap

For Scaling, we have:

𝑣 ′ = 𝑆𝑣


0
𝑆𝑦
0
0 𝑥
0 𝑦
1 1
For Rotation, we have:

𝑣 ′ = 𝑅𝜃 𝑣


𝑆𝑥
𝑥′
where 𝑦′ = 0
1
0
cos𝜃
𝑥′
where 𝑦′ = 𝑠𝑖𝑛𝜃
0
1
−𝑠𝑖𝑛𝜃
cos𝜃
0
0 𝑥
0 𝑦
1 1
For Translation, we have:

𝑣 ′ = 𝑇𝑣

1
𝑥′
where 𝑦′ = 0
0
1
Remco Chang
0
1
0
𝑑𝑥 𝑥
𝑑𝑦 𝑦
1 1
04 – Transform 1
48/59
COMP 175 | COMPUTER GRAPHICS
Questions?
Remco Chang
04 – Transform 1
49/59
COMP 175 | COMPUTER GRAPHICS
Points vs. Vectors

Question, we just said that we can represent a
𝑥
vertex as 𝑣 = 𝑦 in our homogeneous coordinate
1
system.

How do we represent a vector?


The same?
Or different?
Remco Chang
04 – Transform 1
50/59
COMP 175 | COMPUTER GRAPHICS
Points vs. Vectors

As it turns out, we represent vectors differently…



𝑥
For a point, we say: 𝑝 = 𝑦
1
𝑥
For a vector, we say: 𝑣 = 𝑦
0
Why do you think that’s the case?
Remco Chang
04 – Transform 1
51/59
COMP 175 | COMPUTER GRAPHICS
Find the values of x’, y’ and w’

For Scaling, we have:

𝑣 ′ = 𝑆𝑣


0 𝑥
0 𝑦
1 0
0
𝑆𝑦
0
For Rotation, we have:

𝑣 ′ = 𝑅𝜃 𝑣


𝑆𝑥
𝑥′
where 𝑦′ = 0
0
𝑤′
𝑥′
cos𝜃
where 𝑦′ = 𝑠𝑖𝑛𝜃
0
𝑤′
−𝑠𝑖𝑛𝜃
cos𝜃
0
0 𝑥
0 𝑦
1 0
For Translation, we have:

𝑣 ′ = 𝑇𝑣

𝑥′
1
where 𝑦′ = 0
0
𝑤′
Remco Chang
0
1
0
𝑑𝑥 𝑥
𝑑𝑦 𝑦
1 0
04 – Transform 1
52/59
COMP 175 | COMPUTER GRAPHICS
Cool!

What did we just find out?

That a vector can be



But NOT


Scaled
Rotated
Translated…
Which fits our original definition of a vector!
Remco Chang
04 – Transform 1
53/59
COMP 175 | COMPUTER GRAPHICS
Questions?
Remco Chang
04 – Transform 1
54/59
COMP 175 | COMPUTER GRAPHICS
Uh, What Was That Again?

What just happened to creating the Translation
matrix?


What does it mean to add the extra 1?
This is called Homogeneous Coordinates: add an
additional dimension, the w-axis, and an extra
coordinate, the w-component

Thus 2D->3D (effectively the hyperspace for embedding
2D space)
Remco Chang
04 – Transform 1
55/59
COMP 175 | COMPUTER GRAPHICS
Addendum: Shearing / Skewing


Shearing refers to the “sliding” or “skewing” effect
Squares become
parallelograms. E.g., xcoordinates skew to the right,
y-coordinates stay the same.
Y
6
5
q
4

4
3
2
1
q
0
1

Consider the basis vectors for
the y-axis

That means we’re turning the 90
degree angle between x- and yaxes into 𝜃.
Remco Chang
04 – Transform 1
2
3
4
5
6
7
8
9
10
1
1
𝑆𝑘𝑒𝑤𝜃 =
tan 𝜃
0
1
2D non-Homogeneous
56/59
X
COMP 175 | COMPUTER GRAPHICS
Homogeneous Coordinates

Allows expression of all three 2D transforms as 3x3
matrices (Scaling, Rotation, Translation)

We start with the point 𝑃2𝑑 on the x-y plane, and
apply a mapping to bring it to the w-plane in
hyperspace:


𝑃2𝑑 𝑥, 𝑦 → 𝑃ℎ 𝑤𝑥, 𝑤𝑦, 𝑤 , 𝑤 ≠ 0
The resulting 𝑥 ′ , 𝑦 ′ coordinates in our new point
𝑃ℎ are different from the original 𝑥, 𝑦 in that:

𝑥 ′ = 𝑤𝑥, 𝑦 ′ = 𝑤𝑦, 𝑃ℎ 𝑥 ′ , 𝑦 ′ , 𝑤 , 𝑤 ≠ 0
Remco Chang
04 – Transform 1
57/59
COMP 175 | COMPUTER GRAPHICS
Homogeneous Coordinates

Once we have this point 𝑃ℎ 𝑥 ′ , 𝑦 ′ , 𝑤 , we can apply
a homogenized version of our translation matrices
to it to get a new point in hyperspace

Finally, we want to obtain the resulting point in 2Dspace again, so we perform a reverse mapping to
convert from hyperspace back to 2D space:

𝑃2𝑑 𝑥, 𝑦 =
Remco Chang
𝑥′ 𝑦′
𝑃2𝑑
,
𝑤 𝑤
04 – Transform 1
58/59
COMP 175 | COMPUTER GRAPHICS
Homogeneous Coordinates

It’s obvious that for our purposes, it’s easiest to
make 𝑤 = 1
So we say 𝑃2𝑑 𝑥, 𝑦 is the intersection of the line
determined by 𝑃ℎ with the 𝑤 = 1 plane:


To reiterate, the vertex 𝑣 =
𝑥
𝑦 is 𝑥now represented as:
𝑣= 𝑦
1

And we represent our vertex
on the hyperplane 𝑤 = 1
Remco Chang
04 – Transform 1
59/59
COMP 175 | COMPUTER GRAPHICS
Questions?
Remco Chang
04 – Transform 1
60/59