06.01 Translation

Maths for Computer Graphics 2D transformations Translation Cartesian coordinates provide a one-to-one relationship between number and shape. If P(x, y) is a vertex on a shape A new point P'(x', y') can be defined using x' = x + 3 y' = y + 1 Where P'(x', y') is three units to the right and one unit above P. Adding or subtracting a value to or from a coordinate translates it in space.

06.01 Translation

Maths for Computer Graphics 2D transformations Translation Y

translated original

X

Fig. 7.1 The translated shape results by adding 3 to every x-coordinate, and 1 to every y-coordinate of the original shape.

The transform is x' = x + 3 y' = y + 1

06.01 Translation

Maths for Computer Graphics 2D transformations Scaling Shape scaling is achieved by multiplying coordinates x' = 2 x y ' = 1.5 y

This transform results in a horizontal scaling of 2 and a vertical scaling of 1.5. Note that a point located at the origin does not change its place, therefore, scaling is relative to the origin.

06.01 Translation

Maths for Computer Graphics 2D transformations Scaling Y

scaled origina l X

Fig. 7.2 The scaled shape results by multiplying every x-coordinate by 2 and every y-coordinate by 1.5.

The transform is x' = 2 x y ' = 1.5 y

06.01 Translation

Maths for Computer Graphics 2D transformations Reflection To reflect a shape relative to the y-axis x' = − x y' = y To reflect a shape relative to the x-axis x' = x y' = − y

06.01 Translation

Maths for Computer Graphics 2D transformations Reflection Y

original

X

Fig. 7.3 The top right-hand shape can give rise to the three reflections simply by reversing the signs of coordinates.

The transform is x' = ± x y' = ± y

06.01 Translation

Maths for Computer Graphics Matrices Matrix notation was investigated mathematician Cayley around 1858.

by

the

British

Caley formalized matrix algebra along with the American mathematicians Benjamin and Charles Pierce. Carl Gauss (1777-1855) had proved that transformations were not commutative, i.e. T1×T2 ≠ T2×T1, and Caley’s matrix notation would clarify such observations. Consider the transformation T1 x′ = ax + by T1 y ′ = cx + dy Caley proposed separating the constants from the variables as follows  x′  a b   x  T1   =  .    y ′  c d   y 

06.01 Translation

Maths for Computer Graphics Matrices  x′  a b   x   y ′ =  c d  .  y       

Scaling  x' 2 0   x   y ' = 0 1.5 ⋅  y       

Reflection (about the y axis)  x '   − 1 0  x   y ' =  0 1 ⋅  y       

Reflection (about the x axis)  x '  1 0   x   y ' = 0 − 1 ⋅  y       

Translation

?

06.01 Translation

Maths for Computer Graphics Homogeneous coordinates Homogeneous coordinates surfaced in the early 1800s where they were independently proposed by A. F. Möbius (who invented a one-sided curled band), Feuerbach, Étienne Bobillier, and Plücker. Möbius named them barycentric coordinates. They have also been called areal coordinates because of their area calculating properties.

06.01 Translation

Maths for Computer Graphics Homogeneous coordinates Homogeneous coordinates define a point in a plane using three coordinates instead of two. Initially, Plücker located a homogeneous point relative to the sides of a triangle, but later revised his notation to the one employed in contemporary mathematics and computer graphics. This states that for a point P with coordinates ( x, y ) there exists a homogeneous point (xt, yt, t) such that X = x/t and Y = y/t. For example, the point (3, 4) has homogeneous coordinates (6, 8, 2), because 3 = 6/2 and 4 =8/2. But the homogeneous point (6, 8, 2) is not unique to (3, 4); (12, 16, 4), (15, 20, 5) and (300, 400, 100) are all possible homogeneous coordinates for (3, 4).

06.01 Translation

Maths for Computer Graphics Homogeneous coordinates Y

t

1 X

Fig. 7.4 2D homogeneous coordinates can be visualized as a plane in 3D space, generally where t = 1, for convenience.

06.01 Translation

Maths for Computer Graphics Homogeneous coordinates Consider the following transformation homogeneous point (x, y, 1)  x′   a b c   x   y ′ = d e f  .  y         1   0 0 1   1  This expands to x ′ = ax + by + c y ′ = dx + ey + f 1=1 which solves the above problem of translating. Basically, we ignore the third coordinate 1.

on

the

06.01 Translation

Maths for Computer Graphics Homogeneous coordinates 2D translation The algebraic and matrix notation for 2D translation is x′ = x + t x y′ = y + t y or using matrices  x ′  1  y ′ = 0     1  0 e.g.  x ′  1  y ′ = 0     1  0

0 tx   x 1 t y  .  y    0 1   1  0 2  x  1 3 .  y     0 1  1 

Translates a shape 2 in the x directions and 3 in the y direction.

06.01 Translation

Maths for Computer Graphics

Homogeneous coordinates 2D scaling The algebraic and matrix notation for 2D scaling is x′ = s x x y′ = s y y

or using matrices  x ′   s x 0 0  x   y ′ =  0 s  .  y 0 y       0 1  1   1   0 e.g.  x ′   2 0 0  x   y ′ = 0 1.5 0 .  y         1  0 0 1  1  Scales by a factor of 2 in the x direction and 1.5 in the y direction.

06.01 Translation

Maths for Computer Graphics Homogeneous coordinates 2D scaling relative to a point To scale relative to another point (px, py): 1: Subtract (px, py) from (x, y) respectively. This effectively translates the reference point (px, py) back to the origin. 2: Perform the scaling operation. 3: Add (px, py) back to (x, y) respectively, to compensate for the original subtraction. x′ = s x ( x − p x ) + p x y′ = s y ( y − p y ) + p y which simplifies to x ′ = s x x + p x (1 − s x )

y ′ = s y y + p y (1 − s y ) or in a homogeneous matrix form  x ′   s x 0 p x (1 − s x )   x   y ′ =  0 s  .  y − p ( 1 s ) / y y y       1  1   0 0   1 

06.01 Translation

Maths for Computer Graphics Homogeneous coordinates 2D scaling relative to a point Example To scale a shape by 2 relative to the point (1, 1)

 x′  2 0 − 1  x   y ′ = 0 2 − 1 .  y         1  0 0 1   1  x' = 2 x − 1 y' = 2 y − 1

06.01 Translation

Maths for Computer Graphics Homogeneous coordinates 2D reflections The matrix notation for reflecting about the y axis is  x′  − 1 0 0  x   y ′ =  0 1 0  .  y         1   0 0 1  1  or about the x axis

 x ′  1 0 0   x   y ′ = 0 − 1 0  .  y         1  0 0 1  1 

06.01 Translation

Maths for Computer Graphics Homogeneous coordinates 2D reflections relative to a line To make a reflection about an arbitrary vertical or horizontal axis. e.g. To make a reflection about the vertical axis x = 1. 1: Subtract 1 from the x-coordinate. This effectively makes the x = 1 axis coincident with the major y axis. 2: Perform the reflection by reversing the sign of the modified x coordinate. 3: Add 1 to the reflected coordinate to compensate for the original subtraction. x1 = x − 1 x2 = −( x − 1) x ′ = −( x − 1) + 1 which simplifies to x′ = − x + 2 y′ = y

06.01 Translation

Maths for Computer Graphics Homogeneous coordinates 2D reflections relative to a line x′ = − x + 2 y′ = y or in matrix form  x′ − 1 0 2  x   y ′ =  0 1 0  .  y         1   0 0 1   1  Y

X -2

-1

0

1

2

3

4

Fig. 7.5 The shape on the right is reflected

06.01 Translation

Maths for Computer Graphics Homogeneous coordinates 2D reflection relative to a line A similar transform is used for reflections about an arbitrary x-axis, y = a y x′ = x y ′ = −( y − a y ) + a y

= − y + 2a y

In matrix form 0   x  x '  1 0  y ' = 0 − 1 2a  ⋅  y  y       1   1   1  0 0

06.01 Translation

Maths for Computer Graphics 2D Shearing

A shape is sheared by leaning it over at an angle β . The y-coordinate remains unchanged but the xcoordinate is a function of y and tan(β) x ′ = x + y tan( β ) y′ = y Y

Maths for Computer Graphics ytan(β) y original

sheared

β θ

X

Fig. 7.6 The original square shape is sheared to the right by and angle β, and the horizontal shift is proportional to ytan(β).

06.01 Translation

2D Shearing In matrix form  x′  1 tan( β ) 0  x   y ′ =  0 1 0 .  y        0 1  1   1  0

06.01 Translation

Maths for Computer Graphics 2D Rotation

A point P(x, y) is to be rotated by an angle β about the origin to P'(x', y'). Y P'(x', y')

y'

P(x, y)

y

β θ

X

x' x Fig. 7.7 The point P(x, y) is rotated through an angle β to P′(x′, y′). x ′ = R cos(θ + β ) y ′ = R sin(θ + β )

06.01 Translation

Maths for Computer Graphics

2D Rotation x ′ = R cos(θ + β ) y ′ = R sin(θ + β ) therefore x ′ = R(cos(θ ) cos( β ) − sin(θ ) sin( β ) ) y ′ = R(sin(θ ) cos( β ) + cos(θ ) sin( β ) ) y x ′ = R x cos( β ) − sin( β )  R R  y y ′ = R cos( β ) + x sin( β )  R R  x ′ = x cos( β ) − y sin( β )

y ′ = x sin( β ) + y cos( β ) In matrix form  x′  cos( β ) − sin( β ) 0  x   y ′ =  sin( β ) cos( β ) 0 .  y        0 1  1   1   0

06.01 Translation

Maths for Computer Graphics 2D Rotation Example To rotate a point by 90° the matrix becomes  x ′  0 − 1 0   x   y ′  = 1 0 0  .  y         1  0 0 1  1  Thus the point (1, 0) becomes (0, 1). If we rotate by 360° the matrix becomes  x ′  1 0 0   x   y ′ =  0 1 0  .  y         1  0 0 1  1  Such a matrix has a null effect and is called an identity matrix.

06.01 Translation

Maths for Computer Graphics 2D Rotation about an arbitrary point ( p

x

, py )

1: Subtract ( p x , p y ) from the coordinates (x, y). 2: Perform the rotation. 3: Add ( p x , p y ) to the rotated coordinates.

1: Subtract ( p x , p y ) x1 = ( x − p x ) y1= ( y − p y )

2: Rotate β about the origin x2 = ( x − p x ) cos( β ) − ( y − p y ) sin( β ) y 2 = ( x − p x ) sin( β ) + ( y − p y ) cos( β )

3: Add ( p x , p y ) x ′ = ( x − p x ) cos( β ) − ( y − p y ) sin( β ) + p x y ′ = ( x − p x ) sin( β ) + ( y − p y ) cos( β ) + p y

simplifying x ′ = x cos( β ) − y sin( β ) + p x (1 − cos( β )) + p y sin( β ) y ′ = x sin( β ) + y cos( β ) + p y (1 − cos( β )) − p x sin( β )

06.01 Translation

Maths for Computer Graphics

2D Rotation about an arbitrary point x ′ = x cos( β ) − y sin( β ) + p x (1 − cos( β )) + p y sin( β ) y ′ = x sin( β ) + y cos( β ) + p y (1 − cos( β )) − p x sin( β )

In matrix form

 x′ cos(β ) − sin(β ) px (1 − cos(β )) + py sin(β )  x  y′ = sin(β ) cos(β ) p (1 − cos(β )) − p sin(β ) .  y y x       0 1  1   0  1 WHICH CAN NOT BE MEMORISED!!

06.01 Translation

Maths for Computer Graphics 2D Scaling about a point To scale a point (x, y) relative to some point ( p x , p y ) we: 1: translate ( − p x ,− p y ) 2: perform the scaling (sx, sy) 3: translate ( p x , p y ) In matrix form  x  x′   y′ = [translate( p , p )] ⋅ [scale( s , s )] ⋅ [translate(− p ,− p )] ⋅  y  x y x y x y      1   1 

which becomes  x '  1 0  y ' = 0 1     1  0 0

p x  s x py  0  1   0

0 sy

0

0  1 0 − p x   x  0  0 1 − p y   y     1 0 0 1   1 

06.01 Translation

Maths for Computer Graphics 2D Scaling about a point Concatenating  x '  1 0  y ' = 0 1     1  0 0

p x  s x py  0  1   0

 x '  1 0  y ' = 0 1     1  0 0

p x  s x py  0  1   0

0 sy

0 0 sy

0

0  1 0 − p x   x  0  0 1 − p y   y     1 0 0 1   1  − sx px  x  − s y p y  y   1   1 

and finally

 x '  s x  y ' =  0     1   0

0 sy 0

− sx px  x − sy py  y   1   1 

06.01 Translation

Maths for Computer Graphics

2D reflections about an arbitrary axis A reflection about an arbitrary axis x = ax, parallel with the y-axis, is given by  x'  x  y ' = [translate ( a ,0)] ⋅ [reflection ] ⋅ [translate ( −a ,0)] ⋅  y  x x      1   1 

which expands to  x ′  1 0 a x   − 1 0 0  1 0 − a x   x   y ′ = 0 1 0  .  0 1 0 . 0 1 0  .  y           1   1   1  0 0 1   0 0 1 0 0  x ′  1 0 a x   − 1 0 a x   x   y ′ = 0 1 0  .  0 1 0  .  y           1  0 0 1   0 0 1   1   x′  − 1 0 2a x   x   y ′ =  0 1 0  .  y         1   0 0 1   1 

06.01 Translation

Maths for Computer Graphics 2D rotation about an arbitrary point A rotation about the origin is given by  x′  cos( β ) − sin( β ) 0  x   y ′ =  sin( β ) cos( β ) 0 .  y        0 1  1   1   0 A rotation about an arbitrary point ( p x , p y )  x′   x  y ′ = [translate( p , p )] ⋅ [rotateβ ] ⋅ [translate(− p ,− p )] ⋅  y  x y x y      1   1 

which expands to  x' 1 0  y ' = 0 1     1  0 0

p x  cos( β ) − sin( β ) 0 1 0 − p x   x  p y  ⋅  sin( β ) cos( β ) 0 ⋅ 0 1 − p y  ⋅  y         1   0 0 1  0 0 1   1 

 x' cos( β ) − sin( β )  y ' =  sin( β ) cos( β )    0  1   0

p x (1 − cos( β )) + p y sin( β )  x  p y (1 − cos( β )) − p x sin( β )  ⋅  y     1   1 

06.01 Translation

Maths for Computer Graphics 3D transformations 3D translation  x ′  1  y ′ 0  =  z ′  0  1  0   

0 1 0 0

0 tx   x 0 t y   y .  1 tz   z  0 1   1 

3D scaling  x′   s x  y ′  0  =  z′  0    1 0

0 sy 0 0

0 0 sz 0

0  x  0  y  .  0  z  1  1 

3D scaling relative to a point  x′   s x  y ′  0  =  z′  0    1 0

0 sy 0 0

0 0 sz 0

p x (1 − s x )   x  p y (1 − s y )  y  .  p z (1 − s z )   z     1  1 

06.01 Translation

Maths for Computer Graphics 3D Rotations Y

P′(x′, y′, z)

β

P(x, y, z)

X Z Fig. 7.8 Rotating P about the zaxis.

x ′ = x cos( β ) − y sin( β ) y ′ = x sin( β ) + y cos( β ) z′ = z  x′  cos( β ) − sin( β )  y ′  sin( β ) cos( β )  = 0  z′  0    0 1  0

0 0 1 0

0  x  0  y  .  0  z  1  1 

06.01 Translation

Maths for Computer Graphics 3D Rotations When rotating about the x-axis, the x-coordinate remains constant whilst the y- and z-coordinates are changed. Algebraically, this is x′ = x y ′ = y cos( β ) − z sin( β ) z ′ = y sin( β ) + z cos( β ) In a matrix transform 0 0  x ′  1  y ′ 0 cos( β ) − sin( β )  =  z ′  0 sin( β ) cos( β )    0 0  1  0

0  x  0  y  .  0  z  1  1 

06.01 Translation

Maths for Computer Graphics 3D Rotations When rotating about the y-axis, the y-coordinate remains constant whilst the x- and z-coordinates are changed. Algebraically, this is x ′ = z sin( β ) + x cos( β ) y′ = y z ′ = z cos( β ) − x sin( β ) In matrix form  x′   cos( β )  y ′  0  =  z ′  − sin( β )    1  0

0 sin( β ) 1 0 0 cos( β ) 0 0

0  x  0  y  .  0  z  1  1 

06.01 Translation

Maths for Computer Graphics Yaw, Pitch and Roll rotations Y

pitch Z

roll yaw

X

Fig. 7.9 The convention for roll, pitch and yaw angles. Roll about the z axis Pitch about the x axis Yaw about the y axis

06.01 Translation

Maths for Computer Graphics Roll, Pitch and Yaw Euler rotations rotate roll about the z-axis cos(roll ) − sin( roll )  sin( roll ) cos(roll )  0 0   0 0 

0 0 1 0

0 0  0 1

rotate pitch about the x-axis 0 0 1 0 cos( pitch) − sin( pitch)  0 sin( pitch) coa( pitch)  0 0 0

0 0  0 1

rotate yaw about the y-axis  cos( yaw)  0  − sin( yaw)  0 

0 sin( yaw) 1 0 0 cos( yaw) 0 0

0 0  0 1

06.01 Translation

Maths for Computer Graphics Combined rotations A common way of combining yaw, pitch and roll is  x′   x  y ′  y   = [ yaw] ⋅ [ pitch] ⋅ [roll ] ⋅    z′ z   1  1   If translation is involved  x′   x  y ′  y   = [translate ] ⋅ [ yaw] ⋅ [ pitch] ⋅ [roll ] ⋅    z′ z 1 1      The vertex is first rotated about the z-axis (roll), followed by a rotation about the x-axis (pitch), followed by a rotation about the y-axis (yaw), then translated. Euler rotations are relative to the fixed frame of reference.

06.01 Translation

Maths for Computer Graphics Gimbal Lock Y

Y'

Z'

Y

X'

pitch = 90º Y'

roll = 45º

Z

X

Z

X

X' Z'

Fig. 7.12 The X'Y'Z' axial system after a roll of 45°.

Fig. 7.13 The X'Y'Z' axial system after a pitch of 90°.

Figure 7.12 shows the orientation of X′Y′Z′ after it is subjected to a roll of 45° about the z-axis. Figure 7.13 shows the orientation of X′Y′Z′ after it is subjected to a pitch of 90° about the x-axis. If we now performed a yaw of 45° about the z-axis, it would rotate the x′-axis towards the x-axis, counteracting the effect of the original roll. Effectively, a yaw has become a negative roll rotation, caused by the 90° pitch. This situation is known as gimbal lock, because one degree of rotation has been lost.

06.01 Translation

Maths for Computer Graphics Rotating about an axis Y P′(x′, y′, z′)

px z′= z

β py

P(x, y, z)

Z

X

Fig. 7.14 Rotating a point about an axis parallel with the z-axis.

 x′  x  y′  y   = [translate( px , py ,0)]⋅ [rotateβ ]⋅ [translate(− px ,− py ,0)]⋅    z′ z 1 1     

Or in matrix form  x′  cos( β ) − sin( β ) 0 p x (1 − cos( β )) + p y sin( β )   x   y ′  sin( β ) cos( β ) 0 p (1 − cos( β )) − p sin( β )   y  y x  =  z′     1 

0

0

1

0

0

0

0

1

.   z  1    

06.01 Translation

Maths for Computer Graphics Determinants Determinants arise in the solution of linear equations c1 = a1 x + b1 y

(1)

c 2 = a 2 x + b2 y

(2)

Solving for x Multiply (1) by b2 and (2) by b1 c1b2 = a1b2 x + b1b2 y c 2 b1 = a2 b1 x + b1b2 y Then subtract c1b2 − c2 b1 = a1b2 x − a 2 b1 x

x=

c1b2 − c2 b1 a1b2 − a2 b1

Provided that the denominator a1b2 − a2 b1 ≠ 0 .

06.01 Translation

Maths for Computer Graphics Determinants c1 = a1 x + b1 y

(1)

c 2 = a 2 x + b2 y

(2)

Solving for y Multiply (1) by a2 and (2) by a1

a 2 c1 = a1 a 2 x + a 2 b1 y a1c2 = a1 a 2 x + a1b2 y Subtracting

a1c2 − a2 c1 = a1b2 y − a2 b1 y y=

a1c2 − a2 c1 a1b2 − a2 b1

Provided that the denominator a1b2 − a2 b1 ≠ 0 .

06.01 Translation

Maths for Computer Graphics Determinants x=

c1b2 − c2 b1 a1b2 − a2 b1

y=

a1c2 − a2 c1 a1b2 − a2 b1

a1 a2

b1 = a1b2 − a2 b1 = the determinat b2

Let

x 1 = c1b2 − c 2 b1 a1b2 − a 2 b1 y 1 = a1c2 − a 2 c1 a1b2 − a 2 b1 x y 1 = = c1b2 − c 2 b1 a1c2 − a 2 c1 a1b2 − a2 b1

Et voila! x c1

b1

c2

b2

=

y a1

c1

a2

c2

=

1 a1

b1

a2

b2

06.01 Translation

Maths for Computer Graphics Determinants summary c1 = a1 x + b1 y c 2 = a 2 x + b2 y  c1   a1 b1   x  c  =  a b   y   2  2 2   x y 1 = = c1 b1 a1 c1 a1 b1 c2

b2

a2

c2

a2

b2

Example 10 = 2 x + y 4 = 5x − y x 10

1

4

−1

=

y 1 = 2 10 2 1 5

4

x y 1 = = − 14 − 42 − 7 Therefore

x = 2 and y = 6

5 −1

06.01 Translation

Maths for Computer Graphics Determinants With a set of three linear equations: d1 = a1 x + b1 y + c1 z d 2 = a2 x + b2 y + c2 z d 3 = a3 x + b3 y + c3 z the value of x is defined as x=

d1b2 c3 − d1b3 c2 + d 2 b3 c1 − d 2 b1c3 + d 3b1c 2 − d 3b2 c1 a1b2 c3 − a1b3 c2 + a 2 b3 c1 − a2 b1c3 + a3b1c2 − a3b2 c1

with similar expressions for y and z. Once more, the denominator comes from the determinant of the matrix associated with the matrix formulation of the linear equations:

06.01 Translation

Maths for Computer Graphics Determinants d1 = a1 x + b1 y + c1 z d 2 = a2 x + b2 y + c2 z d 3 = a3 x + b3 y + c3 z  d1   a1 d  = a  2  2  d 3   a3

b1 b2 b3

c1   x  c2  .  y     c3   z 

therefore x = d1 b1 c1 a1

y c1

d1

d2

b2

c2

a2

c2

d3

b3

c3

a3

c3

a1

b1

c1

a2

b2

c2 = a1b2 c3 − a1b3 c2 + a 2 b3 c1 − a2 b1c3 + a3b1c2 − a3b2 c

a3

b3

c3

a1

z b1

d1

d2

a2

b2

d3

a3

b3

=

a1

1 b1

c1

d2

a2

b2

c2

d3

a3

b3

c3

=

which can be written a1

b2

c2

b3

c3

− a2

b1

c1

b3

c3

+ a3

b1 b2

c1 c2

06.01 Translation

Maths for Computer Graphics Graphical interpretation of the determinant Consider the transform  x′  a b   x   y ′ =  c d  .  y        The determinant of the transform is ad – cb. The vertices of the unit-square are moved as follows (0, 0) ⇒ (0, 0) (1, 0) ⇒ (a, c) (1, 1) ⇒ (a + b, c + d ) (0, 1) ⇒ (b, d )

06.01 Translation

Maths for Computer Graphics Determinant and the unit square Y b

a (a+b, c+d) D

C

(b, d) d

B A

E (a, c) G

(0, 0)

a

F

c

X b

Fig. 7.28 The inner parallelogram is the transformed unit square.

area = ( a + b)(c + d ) − B − C − D − E − F − G = ac + ad + cb + bd − 12 bd − cb − 12 ac − 12 bd − cb − 12 ac = ad − cb which is the determinant of the transform. But as the area of the original unit-square was 1, the determinant of the transform controls the scaling factor applied to the transformed shape.

06.01 Translation

Maths for Computer Graphics Determinant of a transform This transform encodes a scaling of 2, and results in an overall area scaling of 4 2 0 2 0 0 2 and the determinant is 0 2 = 4   This transform encodes a scaling of 3 and a translation of (3, 3), and results in an overall area scaling of 9: 3 0 3 0 3 3 and the determinant is   0 0 1 3

3 3 0 1

−0

0 3 0 1

+0

0 3 3 3

=9

Consider the rotate transform cos(θ ) − sin(θ ) 2 2 its determinant is cos ( θ ) + sin (θ ) = 1  sin(θ ) cos(θ )   