1. .

2. To transform something is to change it. In geometry, there are specific ways to describe how a figure is changed. The transformations you will learn about include: Translation Rotation Reflection Scaling Shear

3. A translation "slides" an object a fixed distance in a given direction. The original object and its translation have the same shape and size, and they face in the same direction. Translations are SLIDES.

4. ROTATION A rotation is a transformation that turns a figure about a fixed point called the center of rotation. An object and its rotation are the same shape and size, but the figures may be turned in different directions.

5. The concept of rotations can be seen in wallpaper designs, fabrics, and art work. Rotations are TURNS!!!

6. This rotation is 90 degrees clockwise. Clockwise Counterclockwise

7. REFLECTION A reflection can be seen in water, in a mirror, in glass, or in a shiny surface. An object and its reflection have the same shape and size, but the figures face in opposite directions. In a mirror, for example, right and left are switched.

8. Line reflections are FLIPS!!!

9. The line (where a mirror may be placed) is called the line of reflection. The distance from a point to the line of reflection is the same as the distance from the point's image to the line of reflection. A reflection can be thought of as a "flipping" of an object over the line of reflection.

10. SCALING A scaling is a transformation that produces an image that is the same shape as the original, but is a different size. A dilation used to create an image larger than the original is called an enlargement. A dilation used to create an image smaller than the original is called a reduction.

11. Which of the following lettered figures are translations of the shape of the purple arrow? Name ALL that apply. Letters a, c, and e are translations of the purple arrow.

12. Has each picture been rotated in a clockwise or counter-clockwise direction? The birds were rotated clockwise and the fish counterclockwise.

13. What transformations can you see in this Escher print? Some birds have been translated and some have been rotated.

14. Can you name examples in real life of each transformation? Translation Rotation Reflection Scale Shear

15. SCALING

16. REFLECTION

17. TRANSLATION. Ty Tx

18. SHEAR

19. UNIT - 3 Computer Graphics 5: 2D Transformations.

20. Contents In today’s lecture we’ll cover the following: –Why transformations –Transformations Translation Scaling Rotation Other Reflection Shear. –Homogeneous coordinates –Matrix multiplications –Combining transformations

21. Y we need ?  The animator can change the position of a character.  The architect can view a building from a different angle  The manager can alter the scale of the graphs in a report.  The cartographer can change the size of the chart. –These changes are easy to perform because the graphics image has been coded as numbers and store within the computer. –The numbers may be modified by mathematical operations called TRANSFORMATIONS.

22. Why Transformations? In graphics, once we have an object described, transformations are used to move that object, scale it and rotate it Scaling Rotation Translation

23. Simply moves an object from one position to another x new = x old + dxy new = y old + dy Note: House shifts position relative to origin y x 0 1 1 2 2 3 4 5 6 7 8 9 10 3 4 5 6

24. Translation  The translation is applied to an object by repositioning it along a straight line path from one coordinate location to another.  We translate a 2-dimensional point by adding translation distance tx and ty, to the original coordinate position (x,y) to move the point to a new position (x’,y’) as shown figure.  x’= x+ tx, y’= y+ty

25. Translation Example y x 0 1 1 2 2 345678910 3 4 5 6 (1, 1) (3, 1) (2, 3) (7, 3) (8, 1)(6, 1)

26. P’ = P + T Matrix transformation equations are expressed in terms of coordinate row vector instead of column vectors. P=[x y] P’ = [ x’ y’] T=[t x t y ] The homogeneous coordinate transformation matrix for a translation of t x, t y is

27. scaling  A scaling transformation alters the size of an object. To change the size of an object such that we can magnify the size or reduce it. This process is called scaling.  This operation can be carried out for polygons by multiplying the coordinate values (x, y) of each vertex by scaling factors Sx and Sy to produce the transformed coordinates (x’, y’). x’= x. Sx and y’= y. Sy  Scaling factor Sx scales object on the x direction, while Sy scales in the y direction as shown in figure.

28. Scaling Scalar multiplies all coordinates WATCH OUT: Objects grow and move! x new = Sx × x old y new = Sy × y old Note: House shifts position relative to origin y x 0 1 1 2 2 3 4 5 6 7 8 9 10 3 4 5 6

29. The transformation equations can also be written in the matrix form. Where S is the 2 by 2 scaling matrix. In the homogenous coordinates scaling matrix swill be

30. Scaling Example y 0 1 1 2 2 345678910 3 4 5 6 (1, 1) (3, 1) (2, 3) (3,2) (9, 2) (6, 6) (6, 3) (9, 1) (3, 1) (1, 2) (2, 6)

31. Rotation The two dimensional rotation is applied to an object by repositioning it along a circular path in the xy plane. To generate a rotation, we specify a rotation angle and the position (x r,y r ) of the rotation point (or pivot point) about which the object is to be rotated as shown in figure. x x y P(x, y) P’ (x’,y’) r (x r,y r )

32.  Positive values for the rotation angle define counter clock wise rotations about the pivot point and negative values rotate objects in the clock wise direction. This transformation can also be described as a rotation about a rotation axis that is perpendicular to the xy plane and passes through the pivot point.  We first determine the transformation equations for rotation of a point position P when the pivot point is at the coordinate origin. The angular and coordinate relationships of the original and transformed point positions are shown in figure. y x 0 1 1 2 2 3 4 5 6 7 8 9 10 3 4 5 6

33. Here r is the constant distance of the point from the origin, angle is the original angular position of the point from the horizontal, and is the rotation angle. The transformed coordinates in terms of angle. and are X’ = r cos( ) = r cos cos - r sin sin …..…...1 Y’= r sin( )= r cos sin + r sin cos ……….2 The original coordinates of the point in polar coordinates are x= r cos y= r sin …………. 3

34. Substitute equation 3 into 1 and 2, we obtain the transformation equations for rotating a point at position (x, y) through an angle about origin, We can write the rotation equations in the matrix from as P’ = R.P Where the rotation matrix is

35. When coordinate positions are represented as row vectors instead of column vectors, the matrix product in rotation equation is transposed so that the transformed row coordinate vector [x’ y’] is calculated as P’ T = (R.P) T = P T. R T Where P T = [x y], and the transpose R T of matrix R is obtained by interchanging rows and columns. For a rotation matrix, the transpose is obtained by simply changing the sign of the sign terms.

36. x y P(x, y) P’ (x’,y’) r (0,0) x y P(x, y) P’ (x’,y’) r  (x r,y r )

37. In matrix form, we have

38. Rotation Rotates all coordinates by a specified angle x new = x old × cosθ – y old × sinθ y new = x old × sinθ + y old × cosθ Points are always rotated about the origin y x 0 1 1 2 2 3 4 5 6 7 8 9 10 3 4 5 6

39. Rotation about the arbitrary point The transformation matrix for a counter clock wise rotation about point (xc, yc) is shown in figure. Rotation about the arbitrary point x y P(x, y) P’ (x’,y’) (Xc, Yc)

40. Rotation about the arbitrary point To do this the three transformation steps are i)Translate the point (Xc,Yc) to the origin ii)Rotate about the origin iii)Then translate the centre of rotation back where it belongs The three steps in the rotation about an arbitrary point is shown in figure.

41. Rotation about the arbitrary point Example: Rotate an object around an arbitrary point. 1) Translate P so that the axis is at the origin 2) Rotate the object 3)Translate the object so that P returns to its position original position of translation ofrotation translation of obj so that obj and pivote point obj so that pivote about the pivote point is returned to point (xr,yr) is at originorigin position (xr,yr)

42. The translation which move (Xc,Yc) to the origin is T1= The rotation is R = and the translation to move the centre point back to its correct position is T2=

43. T2( R T1) = = = This is the overall transformation for a rotation by counterclockwise about the point (xc,Yc)

44. Rotation Example y 0 1 1 2 2 345678910 3 4 5 6

45. Combining Transformations (cont…) 1 2 3 4

46. Homogeneous Coordinates A point (x, y) can be re-written in homogeneous coordinates as (x h, y h, h) The homogeneous parameter h is a non- zero value such that: We can then write any point (x, y) as (hx, hy, h) We can conveniently choose h = 1 so that (x, y) becomes (x, y, 1)

47. Why Homogeneous Coordinates? Mathematicians commonly use homogeneous coordinates as they allow scaling factors to be removed from equations We will see in a moment that all of the transformations we discussed previously can be represented as 3*3 matrices Using homogeneous coordinates allows us use matrix multiplication to calculate transformations – extremely efficient!

48. Remember Matrix Multiplication Recall how matrix multiplication takes place:

49. Homogeneous Translation The translation of a point by (dx, dy) can be written in matrix form as: Representing the point as a homogeneous column vector we perform the calculation as:

50. Homogenous Coordinates To make operations easier, 2-D points are written as homogenous coordinate column vectors Translation: Scaling:

51. Homogenous Coordinates (cont…) Rotation:

52. Inverse Transformations Transformations can easily be reversed using inverse transformations

53. Combining Transformations A number of transformations can be combined into one matrix to make things easy –Allowed by the fact that we use homogenous coordinates Imagine rotating a polygon around a point other than the origin –Transform to centre point to origin –Rotate around origin –Transform back to centre point

54. Combining Transformations (cont…) 1 2 3 4

55. The three transformation matrices are combined as follows REMEMBER: Matrix multiplication is not commutative so order matters

56. Summary In this lecture we have taken a look at: –2D Transformations Translation Scaling Rotation –Homogeneous coordinates –Matrix multiplications –Combining transformations Next time we’ll start to look at how we take these abstract shapes etc and get them on- screen

57. Other transformations  Reflection  Shearing

58. Reflection A transformation produces a mirror image of an object. Axis of reflection –A line in the xy plane –A line perpendicular to the xy plane –The mirror image is obtained by rotating the object 180 0 about the reflection axis.

59. Reflection Reflection about the x axis

60. Reflection Reflection about the y axis

61. Reflection Reflection relative to the coordinate origin

62. Reflection Reflection of an object relative to an axis perpendicular to the xy plane through P rfl

63. Reflection Reflection about the line y = x Here we first perform a clockwise rotation through a 45degrees angle, which rotates the line y=x onto the x axis. Next, we perform a reflection with respect to the x axis. The final step is to rotate the line y=x back to its original position with a counter clockwise rotation through 45 degrees.

64. Shearing A transformation that distorts the shape of an object such that the transformed shape appears as if the object were composed of internal layers that had been caused to slide over each other is called a shear. The shear transformations cause the image to slant. Shearing transformations makes the objects to distort their shapes in either x or y or both the directions. Two common shearing transformations are those that shift coordinate x values (X shear) and those that shift y values (y shear).

65. Types of shear Types of shearing are X- shear Y- shear

66. X- shear The x shear maintains the y coordinates, but changes the x values which causes vertical lines to tilt right or left. An x- direction shear relative to the x axis is produced with the transformation matrix.

67. X-shear Which transforms coordinate positions as, X’ = x+ *yy’ = y X shear with =2 (1,0) (0,0) (0,1) (1,1) (3,1) (2,1) (1,0) (0,0)

68. (1,0) (0,0) (0,1) (1,1) (3,1) (2,1) (1,0) (0,0)

69. Y-shear The y shear preserves all the x-coordinate values but shifts the y value. The amount of change in the y value depends upon the x position. This causes horizontal lines to transform into lines which slope up or down. X’= Xy’= y + x *

70. XY shear To shear in x and y directions both x’= x+ * y y’= y + x *

72. Transformations between Coordinate Systems x y y’ x’ x0x0 y0y0 θ x y y’ x’ θ

73. Graphics application often require the transformation of object description from one coordinate system to another. Sometimes objects are described in non-Cartesian reference frames that take advantage of object symmetries. Ex: of 2-dimensional non-Cartesian systems are polar coordinates, elliptical coordinates and parabolic coordinates. Here, we consider transformations between two Cartesian frames of reference. x y y’ x’ x0x0 y0y0 θ

74. The above fig shows two cartesian coordinates with origins at (0,0) and (x0,y0) and with an orientation angle theta between x and x’ axes. In order to transform object description from xy coordinates to x’y’ coordinates the following steps are followed:

75. This is done in two steps: Step 1: Translate so that the origin (x0,y0) of the x’y’ system is moved to the origin of the xy system. Step2: Rotate the x’ axis onto the x axis. Translation of the coordinate origin is expressed with the matrix operation

76. Transformations between Coordinate Systems x y y’ x’ x0x0 y0y0 θ x y y’ x’ θ

77. . To get the axes of the two systems into coincidence, we then perform the clockwise rotation Concatenating these two transformations matrices gives us the complete composition matrix for transforming object description from the xy system to the x’y’ system

78. Transformations between Coordinate Systems Method 1: Method 2:

79. Affine Transformations A coordinate transformation of the form x’=a xx x+a xy y+b x, y’=a yx x+a yy y+b y –x’ and y’ is a linear function of the original coordinates x and y. –a ij and b k are constants determined by the transformation type. –Translation, rotation, scaling, reflection, and shear are two-dimensional affine transformations. –An affine transformation involving only rotation, translation, and reflection preserves angles and lengths.

80. x y P(3, 1) P’ (x’,y’) (1, 1) x y P 1 (2, 0) P’ 1 (0,2) (0, 0) x y P’ (1,3) (1, 1)

82. Exercises 1 x y 0 1 1 2 2 345678910 3 4 5 6 (2, 3) (3, 2) (1, 2) (2, 1) Translate the shape below by (7, 2)

83. Exercises 2 x y 0 1 1 2 2 345678910 3 4 5 6 (2, 3) (3, 2) (1, 2) (2, 1) Scale the shape below by 3 in x and 2 in y

84. Exercises 3 Rotate the shape below by 30° about the origin x y 0 1 1 2 2 345678910 3 4 5 6 (7, 3) (8, 2) (6, 2) (7, 1)

85. Exercise 4 Write out the homogeneous matrices for the previous three transformations TranslationScalingRotation

86. Exercises 5 Using matrix multiplication calculate the rotation of the shape below by 45° about its centre (5, 3) x y 0 1 1 2 2 345678910 3 4 5 (5, 4) (6, 3) (4, 3) (5, 2)

87. Scratch x y 0 1 1 2 2 345678910 3 4 5 6

88. Equations Translation: x new = x old + dxy new = y old + dy Scaling: x new = Sx × x old y new = Sy × y old Rotation x new = x old × cosθ – y old × sinθ y new = x old × sinθ + y old × cosθ

89. Introduction to Polygons Different types of Polygons Simple Convex Simple Concave Non-simple : self-intersecting With holes ConvexConcaveSelf-intersecting

91. Introduction to Polygons Convex A region S is convex iff for any x1 and x2 in S, the straight line segment connecting x1 and x2 is also contained in S. The convex hull of an object S is the smallest H such that S

92. Introduction to Polygons Concave A region S is convex iff for any x1 and x2 in S, the straight line segment connecting x1 and x2 is also contained in S. The convex hull of an object S is the smallest H such that S

93. Scan Line Polygon Fill Algorithms A standard output primitive in general graphics package is a solid color or patterned polygon area: There are two basic approaches to filling on raster systems. Determine overlap Intervals for scan lines that cross that area. Start from a given interior point and paint outward from this point until we encounter the boundary (flood fill ) The first approach is mostly used in general graphics packages, however second approach is used in applications having complex boundaries and interactive painting systems X k+1,y k+1 X k, y k Scan Line y k +1 Scan Line y k

94. Seed Fill Algorithm These algorithms assume that at least one pixel interior to a polygon or region is known Regions maybe interior or boundary defined Interior-defined regionBoundary-defined region

95. A Simple Seed Fill Algorithm Push the seed pixel onto the stack While the stack is not empty Pop a pixel from the stack Set the pixel to the required value For each of the 4 connected pixels Adjacent to the current pixel, check if it is a boundary pixel or if it has already been set to the required value. In either case ignore it. Otherwise push it onto the stack The algorithm can be implemented using 8 connected pixels It also works with holes in the polygons

96. Scan Line Polygon Fill Algorithm Interior pixels along a scan line passing through a polygon area For each scan line crossing a polygon are then sorted from left to right, and the corresponding frame buffer positions between each intersection pair are set to the specified color. These intersection points are then sorted from left to right, and the corresponding frame buffer positions between each intersection pair are set to specified color 10 14 18 24

97. Scan Line Polygon Fill Algorithm In the given example ( previous slide), four pixel intersections define stretches from x=10 to x=14 and x=18 to x=24 Some scan-Line intersections at polygon vertices require special handling: –A scan Line passing through a vertex intersects two polygon edges at that position, adding two points to the list of intersections for the scan Line –In the given example, scan Line y intersects five polygon edges and the scan Line y‘ intersects 4 edges although it also passes through a vertex –y‘ correctly identifies internal pixel spans,but need some extra processing

98. Scan line Polygon Fill Algorithm –One way to resolve this is also to shorten some polygon edges to split those vertices that should be counted as one intersection –When the end point y coordinates of the two edges are increasing, the y value of the upper endpoint for the current edge is decreased by 1 –When the endpoint y values are monotonically decreasing, we decrease the y coordinate of the upper endpoint of the edge following the current edge

99. Scan Line Polygon Fill Algorithm Adjusting endpoint values for a polygon, as we process edges in order around the polygon perimeter. The edge currently being processed is indicated as a solid like. In (a), the y coordinate of the upper endpoint of the current edge id decreased by 1. In (b), the y coordinate of the upper end point of the next edge is decreased by 1 (a)(b)

100. Scan Line Polygon Fill Algorithm The topological difference between scan Line y and scan Line y'

101. -The topological difference between scan line y and scan line y’ is … - For Scan line y, the two intersecting edges sharing a vertex are on opposite sides of the scan line …! But for scan line y’, the two intersecting edges are both above the scan line -Thu, the vertices that require additional processing are those that have connecting edges on opposite sides of scan line. - We can identify these vertices by tracing around the polygon boundary either in clock-wise or anti-clockwise order and observing the relative changes in vertex y coordinates as we move from one edge to the next. - If the endpoint y values of two consecutive edges monotonically increase or decrease, we need to count the middle vertex as a single intersection point for any scan line passing through that vertex.

102. - Otherwise, the shared vertex represents a local extremum (min. or max.) on the polygon boundary, and the two edge intersections with the scan line passing through that vertex can be added to the intersection list Figure 3-36 Intersection points along the scan lines that intersect polygon vertices. Scan line y generates an odd number of intersections, but scan line y generates an even number of intersections that can be paired to identify correctly the interior pixel spans.

103. The scan conversion algorithm works as follows i.Intersect each scanline with all edges ii.Sort intersections in x iii.Calculate parity of intersections to determine in/out iv.Fill the “in” pixels Special cases to be handled: i.Horizontal edges should be excluded ii.For vertices lying on scanlines, i.count twice for a change in slope. ii.Shorten edge by one scanline for no change in slope Coherence between scanlines tells us that -Edges that intersect scanline y are likely to intersect y + 1 -X changes predictably from scanline y to y + 1

104. We have 2 data structures: Edge Table and Active Edge Table Traverse Edges to construct an Edge Table 1. Eliminate horizontal edges 2. Add edge to linked-list for the scan line corresponding to the lower vertex. Store the following: - y _upper: last scanline to consider - x _lower: starting x coordinate for edge - 1/ m : for incrementing x ; compute Construct Active Edge Table during scan conversion. AEL is a linked list of active edges on the current scanline, y. Each active edge line has the following information - y _upper: last scanline to consider - x _lower: edge’s intersection with current y - 1/ m : x increment The active edges are kept sorted by x

105. Algorithm 1.Set y to the smallest y coordinate that has an entry in the ET; i.e, y for the first nonempty bucket. 2.Initialize the AET to be empty. 3.Repeat until the AET and ET are empty: 3.1Move from ET bucket y to the AET those edges whose y_min = y (entering edges). 3.2Remove from the AET those entries for which y = y_max (edges not involved in the next scanline), the sort the AET on x (made easier because ET is presorted). 3.3Fill in desired pixel values on scanline y by using pairs of x coordinates from AET. 3.4 Increment y by 1 (to the coordinate of the next scanline). 3.5 For each nonvertical edge remaining in the AET, update x for the new y. Extensions: 1.Multiple overlapping polygons – priorities 2.Color, patterns Z for visibility