Maths for Computer Graphics -...

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


2D transformations

Translation

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

original shape.

X

Y

original

translated

The transform is

1'

3'

+=

+=

yy

xx

06.01 Translation


2D transformations

Scaling Shape scaling is achieved by multiplying coordinates

xx 2'= yy 5.1'=

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


2D transformations

Scaling

X

Y

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

by 1.5.

original

scaled

The transform is

yy

xx

5.1'

2'

=

=

06.01 Translation


2D transformations

Reflection To reflect a shape relative to the y-axis

yy

xx

=

−=

'

'

To reflect a shape relative to the x-axis

yy

xx

−=

=

'

'

06.01 Translation


2D transformations

Reflection

original

X

Y

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

yy

xx

±=

±=

'

'

06.01 Translation


Matrices Matrix notation was investigated by the British mathematician Cayley around 1858. 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

T1 dycxy

byaxx

+=′

+=′

Caley proposed separating the constants from the variables as follows

T1

=

′

′

y

x

dc

ba

y

x.

06.01 Translation


Matrices

=

′

′

y

x

dc

ba

y

x.

Scaling

⋅

=

y

x

y

x

5.10

02

'

'

Reflection (about the y axis)

⋅

−=

y

x

y

x

10

01

'

'

Reflection (about the x axis)

⋅

−

=

y

x

y

x

10

01

'

'

Translation

?

06.01 Translation


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


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 ),( yx 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


Homogeneous coordinates

1

t

X

Y

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

convenience.

06.01 Translation


Homogeneous coordinates Consider the following transformation on the homogeneous point (x, y, 1)

=

′

′

1

.

1001

y

x

fed

cba

y

x

This expands to

cbyaxx ++=′

feydxy ++=′

11= which solves the above problem of translating. Basically, we ignore the third coordinate 1.

06.01 Translation



2D translation The algebraic and matrix notation for 2D translation is

xtxx +=′

ytyy +=′

or using matrices

=

′

′

1

.

100

10

01

1

y

x

t

t

y

x

y

x

e.g.

=

′

′

1

.

100

310

201

1

y

x

y

x

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

06.01 Translation



2D scaling The algebraic and matrix notation for 2D scaling is

xxsx =′

yysy =′

or using matrices

=

′

′

1

.

100

00

00

1

y

x

ys

xs

y

x

e.g.

=

′

′

1

.

100

05.10

002

1

y

x

y

x

Scales by a factor of 2 in the x direction and 1.5 in the y direction.

06.01 Translation



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.

xxxppxsx +−=′ )(

yyyppysy +−=′ )(

which simplifies to

)1(xxx

spxsx −+=′

)1(yyy

spysy −+=′

or in a homogeneous matrix form

−

−

=

′/

′

1

.

100

)1(0

)1(0

1

y

x

sps

sps

y

x

yyy

xxx

06.01 Translation



2D scaling relative to a point Example To scale a shape by 2 relative to the point )1,1(

−

−

=

′

′

1

.

100

120

102

1

y

x

y

x

12'

12'

−=

−=

yy

xx

06.01 Translation



2D reflections The matrix notation for reflecting about the y axis is

−

=

′

′

1

.

100

010

001

1

y

x

y

x

or about the x axis

−=

′

′

1

.

100

010

001

1

y

x

y

x

06.01 Translation



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.

11 −= xx

)1(2 −−= xx

1)1( +−−=′ xx

which simplifies to

2+−=′ xx

yy =′

06.01 Translation



2D reflections relative to a line

2+−=′ xx

yy =′

or in matrix form

−

=

′

′

1

.

100

010

201

1

y

x

y

x

1 2 3 4 -1 -2 0

Fig. 7.5 The shape on the right is reflected

X

Y

06.01 Translation



2D reflection relative to a line A similar transform is used for reflections about an arbitrary x-axis,

yay =

xx =′

yyyayaayy 2)( +−=+−−=′

In matrix form

⋅

−=

1100

210

001

1

'

'

y

x

ay

x

y

06.01 Translation

2D Shearing A shape is sheared by leaning it over at an angle .β The y-coordinate remains unchanged but the x-coordinate is a function of y and tan(β)

)tan(βyxx +=′

yy =′


θ

Fig. 7.6 The original square shape is sheared to the right by and angle β,

and the horizontal shift is proportional to ytan(β).

ytan(β) y

original sheared

X

Y

β


06.01 Translation

2D Shearing In matrix form

=

′

′

1

.

100

010

0)tan(1

1

y

x

y

x β

06.01 Translation


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

X

Y

P(x, y)

P'(x', y') y'

y

x' x

β

Fig. 7.7 The point P(x, y) is rotated through an angle β to P′(x′, y′).

)cos( βθ +=′ Rx

)sin( βθ +=′ Ry

θ

06.01 Translation


2D Rotation )cos( βθ +=′ Rx

)sin( βθ +=′ Ry

therefore

( ))sin()sin()cos()cos( βθβθ −=′ Rx

( ))sin()cos()cos()sin( βθβθ +=′ Ry

−=′ )sin()cos( ββ

R

y

RxRx

+=′ )sin()cos( ββ

Rx

R

yRy

)sin()cos( ββ yxx −=′

)cos()sin( ββ yxy +=′

In matrix form

−

=

′

′

1

.

100

0)cos()sin(

0)sin()cos(

1

y

x

y

x

ββββ

06.01 Translation


2D Rotation Example To rotate a point by 90° the matrix becomes

−

=

′

′

1

.

100

001

010

1

y

x

y

x

Thus the point (1, 0) becomes (0, 1). If we rotate by 360° the matrix becomes

=

′

′

1

.

100

010

001

1

y

x

y

x

Such a matrix has a null effect and is called an identity matrix.

06.01 Translation


2D Rotation about an arbitrary point ),(yx

pp 1: Subtract ),( ypxp from the coordinates (x, y).

2: Perform the rotation. 3: Add ),( ypxp to the rotated coordinates.

1: Subtract ),(

yxpp

)(1 xpxx −=

)(1 ypyy −=

2: Rotate β about the origin

)sin()()cos()(2 ββyx

pypxx −−−=

)cos()()sin()(2 ββyx

pypxy −+−=

3: Add ),(yx

pp

xpypyxpxx +−−−=′ )sin()()cos()( ββ

ypypyxpxy +−+−=′ )cos()()sin()( ββ

simplifying

)sin())cos(1()sin()cos( ββββyx

ppyxx +−+−=′

)sin())cos(1()cos()sin( ββββxy

ppyxy −−++=′

06.01 Translation


2D Rotation about an arbitrary point )sin())cos(1()sin()cos( ββββ

yxppyxx +−+−=′

)sin())cos(1()cos()sin( ββββxy

ppyxy −−++=′

In matrix form

−−

+−−

=

′

′

1

.

100

)sin())cos(1()cos()sin(

)sin())cos(1()sin()cos(

1

y

x

pp

pp

y

x

xy

yx

ββββββββ

WHICH CAN NOT BE MEMORISED!!

06.01 Translation


2D Scaling about a point

To scale a point (x, y) relative to some point ),(yx

pp we:

1: translate ),(yx

pp −−

2: perform the scaling (sx, sy) 3: translate ),(

yxpp

In matrix form

[ ] [ ] [ ]

−−

′

′

⋅⋅⋅=

1

),(translate),(),(translate

1

y

x

ppssscaleppy

x

yxyxyx

which becomes

−

−

=

1100

10

01

100

00

00

100

10

01

1

'

'

y

x

p

p

s

s

p

p

y

x

y

x

y

x

y

x

06.01 Translation


2D Scaling about a point

Concatenating

−

−

=

1100

10

01

100

00

00

100

10

01

1

'

'

y

x

p

p

s

s

p

p

y

x

y

x

y

x

y

x

−

−

=

1100

0

0

100

10

01

1

'

'

y

x

pss

pss

p

p

y

x

yyy

xxx

y

x

and finally

−

−

=

1100

0

0

1

'

'

y

x

pss

pss

y

x

yyy

xxx

06.01 Translation


2D reflections about an arbitrary axis A reflection about an arbitrary axis x = ax, parallel with the y-axis, is given by

[ ] [ ] [ ]

⋅−⋅⋅=

1

)0,()0,(

1

'

'

y

x

atranslatereflectionatranslatey

x

xx

which expands to

−

−

=

′

′

1

.

100

010

01

.

100

010

001

.

100

010

01

1

y

xaa

y

xxx

−

=

′

′

1

.

100

010

01

.

100

010

01

1

y

xaa

y

xxx

−

=

′

′

1

.

100

010

201

1

y

xa

y

xx

06.01 Translation


2D rotation about an arbitrary point A rotation about the origin is given by

−

=

′

′

1

.

100

0)cos()sin(

0)sin()cos(

1

y

x

y

x

ββββ

A rotation about an arbitrary point ( )yx

pp ,

[ ] [ ] [ ]

⋅−−⋅⋅=

′

′

1

),(translaterotate),(translate

1

y

x

ppppy

x

yxyxβ

which expands to

⋅

−

−

⋅

−

⋅

=

1100

10

01

100

0)cos()sin(

0)sin()cos(

100

10

01

1

'

'

y

x

p

p

p

p

y

x

y

x

y

x

ββββ

⋅

−−

+−−

=

1100

)sin())cos(1()cos()sin(

)sin())cos(1()sin()cos(

1

'

'

y

x

pp

pp

y

x

xy

yx

ββββββββ

06.01 Translation


3D transformations 3D translation

=

′

′

′

1

.

1000

100

010

001

1

z

y

x

t

t

t

z

y

x

z

y

x

3D scaling

=

′

′

′

1

.

1000

000

000

000

1

z

y

x

s

s

s

z

y

x

z

y

x

3D scaling relative to a point

−

−

−

=

′

′

′

1

.

1000

)1(00

)1(00

)1(00

1

z

y

x

sps

sps

sps

z

y

x

zzz

yyy

xxx

06.01 Translation


3D Rotations

P(x, y, z)

P′(x′, y′, z)

X

Y

Z

β

Fig. 7.8 Rotating P about the z-axis.

)sin()cos( ββ yxx −=′

)cos()sin( ββ yxy +=′

zz =′

−

=

′

′

′

1

.

1000

0100

00)cos()sin(

00)sin()cos(

1

z

y

x

z

y

x

ββββ

06.01 Translation


3D Rotations When rotating about the x-axis, the x-coordinate remains constant whilst the y- and z-coordinates are changed. Algebraically, this is

xx =′

)sin()cos( ββ zyy −=′

)cos()sin( ββ zyz +=′

In a matrix transform

−

=

′

′

′

1

.

1000

0)cos()sin(0

0)sin()cos(0

0001

1

z

y

x

z

y

x

ββββ

06.01 Translation


3D Rotations When rotating about the y-axis, the y-coordinate remains constant whilst the x- and z-coordinates are changed. Algebraically, this is

)cos()sin( ββ xzx +=′

yy =′

)sin()cos( ββ xzz −=′

In matrix form

−=

′

′

′

1

.

1000

0)cos(0)sin(

0010

0)sin(0)cos(

1

z

y

x

z

y

x

ββ

ββ

06.01 Translation


Yaw, Pitch and Roll rotations

roll pitch

yaw X

Y

Z

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


Roll, Pitch and Yaw Euler rotations rotate roll about the z-axis

−

1000

0100

00)cos()sin(

00)sin()cos(

rollroll

rollroll

rotate pitch about the x-axis

−

1000

0)()sin(0

0)sin()cos(0

0001

pitchcoapitch

pitchpitch

rotate yaw about the y-axis

−

1000

0)cos(0)sin(

0010

0)sin(0)cos(

yawyaw

yawyaw

06.01 Translation


Combined rotations A common way of combining yaw, pitch and roll is

[ ] [ ] [ ]

⋅⋅⋅=

′

′

′

11

z

y

x

rollpitchyawz

y

x

If translation is involved

[ ] [ ] [ ] [ ]

⋅⋅⋅⋅=

′

′

′

11

z

y

x

rollpitchyawtranslatez

y

x

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

Gimbal Lock

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.


Z'

roll = 45º

X

Y

Z X

Y

Z

X' Y'

Z'

Y'

X'

pitch = 90º

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°.

06.01 Translation


Rotating about an axis

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

z-axis.

P′(x′, y′, z′)

P(x, y, z)

β

X

Y

Z

px

py z′= z

[ ] [ ] [ ]

⋅−−⋅⋅=

′

′

′

1

)0,,()0,,(

1

z

y

x

pptranslaterotatepptranslatez

y

x

yxyxβ

Or in matrix form

−−

+−−

′

′

′

=

11000

0100

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

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

1

.

z

y

x

pp

pp

z

y

x

xy

yx

ββββββββ

06.01 Translation


Determinants Determinants arise in the solution of linear equations

ybxac 111 += (1)

ybxac 222 += (2)

Solving for x Multiply (1) by b2 and (2) by b1

ybbxbabc 212121 +=

ybbxbabc 211212 +=

Then subtract xbaxbabcbc 12211221 −=−

1221

1221

baba

bcbcx

−−

=

Provided that the denominator 01221 ≠− baba .

06.01 Translation


Determinants

ybxac 111 += (1)

ybxac 222 += (2)

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

ybaxaaca 122112 +=

ybaxaaca 212121 +=

Subtracting ybaybacaca 12211221 −=−

1221

1221

baba

cacay

−−

=

Provided that the denominator 01221 ≠− baba .

06.01 Translation


Determinants

1221

1221

baba

bcbcx

−−

=

1221

1221

baba

cacay

−−

=

Let

1221

22

11baba

ba

ba−= = the determinat

12211221

1

bababcbc

x

−=

−

12211221

1

babacaca

y

−=

−

122112211221

1

babacaca

y

bcbc

x

−=

−=

−

Et voila!

22

11

22

11

22

11

1

ba

ba

ca

ca

y

bc

bc

x==

06.01 Translation


Determinants summary

ybxac 111 +=

ybxac 222 +=

=

y

x

ba

ba

c

c

22

11

2

1

22

11

22

11

22

11

1

ba

ba

ca

ca

y

bc

bc

x==

Example yx += 210

yx −= 54

15

121

45

102

14

110

−

==

−

yx

7

1

4214 −=

−=

−yx

Therefore x = 2 and y = 6

06.01 Translation


Determinants

With a set of three linear equations:

zcybxad 1111 ++=

zcybxad 2222 ++=

zcybxad 3333 ++=

the value of x is defined as

123213312132231321

123213312132231321

cbacbacbacbacbacba

cbdcbdcbdcbdcbdcbdx

−+−+−−+−+−

=

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


Determinants

zcybxad 1111 ++=

zcybxad 2222 ++=

zcybxad 3333 ++=

=

z

y

x

cba

cba

cba

d

d

d

.

333

222

111

3

2

1

therefore

333

222

111

333

222

111

333

222

111

333

222

111

1

cba

cba

cba

dba

dba

dba

z

dca

dca

dca

y

cbd

cbd

cbd

x===

23213312132231321

333

222

111

cbacbacbacbacbacba

cba

cba

cba

−+−+−=

which can be written

22

11

3

33

11

2

33

22

1cb

cba

cb

cba

cb

cba +−

06.01 Translation


Graphical interpretation of the determinant Consider the transform

=

′

′

y

x

dc

ba

y

x.

The determinant of the transform is ad – cb. The vertices of the unit-square are moved as follows

)0,0()0,0( ⇒

),()0,1( ca⇒

),()1,1( dcba ++⇒

),()1,0( db⇒

06.01 Translation


Determinant and the unit square

(b, d)

Y

A

a b

c

d

b a

(0, 0)

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

B

C D

E

F G X

(a, c)

(a+b, c+d)

GFEDCB))(( −−−−−−++= dcbaarea

accbbdaccbbdbdcbadac 21

21

21

21 −−−−−−+++=

cbad −=

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


Determinant of a transform This transform encodes a scaling of 2, and results in an overall area scaling of 4

20

02 and the determinant is 4

20

02=

This transform encodes a scaling of 3 and a translation of (3, 3), and results in an overall area scaling of 9:

100

330

303

and the determinant is

933

300

10

300

10

333 =+−

Consider the rotate transform

−

)cos()sin(

)sin()cos(

θθθθ

its determinant is 1)(sin)(cos 22 =+ θθ

Maths for Computer Graphics -...

Documents

Transcript of Maths for Computer Graphics -...