1. Transforms

2. Types of Transforms
Translate
Rotate
Scale
Shear

3. Affine Transform Math Transforms are cumulative
Transforms change the whole world view
Order matters!

4. Rotate 90
Reflect X
Rotate 90
Reflect X

5. Making Shapes work together
Create an object that has state variables corresponding to its parts
Draw from the center of the overall object
Perform transforms: 1. translate to center of overall object 2. rotate if wanted 3. scale/shear if wanted

6. Matrices Rectangular arrangement of numbers [1 2 3] 2 -3 0 3 7 -1
[ ]
Dimensions
Diagonal
Transpose: interchange rows and cols
Identity: Square matrix, diagonal is ones, rest is zeros

7. Matrix Operations
Adding and subtracting: matrices must have same dimensions
Add or subtract element-wise
[1 2 3] + [4 5 6] = [5 7 9]
Scalar multiplication: multiply all elements by the scalar
2 * [1 2 3] = [2 4 6]

8. Multiplying Matrices 3 [4 5 6] x 2 = 4*3 + 5*2 + 6*1 = [28] 1
(m x n) x (n x p) yields (mxp)
Even if the matrices are square, multiplication is not commutative

9. Matrices and Graphics
A point can be described using a vector: p = (x,y) p = xi+yj
Or a matrix: [x y]
Transposes are matrices that get post-multiplied to the point to produce a new point.
(3,2)

10. Scaling
Multiply by the matrix a 0 where a is the scale 0 b factor in the x direction, and b is the scale factor in the y direction
If a and b are the same, it’s like multiplying by a scalar. (Balanced or Uniform scaling)

11. Scaling
[3 2] = [12 8]
0 4
(12,8)
(3,2)

12. Reflecting Reflection in the x–axis: 1 0 0 -1
Reflection in the y–axis:
In general, multiplying by negative numbers combines a reflection and a scale.

13. Reflection
[ 3 2] -1 0 = [-3 -2]
(3,2)
(-3,-2)

14. Rotations: Searching for a Pattern
rotates through 180 degrees (pi radians)
rotates through 360 degrees (2 pi radians)
causes a rotation of 90 degrees
(pi/2 radians)
causes a rotation of 270 degrees
(3pi/2 radians)

15. In general… The pattern emerges:
To rotate through an angle Ө, multiply by
cos Ө sin Ө
-sin Ө cos Ө

16. Transforming Polygons
To transform a line, transform its end points and connect the new points.
Polygons are collections of lines.
Multiplying several points is the same as making a matrix where each point is a row.
True for Affine Transformations
preserves points on line and parallelism
preserves proportions (i.e., the midpoint remains the midpoint)

17. Transforming Polygons=
R(6,4)
P(1,3)
Q*(9,0)
Q(3,0)

18. Multiple transformations
Order in transformations matters.
Matrix multiplication is not commutative!

19. Translations To translate, we add rather than multiply matrices.
To shift a point over by a in the x direction and b in the y direction, add the matrix
[ a b]

20. Transformations
[ 3 2 ] + [ 2 4] = [5 6]
(5,6)
(2,4)
(3,2)

21. Homogeneous Coordinates
You can’t use a 2x2 multiplication matrix to model translation. Bummer!
But, we can add a third dimension of homogeneous coordinates, and now all 2D transformations can be expressed in a 3x3 matrix.

22. Homogeneous Translation
Add a 1 to the point vector [3 2 1] = (3,2)
To translate over 2 and up 4, multiply by
[3 2 1] = [ ]

23. Homogeneous Scale
Scale by a in x direction and b in y a b
Reflect in x-axis:

24. Homogeneous Rotation Rotate about the origin: cos Ө sin Ө 0
-sin Ө cos Ө 0

25. Rotation about a point
How would we rotate about a point other than the origin?
I want to rotate this shape about its center, which is (5,2).

26. Rotation about a point
Step 1 – translate coordinates so that your point of rotation becomes the origin.
1. Multiply by:
0 0

27. Rotation about a point Step 2 – Do your rotation
2. (For 90 degrees) Multiply by:

28. Rotation about a point Step 3 – go back to original position
3. Undoing step 1:
0 0

29. 3D
How do you think it is done in 3D?