2D Geometrical Transformations

Foley & Van Dam, Chapter 5 2D Geometrical Transformations

• Translation • Scaling • Rotation • Shear • Matrix notation • Compositions • Homogeneous coordinates 2D Geometrical Transformations

Assumption: Objects consist of points and lines. A point is represented by its Cartesian coordinates: P = (x, y)

Geometrical Transformation: Let (A, B) be a straight line segment between the points A and B. Let T be a general 2D transformation. T transforms (A, B) into another straight line segment (A’, B’), where: A’=TA and B’=TB Translation

• Translate(a, b): (x, y) → (x+a, y+b)

Translate(2, 4) Scale • Scale (a, b): (x, y) → (ax, by)

Scale (2, 3)

Scale (2, 3) Scale • How can we scale an object without moving its origin (lower left corner)?

Translate(-1,-1)

Translate(1,1) Scale(2,3) Reflection

• Special case of scale

Scale(-1,1)

Scale(1,-1) Rotation • Rotate(θ): (x, y) → (x cos(θ)+y sin(θ), -x sin(θ)+y cos(θ))

Rotate(90)

Rotate(90) Rotation • How can we rotate an object without moving its origin (lower left corner)?

Translate(-1,-1)

Translate(1,1) Rotate(90) Shear • Shear (a, b): (x, y) → (x+ay, y+bx)

Shear(1,0)

Shear(0,2) Classes of Transformations • Rigid transformation (distance preserving): Translation + Rotation • Similarity transformation (angle preserving): Translation + Rotation + Uniform Scale • Affine transformation (parallelism preserving): Translation + Rotation + Scale + Shear

All above transformations Affine are groups where Similarity Rigid ⊂ Similarity ⊂ Affine Rigid Matrix Notation

• Let’s treat a point (x, y) as a 2x1 matrix (column vector):  x     y 

• What happens when this vector is multiplied by a 2x2 matrix?  a b   x   ax + by      =    c d   y   cx + dy  2D Transformations • 2D object is represented by points and lines that join them

• Transformations can be applied only to the the points defining the lines

• A point (x, y) is represented by a 2x1 column vector, so we can represent 2D transformations by using 2x2 matrices:  x '   a b   x    =      y '   c d   y  Scale • Scale (a, b): (x, y) → (ax, by)

 a 0   x   ax      =    0 b   y   by 

•If a or b are negative, we get reflection

• Inverse: S-1(a,b) = S(1/a, 1/b) Reflection • Reflection through the y axis:  − 1 0     0 1  • Reflection through the x axis:  1 0     0 − 1  • Reflection through y = x:  0 1     1 0  • Reflection through y = -x:  0 − 1     − 1 0  Shear • Shear (a, b): (x, y) → (x+ay, y+bx)

 1 a   x   x + ay      =    b 1   y   y + bx  Rotation • Rotate(θ): (x, y) → (x cos(θ)+y sin(θ), -x sin(θ)+y cos(θ))

 cos θ sin θ   x   x cos θθ + y sin θ      =    − sin cos θ   y   − x sin + y cos θ 

• Inverse: R-1(q) = RT(q) = R(-q) Composition of Transformations

• A sequence of transformations can be collapsed into a single matrix:  x   x  [][][]A B C  [ ]= D    y   y  •Note: Order of transformations is important!

translate rotate

rotate translate Translation • Translation (a, b):  x   x + a    →    y   y + b  Problem: Cannot represent translation using 2x2 matrices

Solution: Homogeneous Coordinates Homogeneous Coordinates

Is a mapping from Rn to Rn+1: ( x , y ) → ( X , Y , W ) = ( tx , ty , t )

Note: All triples (tx, ty, t) correspond to the same non-homogeneous point (x, y) Example (2, 3, 1) ≡ (6, 9, 3).

Inverse mapping:  X Y  ( X , Y , W ) →  ,   W W  Translation • Translate(a, b):  1 0 a   x   x + a         0 1 b   y  =  y + b   0 0 1   1   1  Inverse: T-1(a, b) = T(-a, -b) Affine transformations now have the following form:  a b e     c d f   0 0 1  Geometric Interpretation A 2D point is mapped to a line (ray) in 3D The non-homogeneous points are obtained by projecting the rays onto the plane Z=1 W Y (X,Y,W) 1 y x (X,Y,1)

X Example Rotation about an arbitrary point

(x0,y0)

θ

θ 1. Translate the coordinates so that the origin is at (x0,y0) 2. Rotate by θ θ θ 3. Translate back θ θ  1 0 x   cos sin 0   1 0 − x   x  θ 0 θ 0  0 1 y   − sin cos 0   0 1 − y   y  =  0   θ   0     0 0 1   0 0 1   0 0 1   1     θ      θ θ  cos − sin x 0 (1 − cos ) + y 0 sin   x  =  sin cos y (1 − cos ) − x sin θ   y   0 0     0 0 1   1  Example Reflection about an arbitrary line

p2

L = p1 + t (p2-p1) = t p2 + (1-t) p1 p1

1.Translate the coordinates so that P1 is at the origin 2.Rotate so that L aligns with the x-axis 3.Reflect about the x-axis 4.Rotate back 5.Translate back Change of Coordinates

It is often required to transform the description of an object from one coordinate system to another

Rule: Transform one coordinate frame towards the other in the opposite direction of the representation change n atio ent res y’ Rep x’ y

tion rma nsfo x Tra Example

• Change of coordinates: Represent P = (xp, yp, 1) in the (x’, y’) coordinate system P ' = MP Where: θ  cos θ sin θ 0   1 0 − x     0  M =  − sin cos θ 0   0 1 − y 0       0 0 1   0 0 1  y’ x’ y θ

(x0, y0) (xp, yp) x Example • Change of coordinates: Alternative method: assume x’ = (ux, uy) and y’ = (vx, vy) in the (x, y) coordinate system where P ' = MP  u u 0   1 0 − x   x y   0  M =  v x v y 0   0 1 − y 0       0 0 1   0 0 1 

y’ y x’

(vx, vy) (ux, uy) (x0, y0) x Example Reflection about an arbitrary line

p2

L = p1 + t (p2-p1) = t p2 + (1-t) p1 p1

Define a coordinate systems (u, v) parallel to P P : p − p  u  1 2 u = 2 1 ≡ x  u  p 2 − p 1  y   − u   v  v = y = x    v   u x   y 

 1 0 p  u v 0   u u 0  1 0 − p   1x  x x  1 0 0  x y  1x  M = 0 1 p u v 0  0 − 1 0  v v 0 0 1 − p  1y  y y   x y  1y     0 0 1     0 0 1  0 0 1   0 0 1  0 0 1  3D Viewing Transformation Pipeline

Viewing coordinates

World Coordinates Object in World

ing pp ma :2D 3D

2D:2D mapping

Viewport

Device Coordinates World to Viewing Coordinates In order to define the viewing window we have to specify:

•Windowing-coordinate origin P0 = (x0,y0) •View vector up v = (vx,vy) •Using v, we can find u: u = v x (0,0,1) y v iew (vx,vy). y world (x0,y0)x view (ux,uy). x world Transformation from world to viewing coordinates :

 u x u y 0  1 0 − x    0  M wc − vc =  v x v y 0  0 1 − y 0      0 0 1  0 0 1  Window to Viewport Coordinates

(xmax,ymax)

(xmin,ymin)

Window is Viewing Coordinates Window translated to origin

(umaxn,vmaxn)

(umin,vmin)

Window scaled and translated to Window scaled to Normalized Viewport location in device coordinates Viewport size  1 0 0 1 0 u u u 0 0  x − x  1 0 x  min  max − min  max min  − min     1   M vc−dc=  0 1 vmin  0 vmax − vmin 0 0 0 0 1 − ymin     ymax − ymin    0 0 1  0 0 1 0 0 1 0 0 1     

Normalized Device Coordinates Efficiency Considerations A 2D point transformation requires 9 multiplies and 6 adds ab c x axb++y cz  defy=++dx eyfz g hi z g xh++y iz But since affine transformations have always the form: ab c x axb+ y + c  de fy=++dx eyf 001 1 1 The number of operations can be reduced to 4 multiplies and 4 adds Efficiency Considerations The rotation matrix is:  cos θ sin θ   x   x cos θθ + y sin θ      =   − sin cos θ   y  − x sin + y cos θ  When rotatingθθ of small angles θ, we can use the fact that cos(θ) ≅ 1 and simplify 1sinθ xxy+ sinθ = −−+sin 1yx sin y Determinant of a Matrix

ab = ad− bc cd abc d e f=++−−− aei bfg cdh ceg afh bdi gh i ef df de =−+ab c hi gi gh

If P is a polygon of area AP, transformed by a matrix M, the area of the transformed polygon is AP∗|M|