Download presentation

Presentation is loading. Please wait.

Published byMary Dwyer Modified over 4 years ago

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

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)

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

Similar presentations

Presentation is loading. Please wait....

OK

Test B, 100 Subtraction Facts

Test B, 100 Subtraction Facts

© 2018 SlidePlayer.com Inc.

All rights reserved.

To ensure the functioning of the site, we use **cookies**. We share information about your activities on the site with our partners and Google partners: social networks and companies engaged in advertising and web analytics. For more information, see the Privacy Policy and Google Privacy & Terms.
Your consent to our cookies if you continue to use this website.

Ads by Google

Ppt on children's day Ppt on web search engines Ppt on any business plan Ppt on mechanical power transmission system Ppt on religious tourism in india Ppt on job evaluation comments Ppt on nepali culture Ppt on different types of forests in the philippines Ppt on history of badminton rules Ppt on center of gravity