An Introduction to 2D Graphic Transformations

1. An Introduction to 2D Graphic Transformations

2. 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

3. 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, distances, and relative proportions; and sets of parallel lines • i.e., points on the same line before remain on the same line after an affine transformation

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

5. Scaling larger smaller in x larger smaller in y Scaling (larger) Scaling (smaller) larger smaller in both

6. Rotation Rotation

7. Transformation in x in both

8. Some Non Affine Transformations

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

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

11. Matrices • Matrix • 2 dimensional array (of numbers) • m x n matrix • m rows • n columns • xij is the entry at row i, column j 2 rows 3 columns

12. Some Examples • a 2 x 1 matrix • A 3 x 3 matrix • 1 x 2 matrix • 2 x 2 matrix

13. 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 ith row with the jth column produces the element at location [i][j]

14. Matrix Multiplication

15. 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 3 columns row column 3 rows

16. Matrix Multiplication • We can therefore only multiply an 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 3 rows 2 rows 4 columns 2 columns 4 columns

17. An Example

18. An Example (1  1) + (2  5) = 1 + 10 = 11

19. An Example (1  2) + (2  6) = 2 + 12 = 14

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

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

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

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

24. An Example (3  3) + (4  7) = 9 + 28 = 37

25. An Example (3  4) + (4  8) = 12 + 32 = 44

26. An Example (5  1) + (6  5) = 5 + 30 = 35

27. An Example (5  2) + (6  6) = 10 + 36 = 46

28. An Example (5  3) + (6  7) = 15 + 42 = 57

29. An Example (5  4) + (6  8) = 20 + 48 = 68

30. 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] // sum of products return result

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

32. Scaling • Transformation that enlarges or reduces an image

33. Scaling • Scaling can be done in the x-coordinate …

34. Scaling • … in the y-coordinate …

35. Scaling • … or in both …

36. Scaling • We could simply say that • To scale in the x-coordinate, all you have to do is 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

37. Simple Enough • The above works and is totally adequate in order to scale • Why complicate matters? • Why even consider doing anything else?

38. Multiple Transformations • What if we want to • scale and rotate • translate, rotate and translate again • etc,… • Don’t want to have to apply each transformation individually • Even if only for endpoints, typical graphic image might have (tens/hundreds of) thousands of lines

39. Using Matrices • Let’s represent a point (x, y) 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

40. 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

41. 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

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

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

44. A Trivial Example • To see that this is so: • The matrix • is thus called the identity matrix

45. 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 y-value • not be affected by the original x-value

46. 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 y-value • not be affected by the original x-value

47. 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 b: the effect of the original x-value on the new y-value a: the effect of the original x-value on the new x-value d: the effect of the original y-value on the new y-value c: the effect of the original y-value on the new x-value

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

49. 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!!

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