Linear algebra and geometric transformations in 2D

Computer Graphics

CSE 167

Lecture 2

CSE 167: Computer Graphics

• Linear algebra

– Vectors

– Matrices

• Points as vectors

• Geometric transformations in 2D

– Homogeneous coordinates

CSE 167, Winter 2020 2

Vectors

• Represent magnitude and direction in multiple dimensions

• Examples

– Translation of a point

– Surface normal vectors (vectors orthogonal to surface)

CSE 167, Winter 2020 3

Vectors and arithmetic

• Addition and subtraction

CSE 167, Winter 2020 4

Vectors must be the same length

Vectors are column vectors

Vectors and arithmetic

• Negate vector

• Vector-scalar multiply

CSE 167, Winter 2020 5

Vectors and arithmetic

CSE 167, Winter 2020 6

Examples using 3-vectors

Vector transpose

CSE 167, Winter 2020 7

Column vector

Example using 3-vector

Row vector

Magnitude of a vector

• The magnitude of a vector is its norm

CSE 167, Winter 2020 8

Example using 3-vector

Unit vector

• A vector of magnitude 1 is called a unit vector

• A vector can be unitized by dividing by its norm

• The norm of a unit vector is 1

CSE 167, Winter 2020 9

Dot product of two vectors

• Angle between two vectors

CSE 167, Winter 2020 10

Example using 3-vector

Magnitude of a vector revisited

• The magnitude of a vector is its norm

CSE 167, Winter 2020 11

Using dot product

Cross product of two 3-vectors

• The cross product of two 3-vectors a and bresults in another 3-vector that is orthogonal (using right hand rule) to the two vectors

CSE 167, Winter 2020 12

Cross product of two 3-vectors

• Angle between two vectors

CSE 167, Winter 2020 13

Matrices

• 2D array of numbers

CSE 167, Winter 2020 14

m rows and n columns

Matrix addition and subtraction

• Matrices must be the same size

CSE 167, Winter 2020 15

Matrix-scalar multiplication

CSE 167, Winter 2020 16

Matrix-vector multiplication

CSE 167, Winter 2020 17

Result is vector of length m (i.e., number of rows in matrix)

Matrix of m rows and n columnstimes

vector of length n

Number of matrix columns must equal vector length

Matrix-vector multiplication

CSE 167, Winter 2020 18

Example using 3x3 matrix

and3-vector

Cross product of two 3-vectors revisited

CSE 167, Winter 2020 19

Using matrix-vector multiply

Matrix-matrix multiplication

CSE 167, Winter 2020 20

Number of left matrix columns must equal

number of right matrix rows

m-by-p matrix times p-by-n matrix

Result is m-by-n matrix

Matrix transpose

• The transpose of a product of matrices is the transpose of each matrix multiplied in reverse order

CSE 167, Winter 2020 21

m rows and n columns n rows and m columns

Flipped over the diagonal

Example using three matrices

The identity matrix

CSE 167, Winter 2020 22

Matrix inverse

• The inverse of a square matrix A is a matrix A-1

such that

• A square matrix has an inverse if and only if its determinant is nonzero

• The inverse of a product of matrices is the inverse of each matrix multiplied in reverse order

CSE 167, Winter 2020 23

Example using three matrices

Representing points using vectors

• 2D point

• 3D point

CSE 167, Winter 2020 24

Geometric transformations in 2D

• Operations on vectors (or points)

– Translation

– Linear transformation

• Scale

• Shear

• Rotation

• Any combination of these

– Affine transformation

• Linear transformation followed by translation

CSE 167, Winter 2020 25

2D translation

• Translation of vector x to x’ under translation t

CSE 167, Winter 2020 26

2D uniform scale

• Scale x and y the same

CSE 167, Winter 2020 27

2D nonuniform scale

• Scale x and y independently

CSE 167, Winter 2020 28

2D shear

• Shear in x direction (horizontal)

CSE 167, Winter 2020 29

2D rotation

• Positive angles rotate counterclockwise

CSE 167, Winter 2020 30

Inverse 2D rotation

• Positive angles rotate counterclockwise

• Negative angles rotate clockwise

CSE 167, Winter 2020 31

2D rotation about a point

CSE 167, Winter 2020 32

?

2D rotation about a point

CSE 167, Winter 2020 33

1. Translate point to the origin

2. Rotate about the origin

3. Translate origin back to point

2D rotation about a point

• This can be accomplished with one transformation matrix, if we use homogeneous coordinates

• A 2D point using affine homogeneous coordinates is a 3-vector with 1 as the last element

CSE 167, Winter 2020 34

2D translation using homogeneous coordinates

• 2D translation using a 3x3 matrix

• Inverse of 2D translation is inverse of 3x3 matrix

CSE 167, Winter 2020 35

-

-

2D rotation using homogeneous coordinates

• 2D rotation using homogenous coordinates

CSE 167, Winter 2020 36

2D rotation about a pointusing homogeneous coordinates

CSE 167, Winter 2020 37

-

-

Important: transformation matrices are applied right to left

2D rotation about a pointusing homogeneous coordinates

CSE 167, Winter 2020 38

-

-

M

where M

-

-