Transformations We want to be able to make changes to the image larger/smaller rotate move This can be efficiently achieved through mathematical operations known as transformations

Transformations We will transform the endpoints only If we then draw the (new) lines between the transformed endpoints, we get the transformed image This only works for certain types of transformations known as affine transformations Such transformations preserve lines and distances and relative proportions i.e., points on the same line before remain on the same line after an affine transformation

Transformations Three transformations that fall into this category are Scaling Rotation Translation

But First… We’re going to need a bit of math… … just enough to get the general idea

Matrices Matrix 2 dimensional array (of numbers) m x n matrix m rows n columns

Matrices Matrix 2 dimensional array (of numbers) m x n matrix m rows n columns x ij is the entry at row I, column j 2 rows 3 columns

1 x 2 matrix 2 x 2 matrix a 2 x 1 matrix A 3 x 3 matrix Some Examples

Matrix Multiplication In matrix multiplication, elements in the result matrix are obtained by taking the sums of the products of the elements of a row of the first with a column of the second Calculating the sum of products of the i th row with the j th column produces the element at location [i][j]

Matrix Multiplication

In order to calculate a sum of products, the length of a row of the first matrix must be equal to the length of a column in the second matrix length of a row = # columns length of a column = # rows Matrix Multiplication 3 columns row 3 rows column

Matrix Multiplication Can therefore only multiply m x k matrix with a k x n matrix # of columns of first operand = # rows of second operand Results in an m x n matrix 3 rows 2 rows 2 columns 4 columns 3 rows 4 columns

An Example

(1  1) + (2  5) = = 11

An Example (1  2) + (2  6) = = 14

An Example (1  3) + (2  7) = = 17

An Example (1  4) + (2  8) = = 20

An Example (3  1) + (4  5) = = 23

An Example (3  2) + (4  6) = = 30

An Example (3  3) + (4  7) = = 37

An Example (3  4) + (4  8) = = 44

An Example (5  1) + (6  5) = = 35

An Example (5  2) + (6  6) = = 46

An Example (5  3) + (6  7) = = 57

An Example (5  4) + (6  8) = = 68

The Algorithm multiply(a, b) // a = M x K b = K x N result = new Matrix(m, n) for i = 1, M// M rows in a for j = 1, N// N columns in b result[i][j] = 0 for k = 1, K // K columns in a, rows in b result[i][j] += a[i, k] * b[k, j] return result

What’s this got to do with us? Matrices are a convenient and powerful way of expressing transformations Allows complex sequences of complex transformations to be easily expressed and calculated Let’s look at one simple transformation and see how

Scaling Transformation that enlarges or reduces image

Scaling Scaling can be done in the x-coordinate …

Scaling … in the y-coordinate …

Scaling … or in both …

Scaling We could simply say that To scale in the x-coordinate, multiply by the scaling factor that is, to scale to double the size in the x- coordinate, simply multiply the x-coordinate of all endpoints by 2 Similarly to reduce the size Similarly in the y-direction

Simple enough The above works and is totally adequate to scale Why complicate matters? Why even consider doing anything else?

Multiple Transformations Will want to scale and rotate translate, rotate and translate again etc,… Don’t want to have to apply each transformation individually

Let’s represent a point as a 1 x 2 matrix We often call a 1 x n matrix a vector Let’s reexamine multiplying this vector with a 2 x 2 matrix Using Matrices

Applying Matrix Multiplication We can think of the above multiplication taking the point (x, y) and producing a new point (x', y') where x ' = ax + cy y ' = bx + dy

Transformation Matrix We see that when a 2 x 2 matrix is multiplied with a 1 x 2 vector representing a point … … a new 1 x 2 vector is produced … … that can be though of as representing a new point We thus call the 2 x 2 matrix a transformation matrix The matrix when applied to the original point transforms it into the new point

Where Matrix Multiplication Comes In Looking at the above we can get a sense of how the 2 x 2 matrix transforms the point: a: the effect of the original x- value on the new x-value c: the effect of the original y- value on the new x-value b: the effect of the original x- value on the new y-value d: the effect of the original y- value on the new y-value x'x' y'y'

An Trivial Example Following this line of thought, the matrix: a: the original x-value has an identity effect on the new x- value c: the original y-value has no effect on new x-value b: the original x-value has no effect on the new y-value d: the original y-value has an identity effect on the new y- value should transform the original point back to itself

A Trivial Example To see that this is so: The matrix is called the identity matrix

Applying this to Scaling Using this approach, let’s try to produce some transformation matrices for scaling Let’s first scale the x-coordinate alone We’d like the new (transformed) x-value to be a factor of the original x-value not be affected by the original y-value the new (transformed) y-value to be identical to the original x-value (not be affected by the original x-value)

Doubling the Size in the x-Direction As an example, to double the x-value We’d like the new (transformed) x-value to be 2 times the original x-value not be affected by the original y-value the new (transformed) y-value to be identical to the original x-value (not be affected by the original x-value)

The Effect of the Transformation Matrix By recalling how the transformation matrix affects the original point, we can come up with the following ‘educated’ guess a: the effect of the original x-value on the new x-value c: the effect of the original y-value on the new x-value b: the effect of the original x-value on the new y-value d: the effect of the original y-value on the new y-value

Checking Our Guess So we see indeed, our hunch was correct! Doing the multiplication produces

Other Scaling Matrices The same line of reasoning produces The general transformation matrix for scaling in the x- direction alone The general transformation matrix for scaling in the y- direction alone The general transformation matrix for scaling in both directions For practice, verify these by doing the matrix multiplications!!

Applying Multiple Transformations If we multiply the ‘scale x’ matrix and the ‘scale y’ matrix, we obtain the scale matrix for both

Applying Multiple Transformations Similarly, if we multiply the ‘double size’ matrix and the ‘half size’ matrix, we obtain the identity matrix

Although we won’t prove it, it can be shown that multiplying two transformation matrices produces a transformation matrix whose effect is the first transformation followed by the second! This result extends to three or more as well Applying Multiple Transformations

This is a valuable result because it means we can achieve the effect of several transformation by applying a single matrix to our image rather than having to perform a sequence of transforms. Applying Multiple Transformations

Rotations About the Origin The next transformation involves rotating the endpoints (and therefore the line) about the point (0, 0)

Rotations About the Origin Again, we will try to derive the transformation matrix This one is a bit more involved and requires some trigonometry and geometry

We view the point (x, y) as the endpoint of a line segment whose other end is the origin The line segment forms some angle-- call it θ -- with the x-axis θ (x, y) (0, 0) y axis x axis Rotations About the Origin

the rotation involves rotating the endpoint (x, y) around the origin to a new point (x', y'). the other endpoint remains the origin, the length of the line remains the same. Rotation About the Origin y axis x axis O A B (x, y) (x', y')

Rotation About the Origin We’d like to define the value of the new (transformed) point (x',y') in terms of the original point(x, y) If we can do that, we can come up with a transformation matrix! And, again, as we said before, this will require a bit of math

θ y axis x axis  Rotation About the Origin we can think of the rotation as ‘increasing’ the original angle of the line, θ, by an additional amount,  (x', y') (x, y)

The Sum of Two Angles Given two angles  and  : sin(  +  ) = cos  sin  + sin  cos  cos(  +  ) = cos  cos  - sin  sin  We’re not going to derive these formulae

For right triangles sine = opposite / hypotenuse cosine = opposite / hypotenuse tangent = opposite / adjacent (we won’t be using this) Remember SOHCAHTOA? θθθ

θ y axis x axis Rotation About the Origin (x 1, y 1 ) y1y1 x1x1 L or, sine = opposite / hypotenuse

θ y axis x axis Rotation About the Origin (x 1, y 1 ) y1y1 x1x1 L or, cosine = adjacent / hypotenuse

θ y axis x axis  Rotation About the Origin (x 2, y 2 ) (x 1, y 1 ) Recall, the length of the line, L, stays the same The angle of the line ending at (x 2 y 2 ) is θ+  L L

θ y axis x axis  Rotation About the Origin (x 2, y 2 ) (x 1, y 1 ) L y2y2 and we stated before that: From the diagram: so…

And since Through the Magic of Algebraic Manipulation We get We have defined y 2 in terms of x 1 and y 1 – exactly what we were looking for!!!

θ y axis x axis  Rotation About the Origin (x 2, y 2 ) (x 1, y 1 ) L x2x2 and: Similarly, from the diagram: so…

More Magic of Algebraic Manipulation And again, since We get We have similarly defined x 2 in terms of x 1 and y 1 – again exactly what we were looking for!!!

A Rotation-Around-the-Origin Matrix Given and we can clearly see the effects of x 1 and y 1 on x 2 and y 2 x 1 affects x 2 via cos  x 1 affects y 2 via sin  y 1 affects x 2 via -sin  y 1 affects y 2 via cos 

A Rotation Around the Origin Matrix This results in the transformation matrix for a rotation about the origin of angle  the effect of the original x- value on the new x-value the effect of the original y- value on the new x-value the effect of the original x- value on the new y-value the effect of the original y- value on the new y-value

Translation Moving the image a fixed amount in either the x-direction x 2 = x 1 + T x T x is the fixed amount to move in the x-direction the y-direction y 2 = y 1 + T y T y is the fixed amount to move in the y-direction both

Translation Sounds easy add the x translation amount to the x coordinate add the y translation amount to the y coordinate But we’d like to have a matrix Would like to combine our various transformations OTOH, is that really all that important?

Rotation About an Arbitrary Point We’d like to rotate around points other than the origin

Rotation About an Arbitrary Point We can accomplish this by Translating the desired rotation point to the origin…

Rotation About an Arbitrary Point …rotating about the origin…

Rotation About an Arbitrary Point …translating back to the original point…

The Problem Our transformation matrices till now had entries for How the old x affects the new x and y How the old y affects the new x and y a: the effect of the original x- value on the new x-value c: the effect of the original y- value on the new x-value b: the effect of the original x- value on the new y-value d: the effect of the original y- value on the new y-value

The Problem In a translation, the changes are fixed independent of the original x and y values Where would they go in the matrix?

Homogeneous Coordinates An approach to incorporating a fixed translation into a transformation matrix Using homogeneous coordinates involves…

Homogeneous Coordinates Using a 3 x 3 transformation matrix rather than a 2 x 2… For example, our scaling matrix becomes Not too bad– the extra row/column looks like an identity matrix The 0’s and 1 shouldn’t make the sums of products much harder to do Similarly for the rotation matrix

Homogeneous Coordinates The introduction of an additional ‘dummy’ coordinate, w Points are now specified by a 1 x 3 vector We can always get x and y back again by dividing by w And in any event, don’t get too worried, we’re going to keep w = 1

Homogeneous Coordinates Let’s just see the effect of all this As an example, we’ll do a scaling Which is the correct representation under homogeneous coordinates for the new (scaled) point … And similarly for rotation You can do the math if you want

A Translation Matrix Let’s try to understand this matrix The original x and y have an identity effect (the shaded 2 x 2 matrix is the identity matrix) on the new points The T x and T y will be multiplied by w (if you can’t visualize this, you’ll see it on the next slide) and added into the sum of products Dividing the result by w would then produce the fixed translation value To see this, let’s do the math

A Translation Matrix And again, this is the desired point modulo the division by w

Revisiting Rotation about an Arbitrary Point Given a rotation point of (x c, y c ) A rotation angle of  (x c, y c ) (x, y) 

Revisiting Rotation about an Arbitrary Point We first translate (x c, y c ) to the origin Translation matrix (x c, y c )

Revisiting Rotation about an Arbitrary Point We then perform the rotation (around the origin) of angle  … Rotation matrix 

Revisiting Rotation about an Arbitrary Point And finish off with a translation back to (x c, y c ) Translation matrix (x c, y c ) (x, y) 

A Matrix for Rotation about an Arbitrary Point Putting it all together, gives us and performing the multiplications produces