1. 7.1 Si23_03 SI23 Introduction to Computer Graphics Lecture 7 Introducing SVG Transformations on Elements

2. 7.2 Si23_03 SVG Fundamentals n Structure of an SVG document – Document data – Start of document – Graphic content – End of document Element type name Attribute name Attribute value

3. 7.3 Si23_03 SVG Shapes n Rectangles n Circles n Ellipses n Lines n Areas

4. 7.4 Si23_03 SVG Styles n The style determines how a shape appears – Stroke – Fill <line x1=10 y1=20 x2=30 y2=10 style=stroke:black;/> <polygon points=10,10 20,10 15,30 style=stroke:black;fill:yellow;/>

5. 7.5 Si23_03 Elementary Transformations n The basic transformations we look at are: – TRANSLATION – SCALING (about origin) – ROTATION (about origin) n Complex transformations are built from combinations of these elementary ones

6. 7.6 Si23_03 Translation (x,y) (x*,y*) x* = x + a; y* = y + b Suppose we want to translate a point (x,y) by an amount (a,b) - we increase x-coord by a, and y-coord by b

7. 7.7 Si23_03 Translating an Object To translate an object by (a,b), we translate its defining points by (a,b) x* y* = xyxy + abab for each defining point on object

8. 7.8 Si23_03 Scaling Scaling relative to origin by 1.5 in x, and by 2.0 in y x* = 1.5 x; y* = 2.0 y x* y* = sx0sx0 0sy0sy xyxy If s x = s y, then scaling is UNIFORM - otherwise NON-UNIFORM Remember scaling here is relative to the origin

9. 7.9 Si23_03 Rotation Rotation of 90 degrees anti-clockwise relative to origin x* = -y ; y* = x

10. 7.10 Si23_03 Rotation x* = cos. x - sin. y y* = sin. x + cos. y x* y* = cos sin -sin cos xyxy Rotation is relative to origin

11. 7.11 Si23_03 Transformations - Summary n TRANSLATION: P* = P + T n SCALING: P* = S. P n ROTATION: P* = R. P

12. 7.12 Si23_03 Combining Transformations n In practice, it is often necessary to apply a sequence of transformations eg rotate, then scale : P (1) = R. PP (2) = S. P (1) = S. R. P = M. PM = (S. R) n Thus successive scale or rotate transformations can be accumulated into a single matrix.

13. 7.13 Si23_03 Combining Transformations n But translation does not fit this pattern: – Consider translate then scale - P (1) = P + T P (2) = S. P (1) = S. (P + T) – The accumulation of successive transformations starts to get messy n Can we express translation as a matrix vector multiplication?

14. 7.14 Si23_03 Homogeneous Coordinates n A 2D point in Cartesian coordinates corresponds to a 3D point in homogeneous coordinates xyxy xy1xy1 You can think of homogeneous coordinates in terms of a plane through z = 1 in three dimensional space.

15. 7.15 Si23_03 Translation in Homogeneous Coordinates n Translation can now be written as: x* y* 1 = 100100 010010 ab1ab1 xy1xy1 So we have:P* = T. P

16. 7.16 Si23_03 Scaling and Rotation in Homogeneous Coordinates n Scaling and rotation are: = sx00sx00 0sy00sy0 001001 x* y* 1 xy1xy1 x* y* 1 =xy1xy1 cos sin 0 -sin cos 0 001001

17. 7.17 Si23_03 Combining Transformations n We now have: – TRANSLATION: P* = T. P – SCALING: P* = S. P – ROTATION: P* = R. P n We can thus combine transformations by multiplying the matrices – eg translate then scale becomes: P (1) = T. P P (2) = S. P (1) = S. T. P

18. 7.18 Si23_03 Example: Rotate object about centre (i) translate centre to originT(-cx,-cy) (ii) rotate through 90 degreesR( /2) (iii) translate centre back to original positionT(+cx, +cy) Computed as (taking M initially as I, identity matrix): (i) M = T(-cx,-cy). M (ii) M = R( /2). M (iii) M = T(cx,cy). M then P* = M. P

19. 7.19 Si23_03 SVG Transformations n Translate n Scale (about origin) n Rotate (about origin, angle in degrees, positive clockwise) <rect x="200" y="110" width="100" height="80" transform="translate(0,120)" style="fill:red;"/> <rect x="200" y="110" width="100" height="80" transform="scale(0.5,1.0)" style="fill:green;"/> <rect x="200" y="110" width="100" height="80" transform="rotate(30)"/>

20. 7.20 Si23_03 Tomorrow … n SVG – How to group elements into objects – How to scale and rotate about a point n Curve Drawing – How to draw smooth curves – Specifying curves in SVG