2D transformations - E-STUDYthirdyearengineering.weebly.com/uploads/3/8/2/8/38286065/... · 2018....

66
2D transformations

Transcript of 2D transformations - E-STUDYthirdyearengineering.weebly.com/uploads/3/8/2/8/38286065/... · 2018....

Page 1: 2D transformations - E-STUDYthirdyearengineering.weebly.com/uploads/3/8/2/8/38286065/... · 2018. 9. 10. · In CG images are made up of series of line segments. Each line segment

2D transformations

What and Why Transformations

What The geometrical changes of an object from a current state to modified state

bull Changing an objectrsquos position (translation) orientation (rotation) or size (scaling)

bull Others transformations reflection and shearing operations

Why bull To manipulate the initially created object and to display the

modified object without having to redraw it

Matrices

Matrix is a two Dimensional array of numbers Elements of the matrix are identified by its row and column pair

Matrix multiplication

Matrix multiplication is associative Means if we have multiple matrices to multiply then it does not matter which matrix we multiply first

A(BC) = (AB)C

1 5 0

0 1 0

5 6 1

3 2272014

In CG images are made up of series of line segments Each line segment is then represented by its end coordinates

We can make changes in the image by performing some mathematical operations on these co-or

The changes made in a image are called transformations

4 2272014

Basic Transformations 1 Scaling

2

Scaling

X 2

Y 05

Scaling

bull Scaling changes the size of an object and involves two scale factors Sx and Sy for the x- and y- coordinates respectively

bull Scales are about the origin

bull We can write the components

px = sx bull px

py = sy bull py

or in matrix form

P = S bull P

Scale matrix as

y

x

s

sS

0

0

P

Prsquo

bull If the scale factors are in between 0 and 1 the points will be moved closer to the origin the object will be smaller

P(2 5)

Prsquo

bull Example

bull P(2 5) Sx = 05 Sy = 05

bull Find Prsquo

bullIf the scale factors are larger than 1

the points will be moved away

from the origin the object will be

larger

Prsquo

bull Example

bullP(2 5) Sx = 2 Sy = 2

bullFind Prsquo

bull If the scale factors are the same Sx = Sy uniform scaling bull Only change in size (as previous example)

P(1 2)

Prsquo

bullIf Sx Sy differential scaling bullChange in size and shape bullExample square rectangle

bullP(1 3) Sx = 2 Sy = 5 Prsquo

Matrix

It is possible to represent this scaling in terms of the matrix

S=

Therefore Prsquo = P S

Sx 0

0 Sy

Thus

Scaling is used to alter the size of an object

Simple 2D scaling is performed by multiplying object positions (x y) by scaling factors sx and sy

xrsquo = x sx

yrsquo = y sx

or Prsquo = SP

xrsquo yrsquo Sx 0

0 Sy x y =

Points 2D Scaling

Any positive value can be used as scaling factor bull Values less than 1 reduce the size of the object

bull Values greater than 1 enlarge the object

bull If scaling factor is 1 then the object stays unchanged

bull If sx = sy we call it uniform scaling

bull If scaling factor lt1 then the object moves closer to the origin and If scaling factor gt1 then the object moves farther from the origin

xrsquo x

Translation

A translation moves all points in an object along the same straight-line path to new positions

The path is represented by a vector called the translation or shift vector

We can write the components

px = px + tx

py = py + ty

or in matrix form

P = P + T

tx

ty

xrsquo yrsquo

x

y

tx

ty = +

(2 2) = 6

=4

2 Translation

Translation changes the position of an object

P = point before translation

Prsquo = point after translation

Let point P(xy)

Prsquo(xrsquoyrsquo) xrsquo = x + tx yrsquo = y + ty

Translation moves the object without deformation

How can we write this in matrix form

P

Prsquo

T

Some points translation

2D Translation

To move a line segment apply the transformation equation to each of the two line endpoints and redraw the line between new endpoints

To move a polygon apply the transformation equation to coordinates of each vertex and regenerate the polygon using the new set of vertex coordinates

Rotation

A rotation repositions all points in an object along a circular path in the plane centered at the pivot point

First wersquoll assume the pivot is at the origin

P

Prsquo

Rotation

bull Review Trigonometry

=gt cos = xr sin = yr

bull x = r cos y = rsin

P(xy)

x

y r

xrsquo

yrsquo

Prsquo(xrsquo yrsquo)

r

=gt cos (+ ) = xrsquor bullxrsquo = r cos (+ )

bullxrsquo = rcoscos -rsinsin

bullxrsquo = xcos ndash ysin

=gtsin (+ ) = yrsquor yrsquo = r sin (+ )

bullyrsquo = rcossin + rsincos

bullyrsquo = xsin + ycos

Identity of Trigonometry

Rotation

bull We can write the components

px = px cos ndash py sin py = px sin + py cos

bull or in matrix form

P = R bull P

bull can be clockwise (-ve) or counterclockwise (+ve as our example)

bull Rotation matrix

P(xy)

x

y r

xrsquo

yrsquo

Prsquo(xrsquo yrsquo)

cossin

sincosR

Example

Find the transformed point Prsquo caused by rotating P= (5 1) about the origin through an angle of 90

Rotation

cossin

sincos

cossin

sincos

yx

yx

y

x

90cos190sin5

90sin190cos5

0115

1105

5

1

Matrix Representations and Homogeneous Coordinates

Many graphics applications involve sequences of geometric transformations

Animations

Design and picture construction applications

We will now consider matrix representations of these operations

Sequences of transformations can be efficiently processed using matrices

Matrix Representations and Homogeneous Coordinates

Prsquo = M1 P + M2

P and Prsquo are row matrices

M1 is a 2 by 2 array containing scaling factors

M2 is a 2 element row matrix containing translational terms

Matrix Representations and Homogeneous Coordinates

To produce a sequence of operations such as scaling followed by rotation then translation we could calculate the transformed coordinates one step at a time

A more efficient approach is to combine transformations without calculating intermediate coordinate values

Matrix Representations and Homogeneous Coordinates

Multiplicative and translational terms for a 2D geometric transformation can be combined into a single matrix if we expand the representations to 3 by 3 matrices

We can use the third column for translation terms and all transformation equations can be expressed as matrix multiplications

Homogenous Coordinates

Letrsquos move our problem into 3D Let point (x y) in 2D be represented by point (x y 1) in

the new space

Scaling our new point by any value a puts us somewhere along a particular line (ax ay a)

A point in 2D can be represented in many ways in the new space

(2 4) ---------- (8 16 4) or (6 12 3) or (2 4 1) or etc

y y

x

x

w

Homogenous Coordinates

bull We can always map back to the original 2D point by dividing by the last coordinate

bull (15 6 3) --- (5 2)

bull (60 40 10) -

bull Why do we use 1 for the last coordinate

bull The fact that all the points along each line can be mapped back to the same point in 2D gives this coordinate system its name ndash homogeneous coordinates

Matrix Representations and Homogeneous Coordinates

Thus 2D Translation Matrix is as follows

1

010

001

tytx

xrsquo yrsquo 1 x y 1 =

Thus 2D Rotation Matrix becomes as

Note Positive values of the rotation angle define the counterclockwise rotation about the rotation point and negative values rotate objects in the clockwise sense

100

0cossin

0sincos

xrsquo yrsquo 1 x y 1 =

Thus 2D Scaling Matrix becomes as

100

00

00

y

x

s

sxrsquo yrsquo 1 x y 1 =

Inverse Transformations

When we apply any transformation to point(xy) we get a new point (xrsquoyrsquo) Some times we need to get original co-ordinate from the transformed point This can be achieved by inverse transformation

2D Inverse Translation Matrix

1

010

0011

yx tt

T

Inverse Transformations

2D Inverse Rotation Matrix

Rotation in clockwise direction making Փ negative

ie cos(-θ)=cos θ sin(-θ)=-sin θ

Matrix becomes

2D Inverse Scaling Matrix

100

0cossin

0sincos1

R

100

01

0

001

1

y

x

s

s

S

2D Composite Transformations

We can setup a sequence of transformations as a composite transformation matrix by calculating the product of the individual transformations

Prsquo=M2M1P

Prsquo=MP

ROTATION ABOUT AN ARBITRARY POINT

2D Composite Transformations

General 2D Pivot-Point Rotation bull Translate

bull Rotate

bull Retranslate

1

010

001

100

0cossin

0sincos

1

010

001

rrrr yxyx

Example

Perform a clockwise rotation of 450 a triangle A(00) B(11) and C(52) (Dec-20052009 10 Marks)

bull about a point (-1-1)

bull About origin

Answer about origin

Arsquo = (00) Brsquo=(radic20) Crsquo=((7 radic2)(-3 radic2))

Ex2 consider a square p(00) Q(010) R(1010) S(100) Rotate the Sq about fixed point R(1010) by an angle 45o (anticlockwise) followed by scaling by 2 units in X direction and 2 units in Y direction (Dec 2006 8 marks)

Prove that two scaling transformations commute that is

S1 S2=S2 S1

Show that transformation matrix for a reflection about a line Y=X is equivalent to reflection to X-axis followed by counterclockwise rotation of 900 (Dec 2008 8 marks)

Perform X-shear and Y-shear on a triangle having A(21) B(43) C(23) Consider the constant value b=c=2

(Dec 2008 8 marks) Answer Arsquo = 45

Brsquo = 1011

Crsquo = 87

Scaling with respect to an arbitrary point

1 Translation

2 Scaling

3 Retranslation

Pictorially shown on next slide

1

010

001

100

00

00

1

010

001

ff

y

x

ff yx

s

s

yx

Other Two Dimensional Transformations

Reflection

Transformation that produces a mirror image of an object

y

x

Reflection

x-axis y-axis

100

010

001

100

010

001

Reflection

origin line x=y

100

010

001

100

001

010

Shear Transformations

Shear

Transformation that distorts the shape of an object such that the transformed shape appears as the object was composed of internal layers that had been caused to slide over each other

y

x

(01) (11)

(10) (00)

y

x

(21) (31)

(10) (00) shx=2

X-Shear

An x-direction shear relative to the x axis

An y-direction shear relative to the y axis

100

01

001

ysh

100

010

01 xsh

yy

yshxx x

Transformations in 3D

Some graphics applications are 2D such as charts graphs maps etc

But to create realistic picture we need to represent picture in 3D

In 3D geometry we need additional third axis z-axis to specify the depth value of the object

Let us see the coordinate systems used in 3D graphics

Lets plot a point in 3D with coordinates (342)

1 first plot the point at(302)

it is on the plane X-Z

2 then lift the point up by 4 units

Y-axis

X-axis

Z-axis

h

e

i

g

h

t

width

Depth

Translation in 3D

Remembering 2D transformations -gt 3x3 matrices take a wild guess what happens to 3D transformations

3D means z-axis comes into picture Giving Depth information for an object

1

0100

0010

0001

1

010

001

zyx

zyxzyx

yx

yxyx

ttt

tttzxytttT

tt

ttyxttT

T=(tx ty tz)

Scale 3D Style

S=(sx sy sz)

zsz

ysy

xsx

z

y

x

1000

000

000

000

)(

pps

s

s

PPsssS

z

y

x

zyx

3D Rotation

In 3D we have to specify the axis of rotation along with the rotation angle

Positive rotation angles produce counterclockwise rotations about a coordinate axis assuming that we are looking in the negative direction along that coordinate axis

3D Rotation

z-axis rotation

xrsquo=x cos θ - y sin θ

yrsquo=x sin θ + y cos θ

zrsquo=z

or Prsquo = Rz(θ)P

1000

0100

00cossin

00sincos

xrsquo yrsquo zrsquo 1

= x y z 1

When we say that we want to rotate a point in anticlockwise direction about z-axis it is very similar to performing a 2D rotation in anticlockwise direction as follows

Fig2D Rotation Fig 3D Rotation

3D Rotation

z-axis rotation

xrsquo=x cos θ - y sin θ

yrsquo=x sin θ + y cos θ

zrsquo=z Transformation equations for rotation abt the other axes

can be obtained with a cyclic permutation of coordinate parameters xy and z That is we use the replacements

xrarr yrarr zrarr x

x-axis rotation

yrsquo=y cos θ - z sin θ

zrsquo=y sin θ + z cos θ

xrsquo=x

y-axis rotation

zrsquo=z cos θ - x sin θ

xrsquo=z sin θ + x cos θ

yrsquo=y

Matrices for anticlockwise 3D rotation

1000

0cossin0

0sincos0

0001

xR

1000

0cos0sin

0010

0sin0cos

yR

1000

0100

00cossin

00sincos

zR

3D Rotation about an arbitrary axis

General Three-Dimensional Rotations

Special case where an object is to be rotated about an axis that is parallel to one of the coordinate axes

1 Translate the object so that the rotation axis coincides with parallel coordinate axis

2 Perform the specified rotation about the axis

3 Translate the object so that the rotation axis is moved back to its original position

3D Rotation of an object about an arbitrary axis

When an object is to rotated about an axis that is not parallel to one of the coordinate axes

1 Translate the object so that the rotation axis passes through the coordinate origin

2 Rotate the object so that the axis of rotation coincides with one of the coordinate axes

3 Perform the specified rotation about the selected coordinate axis

4 Apply inverse rotations to bring the rotation axis back to its original position

5 Apply the inverse translation to bring the rotation axis back to its original spatial position

We can determine the transformation matrices for each step

Assume that rotation axis ie arbitrary axis is defined with two points p1(x1y1z1) and p2(x2y2z2)

Let us say a point on the axis is (PQR)

Initial position of the axis and point is as bellow

p1

p2

(PQR)

Step1 (Translation)transformation of rotation axis so that it passes through the origin

This can be done by moving point P1 to the origin

This repositions the rotation axis and the object as shown

1111

0100

0010

0001

zyx

Tp1

p2

(PQR)

Step2 transform the rotation axis so that it coincides the z-axis

This can be performed in two sub-steps a) Rotate about x-axis to transform axis into xz plane

b) Swing rotation axis around to the z-axis using y-axis rotation

a) Take projection of line segment (000) to (PQR) onto yz plane as shown in fig ie (0QR)

(PQR)

(0QR)

Light

source

x

z

y

Step2-a

Now if we rotate the rotation (arbitrary) axis x-axis so that it lies in X-Z

In this situation its shadow will coincides the z-axis

So we are interested in angle α so that shadow will coincides with z-axis

length of shadow L = radicQ2+R2

sin α = QL

cos α = RL

Therefore the matrix for rotation about x-axis

Rx(α) =

1000

00

00

0001

LRLQ

LQLR

(PQR) (0QR)

L

α

After performing x-axis rotation the rotation axis will lie in x-z plane as shown

When we perform x-axis rotation x-value remains unchanged as axis of rotation is in xz plane so y-coordinate is zero We need to get z-value

L = radicP2+Q2+R2

z-coordinate will be v = radic(L2-P2)

(PQR)

L

P

Step2-b

Now we have to rotate the axis around y-axis so that it coincides the z-axis Let that angle be β

From figure cosβ = VL

sin β = pL

Therefore the transformation

matrix for rotation about y-axis

in clockwise rotation is

1000

00

0010

00

LvLp

LpLv

L

P

β

Ry(β) =

step3

Rotation about z-axis by given angle ie θ ie Rz (θ)

Step 4 and 5 does inverse transformations ie Ry-1 Rx-1 T-1

Therefore the final transformation matrix will be the product of all matrices in sequence

RA= T Rx RyRz Ry-1 Rx-1 T-1

1000

0100

00cossin

00sincos

zR

Reflection wrto xy plane

Consider a point P(xyz) The reflection of this point wrto xy plane is given by pointprsquo(xy-z)

Corresponding matrix is given as

M = 1 0 0

0 1 0

0 0 -1

Page 2: 2D transformations - E-STUDYthirdyearengineering.weebly.com/uploads/3/8/2/8/38286065/... · 2018. 9. 10. · In CG images are made up of series of line segments. Each line segment

What and Why Transformations

What The geometrical changes of an object from a current state to modified state

bull Changing an objectrsquos position (translation) orientation (rotation) or size (scaling)

bull Others transformations reflection and shearing operations

Why bull To manipulate the initially created object and to display the

modified object without having to redraw it

Matrices

Matrix is a two Dimensional array of numbers Elements of the matrix are identified by its row and column pair

Matrix multiplication

Matrix multiplication is associative Means if we have multiple matrices to multiply then it does not matter which matrix we multiply first

A(BC) = (AB)C

1 5 0

0 1 0

5 6 1

3 2272014

In CG images are made up of series of line segments Each line segment is then represented by its end coordinates

We can make changes in the image by performing some mathematical operations on these co-or

The changes made in a image are called transformations

4 2272014

Basic Transformations 1 Scaling

2

Scaling

X 2

Y 05

Scaling

bull Scaling changes the size of an object and involves two scale factors Sx and Sy for the x- and y- coordinates respectively

bull Scales are about the origin

bull We can write the components

px = sx bull px

py = sy bull py

or in matrix form

P = S bull P

Scale matrix as

y

x

s

sS

0

0

P

Prsquo

bull If the scale factors are in between 0 and 1 the points will be moved closer to the origin the object will be smaller

P(2 5)

Prsquo

bull Example

bull P(2 5) Sx = 05 Sy = 05

bull Find Prsquo

bullIf the scale factors are larger than 1

the points will be moved away

from the origin the object will be

larger

Prsquo

bull Example

bullP(2 5) Sx = 2 Sy = 2

bullFind Prsquo

bull If the scale factors are the same Sx = Sy uniform scaling bull Only change in size (as previous example)

P(1 2)

Prsquo

bullIf Sx Sy differential scaling bullChange in size and shape bullExample square rectangle

bullP(1 3) Sx = 2 Sy = 5 Prsquo

Matrix

It is possible to represent this scaling in terms of the matrix

S=

Therefore Prsquo = P S

Sx 0

0 Sy

Thus

Scaling is used to alter the size of an object

Simple 2D scaling is performed by multiplying object positions (x y) by scaling factors sx and sy

xrsquo = x sx

yrsquo = y sx

or Prsquo = SP

xrsquo yrsquo Sx 0

0 Sy x y =

Points 2D Scaling

Any positive value can be used as scaling factor bull Values less than 1 reduce the size of the object

bull Values greater than 1 enlarge the object

bull If scaling factor is 1 then the object stays unchanged

bull If sx = sy we call it uniform scaling

bull If scaling factor lt1 then the object moves closer to the origin and If scaling factor gt1 then the object moves farther from the origin

xrsquo x

Translation

A translation moves all points in an object along the same straight-line path to new positions

The path is represented by a vector called the translation or shift vector

We can write the components

px = px + tx

py = py + ty

or in matrix form

P = P + T

tx

ty

xrsquo yrsquo

x

y

tx

ty = +

(2 2) = 6

=4

2 Translation

Translation changes the position of an object

P = point before translation

Prsquo = point after translation

Let point P(xy)

Prsquo(xrsquoyrsquo) xrsquo = x + tx yrsquo = y + ty

Translation moves the object without deformation

How can we write this in matrix form

P

Prsquo

T

Some points translation

2D Translation

To move a line segment apply the transformation equation to each of the two line endpoints and redraw the line between new endpoints

To move a polygon apply the transformation equation to coordinates of each vertex and regenerate the polygon using the new set of vertex coordinates

Rotation

A rotation repositions all points in an object along a circular path in the plane centered at the pivot point

First wersquoll assume the pivot is at the origin

P

Prsquo

Rotation

bull Review Trigonometry

=gt cos = xr sin = yr

bull x = r cos y = rsin

P(xy)

x

y r

xrsquo

yrsquo

Prsquo(xrsquo yrsquo)

r

=gt cos (+ ) = xrsquor bullxrsquo = r cos (+ )

bullxrsquo = rcoscos -rsinsin

bullxrsquo = xcos ndash ysin

=gtsin (+ ) = yrsquor yrsquo = r sin (+ )

bullyrsquo = rcossin + rsincos

bullyrsquo = xsin + ycos

Identity of Trigonometry

Rotation

bull We can write the components

px = px cos ndash py sin py = px sin + py cos

bull or in matrix form

P = R bull P

bull can be clockwise (-ve) or counterclockwise (+ve as our example)

bull Rotation matrix

P(xy)

x

y r

xrsquo

yrsquo

Prsquo(xrsquo yrsquo)

cossin

sincosR

Example

Find the transformed point Prsquo caused by rotating P= (5 1) about the origin through an angle of 90

Rotation

cossin

sincos

cossin

sincos

yx

yx

y

x

90cos190sin5

90sin190cos5

0115

1105

5

1

Matrix Representations and Homogeneous Coordinates

Many graphics applications involve sequences of geometric transformations

Animations

Design and picture construction applications

We will now consider matrix representations of these operations

Sequences of transformations can be efficiently processed using matrices

Matrix Representations and Homogeneous Coordinates

Prsquo = M1 P + M2

P and Prsquo are row matrices

M1 is a 2 by 2 array containing scaling factors

M2 is a 2 element row matrix containing translational terms

Matrix Representations and Homogeneous Coordinates

To produce a sequence of operations such as scaling followed by rotation then translation we could calculate the transformed coordinates one step at a time

A more efficient approach is to combine transformations without calculating intermediate coordinate values

Matrix Representations and Homogeneous Coordinates

Multiplicative and translational terms for a 2D geometric transformation can be combined into a single matrix if we expand the representations to 3 by 3 matrices

We can use the third column for translation terms and all transformation equations can be expressed as matrix multiplications

Homogenous Coordinates

Letrsquos move our problem into 3D Let point (x y) in 2D be represented by point (x y 1) in

the new space

Scaling our new point by any value a puts us somewhere along a particular line (ax ay a)

A point in 2D can be represented in many ways in the new space

(2 4) ---------- (8 16 4) or (6 12 3) or (2 4 1) or etc

y y

x

x

w

Homogenous Coordinates

bull We can always map back to the original 2D point by dividing by the last coordinate

bull (15 6 3) --- (5 2)

bull (60 40 10) -

bull Why do we use 1 for the last coordinate

bull The fact that all the points along each line can be mapped back to the same point in 2D gives this coordinate system its name ndash homogeneous coordinates

Matrix Representations and Homogeneous Coordinates

Thus 2D Translation Matrix is as follows

1

010

001

tytx

xrsquo yrsquo 1 x y 1 =

Thus 2D Rotation Matrix becomes as

Note Positive values of the rotation angle define the counterclockwise rotation about the rotation point and negative values rotate objects in the clockwise sense

100

0cossin

0sincos

xrsquo yrsquo 1 x y 1 =

Thus 2D Scaling Matrix becomes as

100

00

00

y

x

s

sxrsquo yrsquo 1 x y 1 =

Inverse Transformations

When we apply any transformation to point(xy) we get a new point (xrsquoyrsquo) Some times we need to get original co-ordinate from the transformed point This can be achieved by inverse transformation

2D Inverse Translation Matrix

1

010

0011

yx tt

T

Inverse Transformations

2D Inverse Rotation Matrix

Rotation in clockwise direction making Փ negative

ie cos(-θ)=cos θ sin(-θ)=-sin θ

Matrix becomes

2D Inverse Scaling Matrix

100

0cossin

0sincos1

R

100

01

0

001

1

y

x

s

s

S

2D Composite Transformations

We can setup a sequence of transformations as a composite transformation matrix by calculating the product of the individual transformations

Prsquo=M2M1P

Prsquo=MP

ROTATION ABOUT AN ARBITRARY POINT

2D Composite Transformations

General 2D Pivot-Point Rotation bull Translate

bull Rotate

bull Retranslate

1

010

001

100

0cossin

0sincos

1

010

001

rrrr yxyx

Example

Perform a clockwise rotation of 450 a triangle A(00) B(11) and C(52) (Dec-20052009 10 Marks)

bull about a point (-1-1)

bull About origin

Answer about origin

Arsquo = (00) Brsquo=(radic20) Crsquo=((7 radic2)(-3 radic2))

Ex2 consider a square p(00) Q(010) R(1010) S(100) Rotate the Sq about fixed point R(1010) by an angle 45o (anticlockwise) followed by scaling by 2 units in X direction and 2 units in Y direction (Dec 2006 8 marks)

Prove that two scaling transformations commute that is

S1 S2=S2 S1

Show that transformation matrix for a reflection about a line Y=X is equivalent to reflection to X-axis followed by counterclockwise rotation of 900 (Dec 2008 8 marks)

Perform X-shear and Y-shear on a triangle having A(21) B(43) C(23) Consider the constant value b=c=2

(Dec 2008 8 marks) Answer Arsquo = 45

Brsquo = 1011

Crsquo = 87

Scaling with respect to an arbitrary point

1 Translation

2 Scaling

3 Retranslation

Pictorially shown on next slide

1

010

001

100

00

00

1

010

001

ff

y

x

ff yx

s

s

yx

Other Two Dimensional Transformations

Reflection

Transformation that produces a mirror image of an object

y

x

Reflection

x-axis y-axis

100

010

001

100

010

001

Reflection

origin line x=y

100

010

001

100

001

010

Shear Transformations

Shear

Transformation that distorts the shape of an object such that the transformed shape appears as the object was composed of internal layers that had been caused to slide over each other

y

x

(01) (11)

(10) (00)

y

x

(21) (31)

(10) (00) shx=2

X-Shear

An x-direction shear relative to the x axis

An y-direction shear relative to the y axis

100

01

001

ysh

100

010

01 xsh

yy

yshxx x

Transformations in 3D

Some graphics applications are 2D such as charts graphs maps etc

But to create realistic picture we need to represent picture in 3D

In 3D geometry we need additional third axis z-axis to specify the depth value of the object

Let us see the coordinate systems used in 3D graphics

Lets plot a point in 3D with coordinates (342)

1 first plot the point at(302)

it is on the plane X-Z

2 then lift the point up by 4 units

Y-axis

X-axis

Z-axis

h

e

i

g

h

t

width

Depth

Translation in 3D

Remembering 2D transformations -gt 3x3 matrices take a wild guess what happens to 3D transformations

3D means z-axis comes into picture Giving Depth information for an object

1

0100

0010

0001

1

010

001

zyx

zyxzyx

yx

yxyx

ttt

tttzxytttT

tt

ttyxttT

T=(tx ty tz)

Scale 3D Style

S=(sx sy sz)

zsz

ysy

xsx

z

y

x

1000

000

000

000

)(

pps

s

s

PPsssS

z

y

x

zyx

3D Rotation

In 3D we have to specify the axis of rotation along with the rotation angle

Positive rotation angles produce counterclockwise rotations about a coordinate axis assuming that we are looking in the negative direction along that coordinate axis

3D Rotation

z-axis rotation

xrsquo=x cos θ - y sin θ

yrsquo=x sin θ + y cos θ

zrsquo=z

or Prsquo = Rz(θ)P

1000

0100

00cossin

00sincos

xrsquo yrsquo zrsquo 1

= x y z 1

When we say that we want to rotate a point in anticlockwise direction about z-axis it is very similar to performing a 2D rotation in anticlockwise direction as follows

Fig2D Rotation Fig 3D Rotation

3D Rotation

z-axis rotation

xrsquo=x cos θ - y sin θ

yrsquo=x sin θ + y cos θ

zrsquo=z Transformation equations for rotation abt the other axes

can be obtained with a cyclic permutation of coordinate parameters xy and z That is we use the replacements

xrarr yrarr zrarr x

x-axis rotation

yrsquo=y cos θ - z sin θ

zrsquo=y sin θ + z cos θ

xrsquo=x

y-axis rotation

zrsquo=z cos θ - x sin θ

xrsquo=z sin θ + x cos θ

yrsquo=y

Matrices for anticlockwise 3D rotation

1000

0cossin0

0sincos0

0001

xR

1000

0cos0sin

0010

0sin0cos

yR

1000

0100

00cossin

00sincos

zR

3D Rotation about an arbitrary axis

General Three-Dimensional Rotations

Special case where an object is to be rotated about an axis that is parallel to one of the coordinate axes

1 Translate the object so that the rotation axis coincides with parallel coordinate axis

2 Perform the specified rotation about the axis

3 Translate the object so that the rotation axis is moved back to its original position

3D Rotation of an object about an arbitrary axis

When an object is to rotated about an axis that is not parallel to one of the coordinate axes

1 Translate the object so that the rotation axis passes through the coordinate origin

2 Rotate the object so that the axis of rotation coincides with one of the coordinate axes

3 Perform the specified rotation about the selected coordinate axis

4 Apply inverse rotations to bring the rotation axis back to its original position

5 Apply the inverse translation to bring the rotation axis back to its original spatial position

We can determine the transformation matrices for each step

Assume that rotation axis ie arbitrary axis is defined with two points p1(x1y1z1) and p2(x2y2z2)

Let us say a point on the axis is (PQR)

Initial position of the axis and point is as bellow

p1

p2

(PQR)

Step1 (Translation)transformation of rotation axis so that it passes through the origin

This can be done by moving point P1 to the origin

This repositions the rotation axis and the object as shown

1111

0100

0010

0001

zyx

Tp1

p2

(PQR)

Step2 transform the rotation axis so that it coincides the z-axis

This can be performed in two sub-steps a) Rotate about x-axis to transform axis into xz plane

b) Swing rotation axis around to the z-axis using y-axis rotation

a) Take projection of line segment (000) to (PQR) onto yz plane as shown in fig ie (0QR)

(PQR)

(0QR)

Light

source

x

z

y

Step2-a

Now if we rotate the rotation (arbitrary) axis x-axis so that it lies in X-Z

In this situation its shadow will coincides the z-axis

So we are interested in angle α so that shadow will coincides with z-axis

length of shadow L = radicQ2+R2

sin α = QL

cos α = RL

Therefore the matrix for rotation about x-axis

Rx(α) =

1000

00

00

0001

LRLQ

LQLR

(PQR) (0QR)

L

α

After performing x-axis rotation the rotation axis will lie in x-z plane as shown

When we perform x-axis rotation x-value remains unchanged as axis of rotation is in xz plane so y-coordinate is zero We need to get z-value

L = radicP2+Q2+R2

z-coordinate will be v = radic(L2-P2)

(PQR)

L

P

Step2-b

Now we have to rotate the axis around y-axis so that it coincides the z-axis Let that angle be β

From figure cosβ = VL

sin β = pL

Therefore the transformation

matrix for rotation about y-axis

in clockwise rotation is

1000

00

0010

00

LvLp

LpLv

L

P

β

Ry(β) =

step3

Rotation about z-axis by given angle ie θ ie Rz (θ)

Step 4 and 5 does inverse transformations ie Ry-1 Rx-1 T-1

Therefore the final transformation matrix will be the product of all matrices in sequence

RA= T Rx RyRz Ry-1 Rx-1 T-1

1000

0100

00cossin

00sincos

zR

Reflection wrto xy plane

Consider a point P(xyz) The reflection of this point wrto xy plane is given by pointprsquo(xy-z)

Corresponding matrix is given as

M = 1 0 0

0 1 0

0 0 -1

Page 3: 2D transformations - E-STUDYthirdyearengineering.weebly.com/uploads/3/8/2/8/38286065/... · 2018. 9. 10. · In CG images are made up of series of line segments. Each line segment

Matrices

Matrix is a two Dimensional array of numbers Elements of the matrix are identified by its row and column pair

Matrix multiplication

Matrix multiplication is associative Means if we have multiple matrices to multiply then it does not matter which matrix we multiply first

A(BC) = (AB)C

1 5 0

0 1 0

5 6 1

3 2272014

In CG images are made up of series of line segments Each line segment is then represented by its end coordinates

We can make changes in the image by performing some mathematical operations on these co-or

The changes made in a image are called transformations

4 2272014

Basic Transformations 1 Scaling

2

Scaling

X 2

Y 05

Scaling

bull Scaling changes the size of an object and involves two scale factors Sx and Sy for the x- and y- coordinates respectively

bull Scales are about the origin

bull We can write the components

px = sx bull px

py = sy bull py

or in matrix form

P = S bull P

Scale matrix as

y

x

s

sS

0

0

P

Prsquo

bull If the scale factors are in between 0 and 1 the points will be moved closer to the origin the object will be smaller

P(2 5)

Prsquo

bull Example

bull P(2 5) Sx = 05 Sy = 05

bull Find Prsquo

bullIf the scale factors are larger than 1

the points will be moved away

from the origin the object will be

larger

Prsquo

bull Example

bullP(2 5) Sx = 2 Sy = 2

bullFind Prsquo

bull If the scale factors are the same Sx = Sy uniform scaling bull Only change in size (as previous example)

P(1 2)

Prsquo

bullIf Sx Sy differential scaling bullChange in size and shape bullExample square rectangle

bullP(1 3) Sx = 2 Sy = 5 Prsquo

Matrix

It is possible to represent this scaling in terms of the matrix

S=

Therefore Prsquo = P S

Sx 0

0 Sy

Thus

Scaling is used to alter the size of an object

Simple 2D scaling is performed by multiplying object positions (x y) by scaling factors sx and sy

xrsquo = x sx

yrsquo = y sx

or Prsquo = SP

xrsquo yrsquo Sx 0

0 Sy x y =

Points 2D Scaling

Any positive value can be used as scaling factor bull Values less than 1 reduce the size of the object

bull Values greater than 1 enlarge the object

bull If scaling factor is 1 then the object stays unchanged

bull If sx = sy we call it uniform scaling

bull If scaling factor lt1 then the object moves closer to the origin and If scaling factor gt1 then the object moves farther from the origin

xrsquo x

Translation

A translation moves all points in an object along the same straight-line path to new positions

The path is represented by a vector called the translation or shift vector

We can write the components

px = px + tx

py = py + ty

or in matrix form

P = P + T

tx

ty

xrsquo yrsquo

x

y

tx

ty = +

(2 2) = 6

=4

2 Translation

Translation changes the position of an object

P = point before translation

Prsquo = point after translation

Let point P(xy)

Prsquo(xrsquoyrsquo) xrsquo = x + tx yrsquo = y + ty

Translation moves the object without deformation

How can we write this in matrix form

P

Prsquo

T

Some points translation

2D Translation

To move a line segment apply the transformation equation to each of the two line endpoints and redraw the line between new endpoints

To move a polygon apply the transformation equation to coordinates of each vertex and regenerate the polygon using the new set of vertex coordinates

Rotation

A rotation repositions all points in an object along a circular path in the plane centered at the pivot point

First wersquoll assume the pivot is at the origin

P

Prsquo

Rotation

bull Review Trigonometry

=gt cos = xr sin = yr

bull x = r cos y = rsin

P(xy)

x

y r

xrsquo

yrsquo

Prsquo(xrsquo yrsquo)

r

=gt cos (+ ) = xrsquor bullxrsquo = r cos (+ )

bullxrsquo = rcoscos -rsinsin

bullxrsquo = xcos ndash ysin

=gtsin (+ ) = yrsquor yrsquo = r sin (+ )

bullyrsquo = rcossin + rsincos

bullyrsquo = xsin + ycos

Identity of Trigonometry

Rotation

bull We can write the components

px = px cos ndash py sin py = px sin + py cos

bull or in matrix form

P = R bull P

bull can be clockwise (-ve) or counterclockwise (+ve as our example)

bull Rotation matrix

P(xy)

x

y r

xrsquo

yrsquo

Prsquo(xrsquo yrsquo)

cossin

sincosR

Example

Find the transformed point Prsquo caused by rotating P= (5 1) about the origin through an angle of 90

Rotation

cossin

sincos

cossin

sincos

yx

yx

y

x

90cos190sin5

90sin190cos5

0115

1105

5

1

Matrix Representations and Homogeneous Coordinates

Many graphics applications involve sequences of geometric transformations

Animations

Design and picture construction applications

We will now consider matrix representations of these operations

Sequences of transformations can be efficiently processed using matrices

Matrix Representations and Homogeneous Coordinates

Prsquo = M1 P + M2

P and Prsquo are row matrices

M1 is a 2 by 2 array containing scaling factors

M2 is a 2 element row matrix containing translational terms

Matrix Representations and Homogeneous Coordinates

To produce a sequence of operations such as scaling followed by rotation then translation we could calculate the transformed coordinates one step at a time

A more efficient approach is to combine transformations without calculating intermediate coordinate values

Matrix Representations and Homogeneous Coordinates

Multiplicative and translational terms for a 2D geometric transformation can be combined into a single matrix if we expand the representations to 3 by 3 matrices

We can use the third column for translation terms and all transformation equations can be expressed as matrix multiplications

Homogenous Coordinates

Letrsquos move our problem into 3D Let point (x y) in 2D be represented by point (x y 1) in

the new space

Scaling our new point by any value a puts us somewhere along a particular line (ax ay a)

A point in 2D can be represented in many ways in the new space

(2 4) ---------- (8 16 4) or (6 12 3) or (2 4 1) or etc

y y

x

x

w

Homogenous Coordinates

bull We can always map back to the original 2D point by dividing by the last coordinate

bull (15 6 3) --- (5 2)

bull (60 40 10) -

bull Why do we use 1 for the last coordinate

bull The fact that all the points along each line can be mapped back to the same point in 2D gives this coordinate system its name ndash homogeneous coordinates

Matrix Representations and Homogeneous Coordinates

Thus 2D Translation Matrix is as follows

1

010

001

tytx

xrsquo yrsquo 1 x y 1 =

Thus 2D Rotation Matrix becomes as

Note Positive values of the rotation angle define the counterclockwise rotation about the rotation point and negative values rotate objects in the clockwise sense

100

0cossin

0sincos

xrsquo yrsquo 1 x y 1 =

Thus 2D Scaling Matrix becomes as

100

00

00

y

x

s

sxrsquo yrsquo 1 x y 1 =

Inverse Transformations

When we apply any transformation to point(xy) we get a new point (xrsquoyrsquo) Some times we need to get original co-ordinate from the transformed point This can be achieved by inverse transformation

2D Inverse Translation Matrix

1

010

0011

yx tt

T

Inverse Transformations

2D Inverse Rotation Matrix

Rotation in clockwise direction making Փ negative

ie cos(-θ)=cos θ sin(-θ)=-sin θ

Matrix becomes

2D Inverse Scaling Matrix

100

0cossin

0sincos1

R

100

01

0

001

1

y

x

s

s

S

2D Composite Transformations

We can setup a sequence of transformations as a composite transformation matrix by calculating the product of the individual transformations

Prsquo=M2M1P

Prsquo=MP

ROTATION ABOUT AN ARBITRARY POINT

2D Composite Transformations

General 2D Pivot-Point Rotation bull Translate

bull Rotate

bull Retranslate

1

010

001

100

0cossin

0sincos

1

010

001

rrrr yxyx

Example

Perform a clockwise rotation of 450 a triangle A(00) B(11) and C(52) (Dec-20052009 10 Marks)

bull about a point (-1-1)

bull About origin

Answer about origin

Arsquo = (00) Brsquo=(radic20) Crsquo=((7 radic2)(-3 radic2))

Ex2 consider a square p(00) Q(010) R(1010) S(100) Rotate the Sq about fixed point R(1010) by an angle 45o (anticlockwise) followed by scaling by 2 units in X direction and 2 units in Y direction (Dec 2006 8 marks)

Prove that two scaling transformations commute that is

S1 S2=S2 S1

Show that transformation matrix for a reflection about a line Y=X is equivalent to reflection to X-axis followed by counterclockwise rotation of 900 (Dec 2008 8 marks)

Perform X-shear and Y-shear on a triangle having A(21) B(43) C(23) Consider the constant value b=c=2

(Dec 2008 8 marks) Answer Arsquo = 45

Brsquo = 1011

Crsquo = 87

Scaling with respect to an arbitrary point

1 Translation

2 Scaling

3 Retranslation

Pictorially shown on next slide

1

010

001

100

00

00

1

010

001

ff

y

x

ff yx

s

s

yx

Other Two Dimensional Transformations

Reflection

Transformation that produces a mirror image of an object

y

x

Reflection

x-axis y-axis

100

010

001

100

010

001

Reflection

origin line x=y

100

010

001

100

001

010

Shear Transformations

Shear

Transformation that distorts the shape of an object such that the transformed shape appears as the object was composed of internal layers that had been caused to slide over each other

y

x

(01) (11)

(10) (00)

y

x

(21) (31)

(10) (00) shx=2

X-Shear

An x-direction shear relative to the x axis

An y-direction shear relative to the y axis

100

01

001

ysh

100

010

01 xsh

yy

yshxx x

Transformations in 3D

Some graphics applications are 2D such as charts graphs maps etc

But to create realistic picture we need to represent picture in 3D

In 3D geometry we need additional third axis z-axis to specify the depth value of the object

Let us see the coordinate systems used in 3D graphics

Lets plot a point in 3D with coordinates (342)

1 first plot the point at(302)

it is on the plane X-Z

2 then lift the point up by 4 units

Y-axis

X-axis

Z-axis

h

e

i

g

h

t

width

Depth

Translation in 3D

Remembering 2D transformations -gt 3x3 matrices take a wild guess what happens to 3D transformations

3D means z-axis comes into picture Giving Depth information for an object

1

0100

0010

0001

1

010

001

zyx

zyxzyx

yx

yxyx

ttt

tttzxytttT

tt

ttyxttT

T=(tx ty tz)

Scale 3D Style

S=(sx sy sz)

zsz

ysy

xsx

z

y

x

1000

000

000

000

)(

pps

s

s

PPsssS

z

y

x

zyx

3D Rotation

In 3D we have to specify the axis of rotation along with the rotation angle

Positive rotation angles produce counterclockwise rotations about a coordinate axis assuming that we are looking in the negative direction along that coordinate axis

3D Rotation

z-axis rotation

xrsquo=x cos θ - y sin θ

yrsquo=x sin θ + y cos θ

zrsquo=z

or Prsquo = Rz(θ)P

1000

0100

00cossin

00sincos

xrsquo yrsquo zrsquo 1

= x y z 1

When we say that we want to rotate a point in anticlockwise direction about z-axis it is very similar to performing a 2D rotation in anticlockwise direction as follows

Fig2D Rotation Fig 3D Rotation

3D Rotation

z-axis rotation

xrsquo=x cos θ - y sin θ

yrsquo=x sin θ + y cos θ

zrsquo=z Transformation equations for rotation abt the other axes

can be obtained with a cyclic permutation of coordinate parameters xy and z That is we use the replacements

xrarr yrarr zrarr x

x-axis rotation

yrsquo=y cos θ - z sin θ

zrsquo=y sin θ + z cos θ

xrsquo=x

y-axis rotation

zrsquo=z cos θ - x sin θ

xrsquo=z sin θ + x cos θ

yrsquo=y

Matrices for anticlockwise 3D rotation

1000

0cossin0

0sincos0

0001

xR

1000

0cos0sin

0010

0sin0cos

yR

1000

0100

00cossin

00sincos

zR

3D Rotation about an arbitrary axis

General Three-Dimensional Rotations

Special case where an object is to be rotated about an axis that is parallel to one of the coordinate axes

1 Translate the object so that the rotation axis coincides with parallel coordinate axis

2 Perform the specified rotation about the axis

3 Translate the object so that the rotation axis is moved back to its original position

3D Rotation of an object about an arbitrary axis

When an object is to rotated about an axis that is not parallel to one of the coordinate axes

1 Translate the object so that the rotation axis passes through the coordinate origin

2 Rotate the object so that the axis of rotation coincides with one of the coordinate axes

3 Perform the specified rotation about the selected coordinate axis

4 Apply inverse rotations to bring the rotation axis back to its original position

5 Apply the inverse translation to bring the rotation axis back to its original spatial position

We can determine the transformation matrices for each step

Assume that rotation axis ie arbitrary axis is defined with two points p1(x1y1z1) and p2(x2y2z2)

Let us say a point on the axis is (PQR)

Initial position of the axis and point is as bellow

p1

p2

(PQR)

Step1 (Translation)transformation of rotation axis so that it passes through the origin

This can be done by moving point P1 to the origin

This repositions the rotation axis and the object as shown

1111

0100

0010

0001

zyx

Tp1

p2

(PQR)

Step2 transform the rotation axis so that it coincides the z-axis

This can be performed in two sub-steps a) Rotate about x-axis to transform axis into xz plane

b) Swing rotation axis around to the z-axis using y-axis rotation

a) Take projection of line segment (000) to (PQR) onto yz plane as shown in fig ie (0QR)

(PQR)

(0QR)

Light

source

x

z

y

Step2-a

Now if we rotate the rotation (arbitrary) axis x-axis so that it lies in X-Z

In this situation its shadow will coincides the z-axis

So we are interested in angle α so that shadow will coincides with z-axis

length of shadow L = radicQ2+R2

sin α = QL

cos α = RL

Therefore the matrix for rotation about x-axis

Rx(α) =

1000

00

00

0001

LRLQ

LQLR

(PQR) (0QR)

L

α

After performing x-axis rotation the rotation axis will lie in x-z plane as shown

When we perform x-axis rotation x-value remains unchanged as axis of rotation is in xz plane so y-coordinate is zero We need to get z-value

L = radicP2+Q2+R2

z-coordinate will be v = radic(L2-P2)

(PQR)

L

P

Step2-b

Now we have to rotate the axis around y-axis so that it coincides the z-axis Let that angle be β

From figure cosβ = VL

sin β = pL

Therefore the transformation

matrix for rotation about y-axis

in clockwise rotation is

1000

00

0010

00

LvLp

LpLv

L

P

β

Ry(β) =

step3

Rotation about z-axis by given angle ie θ ie Rz (θ)

Step 4 and 5 does inverse transformations ie Ry-1 Rx-1 T-1

Therefore the final transformation matrix will be the product of all matrices in sequence

RA= T Rx RyRz Ry-1 Rx-1 T-1

1000

0100

00cossin

00sincos

zR

Reflection wrto xy plane

Consider a point P(xyz) The reflection of this point wrto xy plane is given by pointprsquo(xy-z)

Corresponding matrix is given as

M = 1 0 0

0 1 0

0 0 -1

Page 4: 2D transformations - E-STUDYthirdyearengineering.weebly.com/uploads/3/8/2/8/38286065/... · 2018. 9. 10. · In CG images are made up of series of line segments. Each line segment

In CG images are made up of series of line segments Each line segment is then represented by its end coordinates

We can make changes in the image by performing some mathematical operations on these co-or

The changes made in a image are called transformations

4 2272014

Basic Transformations 1 Scaling

2

Scaling

X 2

Y 05

Scaling

bull Scaling changes the size of an object and involves two scale factors Sx and Sy for the x- and y- coordinates respectively

bull Scales are about the origin

bull We can write the components

px = sx bull px

py = sy bull py

or in matrix form

P = S bull P

Scale matrix as

y

x

s

sS

0

0

P

Prsquo

bull If the scale factors are in between 0 and 1 the points will be moved closer to the origin the object will be smaller

P(2 5)

Prsquo

bull Example

bull P(2 5) Sx = 05 Sy = 05

bull Find Prsquo

bullIf the scale factors are larger than 1

the points will be moved away

from the origin the object will be

larger

Prsquo

bull Example

bullP(2 5) Sx = 2 Sy = 2

bullFind Prsquo

bull If the scale factors are the same Sx = Sy uniform scaling bull Only change in size (as previous example)

P(1 2)

Prsquo

bullIf Sx Sy differential scaling bullChange in size and shape bullExample square rectangle

bullP(1 3) Sx = 2 Sy = 5 Prsquo

Matrix

It is possible to represent this scaling in terms of the matrix

S=

Therefore Prsquo = P S

Sx 0

0 Sy

Thus

Scaling is used to alter the size of an object

Simple 2D scaling is performed by multiplying object positions (x y) by scaling factors sx and sy

xrsquo = x sx

yrsquo = y sx

or Prsquo = SP

xrsquo yrsquo Sx 0

0 Sy x y =

Points 2D Scaling

Any positive value can be used as scaling factor bull Values less than 1 reduce the size of the object

bull Values greater than 1 enlarge the object

bull If scaling factor is 1 then the object stays unchanged

bull If sx = sy we call it uniform scaling

bull If scaling factor lt1 then the object moves closer to the origin and If scaling factor gt1 then the object moves farther from the origin

xrsquo x

Translation

A translation moves all points in an object along the same straight-line path to new positions

The path is represented by a vector called the translation or shift vector

We can write the components

px = px + tx

py = py + ty

or in matrix form

P = P + T

tx

ty

xrsquo yrsquo

x

y

tx

ty = +

(2 2) = 6

=4

2 Translation

Translation changes the position of an object

P = point before translation

Prsquo = point after translation

Let point P(xy)

Prsquo(xrsquoyrsquo) xrsquo = x + tx yrsquo = y + ty

Translation moves the object without deformation

How can we write this in matrix form

P

Prsquo

T

Some points translation

2D Translation

To move a line segment apply the transformation equation to each of the two line endpoints and redraw the line between new endpoints

To move a polygon apply the transformation equation to coordinates of each vertex and regenerate the polygon using the new set of vertex coordinates

Rotation

A rotation repositions all points in an object along a circular path in the plane centered at the pivot point

First wersquoll assume the pivot is at the origin

P

Prsquo

Rotation

bull Review Trigonometry

=gt cos = xr sin = yr

bull x = r cos y = rsin

P(xy)

x

y r

xrsquo

yrsquo

Prsquo(xrsquo yrsquo)

r

=gt cos (+ ) = xrsquor bullxrsquo = r cos (+ )

bullxrsquo = rcoscos -rsinsin

bullxrsquo = xcos ndash ysin

=gtsin (+ ) = yrsquor yrsquo = r sin (+ )

bullyrsquo = rcossin + rsincos

bullyrsquo = xsin + ycos

Identity of Trigonometry

Rotation

bull We can write the components

px = px cos ndash py sin py = px sin + py cos

bull or in matrix form

P = R bull P

bull can be clockwise (-ve) or counterclockwise (+ve as our example)

bull Rotation matrix

P(xy)

x

y r

xrsquo

yrsquo

Prsquo(xrsquo yrsquo)

cossin

sincosR

Example

Find the transformed point Prsquo caused by rotating P= (5 1) about the origin through an angle of 90

Rotation

cossin

sincos

cossin

sincos

yx

yx

y

x

90cos190sin5

90sin190cos5

0115

1105

5

1

Matrix Representations and Homogeneous Coordinates

Many graphics applications involve sequences of geometric transformations

Animations

Design and picture construction applications

We will now consider matrix representations of these operations

Sequences of transformations can be efficiently processed using matrices

Matrix Representations and Homogeneous Coordinates

Prsquo = M1 P + M2

P and Prsquo are row matrices

M1 is a 2 by 2 array containing scaling factors

M2 is a 2 element row matrix containing translational terms

Matrix Representations and Homogeneous Coordinates

To produce a sequence of operations such as scaling followed by rotation then translation we could calculate the transformed coordinates one step at a time

A more efficient approach is to combine transformations without calculating intermediate coordinate values

Matrix Representations and Homogeneous Coordinates

Multiplicative and translational terms for a 2D geometric transformation can be combined into a single matrix if we expand the representations to 3 by 3 matrices

We can use the third column for translation terms and all transformation equations can be expressed as matrix multiplications

Homogenous Coordinates

Letrsquos move our problem into 3D Let point (x y) in 2D be represented by point (x y 1) in

the new space

Scaling our new point by any value a puts us somewhere along a particular line (ax ay a)

A point in 2D can be represented in many ways in the new space

(2 4) ---------- (8 16 4) or (6 12 3) or (2 4 1) or etc

y y

x

x

w

Homogenous Coordinates

bull We can always map back to the original 2D point by dividing by the last coordinate

bull (15 6 3) --- (5 2)

bull (60 40 10) -

bull Why do we use 1 for the last coordinate

bull The fact that all the points along each line can be mapped back to the same point in 2D gives this coordinate system its name ndash homogeneous coordinates

Matrix Representations and Homogeneous Coordinates

Thus 2D Translation Matrix is as follows

1

010

001

tytx

xrsquo yrsquo 1 x y 1 =

Thus 2D Rotation Matrix becomes as

Note Positive values of the rotation angle define the counterclockwise rotation about the rotation point and negative values rotate objects in the clockwise sense

100

0cossin

0sincos

xrsquo yrsquo 1 x y 1 =

Thus 2D Scaling Matrix becomes as

100

00

00

y

x

s

sxrsquo yrsquo 1 x y 1 =

Inverse Transformations

When we apply any transformation to point(xy) we get a new point (xrsquoyrsquo) Some times we need to get original co-ordinate from the transformed point This can be achieved by inverse transformation

2D Inverse Translation Matrix

1

010

0011

yx tt

T

Inverse Transformations

2D Inverse Rotation Matrix

Rotation in clockwise direction making Փ negative

ie cos(-θ)=cos θ sin(-θ)=-sin θ

Matrix becomes

2D Inverse Scaling Matrix

100

0cossin

0sincos1

R

100

01

0

001

1

y

x

s

s

S

2D Composite Transformations

We can setup a sequence of transformations as a composite transformation matrix by calculating the product of the individual transformations

Prsquo=M2M1P

Prsquo=MP

ROTATION ABOUT AN ARBITRARY POINT

2D Composite Transformations

General 2D Pivot-Point Rotation bull Translate

bull Rotate

bull Retranslate

1

010

001

100

0cossin

0sincos

1

010

001

rrrr yxyx

Example

Perform a clockwise rotation of 450 a triangle A(00) B(11) and C(52) (Dec-20052009 10 Marks)

bull about a point (-1-1)

bull About origin

Answer about origin

Arsquo = (00) Brsquo=(radic20) Crsquo=((7 radic2)(-3 radic2))

Ex2 consider a square p(00) Q(010) R(1010) S(100) Rotate the Sq about fixed point R(1010) by an angle 45o (anticlockwise) followed by scaling by 2 units in X direction and 2 units in Y direction (Dec 2006 8 marks)

Prove that two scaling transformations commute that is

S1 S2=S2 S1

Show that transformation matrix for a reflection about a line Y=X is equivalent to reflection to X-axis followed by counterclockwise rotation of 900 (Dec 2008 8 marks)

Perform X-shear and Y-shear on a triangle having A(21) B(43) C(23) Consider the constant value b=c=2

(Dec 2008 8 marks) Answer Arsquo = 45

Brsquo = 1011

Crsquo = 87

Scaling with respect to an arbitrary point

1 Translation

2 Scaling

3 Retranslation

Pictorially shown on next slide

1

010

001

100

00

00

1

010

001

ff

y

x

ff yx

s

s

yx

Other Two Dimensional Transformations

Reflection

Transformation that produces a mirror image of an object

y

x

Reflection

x-axis y-axis

100

010

001

100

010

001

Reflection

origin line x=y

100

010

001

100

001

010

Shear Transformations

Shear

Transformation that distorts the shape of an object such that the transformed shape appears as the object was composed of internal layers that had been caused to slide over each other

y

x

(01) (11)

(10) (00)

y

x

(21) (31)

(10) (00) shx=2

X-Shear

An x-direction shear relative to the x axis

An y-direction shear relative to the y axis

100

01

001

ysh

100

010

01 xsh

yy

yshxx x

Transformations in 3D

Some graphics applications are 2D such as charts graphs maps etc

But to create realistic picture we need to represent picture in 3D

In 3D geometry we need additional third axis z-axis to specify the depth value of the object

Let us see the coordinate systems used in 3D graphics

Lets plot a point in 3D with coordinates (342)

1 first plot the point at(302)

it is on the plane X-Z

2 then lift the point up by 4 units

Y-axis

X-axis

Z-axis

h

e

i

g

h

t

width

Depth

Translation in 3D

Remembering 2D transformations -gt 3x3 matrices take a wild guess what happens to 3D transformations

3D means z-axis comes into picture Giving Depth information for an object

1

0100

0010

0001

1

010

001

zyx

zyxzyx

yx

yxyx

ttt

tttzxytttT

tt

ttyxttT

T=(tx ty tz)

Scale 3D Style

S=(sx sy sz)

zsz

ysy

xsx

z

y

x

1000

000

000

000

)(

pps

s

s

PPsssS

z

y

x

zyx

3D Rotation

In 3D we have to specify the axis of rotation along with the rotation angle

Positive rotation angles produce counterclockwise rotations about a coordinate axis assuming that we are looking in the negative direction along that coordinate axis

3D Rotation

z-axis rotation

xrsquo=x cos θ - y sin θ

yrsquo=x sin θ + y cos θ

zrsquo=z

or Prsquo = Rz(θ)P

1000

0100

00cossin

00sincos

xrsquo yrsquo zrsquo 1

= x y z 1

When we say that we want to rotate a point in anticlockwise direction about z-axis it is very similar to performing a 2D rotation in anticlockwise direction as follows

Fig2D Rotation Fig 3D Rotation

3D Rotation

z-axis rotation

xrsquo=x cos θ - y sin θ

yrsquo=x sin θ + y cos θ

zrsquo=z Transformation equations for rotation abt the other axes

can be obtained with a cyclic permutation of coordinate parameters xy and z That is we use the replacements

xrarr yrarr zrarr x

x-axis rotation

yrsquo=y cos θ - z sin θ

zrsquo=y sin θ + z cos θ

xrsquo=x

y-axis rotation

zrsquo=z cos θ - x sin θ

xrsquo=z sin θ + x cos θ

yrsquo=y

Matrices for anticlockwise 3D rotation

1000

0cossin0

0sincos0

0001

xR

1000

0cos0sin

0010

0sin0cos

yR

1000

0100

00cossin

00sincos

zR

3D Rotation about an arbitrary axis

General Three-Dimensional Rotations

Special case where an object is to be rotated about an axis that is parallel to one of the coordinate axes

1 Translate the object so that the rotation axis coincides with parallel coordinate axis

2 Perform the specified rotation about the axis

3 Translate the object so that the rotation axis is moved back to its original position

3D Rotation of an object about an arbitrary axis

When an object is to rotated about an axis that is not parallel to one of the coordinate axes

1 Translate the object so that the rotation axis passes through the coordinate origin

2 Rotate the object so that the axis of rotation coincides with one of the coordinate axes

3 Perform the specified rotation about the selected coordinate axis

4 Apply inverse rotations to bring the rotation axis back to its original position

5 Apply the inverse translation to bring the rotation axis back to its original spatial position

We can determine the transformation matrices for each step

Assume that rotation axis ie arbitrary axis is defined with two points p1(x1y1z1) and p2(x2y2z2)

Let us say a point on the axis is (PQR)

Initial position of the axis and point is as bellow

p1

p2

(PQR)

Step1 (Translation)transformation of rotation axis so that it passes through the origin

This can be done by moving point P1 to the origin

This repositions the rotation axis and the object as shown

1111

0100

0010

0001

zyx

Tp1

p2

(PQR)

Step2 transform the rotation axis so that it coincides the z-axis

This can be performed in two sub-steps a) Rotate about x-axis to transform axis into xz plane

b) Swing rotation axis around to the z-axis using y-axis rotation

a) Take projection of line segment (000) to (PQR) onto yz plane as shown in fig ie (0QR)

(PQR)

(0QR)

Light

source

x

z

y

Step2-a

Now if we rotate the rotation (arbitrary) axis x-axis so that it lies in X-Z

In this situation its shadow will coincides the z-axis

So we are interested in angle α so that shadow will coincides with z-axis

length of shadow L = radicQ2+R2

sin α = QL

cos α = RL

Therefore the matrix for rotation about x-axis

Rx(α) =

1000

00

00

0001

LRLQ

LQLR

(PQR) (0QR)

L

α

After performing x-axis rotation the rotation axis will lie in x-z plane as shown

When we perform x-axis rotation x-value remains unchanged as axis of rotation is in xz plane so y-coordinate is zero We need to get z-value

L = radicP2+Q2+R2

z-coordinate will be v = radic(L2-P2)

(PQR)

L

P

Step2-b

Now we have to rotate the axis around y-axis so that it coincides the z-axis Let that angle be β

From figure cosβ = VL

sin β = pL

Therefore the transformation

matrix for rotation about y-axis

in clockwise rotation is

1000

00

0010

00

LvLp

LpLv

L

P

β

Ry(β) =

step3

Rotation about z-axis by given angle ie θ ie Rz (θ)

Step 4 and 5 does inverse transformations ie Ry-1 Rx-1 T-1

Therefore the final transformation matrix will be the product of all matrices in sequence

RA= T Rx RyRz Ry-1 Rx-1 T-1

1000

0100

00cossin

00sincos

zR

Reflection wrto xy plane

Consider a point P(xyz) The reflection of this point wrto xy plane is given by pointprsquo(xy-z)

Corresponding matrix is given as

M = 1 0 0

0 1 0

0 0 -1

Page 5: 2D transformations - E-STUDYthirdyearengineering.weebly.com/uploads/3/8/2/8/38286065/... · 2018. 9. 10. · In CG images are made up of series of line segments. Each line segment

Basic Transformations 1 Scaling

2

Scaling

X 2

Y 05

Scaling

bull Scaling changes the size of an object and involves two scale factors Sx and Sy for the x- and y- coordinates respectively

bull Scales are about the origin

bull We can write the components

px = sx bull px

py = sy bull py

or in matrix form

P = S bull P

Scale matrix as

y

x

s

sS

0

0

P

Prsquo

bull If the scale factors are in between 0 and 1 the points will be moved closer to the origin the object will be smaller

P(2 5)

Prsquo

bull Example

bull P(2 5) Sx = 05 Sy = 05

bull Find Prsquo

bullIf the scale factors are larger than 1

the points will be moved away

from the origin the object will be

larger

Prsquo

bull Example

bullP(2 5) Sx = 2 Sy = 2

bullFind Prsquo

bull If the scale factors are the same Sx = Sy uniform scaling bull Only change in size (as previous example)

P(1 2)

Prsquo

bullIf Sx Sy differential scaling bullChange in size and shape bullExample square rectangle

bullP(1 3) Sx = 2 Sy = 5 Prsquo

Matrix

It is possible to represent this scaling in terms of the matrix

S=

Therefore Prsquo = P S

Sx 0

0 Sy

Thus

Scaling is used to alter the size of an object

Simple 2D scaling is performed by multiplying object positions (x y) by scaling factors sx and sy

xrsquo = x sx

yrsquo = y sx

or Prsquo = SP

xrsquo yrsquo Sx 0

0 Sy x y =

Points 2D Scaling

Any positive value can be used as scaling factor bull Values less than 1 reduce the size of the object

bull Values greater than 1 enlarge the object

bull If scaling factor is 1 then the object stays unchanged

bull If sx = sy we call it uniform scaling

bull If scaling factor lt1 then the object moves closer to the origin and If scaling factor gt1 then the object moves farther from the origin

xrsquo x

Translation

A translation moves all points in an object along the same straight-line path to new positions

The path is represented by a vector called the translation or shift vector

We can write the components

px = px + tx

py = py + ty

or in matrix form

P = P + T

tx

ty

xrsquo yrsquo

x

y

tx

ty = +

(2 2) = 6

=4

2 Translation

Translation changes the position of an object

P = point before translation

Prsquo = point after translation

Let point P(xy)

Prsquo(xrsquoyrsquo) xrsquo = x + tx yrsquo = y + ty

Translation moves the object without deformation

How can we write this in matrix form

P

Prsquo

T

Some points translation

2D Translation

To move a line segment apply the transformation equation to each of the two line endpoints and redraw the line between new endpoints

To move a polygon apply the transformation equation to coordinates of each vertex and regenerate the polygon using the new set of vertex coordinates

Rotation

A rotation repositions all points in an object along a circular path in the plane centered at the pivot point

First wersquoll assume the pivot is at the origin

P

Prsquo

Rotation

bull Review Trigonometry

=gt cos = xr sin = yr

bull x = r cos y = rsin

P(xy)

x

y r

xrsquo

yrsquo

Prsquo(xrsquo yrsquo)

r

=gt cos (+ ) = xrsquor bullxrsquo = r cos (+ )

bullxrsquo = rcoscos -rsinsin

bullxrsquo = xcos ndash ysin

=gtsin (+ ) = yrsquor yrsquo = r sin (+ )

bullyrsquo = rcossin + rsincos

bullyrsquo = xsin + ycos

Identity of Trigonometry

Rotation

bull We can write the components

px = px cos ndash py sin py = px sin + py cos

bull or in matrix form

P = R bull P

bull can be clockwise (-ve) or counterclockwise (+ve as our example)

bull Rotation matrix

P(xy)

x

y r

xrsquo

yrsquo

Prsquo(xrsquo yrsquo)

cossin

sincosR

Example

Find the transformed point Prsquo caused by rotating P= (5 1) about the origin through an angle of 90

Rotation

cossin

sincos

cossin

sincos

yx

yx

y

x

90cos190sin5

90sin190cos5

0115

1105

5

1

Matrix Representations and Homogeneous Coordinates

Many graphics applications involve sequences of geometric transformations

Animations

Design and picture construction applications

We will now consider matrix representations of these operations

Sequences of transformations can be efficiently processed using matrices

Matrix Representations and Homogeneous Coordinates

Prsquo = M1 P + M2

P and Prsquo are row matrices

M1 is a 2 by 2 array containing scaling factors

M2 is a 2 element row matrix containing translational terms

Matrix Representations and Homogeneous Coordinates

To produce a sequence of operations such as scaling followed by rotation then translation we could calculate the transformed coordinates one step at a time

A more efficient approach is to combine transformations without calculating intermediate coordinate values

Matrix Representations and Homogeneous Coordinates

Multiplicative and translational terms for a 2D geometric transformation can be combined into a single matrix if we expand the representations to 3 by 3 matrices

We can use the third column for translation terms and all transformation equations can be expressed as matrix multiplications

Homogenous Coordinates

Letrsquos move our problem into 3D Let point (x y) in 2D be represented by point (x y 1) in

the new space

Scaling our new point by any value a puts us somewhere along a particular line (ax ay a)

A point in 2D can be represented in many ways in the new space

(2 4) ---------- (8 16 4) or (6 12 3) or (2 4 1) or etc

y y

x

x

w

Homogenous Coordinates

bull We can always map back to the original 2D point by dividing by the last coordinate

bull (15 6 3) --- (5 2)

bull (60 40 10) -

bull Why do we use 1 for the last coordinate

bull The fact that all the points along each line can be mapped back to the same point in 2D gives this coordinate system its name ndash homogeneous coordinates

Matrix Representations and Homogeneous Coordinates

Thus 2D Translation Matrix is as follows

1

010

001

tytx

xrsquo yrsquo 1 x y 1 =

Thus 2D Rotation Matrix becomes as

Note Positive values of the rotation angle define the counterclockwise rotation about the rotation point and negative values rotate objects in the clockwise sense

100

0cossin

0sincos

xrsquo yrsquo 1 x y 1 =

Thus 2D Scaling Matrix becomes as

100

00

00

y

x

s

sxrsquo yrsquo 1 x y 1 =

Inverse Transformations

When we apply any transformation to point(xy) we get a new point (xrsquoyrsquo) Some times we need to get original co-ordinate from the transformed point This can be achieved by inverse transformation

2D Inverse Translation Matrix

1

010

0011

yx tt

T

Inverse Transformations

2D Inverse Rotation Matrix

Rotation in clockwise direction making Փ negative

ie cos(-θ)=cos θ sin(-θ)=-sin θ

Matrix becomes

2D Inverse Scaling Matrix

100

0cossin

0sincos1

R

100

01

0

001

1

y

x

s

s

S

2D Composite Transformations

We can setup a sequence of transformations as a composite transformation matrix by calculating the product of the individual transformations

Prsquo=M2M1P

Prsquo=MP

ROTATION ABOUT AN ARBITRARY POINT

2D Composite Transformations

General 2D Pivot-Point Rotation bull Translate

bull Rotate

bull Retranslate

1

010

001

100

0cossin

0sincos

1

010

001

rrrr yxyx

Example

Perform a clockwise rotation of 450 a triangle A(00) B(11) and C(52) (Dec-20052009 10 Marks)

bull about a point (-1-1)

bull About origin

Answer about origin

Arsquo = (00) Brsquo=(radic20) Crsquo=((7 radic2)(-3 radic2))

Ex2 consider a square p(00) Q(010) R(1010) S(100) Rotate the Sq about fixed point R(1010) by an angle 45o (anticlockwise) followed by scaling by 2 units in X direction and 2 units in Y direction (Dec 2006 8 marks)

Prove that two scaling transformations commute that is

S1 S2=S2 S1

Show that transformation matrix for a reflection about a line Y=X is equivalent to reflection to X-axis followed by counterclockwise rotation of 900 (Dec 2008 8 marks)

Perform X-shear and Y-shear on a triangle having A(21) B(43) C(23) Consider the constant value b=c=2

(Dec 2008 8 marks) Answer Arsquo = 45

Brsquo = 1011

Crsquo = 87

Scaling with respect to an arbitrary point

1 Translation

2 Scaling

3 Retranslation

Pictorially shown on next slide

1

010

001

100

00

00

1

010

001

ff

y

x

ff yx

s

s

yx

Other Two Dimensional Transformations

Reflection

Transformation that produces a mirror image of an object

y

x

Reflection

x-axis y-axis

100

010

001

100

010

001

Reflection

origin line x=y

100

010

001

100

001

010

Shear Transformations

Shear

Transformation that distorts the shape of an object such that the transformed shape appears as the object was composed of internal layers that had been caused to slide over each other

y

x

(01) (11)

(10) (00)

y

x

(21) (31)

(10) (00) shx=2

X-Shear

An x-direction shear relative to the x axis

An y-direction shear relative to the y axis

100

01

001

ysh

100

010

01 xsh

yy

yshxx x

Transformations in 3D

Some graphics applications are 2D such as charts graphs maps etc

But to create realistic picture we need to represent picture in 3D

In 3D geometry we need additional third axis z-axis to specify the depth value of the object

Let us see the coordinate systems used in 3D graphics

Lets plot a point in 3D with coordinates (342)

1 first plot the point at(302)

it is on the plane X-Z

2 then lift the point up by 4 units

Y-axis

X-axis

Z-axis

h

e

i

g

h

t

width

Depth

Translation in 3D

Remembering 2D transformations -gt 3x3 matrices take a wild guess what happens to 3D transformations

3D means z-axis comes into picture Giving Depth information for an object

1

0100

0010

0001

1

010

001

zyx

zyxzyx

yx

yxyx

ttt

tttzxytttT

tt

ttyxttT

T=(tx ty tz)

Scale 3D Style

S=(sx sy sz)

zsz

ysy

xsx

z

y

x

1000

000

000

000

)(

pps

s

s

PPsssS

z

y

x

zyx

3D Rotation

In 3D we have to specify the axis of rotation along with the rotation angle

Positive rotation angles produce counterclockwise rotations about a coordinate axis assuming that we are looking in the negative direction along that coordinate axis

3D Rotation

z-axis rotation

xrsquo=x cos θ - y sin θ

yrsquo=x sin θ + y cos θ

zrsquo=z

or Prsquo = Rz(θ)P

1000

0100

00cossin

00sincos

xrsquo yrsquo zrsquo 1

= x y z 1

When we say that we want to rotate a point in anticlockwise direction about z-axis it is very similar to performing a 2D rotation in anticlockwise direction as follows

Fig2D Rotation Fig 3D Rotation

3D Rotation

z-axis rotation

xrsquo=x cos θ - y sin θ

yrsquo=x sin θ + y cos θ

zrsquo=z Transformation equations for rotation abt the other axes

can be obtained with a cyclic permutation of coordinate parameters xy and z That is we use the replacements

xrarr yrarr zrarr x

x-axis rotation

yrsquo=y cos θ - z sin θ

zrsquo=y sin θ + z cos θ

xrsquo=x

y-axis rotation

zrsquo=z cos θ - x sin θ

xrsquo=z sin θ + x cos θ

yrsquo=y

Matrices for anticlockwise 3D rotation

1000

0cossin0

0sincos0

0001

xR

1000

0cos0sin

0010

0sin0cos

yR

1000

0100

00cossin

00sincos

zR

3D Rotation about an arbitrary axis

General Three-Dimensional Rotations

Special case where an object is to be rotated about an axis that is parallel to one of the coordinate axes

1 Translate the object so that the rotation axis coincides with parallel coordinate axis

2 Perform the specified rotation about the axis

3 Translate the object so that the rotation axis is moved back to its original position

3D Rotation of an object about an arbitrary axis

When an object is to rotated about an axis that is not parallel to one of the coordinate axes

1 Translate the object so that the rotation axis passes through the coordinate origin

2 Rotate the object so that the axis of rotation coincides with one of the coordinate axes

3 Perform the specified rotation about the selected coordinate axis

4 Apply inverse rotations to bring the rotation axis back to its original position

5 Apply the inverse translation to bring the rotation axis back to its original spatial position

We can determine the transformation matrices for each step

Assume that rotation axis ie arbitrary axis is defined with two points p1(x1y1z1) and p2(x2y2z2)

Let us say a point on the axis is (PQR)

Initial position of the axis and point is as bellow

p1

p2

(PQR)

Step1 (Translation)transformation of rotation axis so that it passes through the origin

This can be done by moving point P1 to the origin

This repositions the rotation axis and the object as shown

1111

0100

0010

0001

zyx

Tp1

p2

(PQR)

Step2 transform the rotation axis so that it coincides the z-axis

This can be performed in two sub-steps a) Rotate about x-axis to transform axis into xz plane

b) Swing rotation axis around to the z-axis using y-axis rotation

a) Take projection of line segment (000) to (PQR) onto yz plane as shown in fig ie (0QR)

(PQR)

(0QR)

Light

source

x

z

y

Step2-a

Now if we rotate the rotation (arbitrary) axis x-axis so that it lies in X-Z

In this situation its shadow will coincides the z-axis

So we are interested in angle α so that shadow will coincides with z-axis

length of shadow L = radicQ2+R2

sin α = QL

cos α = RL

Therefore the matrix for rotation about x-axis

Rx(α) =

1000

00

00

0001

LRLQ

LQLR

(PQR) (0QR)

L

α

After performing x-axis rotation the rotation axis will lie in x-z plane as shown

When we perform x-axis rotation x-value remains unchanged as axis of rotation is in xz plane so y-coordinate is zero We need to get z-value

L = radicP2+Q2+R2

z-coordinate will be v = radic(L2-P2)

(PQR)

L

P

Step2-b

Now we have to rotate the axis around y-axis so that it coincides the z-axis Let that angle be β

From figure cosβ = VL

sin β = pL

Therefore the transformation

matrix for rotation about y-axis

in clockwise rotation is

1000

00

0010

00

LvLp

LpLv

L

P

β

Ry(β) =

step3

Rotation about z-axis by given angle ie θ ie Rz (θ)

Step 4 and 5 does inverse transformations ie Ry-1 Rx-1 T-1

Therefore the final transformation matrix will be the product of all matrices in sequence

RA= T Rx RyRz Ry-1 Rx-1 T-1

1000

0100

00cossin

00sincos

zR

Reflection wrto xy plane

Consider a point P(xyz) The reflection of this point wrto xy plane is given by pointprsquo(xy-z)

Corresponding matrix is given as

M = 1 0 0

0 1 0

0 0 -1

Page 6: 2D transformations - E-STUDYthirdyearengineering.weebly.com/uploads/3/8/2/8/38286065/... · 2018. 9. 10. · In CG images are made up of series of line segments. Each line segment

Scaling

X 2

Y 05

Scaling

bull Scaling changes the size of an object and involves two scale factors Sx and Sy for the x- and y- coordinates respectively

bull Scales are about the origin

bull We can write the components

px = sx bull px

py = sy bull py

or in matrix form

P = S bull P

Scale matrix as

y

x

s

sS

0

0

P

Prsquo

bull If the scale factors are in between 0 and 1 the points will be moved closer to the origin the object will be smaller

P(2 5)

Prsquo

bull Example

bull P(2 5) Sx = 05 Sy = 05

bull Find Prsquo

bullIf the scale factors are larger than 1

the points will be moved away

from the origin the object will be

larger

Prsquo

bull Example

bullP(2 5) Sx = 2 Sy = 2

bullFind Prsquo

bull If the scale factors are the same Sx = Sy uniform scaling bull Only change in size (as previous example)

P(1 2)

Prsquo

bullIf Sx Sy differential scaling bullChange in size and shape bullExample square rectangle

bullP(1 3) Sx = 2 Sy = 5 Prsquo

Matrix

It is possible to represent this scaling in terms of the matrix

S=

Therefore Prsquo = P S

Sx 0

0 Sy

Thus

Scaling is used to alter the size of an object

Simple 2D scaling is performed by multiplying object positions (x y) by scaling factors sx and sy

xrsquo = x sx

yrsquo = y sx

or Prsquo = SP

xrsquo yrsquo Sx 0

0 Sy x y =

Points 2D Scaling

Any positive value can be used as scaling factor bull Values less than 1 reduce the size of the object

bull Values greater than 1 enlarge the object

bull If scaling factor is 1 then the object stays unchanged

bull If sx = sy we call it uniform scaling

bull If scaling factor lt1 then the object moves closer to the origin and If scaling factor gt1 then the object moves farther from the origin

xrsquo x

Translation

A translation moves all points in an object along the same straight-line path to new positions

The path is represented by a vector called the translation or shift vector

We can write the components

px = px + tx

py = py + ty

or in matrix form

P = P + T

tx

ty

xrsquo yrsquo

x

y

tx

ty = +

(2 2) = 6

=4

2 Translation

Translation changes the position of an object

P = point before translation

Prsquo = point after translation

Let point P(xy)

Prsquo(xrsquoyrsquo) xrsquo = x + tx yrsquo = y + ty

Translation moves the object without deformation

How can we write this in matrix form

P

Prsquo

T

Some points translation

2D Translation

To move a line segment apply the transformation equation to each of the two line endpoints and redraw the line between new endpoints

To move a polygon apply the transformation equation to coordinates of each vertex and regenerate the polygon using the new set of vertex coordinates

Rotation

A rotation repositions all points in an object along a circular path in the plane centered at the pivot point

First wersquoll assume the pivot is at the origin

P

Prsquo

Rotation

bull Review Trigonometry

=gt cos = xr sin = yr

bull x = r cos y = rsin

P(xy)

x

y r

xrsquo

yrsquo

Prsquo(xrsquo yrsquo)

r

=gt cos (+ ) = xrsquor bullxrsquo = r cos (+ )

bullxrsquo = rcoscos -rsinsin

bullxrsquo = xcos ndash ysin

=gtsin (+ ) = yrsquor yrsquo = r sin (+ )

bullyrsquo = rcossin + rsincos

bullyrsquo = xsin + ycos

Identity of Trigonometry

Rotation

bull We can write the components

px = px cos ndash py sin py = px sin + py cos

bull or in matrix form

P = R bull P

bull can be clockwise (-ve) or counterclockwise (+ve as our example)

bull Rotation matrix

P(xy)

x

y r

xrsquo

yrsquo

Prsquo(xrsquo yrsquo)

cossin

sincosR

Example

Find the transformed point Prsquo caused by rotating P= (5 1) about the origin through an angle of 90

Rotation

cossin

sincos

cossin

sincos

yx

yx

y

x

90cos190sin5

90sin190cos5

0115

1105

5

1

Matrix Representations and Homogeneous Coordinates

Many graphics applications involve sequences of geometric transformations

Animations

Design and picture construction applications

We will now consider matrix representations of these operations

Sequences of transformations can be efficiently processed using matrices

Matrix Representations and Homogeneous Coordinates

Prsquo = M1 P + M2

P and Prsquo are row matrices

M1 is a 2 by 2 array containing scaling factors

M2 is a 2 element row matrix containing translational terms

Matrix Representations and Homogeneous Coordinates

To produce a sequence of operations such as scaling followed by rotation then translation we could calculate the transformed coordinates one step at a time

A more efficient approach is to combine transformations without calculating intermediate coordinate values

Matrix Representations and Homogeneous Coordinates

Multiplicative and translational terms for a 2D geometric transformation can be combined into a single matrix if we expand the representations to 3 by 3 matrices

We can use the third column for translation terms and all transformation equations can be expressed as matrix multiplications

Homogenous Coordinates

Letrsquos move our problem into 3D Let point (x y) in 2D be represented by point (x y 1) in

the new space

Scaling our new point by any value a puts us somewhere along a particular line (ax ay a)

A point in 2D can be represented in many ways in the new space

(2 4) ---------- (8 16 4) or (6 12 3) or (2 4 1) or etc

y y

x

x

w

Homogenous Coordinates

bull We can always map back to the original 2D point by dividing by the last coordinate

bull (15 6 3) --- (5 2)

bull (60 40 10) -

bull Why do we use 1 for the last coordinate

bull The fact that all the points along each line can be mapped back to the same point in 2D gives this coordinate system its name ndash homogeneous coordinates

Matrix Representations and Homogeneous Coordinates

Thus 2D Translation Matrix is as follows

1

010

001

tytx

xrsquo yrsquo 1 x y 1 =

Thus 2D Rotation Matrix becomes as

Note Positive values of the rotation angle define the counterclockwise rotation about the rotation point and negative values rotate objects in the clockwise sense

100

0cossin

0sincos

xrsquo yrsquo 1 x y 1 =

Thus 2D Scaling Matrix becomes as

100

00

00

y

x

s

sxrsquo yrsquo 1 x y 1 =

Inverse Transformations

When we apply any transformation to point(xy) we get a new point (xrsquoyrsquo) Some times we need to get original co-ordinate from the transformed point This can be achieved by inverse transformation

2D Inverse Translation Matrix

1

010

0011

yx tt

T

Inverse Transformations

2D Inverse Rotation Matrix

Rotation in clockwise direction making Փ negative

ie cos(-θ)=cos θ sin(-θ)=-sin θ

Matrix becomes

2D Inverse Scaling Matrix

100

0cossin

0sincos1

R

100

01

0

001

1

y

x

s

s

S

2D Composite Transformations

We can setup a sequence of transformations as a composite transformation matrix by calculating the product of the individual transformations

Prsquo=M2M1P

Prsquo=MP

ROTATION ABOUT AN ARBITRARY POINT

2D Composite Transformations

General 2D Pivot-Point Rotation bull Translate

bull Rotate

bull Retranslate

1

010

001

100

0cossin

0sincos

1

010

001

rrrr yxyx

Example

Perform a clockwise rotation of 450 a triangle A(00) B(11) and C(52) (Dec-20052009 10 Marks)

bull about a point (-1-1)

bull About origin

Answer about origin

Arsquo = (00) Brsquo=(radic20) Crsquo=((7 radic2)(-3 radic2))

Ex2 consider a square p(00) Q(010) R(1010) S(100) Rotate the Sq about fixed point R(1010) by an angle 45o (anticlockwise) followed by scaling by 2 units in X direction and 2 units in Y direction (Dec 2006 8 marks)

Prove that two scaling transformations commute that is

S1 S2=S2 S1

Show that transformation matrix for a reflection about a line Y=X is equivalent to reflection to X-axis followed by counterclockwise rotation of 900 (Dec 2008 8 marks)

Perform X-shear and Y-shear on a triangle having A(21) B(43) C(23) Consider the constant value b=c=2

(Dec 2008 8 marks) Answer Arsquo = 45

Brsquo = 1011

Crsquo = 87

Scaling with respect to an arbitrary point

1 Translation

2 Scaling

3 Retranslation

Pictorially shown on next slide

1

010

001

100

00

00

1

010

001

ff

y

x

ff yx

s

s

yx

Other Two Dimensional Transformations

Reflection

Transformation that produces a mirror image of an object

y

x

Reflection

x-axis y-axis

100

010

001

100

010

001

Reflection

origin line x=y

100

010

001

100

001

010

Shear Transformations

Shear

Transformation that distorts the shape of an object such that the transformed shape appears as the object was composed of internal layers that had been caused to slide over each other

y

x

(01) (11)

(10) (00)

y

x

(21) (31)

(10) (00) shx=2

X-Shear

An x-direction shear relative to the x axis

An y-direction shear relative to the y axis

100

01

001

ysh

100

010

01 xsh

yy

yshxx x

Transformations in 3D

Some graphics applications are 2D such as charts graphs maps etc

But to create realistic picture we need to represent picture in 3D

In 3D geometry we need additional third axis z-axis to specify the depth value of the object

Let us see the coordinate systems used in 3D graphics

Lets plot a point in 3D with coordinates (342)

1 first plot the point at(302)

it is on the plane X-Z

2 then lift the point up by 4 units

Y-axis

X-axis

Z-axis

h

e

i

g

h

t

width

Depth

Translation in 3D

Remembering 2D transformations -gt 3x3 matrices take a wild guess what happens to 3D transformations

3D means z-axis comes into picture Giving Depth information for an object

1

0100

0010

0001

1

010

001

zyx

zyxzyx

yx

yxyx

ttt

tttzxytttT

tt

ttyxttT

T=(tx ty tz)

Scale 3D Style

S=(sx sy sz)

zsz

ysy

xsx

z

y

x

1000

000

000

000

)(

pps

s

s

PPsssS

z

y

x

zyx

3D Rotation

In 3D we have to specify the axis of rotation along with the rotation angle

Positive rotation angles produce counterclockwise rotations about a coordinate axis assuming that we are looking in the negative direction along that coordinate axis

3D Rotation

z-axis rotation

xrsquo=x cos θ - y sin θ

yrsquo=x sin θ + y cos θ

zrsquo=z

or Prsquo = Rz(θ)P

1000

0100

00cossin

00sincos

xrsquo yrsquo zrsquo 1

= x y z 1

When we say that we want to rotate a point in anticlockwise direction about z-axis it is very similar to performing a 2D rotation in anticlockwise direction as follows

Fig2D Rotation Fig 3D Rotation

3D Rotation

z-axis rotation

xrsquo=x cos θ - y sin θ

yrsquo=x sin θ + y cos θ

zrsquo=z Transformation equations for rotation abt the other axes

can be obtained with a cyclic permutation of coordinate parameters xy and z That is we use the replacements

xrarr yrarr zrarr x

x-axis rotation

yrsquo=y cos θ - z sin θ

zrsquo=y sin θ + z cos θ

xrsquo=x

y-axis rotation

zrsquo=z cos θ - x sin θ

xrsquo=z sin θ + x cos θ

yrsquo=y

Matrices for anticlockwise 3D rotation

1000

0cossin0

0sincos0

0001

xR

1000

0cos0sin

0010

0sin0cos

yR

1000

0100

00cossin

00sincos

zR

3D Rotation about an arbitrary axis

General Three-Dimensional Rotations

Special case where an object is to be rotated about an axis that is parallel to one of the coordinate axes

1 Translate the object so that the rotation axis coincides with parallel coordinate axis

2 Perform the specified rotation about the axis

3 Translate the object so that the rotation axis is moved back to its original position

3D Rotation of an object about an arbitrary axis

When an object is to rotated about an axis that is not parallel to one of the coordinate axes

1 Translate the object so that the rotation axis passes through the coordinate origin

2 Rotate the object so that the axis of rotation coincides with one of the coordinate axes

3 Perform the specified rotation about the selected coordinate axis

4 Apply inverse rotations to bring the rotation axis back to its original position

5 Apply the inverse translation to bring the rotation axis back to its original spatial position

We can determine the transformation matrices for each step

Assume that rotation axis ie arbitrary axis is defined with two points p1(x1y1z1) and p2(x2y2z2)

Let us say a point on the axis is (PQR)

Initial position of the axis and point is as bellow

p1

p2

(PQR)

Step1 (Translation)transformation of rotation axis so that it passes through the origin

This can be done by moving point P1 to the origin

This repositions the rotation axis and the object as shown

1111

0100

0010

0001

zyx

Tp1

p2

(PQR)

Step2 transform the rotation axis so that it coincides the z-axis

This can be performed in two sub-steps a) Rotate about x-axis to transform axis into xz plane

b) Swing rotation axis around to the z-axis using y-axis rotation

a) Take projection of line segment (000) to (PQR) onto yz plane as shown in fig ie (0QR)

(PQR)

(0QR)

Light

source

x

z

y

Step2-a

Now if we rotate the rotation (arbitrary) axis x-axis so that it lies in X-Z

In this situation its shadow will coincides the z-axis

So we are interested in angle α so that shadow will coincides with z-axis

length of shadow L = radicQ2+R2

sin α = QL

cos α = RL

Therefore the matrix for rotation about x-axis

Rx(α) =

1000

00

00

0001

LRLQ

LQLR

(PQR) (0QR)

L

α

After performing x-axis rotation the rotation axis will lie in x-z plane as shown

When we perform x-axis rotation x-value remains unchanged as axis of rotation is in xz plane so y-coordinate is zero We need to get z-value

L = radicP2+Q2+R2

z-coordinate will be v = radic(L2-P2)

(PQR)

L

P

Step2-b

Now we have to rotate the axis around y-axis so that it coincides the z-axis Let that angle be β

From figure cosβ = VL

sin β = pL

Therefore the transformation

matrix for rotation about y-axis

in clockwise rotation is

1000

00

0010

00

LvLp

LpLv

L

P

β

Ry(β) =

step3

Rotation about z-axis by given angle ie θ ie Rz (θ)

Step 4 and 5 does inverse transformations ie Ry-1 Rx-1 T-1

Therefore the final transformation matrix will be the product of all matrices in sequence

RA= T Rx RyRz Ry-1 Rx-1 T-1

1000

0100

00cossin

00sincos

zR

Reflection wrto xy plane

Consider a point P(xyz) The reflection of this point wrto xy plane is given by pointprsquo(xy-z)

Corresponding matrix is given as

M = 1 0 0

0 1 0

0 0 -1

Page 7: 2D transformations - E-STUDYthirdyearengineering.weebly.com/uploads/3/8/2/8/38286065/... · 2018. 9. 10. · In CG images are made up of series of line segments. Each line segment

Scaling

bull Scaling changes the size of an object and involves two scale factors Sx and Sy for the x- and y- coordinates respectively

bull Scales are about the origin

bull We can write the components

px = sx bull px

py = sy bull py

or in matrix form

P = S bull P

Scale matrix as

y

x

s

sS

0

0

P

Prsquo

bull If the scale factors are in between 0 and 1 the points will be moved closer to the origin the object will be smaller

P(2 5)

Prsquo

bull Example

bull P(2 5) Sx = 05 Sy = 05

bull Find Prsquo

bullIf the scale factors are larger than 1

the points will be moved away

from the origin the object will be

larger

Prsquo

bull Example

bullP(2 5) Sx = 2 Sy = 2

bullFind Prsquo

bull If the scale factors are the same Sx = Sy uniform scaling bull Only change in size (as previous example)

P(1 2)

Prsquo

bullIf Sx Sy differential scaling bullChange in size and shape bullExample square rectangle

bullP(1 3) Sx = 2 Sy = 5 Prsquo

Matrix

It is possible to represent this scaling in terms of the matrix

S=

Therefore Prsquo = P S

Sx 0

0 Sy

Thus

Scaling is used to alter the size of an object

Simple 2D scaling is performed by multiplying object positions (x y) by scaling factors sx and sy

xrsquo = x sx

yrsquo = y sx

or Prsquo = SP

xrsquo yrsquo Sx 0

0 Sy x y =

Points 2D Scaling

Any positive value can be used as scaling factor bull Values less than 1 reduce the size of the object

bull Values greater than 1 enlarge the object

bull If scaling factor is 1 then the object stays unchanged

bull If sx = sy we call it uniform scaling

bull If scaling factor lt1 then the object moves closer to the origin and If scaling factor gt1 then the object moves farther from the origin

xrsquo x

Translation

A translation moves all points in an object along the same straight-line path to new positions

The path is represented by a vector called the translation or shift vector

We can write the components

px = px + tx

py = py + ty

or in matrix form

P = P + T

tx

ty

xrsquo yrsquo

x

y

tx

ty = +

(2 2) = 6

=4

2 Translation

Translation changes the position of an object

P = point before translation

Prsquo = point after translation

Let point P(xy)

Prsquo(xrsquoyrsquo) xrsquo = x + tx yrsquo = y + ty

Translation moves the object without deformation

How can we write this in matrix form

P

Prsquo

T

Some points translation

2D Translation

To move a line segment apply the transformation equation to each of the two line endpoints and redraw the line between new endpoints

To move a polygon apply the transformation equation to coordinates of each vertex and regenerate the polygon using the new set of vertex coordinates

Rotation

A rotation repositions all points in an object along a circular path in the plane centered at the pivot point

First wersquoll assume the pivot is at the origin

P

Prsquo

Rotation

bull Review Trigonometry

=gt cos = xr sin = yr

bull x = r cos y = rsin

P(xy)

x

y r

xrsquo

yrsquo

Prsquo(xrsquo yrsquo)

r

=gt cos (+ ) = xrsquor bullxrsquo = r cos (+ )

bullxrsquo = rcoscos -rsinsin

bullxrsquo = xcos ndash ysin

=gtsin (+ ) = yrsquor yrsquo = r sin (+ )

bullyrsquo = rcossin + rsincos

bullyrsquo = xsin + ycos

Identity of Trigonometry

Rotation

bull We can write the components

px = px cos ndash py sin py = px sin + py cos

bull or in matrix form

P = R bull P

bull can be clockwise (-ve) or counterclockwise (+ve as our example)

bull Rotation matrix

P(xy)

x

y r

xrsquo

yrsquo

Prsquo(xrsquo yrsquo)

cossin

sincosR

Example

Find the transformed point Prsquo caused by rotating P= (5 1) about the origin through an angle of 90

Rotation

cossin

sincos

cossin

sincos

yx

yx

y

x

90cos190sin5

90sin190cos5

0115

1105

5

1

Matrix Representations and Homogeneous Coordinates

Many graphics applications involve sequences of geometric transformations

Animations

Design and picture construction applications

We will now consider matrix representations of these operations

Sequences of transformations can be efficiently processed using matrices

Matrix Representations and Homogeneous Coordinates

Prsquo = M1 P + M2

P and Prsquo are row matrices

M1 is a 2 by 2 array containing scaling factors

M2 is a 2 element row matrix containing translational terms

Matrix Representations and Homogeneous Coordinates

To produce a sequence of operations such as scaling followed by rotation then translation we could calculate the transformed coordinates one step at a time

A more efficient approach is to combine transformations without calculating intermediate coordinate values

Matrix Representations and Homogeneous Coordinates

Multiplicative and translational terms for a 2D geometric transformation can be combined into a single matrix if we expand the representations to 3 by 3 matrices

We can use the third column for translation terms and all transformation equations can be expressed as matrix multiplications

Homogenous Coordinates

Letrsquos move our problem into 3D Let point (x y) in 2D be represented by point (x y 1) in

the new space

Scaling our new point by any value a puts us somewhere along a particular line (ax ay a)

A point in 2D can be represented in many ways in the new space

(2 4) ---------- (8 16 4) or (6 12 3) or (2 4 1) or etc

y y

x

x

w

Homogenous Coordinates

bull We can always map back to the original 2D point by dividing by the last coordinate

bull (15 6 3) --- (5 2)

bull (60 40 10) -

bull Why do we use 1 for the last coordinate

bull The fact that all the points along each line can be mapped back to the same point in 2D gives this coordinate system its name ndash homogeneous coordinates

Matrix Representations and Homogeneous Coordinates

Thus 2D Translation Matrix is as follows

1

010

001

tytx

xrsquo yrsquo 1 x y 1 =

Thus 2D Rotation Matrix becomes as

Note Positive values of the rotation angle define the counterclockwise rotation about the rotation point and negative values rotate objects in the clockwise sense

100

0cossin

0sincos

xrsquo yrsquo 1 x y 1 =

Thus 2D Scaling Matrix becomes as

100

00

00

y

x

s

sxrsquo yrsquo 1 x y 1 =

Inverse Transformations

When we apply any transformation to point(xy) we get a new point (xrsquoyrsquo) Some times we need to get original co-ordinate from the transformed point This can be achieved by inverse transformation

2D Inverse Translation Matrix

1

010

0011

yx tt

T

Inverse Transformations

2D Inverse Rotation Matrix

Rotation in clockwise direction making Փ negative

ie cos(-θ)=cos θ sin(-θ)=-sin θ

Matrix becomes

2D Inverse Scaling Matrix

100

0cossin

0sincos1

R

100

01

0

001

1

y

x

s

s

S

2D Composite Transformations

We can setup a sequence of transformations as a composite transformation matrix by calculating the product of the individual transformations

Prsquo=M2M1P

Prsquo=MP

ROTATION ABOUT AN ARBITRARY POINT

2D Composite Transformations

General 2D Pivot-Point Rotation bull Translate

bull Rotate

bull Retranslate

1

010

001

100

0cossin

0sincos

1

010

001

rrrr yxyx

Example

Perform a clockwise rotation of 450 a triangle A(00) B(11) and C(52) (Dec-20052009 10 Marks)

bull about a point (-1-1)

bull About origin

Answer about origin

Arsquo = (00) Brsquo=(radic20) Crsquo=((7 radic2)(-3 radic2))

Ex2 consider a square p(00) Q(010) R(1010) S(100) Rotate the Sq about fixed point R(1010) by an angle 45o (anticlockwise) followed by scaling by 2 units in X direction and 2 units in Y direction (Dec 2006 8 marks)

Prove that two scaling transformations commute that is

S1 S2=S2 S1

Show that transformation matrix for a reflection about a line Y=X is equivalent to reflection to X-axis followed by counterclockwise rotation of 900 (Dec 2008 8 marks)

Perform X-shear and Y-shear on a triangle having A(21) B(43) C(23) Consider the constant value b=c=2

(Dec 2008 8 marks) Answer Arsquo = 45

Brsquo = 1011

Crsquo = 87

Scaling with respect to an arbitrary point

1 Translation

2 Scaling

3 Retranslation

Pictorially shown on next slide

1

010

001

100

00

00

1

010

001

ff

y

x

ff yx

s

s

yx

Other Two Dimensional Transformations

Reflection

Transformation that produces a mirror image of an object

y

x

Reflection

x-axis y-axis

100

010

001

100

010

001

Reflection

origin line x=y

100

010

001

100

001

010

Shear Transformations

Shear

Transformation that distorts the shape of an object such that the transformed shape appears as the object was composed of internal layers that had been caused to slide over each other

y

x

(01) (11)

(10) (00)

y

x

(21) (31)

(10) (00) shx=2

X-Shear

An x-direction shear relative to the x axis

An y-direction shear relative to the y axis

100

01

001

ysh

100

010

01 xsh

yy

yshxx x

Transformations in 3D

Some graphics applications are 2D such as charts graphs maps etc

But to create realistic picture we need to represent picture in 3D

In 3D geometry we need additional third axis z-axis to specify the depth value of the object

Let us see the coordinate systems used in 3D graphics

Lets plot a point in 3D with coordinates (342)

1 first plot the point at(302)

it is on the plane X-Z

2 then lift the point up by 4 units

Y-axis

X-axis

Z-axis

h

e

i

g

h

t

width

Depth

Translation in 3D

Remembering 2D transformations -gt 3x3 matrices take a wild guess what happens to 3D transformations

3D means z-axis comes into picture Giving Depth information for an object

1

0100

0010

0001

1

010

001

zyx

zyxzyx

yx

yxyx

ttt

tttzxytttT

tt

ttyxttT

T=(tx ty tz)

Scale 3D Style

S=(sx sy sz)

zsz

ysy

xsx

z

y

x

1000

000

000

000

)(

pps

s

s

PPsssS

z

y

x

zyx

3D Rotation

In 3D we have to specify the axis of rotation along with the rotation angle

Positive rotation angles produce counterclockwise rotations about a coordinate axis assuming that we are looking in the negative direction along that coordinate axis

3D Rotation

z-axis rotation

xrsquo=x cos θ - y sin θ

yrsquo=x sin θ + y cos θ

zrsquo=z

or Prsquo = Rz(θ)P

1000

0100

00cossin

00sincos

xrsquo yrsquo zrsquo 1

= x y z 1

When we say that we want to rotate a point in anticlockwise direction about z-axis it is very similar to performing a 2D rotation in anticlockwise direction as follows

Fig2D Rotation Fig 3D Rotation

3D Rotation

z-axis rotation

xrsquo=x cos θ - y sin θ

yrsquo=x sin θ + y cos θ

zrsquo=z Transformation equations for rotation abt the other axes

can be obtained with a cyclic permutation of coordinate parameters xy and z That is we use the replacements

xrarr yrarr zrarr x

x-axis rotation

yrsquo=y cos θ - z sin θ

zrsquo=y sin θ + z cos θ

xrsquo=x

y-axis rotation

zrsquo=z cos θ - x sin θ

xrsquo=z sin θ + x cos θ

yrsquo=y

Matrices for anticlockwise 3D rotation

1000

0cossin0

0sincos0

0001

xR

1000

0cos0sin

0010

0sin0cos

yR

1000

0100

00cossin

00sincos

zR

3D Rotation about an arbitrary axis

General Three-Dimensional Rotations

Special case where an object is to be rotated about an axis that is parallel to one of the coordinate axes

1 Translate the object so that the rotation axis coincides with parallel coordinate axis

2 Perform the specified rotation about the axis

3 Translate the object so that the rotation axis is moved back to its original position

3D Rotation of an object about an arbitrary axis

When an object is to rotated about an axis that is not parallel to one of the coordinate axes

1 Translate the object so that the rotation axis passes through the coordinate origin

2 Rotate the object so that the axis of rotation coincides with one of the coordinate axes

3 Perform the specified rotation about the selected coordinate axis

4 Apply inverse rotations to bring the rotation axis back to its original position

5 Apply the inverse translation to bring the rotation axis back to its original spatial position

We can determine the transformation matrices for each step

Assume that rotation axis ie arbitrary axis is defined with two points p1(x1y1z1) and p2(x2y2z2)

Let us say a point on the axis is (PQR)

Initial position of the axis and point is as bellow

p1

p2

(PQR)

Step1 (Translation)transformation of rotation axis so that it passes through the origin

This can be done by moving point P1 to the origin

This repositions the rotation axis and the object as shown

1111

0100

0010

0001

zyx

Tp1

p2

(PQR)

Step2 transform the rotation axis so that it coincides the z-axis

This can be performed in two sub-steps a) Rotate about x-axis to transform axis into xz plane

b) Swing rotation axis around to the z-axis using y-axis rotation

a) Take projection of line segment (000) to (PQR) onto yz plane as shown in fig ie (0QR)

(PQR)

(0QR)

Light

source

x

z

y

Step2-a

Now if we rotate the rotation (arbitrary) axis x-axis so that it lies in X-Z

In this situation its shadow will coincides the z-axis

So we are interested in angle α so that shadow will coincides with z-axis

length of shadow L = radicQ2+R2

sin α = QL

cos α = RL

Therefore the matrix for rotation about x-axis

Rx(α) =

1000

00

00

0001

LRLQ

LQLR

(PQR) (0QR)

L

α

After performing x-axis rotation the rotation axis will lie in x-z plane as shown

When we perform x-axis rotation x-value remains unchanged as axis of rotation is in xz plane so y-coordinate is zero We need to get z-value

L = radicP2+Q2+R2

z-coordinate will be v = radic(L2-P2)

(PQR)

L

P

Step2-b

Now we have to rotate the axis around y-axis so that it coincides the z-axis Let that angle be β

From figure cosβ = VL

sin β = pL

Therefore the transformation

matrix for rotation about y-axis

in clockwise rotation is

1000

00

0010

00

LvLp

LpLv

L

P

β

Ry(β) =

step3

Rotation about z-axis by given angle ie θ ie Rz (θ)

Step 4 and 5 does inverse transformations ie Ry-1 Rx-1 T-1

Therefore the final transformation matrix will be the product of all matrices in sequence

RA= T Rx RyRz Ry-1 Rx-1 T-1

1000

0100

00cossin

00sincos

zR

Reflection wrto xy plane

Consider a point P(xyz) The reflection of this point wrto xy plane is given by pointprsquo(xy-z)

Corresponding matrix is given as

M = 1 0 0

0 1 0

0 0 -1

Page 8: 2D transformations - E-STUDYthirdyearengineering.weebly.com/uploads/3/8/2/8/38286065/... · 2018. 9. 10. · In CG images are made up of series of line segments. Each line segment

bull If the scale factors are in between 0 and 1 the points will be moved closer to the origin the object will be smaller

P(2 5)

Prsquo

bull Example

bull P(2 5) Sx = 05 Sy = 05

bull Find Prsquo

bullIf the scale factors are larger than 1

the points will be moved away

from the origin the object will be

larger

Prsquo

bull Example

bullP(2 5) Sx = 2 Sy = 2

bullFind Prsquo

bull If the scale factors are the same Sx = Sy uniform scaling bull Only change in size (as previous example)

P(1 2)

Prsquo

bullIf Sx Sy differential scaling bullChange in size and shape bullExample square rectangle

bullP(1 3) Sx = 2 Sy = 5 Prsquo

Matrix

It is possible to represent this scaling in terms of the matrix

S=

Therefore Prsquo = P S

Sx 0

0 Sy

Thus

Scaling is used to alter the size of an object

Simple 2D scaling is performed by multiplying object positions (x y) by scaling factors sx and sy

xrsquo = x sx

yrsquo = y sx

or Prsquo = SP

xrsquo yrsquo Sx 0

0 Sy x y =

Points 2D Scaling

Any positive value can be used as scaling factor bull Values less than 1 reduce the size of the object

bull Values greater than 1 enlarge the object

bull If scaling factor is 1 then the object stays unchanged

bull If sx = sy we call it uniform scaling

bull If scaling factor lt1 then the object moves closer to the origin and If scaling factor gt1 then the object moves farther from the origin

xrsquo x

Translation

A translation moves all points in an object along the same straight-line path to new positions

The path is represented by a vector called the translation or shift vector

We can write the components

px = px + tx

py = py + ty

or in matrix form

P = P + T

tx

ty

xrsquo yrsquo

x

y

tx

ty = +

(2 2) = 6

=4

2 Translation

Translation changes the position of an object

P = point before translation

Prsquo = point after translation

Let point P(xy)

Prsquo(xrsquoyrsquo) xrsquo = x + tx yrsquo = y + ty

Translation moves the object without deformation

How can we write this in matrix form

P

Prsquo

T

Some points translation

2D Translation

To move a line segment apply the transformation equation to each of the two line endpoints and redraw the line between new endpoints

To move a polygon apply the transformation equation to coordinates of each vertex and regenerate the polygon using the new set of vertex coordinates

Rotation

A rotation repositions all points in an object along a circular path in the plane centered at the pivot point

First wersquoll assume the pivot is at the origin

P

Prsquo

Rotation

bull Review Trigonometry

=gt cos = xr sin = yr

bull x = r cos y = rsin

P(xy)

x

y r

xrsquo

yrsquo

Prsquo(xrsquo yrsquo)

r

=gt cos (+ ) = xrsquor bullxrsquo = r cos (+ )

bullxrsquo = rcoscos -rsinsin

bullxrsquo = xcos ndash ysin

=gtsin (+ ) = yrsquor yrsquo = r sin (+ )

bullyrsquo = rcossin + rsincos

bullyrsquo = xsin + ycos

Identity of Trigonometry

Rotation

bull We can write the components

px = px cos ndash py sin py = px sin + py cos

bull or in matrix form

P = R bull P

bull can be clockwise (-ve) or counterclockwise (+ve as our example)

bull Rotation matrix

P(xy)

x

y r

xrsquo

yrsquo

Prsquo(xrsquo yrsquo)

cossin

sincosR

Example

Find the transformed point Prsquo caused by rotating P= (5 1) about the origin through an angle of 90

Rotation

cossin

sincos

cossin

sincos

yx

yx

y

x

90cos190sin5

90sin190cos5

0115

1105

5

1

Matrix Representations and Homogeneous Coordinates

Many graphics applications involve sequences of geometric transformations

Animations

Design and picture construction applications

We will now consider matrix representations of these operations

Sequences of transformations can be efficiently processed using matrices

Matrix Representations and Homogeneous Coordinates

Prsquo = M1 P + M2

P and Prsquo are row matrices

M1 is a 2 by 2 array containing scaling factors

M2 is a 2 element row matrix containing translational terms

Matrix Representations and Homogeneous Coordinates

To produce a sequence of operations such as scaling followed by rotation then translation we could calculate the transformed coordinates one step at a time

A more efficient approach is to combine transformations without calculating intermediate coordinate values

Matrix Representations and Homogeneous Coordinates

Multiplicative and translational terms for a 2D geometric transformation can be combined into a single matrix if we expand the representations to 3 by 3 matrices

We can use the third column for translation terms and all transformation equations can be expressed as matrix multiplications

Homogenous Coordinates

Letrsquos move our problem into 3D Let point (x y) in 2D be represented by point (x y 1) in

the new space

Scaling our new point by any value a puts us somewhere along a particular line (ax ay a)

A point in 2D can be represented in many ways in the new space

(2 4) ---------- (8 16 4) or (6 12 3) or (2 4 1) or etc

y y

x

x

w

Homogenous Coordinates

bull We can always map back to the original 2D point by dividing by the last coordinate

bull (15 6 3) --- (5 2)

bull (60 40 10) -

bull Why do we use 1 for the last coordinate

bull The fact that all the points along each line can be mapped back to the same point in 2D gives this coordinate system its name ndash homogeneous coordinates

Matrix Representations and Homogeneous Coordinates

Thus 2D Translation Matrix is as follows

1

010

001

tytx

xrsquo yrsquo 1 x y 1 =

Thus 2D Rotation Matrix becomes as

Note Positive values of the rotation angle define the counterclockwise rotation about the rotation point and negative values rotate objects in the clockwise sense

100

0cossin

0sincos

xrsquo yrsquo 1 x y 1 =

Thus 2D Scaling Matrix becomes as

100

00

00

y

x

s

sxrsquo yrsquo 1 x y 1 =

Inverse Transformations

When we apply any transformation to point(xy) we get a new point (xrsquoyrsquo) Some times we need to get original co-ordinate from the transformed point This can be achieved by inverse transformation

2D Inverse Translation Matrix

1

010

0011

yx tt

T

Inverse Transformations

2D Inverse Rotation Matrix

Rotation in clockwise direction making Փ negative

ie cos(-θ)=cos θ sin(-θ)=-sin θ

Matrix becomes

2D Inverse Scaling Matrix

100

0cossin

0sincos1

R

100

01

0

001

1

y

x

s

s

S

2D Composite Transformations

We can setup a sequence of transformations as a composite transformation matrix by calculating the product of the individual transformations

Prsquo=M2M1P

Prsquo=MP

ROTATION ABOUT AN ARBITRARY POINT

2D Composite Transformations

General 2D Pivot-Point Rotation bull Translate

bull Rotate

bull Retranslate

1

010

001

100

0cossin

0sincos

1

010

001

rrrr yxyx

Example

Perform a clockwise rotation of 450 a triangle A(00) B(11) and C(52) (Dec-20052009 10 Marks)

bull about a point (-1-1)

bull About origin

Answer about origin

Arsquo = (00) Brsquo=(radic20) Crsquo=((7 radic2)(-3 radic2))

Ex2 consider a square p(00) Q(010) R(1010) S(100) Rotate the Sq about fixed point R(1010) by an angle 45o (anticlockwise) followed by scaling by 2 units in X direction and 2 units in Y direction (Dec 2006 8 marks)

Prove that two scaling transformations commute that is

S1 S2=S2 S1

Show that transformation matrix for a reflection about a line Y=X is equivalent to reflection to X-axis followed by counterclockwise rotation of 900 (Dec 2008 8 marks)

Perform X-shear and Y-shear on a triangle having A(21) B(43) C(23) Consider the constant value b=c=2

(Dec 2008 8 marks) Answer Arsquo = 45

Brsquo = 1011

Crsquo = 87

Scaling with respect to an arbitrary point

1 Translation

2 Scaling

3 Retranslation

Pictorially shown on next slide

1

010

001

100

00

00

1

010

001

ff

y

x

ff yx

s

s

yx

Other Two Dimensional Transformations

Reflection

Transformation that produces a mirror image of an object

y

x

Reflection

x-axis y-axis

100

010

001

100

010

001

Reflection

origin line x=y

100

010

001

100

001

010

Shear Transformations

Shear

Transformation that distorts the shape of an object such that the transformed shape appears as the object was composed of internal layers that had been caused to slide over each other

y

x

(01) (11)

(10) (00)

y

x

(21) (31)

(10) (00) shx=2

X-Shear

An x-direction shear relative to the x axis

An y-direction shear relative to the y axis

100

01

001

ysh

100

010

01 xsh

yy

yshxx x

Transformations in 3D

Some graphics applications are 2D such as charts graphs maps etc

But to create realistic picture we need to represent picture in 3D

In 3D geometry we need additional third axis z-axis to specify the depth value of the object

Let us see the coordinate systems used in 3D graphics

Lets plot a point in 3D with coordinates (342)

1 first plot the point at(302)

it is on the plane X-Z

2 then lift the point up by 4 units

Y-axis

X-axis

Z-axis

h

e

i

g

h

t

width

Depth

Translation in 3D

Remembering 2D transformations -gt 3x3 matrices take a wild guess what happens to 3D transformations

3D means z-axis comes into picture Giving Depth information for an object

1

0100

0010

0001

1

010

001

zyx

zyxzyx

yx

yxyx

ttt

tttzxytttT

tt

ttyxttT

T=(tx ty tz)

Scale 3D Style

S=(sx sy sz)

zsz

ysy

xsx

z

y

x

1000

000

000

000

)(

pps

s

s

PPsssS

z

y

x

zyx

3D Rotation

In 3D we have to specify the axis of rotation along with the rotation angle

Positive rotation angles produce counterclockwise rotations about a coordinate axis assuming that we are looking in the negative direction along that coordinate axis

3D Rotation

z-axis rotation

xrsquo=x cos θ - y sin θ

yrsquo=x sin θ + y cos θ

zrsquo=z

or Prsquo = Rz(θ)P

1000

0100

00cossin

00sincos

xrsquo yrsquo zrsquo 1

= x y z 1

When we say that we want to rotate a point in anticlockwise direction about z-axis it is very similar to performing a 2D rotation in anticlockwise direction as follows

Fig2D Rotation Fig 3D Rotation

3D Rotation

z-axis rotation

xrsquo=x cos θ - y sin θ

yrsquo=x sin θ + y cos θ

zrsquo=z Transformation equations for rotation abt the other axes

can be obtained with a cyclic permutation of coordinate parameters xy and z That is we use the replacements

xrarr yrarr zrarr x

x-axis rotation

yrsquo=y cos θ - z sin θ

zrsquo=y sin θ + z cos θ

xrsquo=x

y-axis rotation

zrsquo=z cos θ - x sin θ

xrsquo=z sin θ + x cos θ

yrsquo=y

Matrices for anticlockwise 3D rotation

1000

0cossin0

0sincos0

0001

xR

1000

0cos0sin

0010

0sin0cos

yR

1000

0100

00cossin

00sincos

zR

3D Rotation about an arbitrary axis

General Three-Dimensional Rotations

Special case where an object is to be rotated about an axis that is parallel to one of the coordinate axes

1 Translate the object so that the rotation axis coincides with parallel coordinate axis

2 Perform the specified rotation about the axis

3 Translate the object so that the rotation axis is moved back to its original position

3D Rotation of an object about an arbitrary axis

When an object is to rotated about an axis that is not parallel to one of the coordinate axes

1 Translate the object so that the rotation axis passes through the coordinate origin

2 Rotate the object so that the axis of rotation coincides with one of the coordinate axes

3 Perform the specified rotation about the selected coordinate axis

4 Apply inverse rotations to bring the rotation axis back to its original position

5 Apply the inverse translation to bring the rotation axis back to its original spatial position

We can determine the transformation matrices for each step

Assume that rotation axis ie arbitrary axis is defined with two points p1(x1y1z1) and p2(x2y2z2)

Let us say a point on the axis is (PQR)

Initial position of the axis and point is as bellow

p1

p2

(PQR)

Step1 (Translation)transformation of rotation axis so that it passes through the origin

This can be done by moving point P1 to the origin

This repositions the rotation axis and the object as shown

1111

0100

0010

0001

zyx

Tp1

p2

(PQR)

Step2 transform the rotation axis so that it coincides the z-axis

This can be performed in two sub-steps a) Rotate about x-axis to transform axis into xz plane

b) Swing rotation axis around to the z-axis using y-axis rotation

a) Take projection of line segment (000) to (PQR) onto yz plane as shown in fig ie (0QR)

(PQR)

(0QR)

Light

source

x

z

y

Step2-a

Now if we rotate the rotation (arbitrary) axis x-axis so that it lies in X-Z

In this situation its shadow will coincides the z-axis

So we are interested in angle α so that shadow will coincides with z-axis

length of shadow L = radicQ2+R2

sin α = QL

cos α = RL

Therefore the matrix for rotation about x-axis

Rx(α) =

1000

00

00

0001

LRLQ

LQLR

(PQR) (0QR)

L

α

After performing x-axis rotation the rotation axis will lie in x-z plane as shown

When we perform x-axis rotation x-value remains unchanged as axis of rotation is in xz plane so y-coordinate is zero We need to get z-value

L = radicP2+Q2+R2

z-coordinate will be v = radic(L2-P2)

(PQR)

L

P

Step2-b

Now we have to rotate the axis around y-axis so that it coincides the z-axis Let that angle be β

From figure cosβ = VL

sin β = pL

Therefore the transformation

matrix for rotation about y-axis

in clockwise rotation is

1000

00

0010

00

LvLp

LpLv

L

P

β

Ry(β) =

step3

Rotation about z-axis by given angle ie θ ie Rz (θ)

Step 4 and 5 does inverse transformations ie Ry-1 Rx-1 T-1

Therefore the final transformation matrix will be the product of all matrices in sequence

RA= T Rx RyRz Ry-1 Rx-1 T-1

1000

0100

00cossin

00sincos

zR

Reflection wrto xy plane

Consider a point P(xyz) The reflection of this point wrto xy plane is given by pointprsquo(xy-z)

Corresponding matrix is given as

M = 1 0 0

0 1 0

0 0 -1

Page 9: 2D transformations - E-STUDYthirdyearengineering.weebly.com/uploads/3/8/2/8/38286065/... · 2018. 9. 10. · In CG images are made up of series of line segments. Each line segment

bull If the scale factors are the same Sx = Sy uniform scaling bull Only change in size (as previous example)

P(1 2)

Prsquo

bullIf Sx Sy differential scaling bullChange in size and shape bullExample square rectangle

bullP(1 3) Sx = 2 Sy = 5 Prsquo

Matrix

It is possible to represent this scaling in terms of the matrix

S=

Therefore Prsquo = P S

Sx 0

0 Sy

Thus

Scaling is used to alter the size of an object

Simple 2D scaling is performed by multiplying object positions (x y) by scaling factors sx and sy

xrsquo = x sx

yrsquo = y sx

or Prsquo = SP

xrsquo yrsquo Sx 0

0 Sy x y =

Points 2D Scaling

Any positive value can be used as scaling factor bull Values less than 1 reduce the size of the object

bull Values greater than 1 enlarge the object

bull If scaling factor is 1 then the object stays unchanged

bull If sx = sy we call it uniform scaling

bull If scaling factor lt1 then the object moves closer to the origin and If scaling factor gt1 then the object moves farther from the origin

xrsquo x

Translation

A translation moves all points in an object along the same straight-line path to new positions

The path is represented by a vector called the translation or shift vector

We can write the components

px = px + tx

py = py + ty

or in matrix form

P = P + T

tx

ty

xrsquo yrsquo

x

y

tx

ty = +

(2 2) = 6

=4

2 Translation

Translation changes the position of an object

P = point before translation

Prsquo = point after translation

Let point P(xy)

Prsquo(xrsquoyrsquo) xrsquo = x + tx yrsquo = y + ty

Translation moves the object without deformation

How can we write this in matrix form

P

Prsquo

T

Some points translation

2D Translation

To move a line segment apply the transformation equation to each of the two line endpoints and redraw the line between new endpoints

To move a polygon apply the transformation equation to coordinates of each vertex and regenerate the polygon using the new set of vertex coordinates

Rotation

A rotation repositions all points in an object along a circular path in the plane centered at the pivot point

First wersquoll assume the pivot is at the origin

P

Prsquo

Rotation

bull Review Trigonometry

=gt cos = xr sin = yr

bull x = r cos y = rsin

P(xy)

x

y r

xrsquo

yrsquo

Prsquo(xrsquo yrsquo)

r

=gt cos (+ ) = xrsquor bullxrsquo = r cos (+ )

bullxrsquo = rcoscos -rsinsin

bullxrsquo = xcos ndash ysin

=gtsin (+ ) = yrsquor yrsquo = r sin (+ )

bullyrsquo = rcossin + rsincos

bullyrsquo = xsin + ycos

Identity of Trigonometry

Rotation

bull We can write the components

px = px cos ndash py sin py = px sin + py cos

bull or in matrix form

P = R bull P

bull can be clockwise (-ve) or counterclockwise (+ve as our example)

bull Rotation matrix

P(xy)

x

y r

xrsquo

yrsquo

Prsquo(xrsquo yrsquo)

cossin

sincosR

Example

Find the transformed point Prsquo caused by rotating P= (5 1) about the origin through an angle of 90

Rotation

cossin

sincos

cossin

sincos

yx

yx

y

x

90cos190sin5

90sin190cos5

0115

1105

5

1

Matrix Representations and Homogeneous Coordinates

Many graphics applications involve sequences of geometric transformations

Animations

Design and picture construction applications

We will now consider matrix representations of these operations

Sequences of transformations can be efficiently processed using matrices

Matrix Representations and Homogeneous Coordinates

Prsquo = M1 P + M2

P and Prsquo are row matrices

M1 is a 2 by 2 array containing scaling factors

M2 is a 2 element row matrix containing translational terms

Matrix Representations and Homogeneous Coordinates

To produce a sequence of operations such as scaling followed by rotation then translation we could calculate the transformed coordinates one step at a time

A more efficient approach is to combine transformations without calculating intermediate coordinate values

Matrix Representations and Homogeneous Coordinates

Multiplicative and translational terms for a 2D geometric transformation can be combined into a single matrix if we expand the representations to 3 by 3 matrices

We can use the third column for translation terms and all transformation equations can be expressed as matrix multiplications

Homogenous Coordinates

Letrsquos move our problem into 3D Let point (x y) in 2D be represented by point (x y 1) in

the new space

Scaling our new point by any value a puts us somewhere along a particular line (ax ay a)

A point in 2D can be represented in many ways in the new space

(2 4) ---------- (8 16 4) or (6 12 3) or (2 4 1) or etc

y y

x

x

w

Homogenous Coordinates

bull We can always map back to the original 2D point by dividing by the last coordinate

bull (15 6 3) --- (5 2)

bull (60 40 10) -

bull Why do we use 1 for the last coordinate

bull The fact that all the points along each line can be mapped back to the same point in 2D gives this coordinate system its name ndash homogeneous coordinates

Matrix Representations and Homogeneous Coordinates

Thus 2D Translation Matrix is as follows

1

010

001

tytx

xrsquo yrsquo 1 x y 1 =

Thus 2D Rotation Matrix becomes as

Note Positive values of the rotation angle define the counterclockwise rotation about the rotation point and negative values rotate objects in the clockwise sense

100

0cossin

0sincos

xrsquo yrsquo 1 x y 1 =

Thus 2D Scaling Matrix becomes as

100

00

00

y

x

s

sxrsquo yrsquo 1 x y 1 =

Inverse Transformations

When we apply any transformation to point(xy) we get a new point (xrsquoyrsquo) Some times we need to get original co-ordinate from the transformed point This can be achieved by inverse transformation

2D Inverse Translation Matrix

1

010

0011

yx tt

T

Inverse Transformations

2D Inverse Rotation Matrix

Rotation in clockwise direction making Փ negative

ie cos(-θ)=cos θ sin(-θ)=-sin θ

Matrix becomes

2D Inverse Scaling Matrix

100

0cossin

0sincos1

R

100

01

0

001

1

y

x

s

s

S

2D Composite Transformations

We can setup a sequence of transformations as a composite transformation matrix by calculating the product of the individual transformations

Prsquo=M2M1P

Prsquo=MP

ROTATION ABOUT AN ARBITRARY POINT

2D Composite Transformations

General 2D Pivot-Point Rotation bull Translate

bull Rotate

bull Retranslate

1

010

001

100

0cossin

0sincos

1

010

001

rrrr yxyx

Example

Perform a clockwise rotation of 450 a triangle A(00) B(11) and C(52) (Dec-20052009 10 Marks)

bull about a point (-1-1)

bull About origin

Answer about origin

Arsquo = (00) Brsquo=(radic20) Crsquo=((7 radic2)(-3 radic2))

Ex2 consider a square p(00) Q(010) R(1010) S(100) Rotate the Sq about fixed point R(1010) by an angle 45o (anticlockwise) followed by scaling by 2 units in X direction and 2 units in Y direction (Dec 2006 8 marks)

Prove that two scaling transformations commute that is

S1 S2=S2 S1

Show that transformation matrix for a reflection about a line Y=X is equivalent to reflection to X-axis followed by counterclockwise rotation of 900 (Dec 2008 8 marks)

Perform X-shear and Y-shear on a triangle having A(21) B(43) C(23) Consider the constant value b=c=2

(Dec 2008 8 marks) Answer Arsquo = 45

Brsquo = 1011

Crsquo = 87

Scaling with respect to an arbitrary point

1 Translation

2 Scaling

3 Retranslation

Pictorially shown on next slide

1

010

001

100

00

00

1

010

001

ff

y

x

ff yx

s

s

yx

Other Two Dimensional Transformations

Reflection

Transformation that produces a mirror image of an object

y

x

Reflection

x-axis y-axis

100

010

001

100

010

001

Reflection

origin line x=y

100

010

001

100

001

010

Shear Transformations

Shear

Transformation that distorts the shape of an object such that the transformed shape appears as the object was composed of internal layers that had been caused to slide over each other

y

x

(01) (11)

(10) (00)

y

x

(21) (31)

(10) (00) shx=2

X-Shear

An x-direction shear relative to the x axis

An y-direction shear relative to the y axis

100

01

001

ysh

100

010

01 xsh

yy

yshxx x

Transformations in 3D

Some graphics applications are 2D such as charts graphs maps etc

But to create realistic picture we need to represent picture in 3D

In 3D geometry we need additional third axis z-axis to specify the depth value of the object

Let us see the coordinate systems used in 3D graphics

Lets plot a point in 3D with coordinates (342)

1 first plot the point at(302)

it is on the plane X-Z

2 then lift the point up by 4 units

Y-axis

X-axis

Z-axis

h

e

i

g

h

t

width

Depth

Translation in 3D

Remembering 2D transformations -gt 3x3 matrices take a wild guess what happens to 3D transformations

3D means z-axis comes into picture Giving Depth information for an object

1

0100

0010

0001

1

010

001

zyx

zyxzyx

yx

yxyx

ttt

tttzxytttT

tt

ttyxttT

T=(tx ty tz)

Scale 3D Style

S=(sx sy sz)

zsz

ysy

xsx

z

y

x

1000

000

000

000

)(

pps

s

s

PPsssS

z

y

x

zyx

3D Rotation

In 3D we have to specify the axis of rotation along with the rotation angle

Positive rotation angles produce counterclockwise rotations about a coordinate axis assuming that we are looking in the negative direction along that coordinate axis

3D Rotation

z-axis rotation

xrsquo=x cos θ - y sin θ

yrsquo=x sin θ + y cos θ

zrsquo=z

or Prsquo = Rz(θ)P

1000

0100

00cossin

00sincos

xrsquo yrsquo zrsquo 1

= x y z 1

When we say that we want to rotate a point in anticlockwise direction about z-axis it is very similar to performing a 2D rotation in anticlockwise direction as follows

Fig2D Rotation Fig 3D Rotation

3D Rotation

z-axis rotation

xrsquo=x cos θ - y sin θ

yrsquo=x sin θ + y cos θ

zrsquo=z Transformation equations for rotation abt the other axes

can be obtained with a cyclic permutation of coordinate parameters xy and z That is we use the replacements

xrarr yrarr zrarr x

x-axis rotation

yrsquo=y cos θ - z sin θ

zrsquo=y sin θ + z cos θ

xrsquo=x

y-axis rotation

zrsquo=z cos θ - x sin θ

xrsquo=z sin θ + x cos θ

yrsquo=y

Matrices for anticlockwise 3D rotation

1000

0cossin0

0sincos0

0001

xR

1000

0cos0sin

0010

0sin0cos

yR

1000

0100

00cossin

00sincos

zR

3D Rotation about an arbitrary axis

General Three-Dimensional Rotations

Special case where an object is to be rotated about an axis that is parallel to one of the coordinate axes

1 Translate the object so that the rotation axis coincides with parallel coordinate axis

2 Perform the specified rotation about the axis

3 Translate the object so that the rotation axis is moved back to its original position

3D Rotation of an object about an arbitrary axis

When an object is to rotated about an axis that is not parallel to one of the coordinate axes

1 Translate the object so that the rotation axis passes through the coordinate origin

2 Rotate the object so that the axis of rotation coincides with one of the coordinate axes

3 Perform the specified rotation about the selected coordinate axis

4 Apply inverse rotations to bring the rotation axis back to its original position

5 Apply the inverse translation to bring the rotation axis back to its original spatial position

We can determine the transformation matrices for each step

Assume that rotation axis ie arbitrary axis is defined with two points p1(x1y1z1) and p2(x2y2z2)

Let us say a point on the axis is (PQR)

Initial position of the axis and point is as bellow

p1

p2

(PQR)

Step1 (Translation)transformation of rotation axis so that it passes through the origin

This can be done by moving point P1 to the origin

This repositions the rotation axis and the object as shown

1111

0100

0010

0001

zyx

Tp1

p2

(PQR)

Step2 transform the rotation axis so that it coincides the z-axis

This can be performed in two sub-steps a) Rotate about x-axis to transform axis into xz plane

b) Swing rotation axis around to the z-axis using y-axis rotation

a) Take projection of line segment (000) to (PQR) onto yz plane as shown in fig ie (0QR)

(PQR)

(0QR)

Light

source

x

z

y

Step2-a

Now if we rotate the rotation (arbitrary) axis x-axis so that it lies in X-Z

In this situation its shadow will coincides the z-axis

So we are interested in angle α so that shadow will coincides with z-axis

length of shadow L = radicQ2+R2

sin α = QL

cos α = RL

Therefore the matrix for rotation about x-axis

Rx(α) =

1000

00

00

0001

LRLQ

LQLR

(PQR) (0QR)

L

α

After performing x-axis rotation the rotation axis will lie in x-z plane as shown

When we perform x-axis rotation x-value remains unchanged as axis of rotation is in xz plane so y-coordinate is zero We need to get z-value

L = radicP2+Q2+R2

z-coordinate will be v = radic(L2-P2)

(PQR)

L

P

Step2-b

Now we have to rotate the axis around y-axis so that it coincides the z-axis Let that angle be β

From figure cosβ = VL

sin β = pL

Therefore the transformation

matrix for rotation about y-axis

in clockwise rotation is

1000

00

0010

00

LvLp

LpLv

L

P

β

Ry(β) =

step3

Rotation about z-axis by given angle ie θ ie Rz (θ)

Step 4 and 5 does inverse transformations ie Ry-1 Rx-1 T-1

Therefore the final transformation matrix will be the product of all matrices in sequence

RA= T Rx RyRz Ry-1 Rx-1 T-1

1000

0100

00cossin

00sincos

zR

Reflection wrto xy plane

Consider a point P(xyz) The reflection of this point wrto xy plane is given by pointprsquo(xy-z)

Corresponding matrix is given as

M = 1 0 0

0 1 0

0 0 -1

Page 10: 2D transformations - E-STUDYthirdyearengineering.weebly.com/uploads/3/8/2/8/38286065/... · 2018. 9. 10. · In CG images are made up of series of line segments. Each line segment

Matrix

It is possible to represent this scaling in terms of the matrix

S=

Therefore Prsquo = P S

Sx 0

0 Sy

Thus

Scaling is used to alter the size of an object

Simple 2D scaling is performed by multiplying object positions (x y) by scaling factors sx and sy

xrsquo = x sx

yrsquo = y sx

or Prsquo = SP

xrsquo yrsquo Sx 0

0 Sy x y =

Points 2D Scaling

Any positive value can be used as scaling factor bull Values less than 1 reduce the size of the object

bull Values greater than 1 enlarge the object

bull If scaling factor is 1 then the object stays unchanged

bull If sx = sy we call it uniform scaling

bull If scaling factor lt1 then the object moves closer to the origin and If scaling factor gt1 then the object moves farther from the origin

xrsquo x

Translation

A translation moves all points in an object along the same straight-line path to new positions

The path is represented by a vector called the translation or shift vector

We can write the components

px = px + tx

py = py + ty

or in matrix form

P = P + T

tx

ty

xrsquo yrsquo

x

y

tx

ty = +

(2 2) = 6

=4

2 Translation

Translation changes the position of an object

P = point before translation

Prsquo = point after translation

Let point P(xy)

Prsquo(xrsquoyrsquo) xrsquo = x + tx yrsquo = y + ty

Translation moves the object without deformation

How can we write this in matrix form

P

Prsquo

T

Some points translation

2D Translation

To move a line segment apply the transformation equation to each of the two line endpoints and redraw the line between new endpoints

To move a polygon apply the transformation equation to coordinates of each vertex and regenerate the polygon using the new set of vertex coordinates

Rotation

A rotation repositions all points in an object along a circular path in the plane centered at the pivot point

First wersquoll assume the pivot is at the origin

P

Prsquo

Rotation

bull Review Trigonometry

=gt cos = xr sin = yr

bull x = r cos y = rsin

P(xy)

x

y r

xrsquo

yrsquo

Prsquo(xrsquo yrsquo)

r

=gt cos (+ ) = xrsquor bullxrsquo = r cos (+ )

bullxrsquo = rcoscos -rsinsin

bullxrsquo = xcos ndash ysin

=gtsin (+ ) = yrsquor yrsquo = r sin (+ )

bullyrsquo = rcossin + rsincos

bullyrsquo = xsin + ycos

Identity of Trigonometry

Rotation

bull We can write the components

px = px cos ndash py sin py = px sin + py cos

bull or in matrix form

P = R bull P

bull can be clockwise (-ve) or counterclockwise (+ve as our example)

bull Rotation matrix

P(xy)

x

y r

xrsquo

yrsquo

Prsquo(xrsquo yrsquo)

cossin

sincosR

Example

Find the transformed point Prsquo caused by rotating P= (5 1) about the origin through an angle of 90

Rotation

cossin

sincos

cossin

sincos

yx

yx

y

x

90cos190sin5

90sin190cos5

0115

1105

5

1

Matrix Representations and Homogeneous Coordinates

Many graphics applications involve sequences of geometric transformations

Animations

Design and picture construction applications

We will now consider matrix representations of these operations

Sequences of transformations can be efficiently processed using matrices

Matrix Representations and Homogeneous Coordinates

Prsquo = M1 P + M2

P and Prsquo are row matrices

M1 is a 2 by 2 array containing scaling factors

M2 is a 2 element row matrix containing translational terms

Matrix Representations and Homogeneous Coordinates

To produce a sequence of operations such as scaling followed by rotation then translation we could calculate the transformed coordinates one step at a time

A more efficient approach is to combine transformations without calculating intermediate coordinate values

Matrix Representations and Homogeneous Coordinates

Multiplicative and translational terms for a 2D geometric transformation can be combined into a single matrix if we expand the representations to 3 by 3 matrices

We can use the third column for translation terms and all transformation equations can be expressed as matrix multiplications

Homogenous Coordinates

Letrsquos move our problem into 3D Let point (x y) in 2D be represented by point (x y 1) in

the new space

Scaling our new point by any value a puts us somewhere along a particular line (ax ay a)

A point in 2D can be represented in many ways in the new space

(2 4) ---------- (8 16 4) or (6 12 3) or (2 4 1) or etc

y y

x

x

w

Homogenous Coordinates

bull We can always map back to the original 2D point by dividing by the last coordinate

bull (15 6 3) --- (5 2)

bull (60 40 10) -

bull Why do we use 1 for the last coordinate

bull The fact that all the points along each line can be mapped back to the same point in 2D gives this coordinate system its name ndash homogeneous coordinates

Matrix Representations and Homogeneous Coordinates

Thus 2D Translation Matrix is as follows

1

010

001

tytx

xrsquo yrsquo 1 x y 1 =

Thus 2D Rotation Matrix becomes as

Note Positive values of the rotation angle define the counterclockwise rotation about the rotation point and negative values rotate objects in the clockwise sense

100

0cossin

0sincos

xrsquo yrsquo 1 x y 1 =

Thus 2D Scaling Matrix becomes as

100

00

00

y

x

s

sxrsquo yrsquo 1 x y 1 =

Inverse Transformations

When we apply any transformation to point(xy) we get a new point (xrsquoyrsquo) Some times we need to get original co-ordinate from the transformed point This can be achieved by inverse transformation

2D Inverse Translation Matrix

1

010

0011

yx tt

T

Inverse Transformations

2D Inverse Rotation Matrix

Rotation in clockwise direction making Փ negative

ie cos(-θ)=cos θ sin(-θ)=-sin θ

Matrix becomes

2D Inverse Scaling Matrix

100

0cossin

0sincos1

R

100

01

0

001

1

y

x

s

s

S

2D Composite Transformations

We can setup a sequence of transformations as a composite transformation matrix by calculating the product of the individual transformations

Prsquo=M2M1P

Prsquo=MP

ROTATION ABOUT AN ARBITRARY POINT

2D Composite Transformations

General 2D Pivot-Point Rotation bull Translate

bull Rotate

bull Retranslate

1

010

001

100

0cossin

0sincos

1

010

001

rrrr yxyx

Example

Perform a clockwise rotation of 450 a triangle A(00) B(11) and C(52) (Dec-20052009 10 Marks)

bull about a point (-1-1)

bull About origin

Answer about origin

Arsquo = (00) Brsquo=(radic20) Crsquo=((7 radic2)(-3 radic2))

Ex2 consider a square p(00) Q(010) R(1010) S(100) Rotate the Sq about fixed point R(1010) by an angle 45o (anticlockwise) followed by scaling by 2 units in X direction and 2 units in Y direction (Dec 2006 8 marks)

Prove that two scaling transformations commute that is

S1 S2=S2 S1

Show that transformation matrix for a reflection about a line Y=X is equivalent to reflection to X-axis followed by counterclockwise rotation of 900 (Dec 2008 8 marks)

Perform X-shear and Y-shear on a triangle having A(21) B(43) C(23) Consider the constant value b=c=2

(Dec 2008 8 marks) Answer Arsquo = 45

Brsquo = 1011

Crsquo = 87

Scaling with respect to an arbitrary point

1 Translation

2 Scaling

3 Retranslation

Pictorially shown on next slide

1

010

001

100

00

00

1

010

001

ff

y

x

ff yx

s

s

yx

Other Two Dimensional Transformations

Reflection

Transformation that produces a mirror image of an object

y

x

Reflection

x-axis y-axis

100

010

001

100

010

001

Reflection

origin line x=y

100

010

001

100

001

010

Shear Transformations

Shear

Transformation that distorts the shape of an object such that the transformed shape appears as the object was composed of internal layers that had been caused to slide over each other

y

x

(01) (11)

(10) (00)

y

x

(21) (31)

(10) (00) shx=2

X-Shear

An x-direction shear relative to the x axis

An y-direction shear relative to the y axis

100

01

001

ysh

100

010

01 xsh

yy

yshxx x

Transformations in 3D

Some graphics applications are 2D such as charts graphs maps etc

But to create realistic picture we need to represent picture in 3D

In 3D geometry we need additional third axis z-axis to specify the depth value of the object

Let us see the coordinate systems used in 3D graphics

Lets plot a point in 3D with coordinates (342)

1 first plot the point at(302)

it is on the plane X-Z

2 then lift the point up by 4 units

Y-axis

X-axis

Z-axis

h

e

i

g

h

t

width

Depth

Translation in 3D

Remembering 2D transformations -gt 3x3 matrices take a wild guess what happens to 3D transformations

3D means z-axis comes into picture Giving Depth information for an object

1

0100

0010

0001

1

010

001

zyx

zyxzyx

yx

yxyx

ttt

tttzxytttT

tt

ttyxttT

T=(tx ty tz)

Scale 3D Style

S=(sx sy sz)

zsz

ysy

xsx

z

y

x

1000

000

000

000

)(

pps

s

s

PPsssS

z

y

x

zyx

3D Rotation

In 3D we have to specify the axis of rotation along with the rotation angle

Positive rotation angles produce counterclockwise rotations about a coordinate axis assuming that we are looking in the negative direction along that coordinate axis

3D Rotation

z-axis rotation

xrsquo=x cos θ - y sin θ

yrsquo=x sin θ + y cos θ

zrsquo=z

or Prsquo = Rz(θ)P

1000

0100

00cossin

00sincos

xrsquo yrsquo zrsquo 1

= x y z 1

When we say that we want to rotate a point in anticlockwise direction about z-axis it is very similar to performing a 2D rotation in anticlockwise direction as follows

Fig2D Rotation Fig 3D Rotation

3D Rotation

z-axis rotation

xrsquo=x cos θ - y sin θ

yrsquo=x sin θ + y cos θ

zrsquo=z Transformation equations for rotation abt the other axes

can be obtained with a cyclic permutation of coordinate parameters xy and z That is we use the replacements

xrarr yrarr zrarr x

x-axis rotation

yrsquo=y cos θ - z sin θ

zrsquo=y sin θ + z cos θ

xrsquo=x

y-axis rotation

zrsquo=z cos θ - x sin θ

xrsquo=z sin θ + x cos θ

yrsquo=y

Matrices for anticlockwise 3D rotation

1000

0cossin0

0sincos0

0001

xR

1000

0cos0sin

0010

0sin0cos

yR

1000

0100

00cossin

00sincos

zR

3D Rotation about an arbitrary axis

General Three-Dimensional Rotations

Special case where an object is to be rotated about an axis that is parallel to one of the coordinate axes

1 Translate the object so that the rotation axis coincides with parallel coordinate axis

2 Perform the specified rotation about the axis

3 Translate the object so that the rotation axis is moved back to its original position

3D Rotation of an object about an arbitrary axis

When an object is to rotated about an axis that is not parallel to one of the coordinate axes

1 Translate the object so that the rotation axis passes through the coordinate origin

2 Rotate the object so that the axis of rotation coincides with one of the coordinate axes

3 Perform the specified rotation about the selected coordinate axis

4 Apply inverse rotations to bring the rotation axis back to its original position

5 Apply the inverse translation to bring the rotation axis back to its original spatial position

We can determine the transformation matrices for each step

Assume that rotation axis ie arbitrary axis is defined with two points p1(x1y1z1) and p2(x2y2z2)

Let us say a point on the axis is (PQR)

Initial position of the axis and point is as bellow

p1

p2

(PQR)

Step1 (Translation)transformation of rotation axis so that it passes through the origin

This can be done by moving point P1 to the origin

This repositions the rotation axis and the object as shown

1111

0100

0010

0001

zyx

Tp1

p2

(PQR)

Step2 transform the rotation axis so that it coincides the z-axis

This can be performed in two sub-steps a) Rotate about x-axis to transform axis into xz plane

b) Swing rotation axis around to the z-axis using y-axis rotation

a) Take projection of line segment (000) to (PQR) onto yz plane as shown in fig ie (0QR)

(PQR)

(0QR)

Light

source

x

z

y

Step2-a

Now if we rotate the rotation (arbitrary) axis x-axis so that it lies in X-Z

In this situation its shadow will coincides the z-axis

So we are interested in angle α so that shadow will coincides with z-axis

length of shadow L = radicQ2+R2

sin α = QL

cos α = RL

Therefore the matrix for rotation about x-axis

Rx(α) =

1000

00

00

0001

LRLQ

LQLR

(PQR) (0QR)

L

α

After performing x-axis rotation the rotation axis will lie in x-z plane as shown

When we perform x-axis rotation x-value remains unchanged as axis of rotation is in xz plane so y-coordinate is zero We need to get z-value

L = radicP2+Q2+R2

z-coordinate will be v = radic(L2-P2)

(PQR)

L

P

Step2-b

Now we have to rotate the axis around y-axis so that it coincides the z-axis Let that angle be β

From figure cosβ = VL

sin β = pL

Therefore the transformation

matrix for rotation about y-axis

in clockwise rotation is

1000

00

0010

00

LvLp

LpLv

L

P

β

Ry(β) =

step3

Rotation about z-axis by given angle ie θ ie Rz (θ)

Step 4 and 5 does inverse transformations ie Ry-1 Rx-1 T-1

Therefore the final transformation matrix will be the product of all matrices in sequence

RA= T Rx RyRz Ry-1 Rx-1 T-1

1000

0100

00cossin

00sincos

zR

Reflection wrto xy plane

Consider a point P(xyz) The reflection of this point wrto xy plane is given by pointprsquo(xy-z)

Corresponding matrix is given as

M = 1 0 0

0 1 0

0 0 -1

Page 11: 2D transformations - E-STUDYthirdyearengineering.weebly.com/uploads/3/8/2/8/38286065/... · 2018. 9. 10. · In CG images are made up of series of line segments. Each line segment

Thus

Scaling is used to alter the size of an object

Simple 2D scaling is performed by multiplying object positions (x y) by scaling factors sx and sy

xrsquo = x sx

yrsquo = y sx

or Prsquo = SP

xrsquo yrsquo Sx 0

0 Sy x y =

Points 2D Scaling

Any positive value can be used as scaling factor bull Values less than 1 reduce the size of the object

bull Values greater than 1 enlarge the object

bull If scaling factor is 1 then the object stays unchanged

bull If sx = sy we call it uniform scaling

bull If scaling factor lt1 then the object moves closer to the origin and If scaling factor gt1 then the object moves farther from the origin

xrsquo x

Translation

A translation moves all points in an object along the same straight-line path to new positions

The path is represented by a vector called the translation or shift vector

We can write the components

px = px + tx

py = py + ty

or in matrix form

P = P + T

tx

ty

xrsquo yrsquo

x

y

tx

ty = +

(2 2) = 6

=4

2 Translation

Translation changes the position of an object

P = point before translation

Prsquo = point after translation

Let point P(xy)

Prsquo(xrsquoyrsquo) xrsquo = x + tx yrsquo = y + ty

Translation moves the object without deformation

How can we write this in matrix form

P

Prsquo

T

Some points translation

2D Translation

To move a line segment apply the transformation equation to each of the two line endpoints and redraw the line between new endpoints

To move a polygon apply the transformation equation to coordinates of each vertex and regenerate the polygon using the new set of vertex coordinates

Rotation

A rotation repositions all points in an object along a circular path in the plane centered at the pivot point

First wersquoll assume the pivot is at the origin

P

Prsquo

Rotation

bull Review Trigonometry

=gt cos = xr sin = yr

bull x = r cos y = rsin

P(xy)

x

y r

xrsquo

yrsquo

Prsquo(xrsquo yrsquo)

r

=gt cos (+ ) = xrsquor bullxrsquo = r cos (+ )

bullxrsquo = rcoscos -rsinsin

bullxrsquo = xcos ndash ysin

=gtsin (+ ) = yrsquor yrsquo = r sin (+ )

bullyrsquo = rcossin + rsincos

bullyrsquo = xsin + ycos

Identity of Trigonometry

Rotation

bull We can write the components

px = px cos ndash py sin py = px sin + py cos

bull or in matrix form

P = R bull P

bull can be clockwise (-ve) or counterclockwise (+ve as our example)

bull Rotation matrix

P(xy)

x

y r

xrsquo

yrsquo

Prsquo(xrsquo yrsquo)

cossin

sincosR

Example

Find the transformed point Prsquo caused by rotating P= (5 1) about the origin through an angle of 90

Rotation

cossin

sincos

cossin

sincos

yx

yx

y

x

90cos190sin5

90sin190cos5

0115

1105

5

1

Matrix Representations and Homogeneous Coordinates

Many graphics applications involve sequences of geometric transformations

Animations

Design and picture construction applications

We will now consider matrix representations of these operations

Sequences of transformations can be efficiently processed using matrices

Matrix Representations and Homogeneous Coordinates

Prsquo = M1 P + M2

P and Prsquo are row matrices

M1 is a 2 by 2 array containing scaling factors

M2 is a 2 element row matrix containing translational terms

Matrix Representations and Homogeneous Coordinates

To produce a sequence of operations such as scaling followed by rotation then translation we could calculate the transformed coordinates one step at a time

A more efficient approach is to combine transformations without calculating intermediate coordinate values

Matrix Representations and Homogeneous Coordinates

Multiplicative and translational terms for a 2D geometric transformation can be combined into a single matrix if we expand the representations to 3 by 3 matrices

We can use the third column for translation terms and all transformation equations can be expressed as matrix multiplications

Homogenous Coordinates

Letrsquos move our problem into 3D Let point (x y) in 2D be represented by point (x y 1) in

the new space

Scaling our new point by any value a puts us somewhere along a particular line (ax ay a)

A point in 2D can be represented in many ways in the new space

(2 4) ---------- (8 16 4) or (6 12 3) or (2 4 1) or etc

y y

x

x

w

Homogenous Coordinates

bull We can always map back to the original 2D point by dividing by the last coordinate

bull (15 6 3) --- (5 2)

bull (60 40 10) -

bull Why do we use 1 for the last coordinate

bull The fact that all the points along each line can be mapped back to the same point in 2D gives this coordinate system its name ndash homogeneous coordinates

Matrix Representations and Homogeneous Coordinates

Thus 2D Translation Matrix is as follows

1

010

001

tytx

xrsquo yrsquo 1 x y 1 =

Thus 2D Rotation Matrix becomes as

Note Positive values of the rotation angle define the counterclockwise rotation about the rotation point and negative values rotate objects in the clockwise sense

100

0cossin

0sincos

xrsquo yrsquo 1 x y 1 =

Thus 2D Scaling Matrix becomes as

100

00

00

y

x

s

sxrsquo yrsquo 1 x y 1 =

Inverse Transformations

When we apply any transformation to point(xy) we get a new point (xrsquoyrsquo) Some times we need to get original co-ordinate from the transformed point This can be achieved by inverse transformation

2D Inverse Translation Matrix

1

010

0011

yx tt

T

Inverse Transformations

2D Inverse Rotation Matrix

Rotation in clockwise direction making Փ negative

ie cos(-θ)=cos θ sin(-θ)=-sin θ

Matrix becomes

2D Inverse Scaling Matrix

100

0cossin

0sincos1

R

100

01

0

001

1

y

x

s

s

S

2D Composite Transformations

We can setup a sequence of transformations as a composite transformation matrix by calculating the product of the individual transformations

Prsquo=M2M1P

Prsquo=MP

ROTATION ABOUT AN ARBITRARY POINT

2D Composite Transformations

General 2D Pivot-Point Rotation bull Translate

bull Rotate

bull Retranslate

1

010

001

100

0cossin

0sincos

1

010

001

rrrr yxyx

Example

Perform a clockwise rotation of 450 a triangle A(00) B(11) and C(52) (Dec-20052009 10 Marks)

bull about a point (-1-1)

bull About origin

Answer about origin

Arsquo = (00) Brsquo=(radic20) Crsquo=((7 radic2)(-3 radic2))

Ex2 consider a square p(00) Q(010) R(1010) S(100) Rotate the Sq about fixed point R(1010) by an angle 45o (anticlockwise) followed by scaling by 2 units in X direction and 2 units in Y direction (Dec 2006 8 marks)

Prove that two scaling transformations commute that is

S1 S2=S2 S1

Show that transformation matrix for a reflection about a line Y=X is equivalent to reflection to X-axis followed by counterclockwise rotation of 900 (Dec 2008 8 marks)

Perform X-shear and Y-shear on a triangle having A(21) B(43) C(23) Consider the constant value b=c=2

(Dec 2008 8 marks) Answer Arsquo = 45

Brsquo = 1011

Crsquo = 87

Scaling with respect to an arbitrary point

1 Translation

2 Scaling

3 Retranslation

Pictorially shown on next slide

1

010

001

100

00

00

1

010

001

ff

y

x

ff yx

s

s

yx

Other Two Dimensional Transformations

Reflection

Transformation that produces a mirror image of an object

y

x

Reflection

x-axis y-axis

100

010

001

100

010

001

Reflection

origin line x=y

100

010

001

100

001

010

Shear Transformations

Shear

Transformation that distorts the shape of an object such that the transformed shape appears as the object was composed of internal layers that had been caused to slide over each other

y

x

(01) (11)

(10) (00)

y

x

(21) (31)

(10) (00) shx=2

X-Shear

An x-direction shear relative to the x axis

An y-direction shear relative to the y axis

100

01

001

ysh

100

010

01 xsh

yy

yshxx x

Transformations in 3D

Some graphics applications are 2D such as charts graphs maps etc

But to create realistic picture we need to represent picture in 3D

In 3D geometry we need additional third axis z-axis to specify the depth value of the object

Let us see the coordinate systems used in 3D graphics

Lets plot a point in 3D with coordinates (342)

1 first plot the point at(302)

it is on the plane X-Z

2 then lift the point up by 4 units

Y-axis

X-axis

Z-axis

h

e

i

g

h

t

width

Depth

Translation in 3D

Remembering 2D transformations -gt 3x3 matrices take a wild guess what happens to 3D transformations

3D means z-axis comes into picture Giving Depth information for an object

1

0100

0010

0001

1

010

001

zyx

zyxzyx

yx

yxyx

ttt

tttzxytttT

tt

ttyxttT

T=(tx ty tz)

Scale 3D Style

S=(sx sy sz)

zsz

ysy

xsx

z

y

x

1000

000

000

000

)(

pps

s

s

PPsssS

z

y

x

zyx

3D Rotation

In 3D we have to specify the axis of rotation along with the rotation angle

Positive rotation angles produce counterclockwise rotations about a coordinate axis assuming that we are looking in the negative direction along that coordinate axis

3D Rotation

z-axis rotation

xrsquo=x cos θ - y sin θ

yrsquo=x sin θ + y cos θ

zrsquo=z

or Prsquo = Rz(θ)P

1000

0100

00cossin

00sincos

xrsquo yrsquo zrsquo 1

= x y z 1

When we say that we want to rotate a point in anticlockwise direction about z-axis it is very similar to performing a 2D rotation in anticlockwise direction as follows

Fig2D Rotation Fig 3D Rotation

3D Rotation

z-axis rotation

xrsquo=x cos θ - y sin θ

yrsquo=x sin θ + y cos θ

zrsquo=z Transformation equations for rotation abt the other axes

can be obtained with a cyclic permutation of coordinate parameters xy and z That is we use the replacements

xrarr yrarr zrarr x

x-axis rotation

yrsquo=y cos θ - z sin θ

zrsquo=y sin θ + z cos θ

xrsquo=x

y-axis rotation

zrsquo=z cos θ - x sin θ

xrsquo=z sin θ + x cos θ

yrsquo=y

Matrices for anticlockwise 3D rotation

1000

0cossin0

0sincos0

0001

xR

1000

0cos0sin

0010

0sin0cos

yR

1000

0100

00cossin

00sincos

zR

3D Rotation about an arbitrary axis

General Three-Dimensional Rotations

Special case where an object is to be rotated about an axis that is parallel to one of the coordinate axes

1 Translate the object so that the rotation axis coincides with parallel coordinate axis

2 Perform the specified rotation about the axis

3 Translate the object so that the rotation axis is moved back to its original position

3D Rotation of an object about an arbitrary axis

When an object is to rotated about an axis that is not parallel to one of the coordinate axes

1 Translate the object so that the rotation axis passes through the coordinate origin

2 Rotate the object so that the axis of rotation coincides with one of the coordinate axes

3 Perform the specified rotation about the selected coordinate axis

4 Apply inverse rotations to bring the rotation axis back to its original position

5 Apply the inverse translation to bring the rotation axis back to its original spatial position

We can determine the transformation matrices for each step

Assume that rotation axis ie arbitrary axis is defined with two points p1(x1y1z1) and p2(x2y2z2)

Let us say a point on the axis is (PQR)

Initial position of the axis and point is as bellow

p1

p2

(PQR)

Step1 (Translation)transformation of rotation axis so that it passes through the origin

This can be done by moving point P1 to the origin

This repositions the rotation axis and the object as shown

1111

0100

0010

0001

zyx

Tp1

p2

(PQR)

Step2 transform the rotation axis so that it coincides the z-axis

This can be performed in two sub-steps a) Rotate about x-axis to transform axis into xz plane

b) Swing rotation axis around to the z-axis using y-axis rotation

a) Take projection of line segment (000) to (PQR) onto yz plane as shown in fig ie (0QR)

(PQR)

(0QR)

Light

source

x

z

y

Step2-a

Now if we rotate the rotation (arbitrary) axis x-axis so that it lies in X-Z

In this situation its shadow will coincides the z-axis

So we are interested in angle α so that shadow will coincides with z-axis

length of shadow L = radicQ2+R2

sin α = QL

cos α = RL

Therefore the matrix for rotation about x-axis

Rx(α) =

1000

00

00

0001

LRLQ

LQLR

(PQR) (0QR)

L

α

After performing x-axis rotation the rotation axis will lie in x-z plane as shown

When we perform x-axis rotation x-value remains unchanged as axis of rotation is in xz plane so y-coordinate is zero We need to get z-value

L = radicP2+Q2+R2

z-coordinate will be v = radic(L2-P2)

(PQR)

L

P

Step2-b

Now we have to rotate the axis around y-axis so that it coincides the z-axis Let that angle be β

From figure cosβ = VL

sin β = pL

Therefore the transformation

matrix for rotation about y-axis

in clockwise rotation is

1000

00

0010

00

LvLp

LpLv

L

P

β

Ry(β) =

step3

Rotation about z-axis by given angle ie θ ie Rz (θ)

Step 4 and 5 does inverse transformations ie Ry-1 Rx-1 T-1

Therefore the final transformation matrix will be the product of all matrices in sequence

RA= T Rx RyRz Ry-1 Rx-1 T-1

1000

0100

00cossin

00sincos

zR

Reflection wrto xy plane

Consider a point P(xyz) The reflection of this point wrto xy plane is given by pointprsquo(xy-z)

Corresponding matrix is given as

M = 1 0 0

0 1 0

0 0 -1

Page 12: 2D transformations - E-STUDYthirdyearengineering.weebly.com/uploads/3/8/2/8/38286065/... · 2018. 9. 10. · In CG images are made up of series of line segments. Each line segment

Points 2D Scaling

Any positive value can be used as scaling factor bull Values less than 1 reduce the size of the object

bull Values greater than 1 enlarge the object

bull If scaling factor is 1 then the object stays unchanged

bull If sx = sy we call it uniform scaling

bull If scaling factor lt1 then the object moves closer to the origin and If scaling factor gt1 then the object moves farther from the origin

xrsquo x

Translation

A translation moves all points in an object along the same straight-line path to new positions

The path is represented by a vector called the translation or shift vector

We can write the components

px = px + tx

py = py + ty

or in matrix form

P = P + T

tx

ty

xrsquo yrsquo

x

y

tx

ty = +

(2 2) = 6

=4

2 Translation

Translation changes the position of an object

P = point before translation

Prsquo = point after translation

Let point P(xy)

Prsquo(xrsquoyrsquo) xrsquo = x + tx yrsquo = y + ty

Translation moves the object without deformation

How can we write this in matrix form

P

Prsquo

T

Some points translation

2D Translation

To move a line segment apply the transformation equation to each of the two line endpoints and redraw the line between new endpoints

To move a polygon apply the transformation equation to coordinates of each vertex and regenerate the polygon using the new set of vertex coordinates

Rotation

A rotation repositions all points in an object along a circular path in the plane centered at the pivot point

First wersquoll assume the pivot is at the origin

P

Prsquo

Rotation

bull Review Trigonometry

=gt cos = xr sin = yr

bull x = r cos y = rsin

P(xy)

x

y r

xrsquo

yrsquo

Prsquo(xrsquo yrsquo)

r

=gt cos (+ ) = xrsquor bullxrsquo = r cos (+ )

bullxrsquo = rcoscos -rsinsin

bullxrsquo = xcos ndash ysin

=gtsin (+ ) = yrsquor yrsquo = r sin (+ )

bullyrsquo = rcossin + rsincos

bullyrsquo = xsin + ycos

Identity of Trigonometry

Rotation

bull We can write the components

px = px cos ndash py sin py = px sin + py cos

bull or in matrix form

P = R bull P

bull can be clockwise (-ve) or counterclockwise (+ve as our example)

bull Rotation matrix

P(xy)

x

y r

xrsquo

yrsquo

Prsquo(xrsquo yrsquo)

cossin

sincosR

Example

Find the transformed point Prsquo caused by rotating P= (5 1) about the origin through an angle of 90

Rotation

cossin

sincos

cossin

sincos

yx

yx

y

x

90cos190sin5

90sin190cos5

0115

1105

5

1

Matrix Representations and Homogeneous Coordinates

Many graphics applications involve sequences of geometric transformations

Animations

Design and picture construction applications

We will now consider matrix representations of these operations

Sequences of transformations can be efficiently processed using matrices

Matrix Representations and Homogeneous Coordinates

Prsquo = M1 P + M2

P and Prsquo are row matrices

M1 is a 2 by 2 array containing scaling factors

M2 is a 2 element row matrix containing translational terms

Matrix Representations and Homogeneous Coordinates

To produce a sequence of operations such as scaling followed by rotation then translation we could calculate the transformed coordinates one step at a time

A more efficient approach is to combine transformations without calculating intermediate coordinate values

Matrix Representations and Homogeneous Coordinates

Multiplicative and translational terms for a 2D geometric transformation can be combined into a single matrix if we expand the representations to 3 by 3 matrices

We can use the third column for translation terms and all transformation equations can be expressed as matrix multiplications

Homogenous Coordinates

Letrsquos move our problem into 3D Let point (x y) in 2D be represented by point (x y 1) in

the new space

Scaling our new point by any value a puts us somewhere along a particular line (ax ay a)

A point in 2D can be represented in many ways in the new space

(2 4) ---------- (8 16 4) or (6 12 3) or (2 4 1) or etc

y y

x

x

w

Homogenous Coordinates

bull We can always map back to the original 2D point by dividing by the last coordinate

bull (15 6 3) --- (5 2)

bull (60 40 10) -

bull Why do we use 1 for the last coordinate

bull The fact that all the points along each line can be mapped back to the same point in 2D gives this coordinate system its name ndash homogeneous coordinates

Matrix Representations and Homogeneous Coordinates

Thus 2D Translation Matrix is as follows

1

010

001

tytx

xrsquo yrsquo 1 x y 1 =

Thus 2D Rotation Matrix becomes as

Note Positive values of the rotation angle define the counterclockwise rotation about the rotation point and negative values rotate objects in the clockwise sense

100

0cossin

0sincos

xrsquo yrsquo 1 x y 1 =

Thus 2D Scaling Matrix becomes as

100

00

00

y

x

s

sxrsquo yrsquo 1 x y 1 =

Inverse Transformations

When we apply any transformation to point(xy) we get a new point (xrsquoyrsquo) Some times we need to get original co-ordinate from the transformed point This can be achieved by inverse transformation

2D Inverse Translation Matrix

1

010

0011

yx tt

T

Inverse Transformations

2D Inverse Rotation Matrix

Rotation in clockwise direction making Փ negative

ie cos(-θ)=cos θ sin(-θ)=-sin θ

Matrix becomes

2D Inverse Scaling Matrix

100

0cossin

0sincos1

R

100

01

0

001

1

y

x

s

s

S

2D Composite Transformations

We can setup a sequence of transformations as a composite transformation matrix by calculating the product of the individual transformations

Prsquo=M2M1P

Prsquo=MP

ROTATION ABOUT AN ARBITRARY POINT

2D Composite Transformations

General 2D Pivot-Point Rotation bull Translate

bull Rotate

bull Retranslate

1

010

001

100

0cossin

0sincos

1

010

001

rrrr yxyx

Example

Perform a clockwise rotation of 450 a triangle A(00) B(11) and C(52) (Dec-20052009 10 Marks)

bull about a point (-1-1)

bull About origin

Answer about origin

Arsquo = (00) Brsquo=(radic20) Crsquo=((7 radic2)(-3 radic2))

Ex2 consider a square p(00) Q(010) R(1010) S(100) Rotate the Sq about fixed point R(1010) by an angle 45o (anticlockwise) followed by scaling by 2 units in X direction and 2 units in Y direction (Dec 2006 8 marks)

Prove that two scaling transformations commute that is

S1 S2=S2 S1

Show that transformation matrix for a reflection about a line Y=X is equivalent to reflection to X-axis followed by counterclockwise rotation of 900 (Dec 2008 8 marks)

Perform X-shear and Y-shear on a triangle having A(21) B(43) C(23) Consider the constant value b=c=2

(Dec 2008 8 marks) Answer Arsquo = 45

Brsquo = 1011

Crsquo = 87

Scaling with respect to an arbitrary point

1 Translation

2 Scaling

3 Retranslation

Pictorially shown on next slide

1

010

001

100

00

00

1

010

001

ff

y

x

ff yx

s

s

yx

Other Two Dimensional Transformations

Reflection

Transformation that produces a mirror image of an object

y

x

Reflection

x-axis y-axis

100

010

001

100

010

001

Reflection

origin line x=y

100

010

001

100

001

010

Shear Transformations

Shear

Transformation that distorts the shape of an object such that the transformed shape appears as the object was composed of internal layers that had been caused to slide over each other

y

x

(01) (11)

(10) (00)

y

x

(21) (31)

(10) (00) shx=2

X-Shear

An x-direction shear relative to the x axis

An y-direction shear relative to the y axis

100

01

001

ysh

100

010

01 xsh

yy

yshxx x

Transformations in 3D

Some graphics applications are 2D such as charts graphs maps etc

But to create realistic picture we need to represent picture in 3D

In 3D geometry we need additional third axis z-axis to specify the depth value of the object

Let us see the coordinate systems used in 3D graphics

Lets plot a point in 3D with coordinates (342)

1 first plot the point at(302)

it is on the plane X-Z

2 then lift the point up by 4 units

Y-axis

X-axis

Z-axis

h

e

i

g

h

t

width

Depth

Translation in 3D

Remembering 2D transformations -gt 3x3 matrices take a wild guess what happens to 3D transformations

3D means z-axis comes into picture Giving Depth information for an object

1

0100

0010

0001

1

010

001

zyx

zyxzyx

yx

yxyx

ttt

tttzxytttT

tt

ttyxttT

T=(tx ty tz)

Scale 3D Style

S=(sx sy sz)

zsz

ysy

xsx

z

y

x

1000

000

000

000

)(

pps

s

s

PPsssS

z

y

x

zyx

3D Rotation

In 3D we have to specify the axis of rotation along with the rotation angle

Positive rotation angles produce counterclockwise rotations about a coordinate axis assuming that we are looking in the negative direction along that coordinate axis

3D Rotation

z-axis rotation

xrsquo=x cos θ - y sin θ

yrsquo=x sin θ + y cos θ

zrsquo=z

or Prsquo = Rz(θ)P

1000

0100

00cossin

00sincos

xrsquo yrsquo zrsquo 1

= x y z 1

When we say that we want to rotate a point in anticlockwise direction about z-axis it is very similar to performing a 2D rotation in anticlockwise direction as follows

Fig2D Rotation Fig 3D Rotation

3D Rotation

z-axis rotation

xrsquo=x cos θ - y sin θ

yrsquo=x sin θ + y cos θ

zrsquo=z Transformation equations for rotation abt the other axes

can be obtained with a cyclic permutation of coordinate parameters xy and z That is we use the replacements

xrarr yrarr zrarr x

x-axis rotation

yrsquo=y cos θ - z sin θ

zrsquo=y sin θ + z cos θ

xrsquo=x

y-axis rotation

zrsquo=z cos θ - x sin θ

xrsquo=z sin θ + x cos θ

yrsquo=y

Matrices for anticlockwise 3D rotation

1000

0cossin0

0sincos0

0001

xR

1000

0cos0sin

0010

0sin0cos

yR

1000

0100

00cossin

00sincos

zR

3D Rotation about an arbitrary axis

General Three-Dimensional Rotations

Special case where an object is to be rotated about an axis that is parallel to one of the coordinate axes

1 Translate the object so that the rotation axis coincides with parallel coordinate axis

2 Perform the specified rotation about the axis

3 Translate the object so that the rotation axis is moved back to its original position

3D Rotation of an object about an arbitrary axis

When an object is to rotated about an axis that is not parallel to one of the coordinate axes

1 Translate the object so that the rotation axis passes through the coordinate origin

2 Rotate the object so that the axis of rotation coincides with one of the coordinate axes

3 Perform the specified rotation about the selected coordinate axis

4 Apply inverse rotations to bring the rotation axis back to its original position

5 Apply the inverse translation to bring the rotation axis back to its original spatial position

We can determine the transformation matrices for each step

Assume that rotation axis ie arbitrary axis is defined with two points p1(x1y1z1) and p2(x2y2z2)

Let us say a point on the axis is (PQR)

Initial position of the axis and point is as bellow

p1

p2

(PQR)

Step1 (Translation)transformation of rotation axis so that it passes through the origin

This can be done by moving point P1 to the origin

This repositions the rotation axis and the object as shown

1111

0100

0010

0001

zyx

Tp1

p2

(PQR)

Step2 transform the rotation axis so that it coincides the z-axis

This can be performed in two sub-steps a) Rotate about x-axis to transform axis into xz plane

b) Swing rotation axis around to the z-axis using y-axis rotation

a) Take projection of line segment (000) to (PQR) onto yz plane as shown in fig ie (0QR)

(PQR)

(0QR)

Light

source

x

z

y

Step2-a

Now if we rotate the rotation (arbitrary) axis x-axis so that it lies in X-Z

In this situation its shadow will coincides the z-axis

So we are interested in angle α so that shadow will coincides with z-axis

length of shadow L = radicQ2+R2

sin α = QL

cos α = RL

Therefore the matrix for rotation about x-axis

Rx(α) =

1000

00

00

0001

LRLQ

LQLR

(PQR) (0QR)

L

α

After performing x-axis rotation the rotation axis will lie in x-z plane as shown

When we perform x-axis rotation x-value remains unchanged as axis of rotation is in xz plane so y-coordinate is zero We need to get z-value

L = radicP2+Q2+R2

z-coordinate will be v = radic(L2-P2)

(PQR)

L

P

Step2-b

Now we have to rotate the axis around y-axis so that it coincides the z-axis Let that angle be β

From figure cosβ = VL

sin β = pL

Therefore the transformation

matrix for rotation about y-axis

in clockwise rotation is

1000

00

0010

00

LvLp

LpLv

L

P

β

Ry(β) =

step3

Rotation about z-axis by given angle ie θ ie Rz (θ)

Step 4 and 5 does inverse transformations ie Ry-1 Rx-1 T-1

Therefore the final transformation matrix will be the product of all matrices in sequence

RA= T Rx RyRz Ry-1 Rx-1 T-1

1000

0100

00cossin

00sincos

zR

Reflection wrto xy plane

Consider a point P(xyz) The reflection of this point wrto xy plane is given by pointprsquo(xy-z)

Corresponding matrix is given as

M = 1 0 0

0 1 0

0 0 -1

Page 13: 2D transformations - E-STUDYthirdyearengineering.weebly.com/uploads/3/8/2/8/38286065/... · 2018. 9. 10. · In CG images are made up of series of line segments. Each line segment

Translation

A translation moves all points in an object along the same straight-line path to new positions

The path is represented by a vector called the translation or shift vector

We can write the components

px = px + tx

py = py + ty

or in matrix form

P = P + T

tx

ty

xrsquo yrsquo

x

y

tx

ty = +

(2 2) = 6

=4

2 Translation

Translation changes the position of an object

P = point before translation

Prsquo = point after translation

Let point P(xy)

Prsquo(xrsquoyrsquo) xrsquo = x + tx yrsquo = y + ty

Translation moves the object without deformation

How can we write this in matrix form

P

Prsquo

T

Some points translation

2D Translation

To move a line segment apply the transformation equation to each of the two line endpoints and redraw the line between new endpoints

To move a polygon apply the transformation equation to coordinates of each vertex and regenerate the polygon using the new set of vertex coordinates

Rotation

A rotation repositions all points in an object along a circular path in the plane centered at the pivot point

First wersquoll assume the pivot is at the origin

P

Prsquo

Rotation

bull Review Trigonometry

=gt cos = xr sin = yr

bull x = r cos y = rsin

P(xy)

x

y r

xrsquo

yrsquo

Prsquo(xrsquo yrsquo)

r

=gt cos (+ ) = xrsquor bullxrsquo = r cos (+ )

bullxrsquo = rcoscos -rsinsin

bullxrsquo = xcos ndash ysin

=gtsin (+ ) = yrsquor yrsquo = r sin (+ )

bullyrsquo = rcossin + rsincos

bullyrsquo = xsin + ycos

Identity of Trigonometry

Rotation

bull We can write the components

px = px cos ndash py sin py = px sin + py cos

bull or in matrix form

P = R bull P

bull can be clockwise (-ve) or counterclockwise (+ve as our example)

bull Rotation matrix

P(xy)

x

y r

xrsquo

yrsquo

Prsquo(xrsquo yrsquo)

cossin

sincosR

Example

Find the transformed point Prsquo caused by rotating P= (5 1) about the origin through an angle of 90

Rotation

cossin

sincos

cossin

sincos

yx

yx

y

x

90cos190sin5

90sin190cos5

0115

1105

5

1

Matrix Representations and Homogeneous Coordinates

Many graphics applications involve sequences of geometric transformations

Animations

Design and picture construction applications

We will now consider matrix representations of these operations

Sequences of transformations can be efficiently processed using matrices

Matrix Representations and Homogeneous Coordinates

Prsquo = M1 P + M2

P and Prsquo are row matrices

M1 is a 2 by 2 array containing scaling factors

M2 is a 2 element row matrix containing translational terms

Matrix Representations and Homogeneous Coordinates

To produce a sequence of operations such as scaling followed by rotation then translation we could calculate the transformed coordinates one step at a time

A more efficient approach is to combine transformations without calculating intermediate coordinate values

Matrix Representations and Homogeneous Coordinates

Multiplicative and translational terms for a 2D geometric transformation can be combined into a single matrix if we expand the representations to 3 by 3 matrices

We can use the third column for translation terms and all transformation equations can be expressed as matrix multiplications

Homogenous Coordinates

Letrsquos move our problem into 3D Let point (x y) in 2D be represented by point (x y 1) in

the new space

Scaling our new point by any value a puts us somewhere along a particular line (ax ay a)

A point in 2D can be represented in many ways in the new space

(2 4) ---------- (8 16 4) or (6 12 3) or (2 4 1) or etc

y y

x

x

w

Homogenous Coordinates

bull We can always map back to the original 2D point by dividing by the last coordinate

bull (15 6 3) --- (5 2)

bull (60 40 10) -

bull Why do we use 1 for the last coordinate

bull The fact that all the points along each line can be mapped back to the same point in 2D gives this coordinate system its name ndash homogeneous coordinates

Matrix Representations and Homogeneous Coordinates

Thus 2D Translation Matrix is as follows

1

010

001

tytx

xrsquo yrsquo 1 x y 1 =

Thus 2D Rotation Matrix becomes as

Note Positive values of the rotation angle define the counterclockwise rotation about the rotation point and negative values rotate objects in the clockwise sense

100

0cossin

0sincos

xrsquo yrsquo 1 x y 1 =

Thus 2D Scaling Matrix becomes as

100

00

00

y

x

s

sxrsquo yrsquo 1 x y 1 =

Inverse Transformations

When we apply any transformation to point(xy) we get a new point (xrsquoyrsquo) Some times we need to get original co-ordinate from the transformed point This can be achieved by inverse transformation

2D Inverse Translation Matrix

1

010

0011

yx tt

T

Inverse Transformations

2D Inverse Rotation Matrix

Rotation in clockwise direction making Փ negative

ie cos(-θ)=cos θ sin(-θ)=-sin θ

Matrix becomes

2D Inverse Scaling Matrix

100

0cossin

0sincos1

R

100

01

0

001

1

y

x

s

s

S

2D Composite Transformations

We can setup a sequence of transformations as a composite transformation matrix by calculating the product of the individual transformations

Prsquo=M2M1P

Prsquo=MP

ROTATION ABOUT AN ARBITRARY POINT

2D Composite Transformations

General 2D Pivot-Point Rotation bull Translate

bull Rotate

bull Retranslate

1

010

001

100

0cossin

0sincos

1

010

001

rrrr yxyx

Example

Perform a clockwise rotation of 450 a triangle A(00) B(11) and C(52) (Dec-20052009 10 Marks)

bull about a point (-1-1)

bull About origin

Answer about origin

Arsquo = (00) Brsquo=(radic20) Crsquo=((7 radic2)(-3 radic2))

Ex2 consider a square p(00) Q(010) R(1010) S(100) Rotate the Sq about fixed point R(1010) by an angle 45o (anticlockwise) followed by scaling by 2 units in X direction and 2 units in Y direction (Dec 2006 8 marks)

Prove that two scaling transformations commute that is

S1 S2=S2 S1

Show that transformation matrix for a reflection about a line Y=X is equivalent to reflection to X-axis followed by counterclockwise rotation of 900 (Dec 2008 8 marks)

Perform X-shear and Y-shear on a triangle having A(21) B(43) C(23) Consider the constant value b=c=2

(Dec 2008 8 marks) Answer Arsquo = 45

Brsquo = 1011

Crsquo = 87

Scaling with respect to an arbitrary point

1 Translation

2 Scaling

3 Retranslation

Pictorially shown on next slide

1

010

001

100

00

00

1

010

001

ff

y

x

ff yx

s

s

yx

Other Two Dimensional Transformations

Reflection

Transformation that produces a mirror image of an object

y

x

Reflection

x-axis y-axis

100

010

001

100

010

001

Reflection

origin line x=y

100

010

001

100

001

010

Shear Transformations

Shear

Transformation that distorts the shape of an object such that the transformed shape appears as the object was composed of internal layers that had been caused to slide over each other

y

x

(01) (11)

(10) (00)

y

x

(21) (31)

(10) (00) shx=2

X-Shear

An x-direction shear relative to the x axis

An y-direction shear relative to the y axis

100

01

001

ysh

100

010

01 xsh

yy

yshxx x

Transformations in 3D

Some graphics applications are 2D such as charts graphs maps etc

But to create realistic picture we need to represent picture in 3D

In 3D geometry we need additional third axis z-axis to specify the depth value of the object

Let us see the coordinate systems used in 3D graphics

Lets plot a point in 3D with coordinates (342)

1 first plot the point at(302)

it is on the plane X-Z

2 then lift the point up by 4 units

Y-axis

X-axis

Z-axis

h

e

i

g

h

t

width

Depth

Translation in 3D

Remembering 2D transformations -gt 3x3 matrices take a wild guess what happens to 3D transformations

3D means z-axis comes into picture Giving Depth information for an object

1

0100

0010

0001

1

010

001

zyx

zyxzyx

yx

yxyx

ttt

tttzxytttT

tt

ttyxttT

T=(tx ty tz)

Scale 3D Style

S=(sx sy sz)

zsz

ysy

xsx

z

y

x

1000

000

000

000

)(

pps

s

s

PPsssS

z

y

x

zyx

3D Rotation

In 3D we have to specify the axis of rotation along with the rotation angle

Positive rotation angles produce counterclockwise rotations about a coordinate axis assuming that we are looking in the negative direction along that coordinate axis

3D Rotation

z-axis rotation

xrsquo=x cos θ - y sin θ

yrsquo=x sin θ + y cos θ

zrsquo=z

or Prsquo = Rz(θ)P

1000

0100

00cossin

00sincos

xrsquo yrsquo zrsquo 1

= x y z 1

When we say that we want to rotate a point in anticlockwise direction about z-axis it is very similar to performing a 2D rotation in anticlockwise direction as follows

Fig2D Rotation Fig 3D Rotation

3D Rotation

z-axis rotation

xrsquo=x cos θ - y sin θ

yrsquo=x sin θ + y cos θ

zrsquo=z Transformation equations for rotation abt the other axes

can be obtained with a cyclic permutation of coordinate parameters xy and z That is we use the replacements

xrarr yrarr zrarr x

x-axis rotation

yrsquo=y cos θ - z sin θ

zrsquo=y sin θ + z cos θ

xrsquo=x

y-axis rotation

zrsquo=z cos θ - x sin θ

xrsquo=z sin θ + x cos θ

yrsquo=y

Matrices for anticlockwise 3D rotation

1000

0cossin0

0sincos0

0001

xR

1000

0cos0sin

0010

0sin0cos

yR

1000

0100

00cossin

00sincos

zR

3D Rotation about an arbitrary axis

General Three-Dimensional Rotations

Special case where an object is to be rotated about an axis that is parallel to one of the coordinate axes

1 Translate the object so that the rotation axis coincides with parallel coordinate axis

2 Perform the specified rotation about the axis

3 Translate the object so that the rotation axis is moved back to its original position

3D Rotation of an object about an arbitrary axis

When an object is to rotated about an axis that is not parallel to one of the coordinate axes

1 Translate the object so that the rotation axis passes through the coordinate origin

2 Rotate the object so that the axis of rotation coincides with one of the coordinate axes

3 Perform the specified rotation about the selected coordinate axis

4 Apply inverse rotations to bring the rotation axis back to its original position

5 Apply the inverse translation to bring the rotation axis back to its original spatial position

We can determine the transformation matrices for each step

Assume that rotation axis ie arbitrary axis is defined with two points p1(x1y1z1) and p2(x2y2z2)

Let us say a point on the axis is (PQR)

Initial position of the axis and point is as bellow

p1

p2

(PQR)

Step1 (Translation)transformation of rotation axis so that it passes through the origin

This can be done by moving point P1 to the origin

This repositions the rotation axis and the object as shown

1111

0100

0010

0001

zyx

Tp1

p2

(PQR)

Step2 transform the rotation axis so that it coincides the z-axis

This can be performed in two sub-steps a) Rotate about x-axis to transform axis into xz plane

b) Swing rotation axis around to the z-axis using y-axis rotation

a) Take projection of line segment (000) to (PQR) onto yz plane as shown in fig ie (0QR)

(PQR)

(0QR)

Light

source

x

z

y

Step2-a

Now if we rotate the rotation (arbitrary) axis x-axis so that it lies in X-Z

In this situation its shadow will coincides the z-axis

So we are interested in angle α so that shadow will coincides with z-axis

length of shadow L = radicQ2+R2

sin α = QL

cos α = RL

Therefore the matrix for rotation about x-axis

Rx(α) =

1000

00

00

0001

LRLQ

LQLR

(PQR) (0QR)

L

α

After performing x-axis rotation the rotation axis will lie in x-z plane as shown

When we perform x-axis rotation x-value remains unchanged as axis of rotation is in xz plane so y-coordinate is zero We need to get z-value

L = radicP2+Q2+R2

z-coordinate will be v = radic(L2-P2)

(PQR)

L

P

Step2-b

Now we have to rotate the axis around y-axis so that it coincides the z-axis Let that angle be β

From figure cosβ = VL

sin β = pL

Therefore the transformation

matrix for rotation about y-axis

in clockwise rotation is

1000

00

0010

00

LvLp

LpLv

L

P

β

Ry(β) =

step3

Rotation about z-axis by given angle ie θ ie Rz (θ)

Step 4 and 5 does inverse transformations ie Ry-1 Rx-1 T-1

Therefore the final transformation matrix will be the product of all matrices in sequence

RA= T Rx RyRz Ry-1 Rx-1 T-1

1000

0100

00cossin

00sincos

zR

Reflection wrto xy plane

Consider a point P(xyz) The reflection of this point wrto xy plane is given by pointprsquo(xy-z)

Corresponding matrix is given as

M = 1 0 0

0 1 0

0 0 -1

Page 14: 2D transformations - E-STUDYthirdyearengineering.weebly.com/uploads/3/8/2/8/38286065/... · 2018. 9. 10. · In CG images are made up of series of line segments. Each line segment

2 Translation

Translation changes the position of an object

P = point before translation

Prsquo = point after translation

Let point P(xy)

Prsquo(xrsquoyrsquo) xrsquo = x + tx yrsquo = y + ty

Translation moves the object without deformation

How can we write this in matrix form

P

Prsquo

T

Some points translation

2D Translation

To move a line segment apply the transformation equation to each of the two line endpoints and redraw the line between new endpoints

To move a polygon apply the transformation equation to coordinates of each vertex and regenerate the polygon using the new set of vertex coordinates

Rotation

A rotation repositions all points in an object along a circular path in the plane centered at the pivot point

First wersquoll assume the pivot is at the origin

P

Prsquo

Rotation

bull Review Trigonometry

=gt cos = xr sin = yr

bull x = r cos y = rsin

P(xy)

x

y r

xrsquo

yrsquo

Prsquo(xrsquo yrsquo)

r

=gt cos (+ ) = xrsquor bullxrsquo = r cos (+ )

bullxrsquo = rcoscos -rsinsin

bullxrsquo = xcos ndash ysin

=gtsin (+ ) = yrsquor yrsquo = r sin (+ )

bullyrsquo = rcossin + rsincos

bullyrsquo = xsin + ycos

Identity of Trigonometry

Rotation

bull We can write the components

px = px cos ndash py sin py = px sin + py cos

bull or in matrix form

P = R bull P

bull can be clockwise (-ve) or counterclockwise (+ve as our example)

bull Rotation matrix

P(xy)

x

y r

xrsquo

yrsquo

Prsquo(xrsquo yrsquo)

cossin

sincosR

Example

Find the transformed point Prsquo caused by rotating P= (5 1) about the origin through an angle of 90

Rotation

cossin

sincos

cossin

sincos

yx

yx

y

x

90cos190sin5

90sin190cos5

0115

1105

5

1

Matrix Representations and Homogeneous Coordinates

Many graphics applications involve sequences of geometric transformations

Animations

Design and picture construction applications

We will now consider matrix representations of these operations

Sequences of transformations can be efficiently processed using matrices

Matrix Representations and Homogeneous Coordinates

Prsquo = M1 P + M2

P and Prsquo are row matrices

M1 is a 2 by 2 array containing scaling factors

M2 is a 2 element row matrix containing translational terms

Matrix Representations and Homogeneous Coordinates

To produce a sequence of operations such as scaling followed by rotation then translation we could calculate the transformed coordinates one step at a time

A more efficient approach is to combine transformations without calculating intermediate coordinate values

Matrix Representations and Homogeneous Coordinates

Multiplicative and translational terms for a 2D geometric transformation can be combined into a single matrix if we expand the representations to 3 by 3 matrices

We can use the third column for translation terms and all transformation equations can be expressed as matrix multiplications

Homogenous Coordinates

Letrsquos move our problem into 3D Let point (x y) in 2D be represented by point (x y 1) in

the new space

Scaling our new point by any value a puts us somewhere along a particular line (ax ay a)

A point in 2D can be represented in many ways in the new space

(2 4) ---------- (8 16 4) or (6 12 3) or (2 4 1) or etc

y y

x

x

w

Homogenous Coordinates

bull We can always map back to the original 2D point by dividing by the last coordinate

bull (15 6 3) --- (5 2)

bull (60 40 10) -

bull Why do we use 1 for the last coordinate

bull The fact that all the points along each line can be mapped back to the same point in 2D gives this coordinate system its name ndash homogeneous coordinates

Matrix Representations and Homogeneous Coordinates

Thus 2D Translation Matrix is as follows

1

010

001

tytx

xrsquo yrsquo 1 x y 1 =

Thus 2D Rotation Matrix becomes as

Note Positive values of the rotation angle define the counterclockwise rotation about the rotation point and negative values rotate objects in the clockwise sense

100

0cossin

0sincos

xrsquo yrsquo 1 x y 1 =

Thus 2D Scaling Matrix becomes as

100

00

00

y

x

s

sxrsquo yrsquo 1 x y 1 =

Inverse Transformations

When we apply any transformation to point(xy) we get a new point (xrsquoyrsquo) Some times we need to get original co-ordinate from the transformed point This can be achieved by inverse transformation

2D Inverse Translation Matrix

1

010

0011

yx tt

T

Inverse Transformations

2D Inverse Rotation Matrix

Rotation in clockwise direction making Փ negative

ie cos(-θ)=cos θ sin(-θ)=-sin θ

Matrix becomes

2D Inverse Scaling Matrix

100

0cossin

0sincos1

R

100

01

0

001

1

y

x

s

s

S

2D Composite Transformations

We can setup a sequence of transformations as a composite transformation matrix by calculating the product of the individual transformations

Prsquo=M2M1P

Prsquo=MP

ROTATION ABOUT AN ARBITRARY POINT

2D Composite Transformations

General 2D Pivot-Point Rotation bull Translate

bull Rotate

bull Retranslate

1

010

001

100

0cossin

0sincos

1

010

001

rrrr yxyx

Example

Perform a clockwise rotation of 450 a triangle A(00) B(11) and C(52) (Dec-20052009 10 Marks)

bull about a point (-1-1)

bull About origin

Answer about origin

Arsquo = (00) Brsquo=(radic20) Crsquo=((7 radic2)(-3 radic2))

Ex2 consider a square p(00) Q(010) R(1010) S(100) Rotate the Sq about fixed point R(1010) by an angle 45o (anticlockwise) followed by scaling by 2 units in X direction and 2 units in Y direction (Dec 2006 8 marks)

Prove that two scaling transformations commute that is

S1 S2=S2 S1

Show that transformation matrix for a reflection about a line Y=X is equivalent to reflection to X-axis followed by counterclockwise rotation of 900 (Dec 2008 8 marks)

Perform X-shear and Y-shear on a triangle having A(21) B(43) C(23) Consider the constant value b=c=2

(Dec 2008 8 marks) Answer Arsquo = 45

Brsquo = 1011

Crsquo = 87

Scaling with respect to an arbitrary point

1 Translation

2 Scaling

3 Retranslation

Pictorially shown on next slide

1

010

001

100

00

00

1

010

001

ff

y

x

ff yx

s

s

yx

Other Two Dimensional Transformations

Reflection

Transformation that produces a mirror image of an object

y

x

Reflection

x-axis y-axis

100

010

001

100

010

001

Reflection

origin line x=y

100

010

001

100

001

010

Shear Transformations

Shear

Transformation that distorts the shape of an object such that the transformed shape appears as the object was composed of internal layers that had been caused to slide over each other

y

x

(01) (11)

(10) (00)

y

x

(21) (31)

(10) (00) shx=2

X-Shear

An x-direction shear relative to the x axis

An y-direction shear relative to the y axis

100

01

001

ysh

100

010

01 xsh

yy

yshxx x

Transformations in 3D

Some graphics applications are 2D such as charts graphs maps etc

But to create realistic picture we need to represent picture in 3D

In 3D geometry we need additional third axis z-axis to specify the depth value of the object

Let us see the coordinate systems used in 3D graphics

Lets plot a point in 3D with coordinates (342)

1 first plot the point at(302)

it is on the plane X-Z

2 then lift the point up by 4 units

Y-axis

X-axis

Z-axis

h

e

i

g

h

t

width

Depth

Translation in 3D

Remembering 2D transformations -gt 3x3 matrices take a wild guess what happens to 3D transformations

3D means z-axis comes into picture Giving Depth information for an object

1

0100

0010

0001

1

010

001

zyx

zyxzyx

yx

yxyx

ttt

tttzxytttT

tt

ttyxttT

T=(tx ty tz)

Scale 3D Style

S=(sx sy sz)

zsz

ysy

xsx

z

y

x

1000

000

000

000

)(

pps

s

s

PPsssS

z

y

x

zyx

3D Rotation

In 3D we have to specify the axis of rotation along with the rotation angle

Positive rotation angles produce counterclockwise rotations about a coordinate axis assuming that we are looking in the negative direction along that coordinate axis

3D Rotation

z-axis rotation

xrsquo=x cos θ - y sin θ

yrsquo=x sin θ + y cos θ

zrsquo=z

or Prsquo = Rz(θ)P

1000

0100

00cossin

00sincos

xrsquo yrsquo zrsquo 1

= x y z 1

When we say that we want to rotate a point in anticlockwise direction about z-axis it is very similar to performing a 2D rotation in anticlockwise direction as follows

Fig2D Rotation Fig 3D Rotation

3D Rotation

z-axis rotation

xrsquo=x cos θ - y sin θ

yrsquo=x sin θ + y cos θ

zrsquo=z Transformation equations for rotation abt the other axes

can be obtained with a cyclic permutation of coordinate parameters xy and z That is we use the replacements

xrarr yrarr zrarr x

x-axis rotation

yrsquo=y cos θ - z sin θ

zrsquo=y sin θ + z cos θ

xrsquo=x

y-axis rotation

zrsquo=z cos θ - x sin θ

xrsquo=z sin θ + x cos θ

yrsquo=y

Matrices for anticlockwise 3D rotation

1000

0cossin0

0sincos0

0001

xR

1000

0cos0sin

0010

0sin0cos

yR

1000

0100

00cossin

00sincos

zR

3D Rotation about an arbitrary axis

General Three-Dimensional Rotations

Special case where an object is to be rotated about an axis that is parallel to one of the coordinate axes

1 Translate the object so that the rotation axis coincides with parallel coordinate axis

2 Perform the specified rotation about the axis

3 Translate the object so that the rotation axis is moved back to its original position

3D Rotation of an object about an arbitrary axis

When an object is to rotated about an axis that is not parallel to one of the coordinate axes

1 Translate the object so that the rotation axis passes through the coordinate origin

2 Rotate the object so that the axis of rotation coincides with one of the coordinate axes

3 Perform the specified rotation about the selected coordinate axis

4 Apply inverse rotations to bring the rotation axis back to its original position

5 Apply the inverse translation to bring the rotation axis back to its original spatial position

We can determine the transformation matrices for each step

Assume that rotation axis ie arbitrary axis is defined with two points p1(x1y1z1) and p2(x2y2z2)

Let us say a point on the axis is (PQR)

Initial position of the axis and point is as bellow

p1

p2

(PQR)

Step1 (Translation)transformation of rotation axis so that it passes through the origin

This can be done by moving point P1 to the origin

This repositions the rotation axis and the object as shown

1111

0100

0010

0001

zyx

Tp1

p2

(PQR)

Step2 transform the rotation axis so that it coincides the z-axis

This can be performed in two sub-steps a) Rotate about x-axis to transform axis into xz plane

b) Swing rotation axis around to the z-axis using y-axis rotation

a) Take projection of line segment (000) to (PQR) onto yz plane as shown in fig ie (0QR)

(PQR)

(0QR)

Light

source

x

z

y

Step2-a

Now if we rotate the rotation (arbitrary) axis x-axis so that it lies in X-Z

In this situation its shadow will coincides the z-axis

So we are interested in angle α so that shadow will coincides with z-axis

length of shadow L = radicQ2+R2

sin α = QL

cos α = RL

Therefore the matrix for rotation about x-axis

Rx(α) =

1000

00

00

0001

LRLQ

LQLR

(PQR) (0QR)

L

α

After performing x-axis rotation the rotation axis will lie in x-z plane as shown

When we perform x-axis rotation x-value remains unchanged as axis of rotation is in xz plane so y-coordinate is zero We need to get z-value

L = radicP2+Q2+R2

z-coordinate will be v = radic(L2-P2)

(PQR)

L

P

Step2-b

Now we have to rotate the axis around y-axis so that it coincides the z-axis Let that angle be β

From figure cosβ = VL

sin β = pL

Therefore the transformation

matrix for rotation about y-axis

in clockwise rotation is

1000

00

0010

00

LvLp

LpLv

L

P

β

Ry(β) =

step3

Rotation about z-axis by given angle ie θ ie Rz (θ)

Step 4 and 5 does inverse transformations ie Ry-1 Rx-1 T-1

Therefore the final transformation matrix will be the product of all matrices in sequence

RA= T Rx RyRz Ry-1 Rx-1 T-1

1000

0100

00cossin

00sincos

zR

Reflection wrto xy plane

Consider a point P(xyz) The reflection of this point wrto xy plane is given by pointprsquo(xy-z)

Corresponding matrix is given as

M = 1 0 0

0 1 0

0 0 -1

Page 15: 2D transformations - E-STUDYthirdyearengineering.weebly.com/uploads/3/8/2/8/38286065/... · 2018. 9. 10. · In CG images are made up of series of line segments. Each line segment

Some points translation

2D Translation

To move a line segment apply the transformation equation to each of the two line endpoints and redraw the line between new endpoints

To move a polygon apply the transformation equation to coordinates of each vertex and regenerate the polygon using the new set of vertex coordinates

Rotation

A rotation repositions all points in an object along a circular path in the plane centered at the pivot point

First wersquoll assume the pivot is at the origin

P

Prsquo

Rotation

bull Review Trigonometry

=gt cos = xr sin = yr

bull x = r cos y = rsin

P(xy)

x

y r

xrsquo

yrsquo

Prsquo(xrsquo yrsquo)

r

=gt cos (+ ) = xrsquor bullxrsquo = r cos (+ )

bullxrsquo = rcoscos -rsinsin

bullxrsquo = xcos ndash ysin

=gtsin (+ ) = yrsquor yrsquo = r sin (+ )

bullyrsquo = rcossin + rsincos

bullyrsquo = xsin + ycos

Identity of Trigonometry

Rotation

bull We can write the components

px = px cos ndash py sin py = px sin + py cos

bull or in matrix form

P = R bull P

bull can be clockwise (-ve) or counterclockwise (+ve as our example)

bull Rotation matrix

P(xy)

x

y r

xrsquo

yrsquo

Prsquo(xrsquo yrsquo)

cossin

sincosR

Example

Find the transformed point Prsquo caused by rotating P= (5 1) about the origin through an angle of 90

Rotation

cossin

sincos

cossin

sincos

yx

yx

y

x

90cos190sin5

90sin190cos5

0115

1105

5

1

Matrix Representations and Homogeneous Coordinates

Many graphics applications involve sequences of geometric transformations

Animations

Design and picture construction applications

We will now consider matrix representations of these operations

Sequences of transformations can be efficiently processed using matrices

Matrix Representations and Homogeneous Coordinates

Prsquo = M1 P + M2

P and Prsquo are row matrices

M1 is a 2 by 2 array containing scaling factors

M2 is a 2 element row matrix containing translational terms

Matrix Representations and Homogeneous Coordinates

To produce a sequence of operations such as scaling followed by rotation then translation we could calculate the transformed coordinates one step at a time

A more efficient approach is to combine transformations without calculating intermediate coordinate values

Matrix Representations and Homogeneous Coordinates

Multiplicative and translational terms for a 2D geometric transformation can be combined into a single matrix if we expand the representations to 3 by 3 matrices

We can use the third column for translation terms and all transformation equations can be expressed as matrix multiplications

Homogenous Coordinates

Letrsquos move our problem into 3D Let point (x y) in 2D be represented by point (x y 1) in

the new space

Scaling our new point by any value a puts us somewhere along a particular line (ax ay a)

A point in 2D can be represented in many ways in the new space

(2 4) ---------- (8 16 4) or (6 12 3) or (2 4 1) or etc

y y

x

x

w

Homogenous Coordinates

bull We can always map back to the original 2D point by dividing by the last coordinate

bull (15 6 3) --- (5 2)

bull (60 40 10) -

bull Why do we use 1 for the last coordinate

bull The fact that all the points along each line can be mapped back to the same point in 2D gives this coordinate system its name ndash homogeneous coordinates

Matrix Representations and Homogeneous Coordinates

Thus 2D Translation Matrix is as follows

1

010

001

tytx

xrsquo yrsquo 1 x y 1 =

Thus 2D Rotation Matrix becomes as

Note Positive values of the rotation angle define the counterclockwise rotation about the rotation point and negative values rotate objects in the clockwise sense

100

0cossin

0sincos

xrsquo yrsquo 1 x y 1 =

Thus 2D Scaling Matrix becomes as

100

00

00

y

x

s

sxrsquo yrsquo 1 x y 1 =

Inverse Transformations

When we apply any transformation to point(xy) we get a new point (xrsquoyrsquo) Some times we need to get original co-ordinate from the transformed point This can be achieved by inverse transformation

2D Inverse Translation Matrix

1

010

0011

yx tt

T

Inverse Transformations

2D Inverse Rotation Matrix

Rotation in clockwise direction making Փ negative

ie cos(-θ)=cos θ sin(-θ)=-sin θ

Matrix becomes

2D Inverse Scaling Matrix

100

0cossin

0sincos1

R

100

01

0

001

1

y

x

s

s

S

2D Composite Transformations

We can setup a sequence of transformations as a composite transformation matrix by calculating the product of the individual transformations

Prsquo=M2M1P

Prsquo=MP

ROTATION ABOUT AN ARBITRARY POINT

2D Composite Transformations

General 2D Pivot-Point Rotation bull Translate

bull Rotate

bull Retranslate

1

010

001

100

0cossin

0sincos

1

010

001

rrrr yxyx

Example

Perform a clockwise rotation of 450 a triangle A(00) B(11) and C(52) (Dec-20052009 10 Marks)

bull about a point (-1-1)

bull About origin

Answer about origin

Arsquo = (00) Brsquo=(radic20) Crsquo=((7 radic2)(-3 radic2))

Ex2 consider a square p(00) Q(010) R(1010) S(100) Rotate the Sq about fixed point R(1010) by an angle 45o (anticlockwise) followed by scaling by 2 units in X direction and 2 units in Y direction (Dec 2006 8 marks)

Prove that two scaling transformations commute that is

S1 S2=S2 S1

Show that transformation matrix for a reflection about a line Y=X is equivalent to reflection to X-axis followed by counterclockwise rotation of 900 (Dec 2008 8 marks)

Perform X-shear and Y-shear on a triangle having A(21) B(43) C(23) Consider the constant value b=c=2

(Dec 2008 8 marks) Answer Arsquo = 45

Brsquo = 1011

Crsquo = 87

Scaling with respect to an arbitrary point

1 Translation

2 Scaling

3 Retranslation

Pictorially shown on next slide

1

010

001

100

00

00

1

010

001

ff

y

x

ff yx

s

s

yx

Other Two Dimensional Transformations

Reflection

Transformation that produces a mirror image of an object

y

x

Reflection

x-axis y-axis

100

010

001

100

010

001

Reflection

origin line x=y

100

010

001

100

001

010

Shear Transformations

Shear

Transformation that distorts the shape of an object such that the transformed shape appears as the object was composed of internal layers that had been caused to slide over each other

y

x

(01) (11)

(10) (00)

y

x

(21) (31)

(10) (00) shx=2

X-Shear

An x-direction shear relative to the x axis

An y-direction shear relative to the y axis

100

01

001

ysh

100

010

01 xsh

yy

yshxx x

Transformations in 3D

Some graphics applications are 2D such as charts graphs maps etc

But to create realistic picture we need to represent picture in 3D

In 3D geometry we need additional third axis z-axis to specify the depth value of the object

Let us see the coordinate systems used in 3D graphics

Lets plot a point in 3D with coordinates (342)

1 first plot the point at(302)

it is on the plane X-Z

2 then lift the point up by 4 units

Y-axis

X-axis

Z-axis

h

e

i

g

h

t

width

Depth

Translation in 3D

Remembering 2D transformations -gt 3x3 matrices take a wild guess what happens to 3D transformations

3D means z-axis comes into picture Giving Depth information for an object

1

0100

0010

0001

1

010

001

zyx

zyxzyx

yx

yxyx

ttt

tttzxytttT

tt

ttyxttT

T=(tx ty tz)

Scale 3D Style

S=(sx sy sz)

zsz

ysy

xsx

z

y

x

1000

000

000

000

)(

pps

s

s

PPsssS

z

y

x

zyx

3D Rotation

In 3D we have to specify the axis of rotation along with the rotation angle

Positive rotation angles produce counterclockwise rotations about a coordinate axis assuming that we are looking in the negative direction along that coordinate axis

3D Rotation

z-axis rotation

xrsquo=x cos θ - y sin θ

yrsquo=x sin θ + y cos θ

zrsquo=z

or Prsquo = Rz(θ)P

1000

0100

00cossin

00sincos

xrsquo yrsquo zrsquo 1

= x y z 1

When we say that we want to rotate a point in anticlockwise direction about z-axis it is very similar to performing a 2D rotation in anticlockwise direction as follows

Fig2D Rotation Fig 3D Rotation

3D Rotation

z-axis rotation

xrsquo=x cos θ - y sin θ

yrsquo=x sin θ + y cos θ

zrsquo=z Transformation equations for rotation abt the other axes

can be obtained with a cyclic permutation of coordinate parameters xy and z That is we use the replacements

xrarr yrarr zrarr x

x-axis rotation

yrsquo=y cos θ - z sin θ

zrsquo=y sin θ + z cos θ

xrsquo=x

y-axis rotation

zrsquo=z cos θ - x sin θ

xrsquo=z sin θ + x cos θ

yrsquo=y

Matrices for anticlockwise 3D rotation

1000

0cossin0

0sincos0

0001

xR

1000

0cos0sin

0010

0sin0cos

yR

1000

0100

00cossin

00sincos

zR

3D Rotation about an arbitrary axis

General Three-Dimensional Rotations

Special case where an object is to be rotated about an axis that is parallel to one of the coordinate axes

1 Translate the object so that the rotation axis coincides with parallel coordinate axis

2 Perform the specified rotation about the axis

3 Translate the object so that the rotation axis is moved back to its original position

3D Rotation of an object about an arbitrary axis

When an object is to rotated about an axis that is not parallel to one of the coordinate axes

1 Translate the object so that the rotation axis passes through the coordinate origin

2 Rotate the object so that the axis of rotation coincides with one of the coordinate axes

3 Perform the specified rotation about the selected coordinate axis

4 Apply inverse rotations to bring the rotation axis back to its original position

5 Apply the inverse translation to bring the rotation axis back to its original spatial position

We can determine the transformation matrices for each step

Assume that rotation axis ie arbitrary axis is defined with two points p1(x1y1z1) and p2(x2y2z2)

Let us say a point on the axis is (PQR)

Initial position of the axis and point is as bellow

p1

p2

(PQR)

Step1 (Translation)transformation of rotation axis so that it passes through the origin

This can be done by moving point P1 to the origin

This repositions the rotation axis and the object as shown

1111

0100

0010

0001

zyx

Tp1

p2

(PQR)

Step2 transform the rotation axis so that it coincides the z-axis

This can be performed in two sub-steps a) Rotate about x-axis to transform axis into xz plane

b) Swing rotation axis around to the z-axis using y-axis rotation

a) Take projection of line segment (000) to (PQR) onto yz plane as shown in fig ie (0QR)

(PQR)

(0QR)

Light

source

x

z

y

Step2-a

Now if we rotate the rotation (arbitrary) axis x-axis so that it lies in X-Z

In this situation its shadow will coincides the z-axis

So we are interested in angle α so that shadow will coincides with z-axis

length of shadow L = radicQ2+R2

sin α = QL

cos α = RL

Therefore the matrix for rotation about x-axis

Rx(α) =

1000

00

00

0001

LRLQ

LQLR

(PQR) (0QR)

L

α

After performing x-axis rotation the rotation axis will lie in x-z plane as shown

When we perform x-axis rotation x-value remains unchanged as axis of rotation is in xz plane so y-coordinate is zero We need to get z-value

L = radicP2+Q2+R2

z-coordinate will be v = radic(L2-P2)

(PQR)

L

P

Step2-b

Now we have to rotate the axis around y-axis so that it coincides the z-axis Let that angle be β

From figure cosβ = VL

sin β = pL

Therefore the transformation

matrix for rotation about y-axis

in clockwise rotation is

1000

00

0010

00

LvLp

LpLv

L

P

β

Ry(β) =

step3

Rotation about z-axis by given angle ie θ ie Rz (θ)

Step 4 and 5 does inverse transformations ie Ry-1 Rx-1 T-1

Therefore the final transformation matrix will be the product of all matrices in sequence

RA= T Rx RyRz Ry-1 Rx-1 T-1

1000

0100

00cossin

00sincos

zR

Reflection wrto xy plane

Consider a point P(xyz) The reflection of this point wrto xy plane is given by pointprsquo(xy-z)

Corresponding matrix is given as

M = 1 0 0

0 1 0

0 0 -1

Page 16: 2D transformations - E-STUDYthirdyearengineering.weebly.com/uploads/3/8/2/8/38286065/... · 2018. 9. 10. · In CG images are made up of series of line segments. Each line segment

Rotation

A rotation repositions all points in an object along a circular path in the plane centered at the pivot point

First wersquoll assume the pivot is at the origin

P

Prsquo

Rotation

bull Review Trigonometry

=gt cos = xr sin = yr

bull x = r cos y = rsin

P(xy)

x

y r

xrsquo

yrsquo

Prsquo(xrsquo yrsquo)

r

=gt cos (+ ) = xrsquor bullxrsquo = r cos (+ )

bullxrsquo = rcoscos -rsinsin

bullxrsquo = xcos ndash ysin

=gtsin (+ ) = yrsquor yrsquo = r sin (+ )

bullyrsquo = rcossin + rsincos

bullyrsquo = xsin + ycos

Identity of Trigonometry

Rotation

bull We can write the components

px = px cos ndash py sin py = px sin + py cos

bull or in matrix form

P = R bull P

bull can be clockwise (-ve) or counterclockwise (+ve as our example)

bull Rotation matrix

P(xy)

x

y r

xrsquo

yrsquo

Prsquo(xrsquo yrsquo)

cossin

sincosR

Example

Find the transformed point Prsquo caused by rotating P= (5 1) about the origin through an angle of 90

Rotation

cossin

sincos

cossin

sincos

yx

yx

y

x

90cos190sin5

90sin190cos5

0115

1105

5

1

Matrix Representations and Homogeneous Coordinates

Many graphics applications involve sequences of geometric transformations

Animations

Design and picture construction applications

We will now consider matrix representations of these operations

Sequences of transformations can be efficiently processed using matrices

Matrix Representations and Homogeneous Coordinates

Prsquo = M1 P + M2

P and Prsquo are row matrices

M1 is a 2 by 2 array containing scaling factors

M2 is a 2 element row matrix containing translational terms

Matrix Representations and Homogeneous Coordinates

To produce a sequence of operations such as scaling followed by rotation then translation we could calculate the transformed coordinates one step at a time

A more efficient approach is to combine transformations without calculating intermediate coordinate values

Matrix Representations and Homogeneous Coordinates

Multiplicative and translational terms for a 2D geometric transformation can be combined into a single matrix if we expand the representations to 3 by 3 matrices

We can use the third column for translation terms and all transformation equations can be expressed as matrix multiplications

Homogenous Coordinates

Letrsquos move our problem into 3D Let point (x y) in 2D be represented by point (x y 1) in

the new space

Scaling our new point by any value a puts us somewhere along a particular line (ax ay a)

A point in 2D can be represented in many ways in the new space

(2 4) ---------- (8 16 4) or (6 12 3) or (2 4 1) or etc

y y

x

x

w

Homogenous Coordinates

bull We can always map back to the original 2D point by dividing by the last coordinate

bull (15 6 3) --- (5 2)

bull (60 40 10) -

bull Why do we use 1 for the last coordinate

bull The fact that all the points along each line can be mapped back to the same point in 2D gives this coordinate system its name ndash homogeneous coordinates

Matrix Representations and Homogeneous Coordinates

Thus 2D Translation Matrix is as follows

1

010

001

tytx

xrsquo yrsquo 1 x y 1 =

Thus 2D Rotation Matrix becomes as

Note Positive values of the rotation angle define the counterclockwise rotation about the rotation point and negative values rotate objects in the clockwise sense

100

0cossin

0sincos

xrsquo yrsquo 1 x y 1 =

Thus 2D Scaling Matrix becomes as

100

00

00

y

x

s

sxrsquo yrsquo 1 x y 1 =

Inverse Transformations

When we apply any transformation to point(xy) we get a new point (xrsquoyrsquo) Some times we need to get original co-ordinate from the transformed point This can be achieved by inverse transformation

2D Inverse Translation Matrix

1

010

0011

yx tt

T

Inverse Transformations

2D Inverse Rotation Matrix

Rotation in clockwise direction making Փ negative

ie cos(-θ)=cos θ sin(-θ)=-sin θ

Matrix becomes

2D Inverse Scaling Matrix

100

0cossin

0sincos1

R

100

01

0

001

1

y

x

s

s

S

2D Composite Transformations

We can setup a sequence of transformations as a composite transformation matrix by calculating the product of the individual transformations

Prsquo=M2M1P

Prsquo=MP

ROTATION ABOUT AN ARBITRARY POINT

2D Composite Transformations

General 2D Pivot-Point Rotation bull Translate

bull Rotate

bull Retranslate

1

010

001

100

0cossin

0sincos

1

010

001

rrrr yxyx

Example

Perform a clockwise rotation of 450 a triangle A(00) B(11) and C(52) (Dec-20052009 10 Marks)

bull about a point (-1-1)

bull About origin

Answer about origin

Arsquo = (00) Brsquo=(radic20) Crsquo=((7 radic2)(-3 radic2))

Ex2 consider a square p(00) Q(010) R(1010) S(100) Rotate the Sq about fixed point R(1010) by an angle 45o (anticlockwise) followed by scaling by 2 units in X direction and 2 units in Y direction (Dec 2006 8 marks)

Prove that two scaling transformations commute that is

S1 S2=S2 S1

Show that transformation matrix for a reflection about a line Y=X is equivalent to reflection to X-axis followed by counterclockwise rotation of 900 (Dec 2008 8 marks)

Perform X-shear and Y-shear on a triangle having A(21) B(43) C(23) Consider the constant value b=c=2

(Dec 2008 8 marks) Answer Arsquo = 45

Brsquo = 1011

Crsquo = 87

Scaling with respect to an arbitrary point

1 Translation

2 Scaling

3 Retranslation

Pictorially shown on next slide

1

010

001

100

00

00

1

010

001

ff

y

x

ff yx

s

s

yx

Other Two Dimensional Transformations

Reflection

Transformation that produces a mirror image of an object

y

x

Reflection

x-axis y-axis

100

010

001

100

010

001

Reflection

origin line x=y

100

010

001

100

001

010

Shear Transformations

Shear

Transformation that distorts the shape of an object such that the transformed shape appears as the object was composed of internal layers that had been caused to slide over each other

y

x

(01) (11)

(10) (00)

y

x

(21) (31)

(10) (00) shx=2

X-Shear

An x-direction shear relative to the x axis

An y-direction shear relative to the y axis

100

01

001

ysh

100

010

01 xsh

yy

yshxx x

Transformations in 3D

Some graphics applications are 2D such as charts graphs maps etc

But to create realistic picture we need to represent picture in 3D

In 3D geometry we need additional third axis z-axis to specify the depth value of the object

Let us see the coordinate systems used in 3D graphics

Lets plot a point in 3D with coordinates (342)

1 first plot the point at(302)

it is on the plane X-Z

2 then lift the point up by 4 units

Y-axis

X-axis

Z-axis

h

e

i

g

h

t

width

Depth

Translation in 3D

Remembering 2D transformations -gt 3x3 matrices take a wild guess what happens to 3D transformations

3D means z-axis comes into picture Giving Depth information for an object

1

0100

0010

0001

1

010

001

zyx

zyxzyx

yx

yxyx

ttt

tttzxytttT

tt

ttyxttT

T=(tx ty tz)

Scale 3D Style

S=(sx sy sz)

zsz

ysy

xsx

z

y

x

1000

000

000

000

)(

pps

s

s

PPsssS

z

y

x

zyx

3D Rotation

In 3D we have to specify the axis of rotation along with the rotation angle

Positive rotation angles produce counterclockwise rotations about a coordinate axis assuming that we are looking in the negative direction along that coordinate axis

3D Rotation

z-axis rotation

xrsquo=x cos θ - y sin θ

yrsquo=x sin θ + y cos θ

zrsquo=z

or Prsquo = Rz(θ)P

1000

0100

00cossin

00sincos

xrsquo yrsquo zrsquo 1

= x y z 1

When we say that we want to rotate a point in anticlockwise direction about z-axis it is very similar to performing a 2D rotation in anticlockwise direction as follows

Fig2D Rotation Fig 3D Rotation

3D Rotation

z-axis rotation

xrsquo=x cos θ - y sin θ

yrsquo=x sin θ + y cos θ

zrsquo=z Transformation equations for rotation abt the other axes

can be obtained with a cyclic permutation of coordinate parameters xy and z That is we use the replacements

xrarr yrarr zrarr x

x-axis rotation

yrsquo=y cos θ - z sin θ

zrsquo=y sin θ + z cos θ

xrsquo=x

y-axis rotation

zrsquo=z cos θ - x sin θ

xrsquo=z sin θ + x cos θ

yrsquo=y

Matrices for anticlockwise 3D rotation

1000

0cossin0

0sincos0

0001

xR

1000

0cos0sin

0010

0sin0cos

yR

1000

0100

00cossin

00sincos

zR

3D Rotation about an arbitrary axis

General Three-Dimensional Rotations

Special case where an object is to be rotated about an axis that is parallel to one of the coordinate axes

1 Translate the object so that the rotation axis coincides with parallel coordinate axis

2 Perform the specified rotation about the axis

3 Translate the object so that the rotation axis is moved back to its original position

3D Rotation of an object about an arbitrary axis

When an object is to rotated about an axis that is not parallel to one of the coordinate axes

1 Translate the object so that the rotation axis passes through the coordinate origin

2 Rotate the object so that the axis of rotation coincides with one of the coordinate axes

3 Perform the specified rotation about the selected coordinate axis

4 Apply inverse rotations to bring the rotation axis back to its original position

5 Apply the inverse translation to bring the rotation axis back to its original spatial position

We can determine the transformation matrices for each step

Assume that rotation axis ie arbitrary axis is defined with two points p1(x1y1z1) and p2(x2y2z2)

Let us say a point on the axis is (PQR)

Initial position of the axis and point is as bellow

p1

p2

(PQR)

Step1 (Translation)transformation of rotation axis so that it passes through the origin

This can be done by moving point P1 to the origin

This repositions the rotation axis and the object as shown

1111

0100

0010

0001

zyx

Tp1

p2

(PQR)

Step2 transform the rotation axis so that it coincides the z-axis

This can be performed in two sub-steps a) Rotate about x-axis to transform axis into xz plane

b) Swing rotation axis around to the z-axis using y-axis rotation

a) Take projection of line segment (000) to (PQR) onto yz plane as shown in fig ie (0QR)

(PQR)

(0QR)

Light

source

x

z

y

Step2-a

Now if we rotate the rotation (arbitrary) axis x-axis so that it lies in X-Z

In this situation its shadow will coincides the z-axis

So we are interested in angle α so that shadow will coincides with z-axis

length of shadow L = radicQ2+R2

sin α = QL

cos α = RL

Therefore the matrix for rotation about x-axis

Rx(α) =

1000

00

00

0001

LRLQ

LQLR

(PQR) (0QR)

L

α

After performing x-axis rotation the rotation axis will lie in x-z plane as shown

When we perform x-axis rotation x-value remains unchanged as axis of rotation is in xz plane so y-coordinate is zero We need to get z-value

L = radicP2+Q2+R2

z-coordinate will be v = radic(L2-P2)

(PQR)

L

P

Step2-b

Now we have to rotate the axis around y-axis so that it coincides the z-axis Let that angle be β

From figure cosβ = VL

sin β = pL

Therefore the transformation

matrix for rotation about y-axis

in clockwise rotation is

1000

00

0010

00

LvLp

LpLv

L

P

β

Ry(β) =

step3

Rotation about z-axis by given angle ie θ ie Rz (θ)

Step 4 and 5 does inverse transformations ie Ry-1 Rx-1 T-1

Therefore the final transformation matrix will be the product of all matrices in sequence

RA= T Rx RyRz Ry-1 Rx-1 T-1

1000

0100

00cossin

00sincos

zR

Reflection wrto xy plane

Consider a point P(xyz) The reflection of this point wrto xy plane is given by pointprsquo(xy-z)

Corresponding matrix is given as

M = 1 0 0

0 1 0

0 0 -1

Page 17: 2D transformations - E-STUDYthirdyearengineering.weebly.com/uploads/3/8/2/8/38286065/... · 2018. 9. 10. · In CG images are made up of series of line segments. Each line segment

Rotation

bull Review Trigonometry

=gt cos = xr sin = yr

bull x = r cos y = rsin

P(xy)

x

y r

xrsquo

yrsquo

Prsquo(xrsquo yrsquo)

r

=gt cos (+ ) = xrsquor bullxrsquo = r cos (+ )

bullxrsquo = rcoscos -rsinsin

bullxrsquo = xcos ndash ysin

=gtsin (+ ) = yrsquor yrsquo = r sin (+ )

bullyrsquo = rcossin + rsincos

bullyrsquo = xsin + ycos

Identity of Trigonometry

Rotation

bull We can write the components

px = px cos ndash py sin py = px sin + py cos

bull or in matrix form

P = R bull P

bull can be clockwise (-ve) or counterclockwise (+ve as our example)

bull Rotation matrix

P(xy)

x

y r

xrsquo

yrsquo

Prsquo(xrsquo yrsquo)

cossin

sincosR

Example

Find the transformed point Prsquo caused by rotating P= (5 1) about the origin through an angle of 90

Rotation

cossin

sincos

cossin

sincos

yx

yx

y

x

90cos190sin5

90sin190cos5

0115

1105

5

1

Matrix Representations and Homogeneous Coordinates

Many graphics applications involve sequences of geometric transformations

Animations

Design and picture construction applications

We will now consider matrix representations of these operations

Sequences of transformations can be efficiently processed using matrices

Matrix Representations and Homogeneous Coordinates

Prsquo = M1 P + M2

P and Prsquo are row matrices

M1 is a 2 by 2 array containing scaling factors

M2 is a 2 element row matrix containing translational terms

Matrix Representations and Homogeneous Coordinates

To produce a sequence of operations such as scaling followed by rotation then translation we could calculate the transformed coordinates one step at a time

A more efficient approach is to combine transformations without calculating intermediate coordinate values

Matrix Representations and Homogeneous Coordinates

Multiplicative and translational terms for a 2D geometric transformation can be combined into a single matrix if we expand the representations to 3 by 3 matrices

We can use the third column for translation terms and all transformation equations can be expressed as matrix multiplications

Homogenous Coordinates

Letrsquos move our problem into 3D Let point (x y) in 2D be represented by point (x y 1) in

the new space

Scaling our new point by any value a puts us somewhere along a particular line (ax ay a)

A point in 2D can be represented in many ways in the new space

(2 4) ---------- (8 16 4) or (6 12 3) or (2 4 1) or etc

y y

x

x

w

Homogenous Coordinates

bull We can always map back to the original 2D point by dividing by the last coordinate

bull (15 6 3) --- (5 2)

bull (60 40 10) -

bull Why do we use 1 for the last coordinate

bull The fact that all the points along each line can be mapped back to the same point in 2D gives this coordinate system its name ndash homogeneous coordinates

Matrix Representations and Homogeneous Coordinates

Thus 2D Translation Matrix is as follows

1

010

001

tytx

xrsquo yrsquo 1 x y 1 =

Thus 2D Rotation Matrix becomes as

Note Positive values of the rotation angle define the counterclockwise rotation about the rotation point and negative values rotate objects in the clockwise sense

100

0cossin

0sincos

xrsquo yrsquo 1 x y 1 =

Thus 2D Scaling Matrix becomes as

100

00

00

y

x

s

sxrsquo yrsquo 1 x y 1 =

Inverse Transformations

When we apply any transformation to point(xy) we get a new point (xrsquoyrsquo) Some times we need to get original co-ordinate from the transformed point This can be achieved by inverse transformation

2D Inverse Translation Matrix

1

010

0011

yx tt

T

Inverse Transformations

2D Inverse Rotation Matrix

Rotation in clockwise direction making Փ negative

ie cos(-θ)=cos θ sin(-θ)=-sin θ

Matrix becomes

2D Inverse Scaling Matrix

100

0cossin

0sincos1

R

100

01

0

001

1

y

x

s

s

S

2D Composite Transformations

We can setup a sequence of transformations as a composite transformation matrix by calculating the product of the individual transformations

Prsquo=M2M1P

Prsquo=MP

ROTATION ABOUT AN ARBITRARY POINT

2D Composite Transformations

General 2D Pivot-Point Rotation bull Translate

bull Rotate

bull Retranslate

1

010

001

100

0cossin

0sincos

1

010

001

rrrr yxyx

Example

Perform a clockwise rotation of 450 a triangle A(00) B(11) and C(52) (Dec-20052009 10 Marks)

bull about a point (-1-1)

bull About origin

Answer about origin

Arsquo = (00) Brsquo=(radic20) Crsquo=((7 radic2)(-3 radic2))

Ex2 consider a square p(00) Q(010) R(1010) S(100) Rotate the Sq about fixed point R(1010) by an angle 45o (anticlockwise) followed by scaling by 2 units in X direction and 2 units in Y direction (Dec 2006 8 marks)

Prove that two scaling transformations commute that is

S1 S2=S2 S1

Show that transformation matrix for a reflection about a line Y=X is equivalent to reflection to X-axis followed by counterclockwise rotation of 900 (Dec 2008 8 marks)

Perform X-shear and Y-shear on a triangle having A(21) B(43) C(23) Consider the constant value b=c=2

(Dec 2008 8 marks) Answer Arsquo = 45

Brsquo = 1011

Crsquo = 87

Scaling with respect to an arbitrary point

1 Translation

2 Scaling

3 Retranslation

Pictorially shown on next slide

1

010

001

100

00

00

1

010

001

ff

y

x

ff yx

s

s

yx

Other Two Dimensional Transformations

Reflection

Transformation that produces a mirror image of an object

y

x

Reflection

x-axis y-axis

100

010

001

100

010

001

Reflection

origin line x=y

100

010

001

100

001

010

Shear Transformations

Shear

Transformation that distorts the shape of an object such that the transformed shape appears as the object was composed of internal layers that had been caused to slide over each other

y

x

(01) (11)

(10) (00)

y

x

(21) (31)

(10) (00) shx=2

X-Shear

An x-direction shear relative to the x axis

An y-direction shear relative to the y axis

100

01

001

ysh

100

010

01 xsh

yy

yshxx x

Transformations in 3D

Some graphics applications are 2D such as charts graphs maps etc

But to create realistic picture we need to represent picture in 3D

In 3D geometry we need additional third axis z-axis to specify the depth value of the object

Let us see the coordinate systems used in 3D graphics

Lets plot a point in 3D with coordinates (342)

1 first plot the point at(302)

it is on the plane X-Z

2 then lift the point up by 4 units

Y-axis

X-axis

Z-axis

h

e

i

g

h

t

width

Depth

Translation in 3D

Remembering 2D transformations -gt 3x3 matrices take a wild guess what happens to 3D transformations

3D means z-axis comes into picture Giving Depth information for an object

1

0100

0010

0001

1

010

001

zyx

zyxzyx

yx

yxyx

ttt

tttzxytttT

tt

ttyxttT

T=(tx ty tz)

Scale 3D Style

S=(sx sy sz)

zsz

ysy

xsx

z

y

x

1000

000

000

000

)(

pps

s

s

PPsssS

z

y

x

zyx

3D Rotation

In 3D we have to specify the axis of rotation along with the rotation angle

Positive rotation angles produce counterclockwise rotations about a coordinate axis assuming that we are looking in the negative direction along that coordinate axis

3D Rotation

z-axis rotation

xrsquo=x cos θ - y sin θ

yrsquo=x sin θ + y cos θ

zrsquo=z

or Prsquo = Rz(θ)P

1000

0100

00cossin

00sincos

xrsquo yrsquo zrsquo 1

= x y z 1

When we say that we want to rotate a point in anticlockwise direction about z-axis it is very similar to performing a 2D rotation in anticlockwise direction as follows

Fig2D Rotation Fig 3D Rotation

3D Rotation

z-axis rotation

xrsquo=x cos θ - y sin θ

yrsquo=x sin θ + y cos θ

zrsquo=z Transformation equations for rotation abt the other axes

can be obtained with a cyclic permutation of coordinate parameters xy and z That is we use the replacements

xrarr yrarr zrarr x

x-axis rotation

yrsquo=y cos θ - z sin θ

zrsquo=y sin θ + z cos θ

xrsquo=x

y-axis rotation

zrsquo=z cos θ - x sin θ

xrsquo=z sin θ + x cos θ

yrsquo=y

Matrices for anticlockwise 3D rotation

1000

0cossin0

0sincos0

0001

xR

1000

0cos0sin

0010

0sin0cos

yR

1000

0100

00cossin

00sincos

zR

3D Rotation about an arbitrary axis

General Three-Dimensional Rotations

Special case where an object is to be rotated about an axis that is parallel to one of the coordinate axes

1 Translate the object so that the rotation axis coincides with parallel coordinate axis

2 Perform the specified rotation about the axis

3 Translate the object so that the rotation axis is moved back to its original position

3D Rotation of an object about an arbitrary axis

When an object is to rotated about an axis that is not parallel to one of the coordinate axes

1 Translate the object so that the rotation axis passes through the coordinate origin

2 Rotate the object so that the axis of rotation coincides with one of the coordinate axes

3 Perform the specified rotation about the selected coordinate axis

4 Apply inverse rotations to bring the rotation axis back to its original position

5 Apply the inverse translation to bring the rotation axis back to its original spatial position

We can determine the transformation matrices for each step

Assume that rotation axis ie arbitrary axis is defined with two points p1(x1y1z1) and p2(x2y2z2)

Let us say a point on the axis is (PQR)

Initial position of the axis and point is as bellow

p1

p2

(PQR)

Step1 (Translation)transformation of rotation axis so that it passes through the origin

This can be done by moving point P1 to the origin

This repositions the rotation axis and the object as shown

1111

0100

0010

0001

zyx

Tp1

p2

(PQR)

Step2 transform the rotation axis so that it coincides the z-axis

This can be performed in two sub-steps a) Rotate about x-axis to transform axis into xz plane

b) Swing rotation axis around to the z-axis using y-axis rotation

a) Take projection of line segment (000) to (PQR) onto yz plane as shown in fig ie (0QR)

(PQR)

(0QR)

Light

source

x

z

y

Step2-a

Now if we rotate the rotation (arbitrary) axis x-axis so that it lies in X-Z

In this situation its shadow will coincides the z-axis

So we are interested in angle α so that shadow will coincides with z-axis

length of shadow L = radicQ2+R2

sin α = QL

cos α = RL

Therefore the matrix for rotation about x-axis

Rx(α) =

1000

00

00

0001

LRLQ

LQLR

(PQR) (0QR)

L

α

After performing x-axis rotation the rotation axis will lie in x-z plane as shown

When we perform x-axis rotation x-value remains unchanged as axis of rotation is in xz plane so y-coordinate is zero We need to get z-value

L = radicP2+Q2+R2

z-coordinate will be v = radic(L2-P2)

(PQR)

L

P

Step2-b

Now we have to rotate the axis around y-axis so that it coincides the z-axis Let that angle be β

From figure cosβ = VL

sin β = pL

Therefore the transformation

matrix for rotation about y-axis

in clockwise rotation is

1000

00

0010

00

LvLp

LpLv

L

P

β

Ry(β) =

step3

Rotation about z-axis by given angle ie θ ie Rz (θ)

Step 4 and 5 does inverse transformations ie Ry-1 Rx-1 T-1

Therefore the final transformation matrix will be the product of all matrices in sequence

RA= T Rx RyRz Ry-1 Rx-1 T-1

1000

0100

00cossin

00sincos

zR

Reflection wrto xy plane

Consider a point P(xyz) The reflection of this point wrto xy plane is given by pointprsquo(xy-z)

Corresponding matrix is given as

M = 1 0 0

0 1 0

0 0 -1

Page 18: 2D transformations - E-STUDYthirdyearengineering.weebly.com/uploads/3/8/2/8/38286065/... · 2018. 9. 10. · In CG images are made up of series of line segments. Each line segment

Rotation

bull We can write the components

px = px cos ndash py sin py = px sin + py cos

bull or in matrix form

P = R bull P

bull can be clockwise (-ve) or counterclockwise (+ve as our example)

bull Rotation matrix

P(xy)

x

y r

xrsquo

yrsquo

Prsquo(xrsquo yrsquo)

cossin

sincosR

Example

Find the transformed point Prsquo caused by rotating P= (5 1) about the origin through an angle of 90

Rotation

cossin

sincos

cossin

sincos

yx

yx

y

x

90cos190sin5

90sin190cos5

0115

1105

5

1

Matrix Representations and Homogeneous Coordinates

Many graphics applications involve sequences of geometric transformations

Animations

Design and picture construction applications

We will now consider matrix representations of these operations

Sequences of transformations can be efficiently processed using matrices

Matrix Representations and Homogeneous Coordinates

Prsquo = M1 P + M2

P and Prsquo are row matrices

M1 is a 2 by 2 array containing scaling factors

M2 is a 2 element row matrix containing translational terms

Matrix Representations and Homogeneous Coordinates

To produce a sequence of operations such as scaling followed by rotation then translation we could calculate the transformed coordinates one step at a time

A more efficient approach is to combine transformations without calculating intermediate coordinate values

Matrix Representations and Homogeneous Coordinates

Multiplicative and translational terms for a 2D geometric transformation can be combined into a single matrix if we expand the representations to 3 by 3 matrices

We can use the third column for translation terms and all transformation equations can be expressed as matrix multiplications

Homogenous Coordinates

Letrsquos move our problem into 3D Let point (x y) in 2D be represented by point (x y 1) in

the new space

Scaling our new point by any value a puts us somewhere along a particular line (ax ay a)

A point in 2D can be represented in many ways in the new space

(2 4) ---------- (8 16 4) or (6 12 3) or (2 4 1) or etc

y y

x

x

w

Homogenous Coordinates

bull We can always map back to the original 2D point by dividing by the last coordinate

bull (15 6 3) --- (5 2)

bull (60 40 10) -

bull Why do we use 1 for the last coordinate

bull The fact that all the points along each line can be mapped back to the same point in 2D gives this coordinate system its name ndash homogeneous coordinates

Matrix Representations and Homogeneous Coordinates

Thus 2D Translation Matrix is as follows

1

010

001

tytx

xrsquo yrsquo 1 x y 1 =

Thus 2D Rotation Matrix becomes as

Note Positive values of the rotation angle define the counterclockwise rotation about the rotation point and negative values rotate objects in the clockwise sense

100

0cossin

0sincos

xrsquo yrsquo 1 x y 1 =

Thus 2D Scaling Matrix becomes as

100

00

00

y

x

s

sxrsquo yrsquo 1 x y 1 =

Inverse Transformations

When we apply any transformation to point(xy) we get a new point (xrsquoyrsquo) Some times we need to get original co-ordinate from the transformed point This can be achieved by inverse transformation

2D Inverse Translation Matrix

1

010

0011

yx tt

T

Inverse Transformations

2D Inverse Rotation Matrix

Rotation in clockwise direction making Փ negative

ie cos(-θ)=cos θ sin(-θ)=-sin θ

Matrix becomes

2D Inverse Scaling Matrix

100

0cossin

0sincos1

R

100

01

0

001

1

y

x

s

s

S

2D Composite Transformations

We can setup a sequence of transformations as a composite transformation matrix by calculating the product of the individual transformations

Prsquo=M2M1P

Prsquo=MP

ROTATION ABOUT AN ARBITRARY POINT

2D Composite Transformations

General 2D Pivot-Point Rotation bull Translate

bull Rotate

bull Retranslate

1

010

001

100

0cossin

0sincos

1

010

001

rrrr yxyx

Example

Perform a clockwise rotation of 450 a triangle A(00) B(11) and C(52) (Dec-20052009 10 Marks)

bull about a point (-1-1)

bull About origin

Answer about origin

Arsquo = (00) Brsquo=(radic20) Crsquo=((7 radic2)(-3 radic2))

Ex2 consider a square p(00) Q(010) R(1010) S(100) Rotate the Sq about fixed point R(1010) by an angle 45o (anticlockwise) followed by scaling by 2 units in X direction and 2 units in Y direction (Dec 2006 8 marks)

Prove that two scaling transformations commute that is

S1 S2=S2 S1

Show that transformation matrix for a reflection about a line Y=X is equivalent to reflection to X-axis followed by counterclockwise rotation of 900 (Dec 2008 8 marks)

Perform X-shear and Y-shear on a triangle having A(21) B(43) C(23) Consider the constant value b=c=2

(Dec 2008 8 marks) Answer Arsquo = 45

Brsquo = 1011

Crsquo = 87

Scaling with respect to an arbitrary point

1 Translation

2 Scaling

3 Retranslation

Pictorially shown on next slide

1

010

001

100

00

00

1

010

001

ff

y

x

ff yx

s

s

yx

Other Two Dimensional Transformations

Reflection

Transformation that produces a mirror image of an object

y

x

Reflection

x-axis y-axis

100

010

001

100

010

001

Reflection

origin line x=y

100

010

001

100

001

010

Shear Transformations

Shear

Transformation that distorts the shape of an object such that the transformed shape appears as the object was composed of internal layers that had been caused to slide over each other

y

x

(01) (11)

(10) (00)

y

x

(21) (31)

(10) (00) shx=2

X-Shear

An x-direction shear relative to the x axis

An y-direction shear relative to the y axis

100

01

001

ysh

100

010

01 xsh

yy

yshxx x

Transformations in 3D

Some graphics applications are 2D such as charts graphs maps etc

But to create realistic picture we need to represent picture in 3D

In 3D geometry we need additional third axis z-axis to specify the depth value of the object

Let us see the coordinate systems used in 3D graphics

Lets plot a point in 3D with coordinates (342)

1 first plot the point at(302)

it is on the plane X-Z

2 then lift the point up by 4 units

Y-axis

X-axis

Z-axis

h

e

i

g

h

t

width

Depth

Translation in 3D

Remembering 2D transformations -gt 3x3 matrices take a wild guess what happens to 3D transformations

3D means z-axis comes into picture Giving Depth information for an object

1

0100

0010

0001

1

010

001

zyx

zyxzyx

yx

yxyx

ttt

tttzxytttT

tt

ttyxttT

T=(tx ty tz)

Scale 3D Style

S=(sx sy sz)

zsz

ysy

xsx

z

y

x

1000

000

000

000

)(

pps

s

s

PPsssS

z

y

x

zyx

3D Rotation

In 3D we have to specify the axis of rotation along with the rotation angle

Positive rotation angles produce counterclockwise rotations about a coordinate axis assuming that we are looking in the negative direction along that coordinate axis

3D Rotation

z-axis rotation

xrsquo=x cos θ - y sin θ

yrsquo=x sin θ + y cos θ

zrsquo=z

or Prsquo = Rz(θ)P

1000

0100

00cossin

00sincos

xrsquo yrsquo zrsquo 1

= x y z 1

When we say that we want to rotate a point in anticlockwise direction about z-axis it is very similar to performing a 2D rotation in anticlockwise direction as follows

Fig2D Rotation Fig 3D Rotation

3D Rotation

z-axis rotation

xrsquo=x cos θ - y sin θ

yrsquo=x sin θ + y cos θ

zrsquo=z Transformation equations for rotation abt the other axes

can be obtained with a cyclic permutation of coordinate parameters xy and z That is we use the replacements

xrarr yrarr zrarr x

x-axis rotation

yrsquo=y cos θ - z sin θ

zrsquo=y sin θ + z cos θ

xrsquo=x

y-axis rotation

zrsquo=z cos θ - x sin θ

xrsquo=z sin θ + x cos θ

yrsquo=y

Matrices for anticlockwise 3D rotation

1000

0cossin0

0sincos0

0001

xR

1000

0cos0sin

0010

0sin0cos

yR

1000

0100

00cossin

00sincos

zR

3D Rotation about an arbitrary axis

General Three-Dimensional Rotations

Special case where an object is to be rotated about an axis that is parallel to one of the coordinate axes

1 Translate the object so that the rotation axis coincides with parallel coordinate axis

2 Perform the specified rotation about the axis

3 Translate the object so that the rotation axis is moved back to its original position

3D Rotation of an object about an arbitrary axis

When an object is to rotated about an axis that is not parallel to one of the coordinate axes

1 Translate the object so that the rotation axis passes through the coordinate origin

2 Rotate the object so that the axis of rotation coincides with one of the coordinate axes

3 Perform the specified rotation about the selected coordinate axis

4 Apply inverse rotations to bring the rotation axis back to its original position

5 Apply the inverse translation to bring the rotation axis back to its original spatial position

We can determine the transformation matrices for each step

Assume that rotation axis ie arbitrary axis is defined with two points p1(x1y1z1) and p2(x2y2z2)

Let us say a point on the axis is (PQR)

Initial position of the axis and point is as bellow

p1

p2

(PQR)

Step1 (Translation)transformation of rotation axis so that it passes through the origin

This can be done by moving point P1 to the origin

This repositions the rotation axis and the object as shown

1111

0100

0010

0001

zyx

Tp1

p2

(PQR)

Step2 transform the rotation axis so that it coincides the z-axis

This can be performed in two sub-steps a) Rotate about x-axis to transform axis into xz plane

b) Swing rotation axis around to the z-axis using y-axis rotation

a) Take projection of line segment (000) to (PQR) onto yz plane as shown in fig ie (0QR)

(PQR)

(0QR)

Light

source

x

z

y

Step2-a

Now if we rotate the rotation (arbitrary) axis x-axis so that it lies in X-Z

In this situation its shadow will coincides the z-axis

So we are interested in angle α so that shadow will coincides with z-axis

length of shadow L = radicQ2+R2

sin α = QL

cos α = RL

Therefore the matrix for rotation about x-axis

Rx(α) =

1000

00

00

0001

LRLQ

LQLR

(PQR) (0QR)

L

α

After performing x-axis rotation the rotation axis will lie in x-z plane as shown

When we perform x-axis rotation x-value remains unchanged as axis of rotation is in xz plane so y-coordinate is zero We need to get z-value

L = radicP2+Q2+R2

z-coordinate will be v = radic(L2-P2)

(PQR)

L

P

Step2-b

Now we have to rotate the axis around y-axis so that it coincides the z-axis Let that angle be β

From figure cosβ = VL

sin β = pL

Therefore the transformation

matrix for rotation about y-axis

in clockwise rotation is

1000

00

0010

00

LvLp

LpLv

L

P

β

Ry(β) =

step3

Rotation about z-axis by given angle ie θ ie Rz (θ)

Step 4 and 5 does inverse transformations ie Ry-1 Rx-1 T-1

Therefore the final transformation matrix will be the product of all matrices in sequence

RA= T Rx RyRz Ry-1 Rx-1 T-1

1000

0100

00cossin

00sincos

zR

Reflection wrto xy plane

Consider a point P(xyz) The reflection of this point wrto xy plane is given by pointprsquo(xy-z)

Corresponding matrix is given as

M = 1 0 0

0 1 0

0 0 -1

Page 19: 2D transformations - E-STUDYthirdyearengineering.weebly.com/uploads/3/8/2/8/38286065/... · 2018. 9. 10. · In CG images are made up of series of line segments. Each line segment

Example

Find the transformed point Prsquo caused by rotating P= (5 1) about the origin through an angle of 90

Rotation

cossin

sincos

cossin

sincos

yx

yx

y

x

90cos190sin5

90sin190cos5

0115

1105

5

1

Matrix Representations and Homogeneous Coordinates

Many graphics applications involve sequences of geometric transformations

Animations

Design and picture construction applications

We will now consider matrix representations of these operations

Sequences of transformations can be efficiently processed using matrices

Matrix Representations and Homogeneous Coordinates

Prsquo = M1 P + M2

P and Prsquo are row matrices

M1 is a 2 by 2 array containing scaling factors

M2 is a 2 element row matrix containing translational terms

Matrix Representations and Homogeneous Coordinates

To produce a sequence of operations such as scaling followed by rotation then translation we could calculate the transformed coordinates one step at a time

A more efficient approach is to combine transformations without calculating intermediate coordinate values

Matrix Representations and Homogeneous Coordinates

Multiplicative and translational terms for a 2D geometric transformation can be combined into a single matrix if we expand the representations to 3 by 3 matrices

We can use the third column for translation terms and all transformation equations can be expressed as matrix multiplications

Homogenous Coordinates

Letrsquos move our problem into 3D Let point (x y) in 2D be represented by point (x y 1) in

the new space

Scaling our new point by any value a puts us somewhere along a particular line (ax ay a)

A point in 2D can be represented in many ways in the new space

(2 4) ---------- (8 16 4) or (6 12 3) or (2 4 1) or etc

y y

x

x

w

Homogenous Coordinates

bull We can always map back to the original 2D point by dividing by the last coordinate

bull (15 6 3) --- (5 2)

bull (60 40 10) -

bull Why do we use 1 for the last coordinate

bull The fact that all the points along each line can be mapped back to the same point in 2D gives this coordinate system its name ndash homogeneous coordinates

Matrix Representations and Homogeneous Coordinates

Thus 2D Translation Matrix is as follows

1

010

001

tytx

xrsquo yrsquo 1 x y 1 =

Thus 2D Rotation Matrix becomes as

Note Positive values of the rotation angle define the counterclockwise rotation about the rotation point and negative values rotate objects in the clockwise sense

100

0cossin

0sincos

xrsquo yrsquo 1 x y 1 =

Thus 2D Scaling Matrix becomes as

100

00

00

y

x

s

sxrsquo yrsquo 1 x y 1 =

Inverse Transformations

When we apply any transformation to point(xy) we get a new point (xrsquoyrsquo) Some times we need to get original co-ordinate from the transformed point This can be achieved by inverse transformation

2D Inverse Translation Matrix

1

010

0011

yx tt

T

Inverse Transformations

2D Inverse Rotation Matrix

Rotation in clockwise direction making Փ negative

ie cos(-θ)=cos θ sin(-θ)=-sin θ

Matrix becomes

2D Inverse Scaling Matrix

100

0cossin

0sincos1

R

100

01

0

001

1

y

x

s

s

S

2D Composite Transformations

We can setup a sequence of transformations as a composite transformation matrix by calculating the product of the individual transformations

Prsquo=M2M1P

Prsquo=MP

ROTATION ABOUT AN ARBITRARY POINT

2D Composite Transformations

General 2D Pivot-Point Rotation bull Translate

bull Rotate

bull Retranslate

1

010

001

100

0cossin

0sincos

1

010

001

rrrr yxyx

Example

Perform a clockwise rotation of 450 a triangle A(00) B(11) and C(52) (Dec-20052009 10 Marks)

bull about a point (-1-1)

bull About origin

Answer about origin

Arsquo = (00) Brsquo=(radic20) Crsquo=((7 radic2)(-3 radic2))

Ex2 consider a square p(00) Q(010) R(1010) S(100) Rotate the Sq about fixed point R(1010) by an angle 45o (anticlockwise) followed by scaling by 2 units in X direction and 2 units in Y direction (Dec 2006 8 marks)

Prove that two scaling transformations commute that is

S1 S2=S2 S1

Show that transformation matrix for a reflection about a line Y=X is equivalent to reflection to X-axis followed by counterclockwise rotation of 900 (Dec 2008 8 marks)

Perform X-shear and Y-shear on a triangle having A(21) B(43) C(23) Consider the constant value b=c=2

(Dec 2008 8 marks) Answer Arsquo = 45

Brsquo = 1011

Crsquo = 87

Scaling with respect to an arbitrary point

1 Translation

2 Scaling

3 Retranslation

Pictorially shown on next slide

1

010

001

100

00

00

1

010

001

ff

y

x

ff yx

s

s

yx

Other Two Dimensional Transformations

Reflection

Transformation that produces a mirror image of an object

y

x

Reflection

x-axis y-axis

100

010

001

100

010

001

Reflection

origin line x=y

100

010

001

100

001

010

Shear Transformations

Shear

Transformation that distorts the shape of an object such that the transformed shape appears as the object was composed of internal layers that had been caused to slide over each other

y

x

(01) (11)

(10) (00)

y

x

(21) (31)

(10) (00) shx=2

X-Shear

An x-direction shear relative to the x axis

An y-direction shear relative to the y axis

100

01

001

ysh

100

010

01 xsh

yy

yshxx x

Transformations in 3D

Some graphics applications are 2D such as charts graphs maps etc

But to create realistic picture we need to represent picture in 3D

In 3D geometry we need additional third axis z-axis to specify the depth value of the object

Let us see the coordinate systems used in 3D graphics

Lets plot a point in 3D with coordinates (342)

1 first plot the point at(302)

it is on the plane X-Z

2 then lift the point up by 4 units

Y-axis

X-axis

Z-axis

h

e

i

g

h

t

width

Depth

Translation in 3D

Remembering 2D transformations -gt 3x3 matrices take a wild guess what happens to 3D transformations

3D means z-axis comes into picture Giving Depth information for an object

1

0100

0010

0001

1

010

001

zyx

zyxzyx

yx

yxyx

ttt

tttzxytttT

tt

ttyxttT

T=(tx ty tz)

Scale 3D Style

S=(sx sy sz)

zsz

ysy

xsx

z

y

x

1000

000

000

000

)(

pps

s

s

PPsssS

z

y

x

zyx

3D Rotation

In 3D we have to specify the axis of rotation along with the rotation angle

Positive rotation angles produce counterclockwise rotations about a coordinate axis assuming that we are looking in the negative direction along that coordinate axis

3D Rotation

z-axis rotation

xrsquo=x cos θ - y sin θ

yrsquo=x sin θ + y cos θ

zrsquo=z

or Prsquo = Rz(θ)P

1000

0100

00cossin

00sincos

xrsquo yrsquo zrsquo 1

= x y z 1

When we say that we want to rotate a point in anticlockwise direction about z-axis it is very similar to performing a 2D rotation in anticlockwise direction as follows

Fig2D Rotation Fig 3D Rotation

3D Rotation

z-axis rotation

xrsquo=x cos θ - y sin θ

yrsquo=x sin θ + y cos θ

zrsquo=z Transformation equations for rotation abt the other axes

can be obtained with a cyclic permutation of coordinate parameters xy and z That is we use the replacements

xrarr yrarr zrarr x

x-axis rotation

yrsquo=y cos θ - z sin θ

zrsquo=y sin θ + z cos θ

xrsquo=x

y-axis rotation

zrsquo=z cos θ - x sin θ

xrsquo=z sin θ + x cos θ

yrsquo=y

Matrices for anticlockwise 3D rotation

1000

0cossin0

0sincos0

0001

xR

1000

0cos0sin

0010

0sin0cos

yR

1000

0100

00cossin

00sincos

zR

3D Rotation about an arbitrary axis

General Three-Dimensional Rotations

Special case where an object is to be rotated about an axis that is parallel to one of the coordinate axes

1 Translate the object so that the rotation axis coincides with parallel coordinate axis

2 Perform the specified rotation about the axis

3 Translate the object so that the rotation axis is moved back to its original position

3D Rotation of an object about an arbitrary axis

When an object is to rotated about an axis that is not parallel to one of the coordinate axes

1 Translate the object so that the rotation axis passes through the coordinate origin

2 Rotate the object so that the axis of rotation coincides with one of the coordinate axes

3 Perform the specified rotation about the selected coordinate axis

4 Apply inverse rotations to bring the rotation axis back to its original position

5 Apply the inverse translation to bring the rotation axis back to its original spatial position

We can determine the transformation matrices for each step

Assume that rotation axis ie arbitrary axis is defined with two points p1(x1y1z1) and p2(x2y2z2)

Let us say a point on the axis is (PQR)

Initial position of the axis and point is as bellow

p1

p2

(PQR)

Step1 (Translation)transformation of rotation axis so that it passes through the origin

This can be done by moving point P1 to the origin

This repositions the rotation axis and the object as shown

1111

0100

0010

0001

zyx

Tp1

p2

(PQR)

Step2 transform the rotation axis so that it coincides the z-axis

This can be performed in two sub-steps a) Rotate about x-axis to transform axis into xz plane

b) Swing rotation axis around to the z-axis using y-axis rotation

a) Take projection of line segment (000) to (PQR) onto yz plane as shown in fig ie (0QR)

(PQR)

(0QR)

Light

source

x

z

y

Step2-a

Now if we rotate the rotation (arbitrary) axis x-axis so that it lies in X-Z

In this situation its shadow will coincides the z-axis

So we are interested in angle α so that shadow will coincides with z-axis

length of shadow L = radicQ2+R2

sin α = QL

cos α = RL

Therefore the matrix for rotation about x-axis

Rx(α) =

1000

00

00

0001

LRLQ

LQLR

(PQR) (0QR)

L

α

After performing x-axis rotation the rotation axis will lie in x-z plane as shown

When we perform x-axis rotation x-value remains unchanged as axis of rotation is in xz plane so y-coordinate is zero We need to get z-value

L = radicP2+Q2+R2

z-coordinate will be v = radic(L2-P2)

(PQR)

L

P

Step2-b

Now we have to rotate the axis around y-axis so that it coincides the z-axis Let that angle be β

From figure cosβ = VL

sin β = pL

Therefore the transformation

matrix for rotation about y-axis

in clockwise rotation is

1000

00

0010

00

LvLp

LpLv

L

P

β

Ry(β) =

step3

Rotation about z-axis by given angle ie θ ie Rz (θ)

Step 4 and 5 does inverse transformations ie Ry-1 Rx-1 T-1

Therefore the final transformation matrix will be the product of all matrices in sequence

RA= T Rx RyRz Ry-1 Rx-1 T-1

1000

0100

00cossin

00sincos

zR

Reflection wrto xy plane

Consider a point P(xyz) The reflection of this point wrto xy plane is given by pointprsquo(xy-z)

Corresponding matrix is given as

M = 1 0 0

0 1 0

0 0 -1

Page 20: 2D transformations - E-STUDYthirdyearengineering.weebly.com/uploads/3/8/2/8/38286065/... · 2018. 9. 10. · In CG images are made up of series of line segments. Each line segment

Matrix Representations and Homogeneous Coordinates

Many graphics applications involve sequences of geometric transformations

Animations

Design and picture construction applications

We will now consider matrix representations of these operations

Sequences of transformations can be efficiently processed using matrices

Matrix Representations and Homogeneous Coordinates

Prsquo = M1 P + M2

P and Prsquo are row matrices

M1 is a 2 by 2 array containing scaling factors

M2 is a 2 element row matrix containing translational terms

Matrix Representations and Homogeneous Coordinates

To produce a sequence of operations such as scaling followed by rotation then translation we could calculate the transformed coordinates one step at a time

A more efficient approach is to combine transformations without calculating intermediate coordinate values

Matrix Representations and Homogeneous Coordinates

Multiplicative and translational terms for a 2D geometric transformation can be combined into a single matrix if we expand the representations to 3 by 3 matrices

We can use the third column for translation terms and all transformation equations can be expressed as matrix multiplications

Homogenous Coordinates

Letrsquos move our problem into 3D Let point (x y) in 2D be represented by point (x y 1) in

the new space

Scaling our new point by any value a puts us somewhere along a particular line (ax ay a)

A point in 2D can be represented in many ways in the new space

(2 4) ---------- (8 16 4) or (6 12 3) or (2 4 1) or etc

y y

x

x

w

Homogenous Coordinates

bull We can always map back to the original 2D point by dividing by the last coordinate

bull (15 6 3) --- (5 2)

bull (60 40 10) -

bull Why do we use 1 for the last coordinate

bull The fact that all the points along each line can be mapped back to the same point in 2D gives this coordinate system its name ndash homogeneous coordinates

Matrix Representations and Homogeneous Coordinates

Thus 2D Translation Matrix is as follows

1

010

001

tytx

xrsquo yrsquo 1 x y 1 =

Thus 2D Rotation Matrix becomes as

Note Positive values of the rotation angle define the counterclockwise rotation about the rotation point and negative values rotate objects in the clockwise sense

100

0cossin

0sincos

xrsquo yrsquo 1 x y 1 =

Thus 2D Scaling Matrix becomes as

100

00

00

y

x

s

sxrsquo yrsquo 1 x y 1 =

Inverse Transformations

When we apply any transformation to point(xy) we get a new point (xrsquoyrsquo) Some times we need to get original co-ordinate from the transformed point This can be achieved by inverse transformation

2D Inverse Translation Matrix

1

010

0011

yx tt

T

Inverse Transformations

2D Inverse Rotation Matrix

Rotation in clockwise direction making Փ negative

ie cos(-θ)=cos θ sin(-θ)=-sin θ

Matrix becomes

2D Inverse Scaling Matrix

100

0cossin

0sincos1

R

100

01

0

001

1

y

x

s

s

S

2D Composite Transformations

We can setup a sequence of transformations as a composite transformation matrix by calculating the product of the individual transformations

Prsquo=M2M1P

Prsquo=MP

ROTATION ABOUT AN ARBITRARY POINT

2D Composite Transformations

General 2D Pivot-Point Rotation bull Translate

bull Rotate

bull Retranslate

1

010

001

100

0cossin

0sincos

1

010

001

rrrr yxyx

Example

Perform a clockwise rotation of 450 a triangle A(00) B(11) and C(52) (Dec-20052009 10 Marks)

bull about a point (-1-1)

bull About origin

Answer about origin

Arsquo = (00) Brsquo=(radic20) Crsquo=((7 radic2)(-3 radic2))

Ex2 consider a square p(00) Q(010) R(1010) S(100) Rotate the Sq about fixed point R(1010) by an angle 45o (anticlockwise) followed by scaling by 2 units in X direction and 2 units in Y direction (Dec 2006 8 marks)

Prove that two scaling transformations commute that is

S1 S2=S2 S1

Show that transformation matrix for a reflection about a line Y=X is equivalent to reflection to X-axis followed by counterclockwise rotation of 900 (Dec 2008 8 marks)

Perform X-shear and Y-shear on a triangle having A(21) B(43) C(23) Consider the constant value b=c=2

(Dec 2008 8 marks) Answer Arsquo = 45

Brsquo = 1011

Crsquo = 87

Scaling with respect to an arbitrary point

1 Translation

2 Scaling

3 Retranslation

Pictorially shown on next slide

1

010

001

100

00

00

1

010

001

ff

y

x

ff yx

s

s

yx

Other Two Dimensional Transformations

Reflection

Transformation that produces a mirror image of an object

y

x

Reflection

x-axis y-axis

100

010

001

100

010

001

Reflection

origin line x=y

100

010

001

100

001

010

Shear Transformations

Shear

Transformation that distorts the shape of an object such that the transformed shape appears as the object was composed of internal layers that had been caused to slide over each other

y

x

(01) (11)

(10) (00)

y

x

(21) (31)

(10) (00) shx=2

X-Shear

An x-direction shear relative to the x axis

An y-direction shear relative to the y axis

100

01

001

ysh

100

010

01 xsh

yy

yshxx x

Transformations in 3D

Some graphics applications are 2D such as charts graphs maps etc

But to create realistic picture we need to represent picture in 3D

In 3D geometry we need additional third axis z-axis to specify the depth value of the object

Let us see the coordinate systems used in 3D graphics

Lets plot a point in 3D with coordinates (342)

1 first plot the point at(302)

it is on the plane X-Z

2 then lift the point up by 4 units

Y-axis

X-axis

Z-axis

h

e

i

g

h

t

width

Depth

Translation in 3D

Remembering 2D transformations -gt 3x3 matrices take a wild guess what happens to 3D transformations

3D means z-axis comes into picture Giving Depth information for an object

1

0100

0010

0001

1

010

001

zyx

zyxzyx

yx

yxyx

ttt

tttzxytttT

tt

ttyxttT

T=(tx ty tz)

Scale 3D Style

S=(sx sy sz)

zsz

ysy

xsx

z

y

x

1000

000

000

000

)(

pps

s

s

PPsssS

z

y

x

zyx

3D Rotation

In 3D we have to specify the axis of rotation along with the rotation angle

Positive rotation angles produce counterclockwise rotations about a coordinate axis assuming that we are looking in the negative direction along that coordinate axis

3D Rotation

z-axis rotation

xrsquo=x cos θ - y sin θ

yrsquo=x sin θ + y cos θ

zrsquo=z

or Prsquo = Rz(θ)P

1000

0100

00cossin

00sincos

xrsquo yrsquo zrsquo 1

= x y z 1

When we say that we want to rotate a point in anticlockwise direction about z-axis it is very similar to performing a 2D rotation in anticlockwise direction as follows

Fig2D Rotation Fig 3D Rotation

3D Rotation

z-axis rotation

xrsquo=x cos θ - y sin θ

yrsquo=x sin θ + y cos θ

zrsquo=z Transformation equations for rotation abt the other axes

can be obtained with a cyclic permutation of coordinate parameters xy and z That is we use the replacements

xrarr yrarr zrarr x

x-axis rotation

yrsquo=y cos θ - z sin θ

zrsquo=y sin θ + z cos θ

xrsquo=x

y-axis rotation

zrsquo=z cos θ - x sin θ

xrsquo=z sin θ + x cos θ

yrsquo=y

Matrices for anticlockwise 3D rotation

1000

0cossin0

0sincos0

0001

xR

1000

0cos0sin

0010

0sin0cos

yR

1000

0100

00cossin

00sincos

zR

3D Rotation about an arbitrary axis

General Three-Dimensional Rotations

Special case where an object is to be rotated about an axis that is parallel to one of the coordinate axes

1 Translate the object so that the rotation axis coincides with parallel coordinate axis

2 Perform the specified rotation about the axis

3 Translate the object so that the rotation axis is moved back to its original position

3D Rotation of an object about an arbitrary axis

When an object is to rotated about an axis that is not parallel to one of the coordinate axes

1 Translate the object so that the rotation axis passes through the coordinate origin

2 Rotate the object so that the axis of rotation coincides with one of the coordinate axes

3 Perform the specified rotation about the selected coordinate axis

4 Apply inverse rotations to bring the rotation axis back to its original position

5 Apply the inverse translation to bring the rotation axis back to its original spatial position

We can determine the transformation matrices for each step

Assume that rotation axis ie arbitrary axis is defined with two points p1(x1y1z1) and p2(x2y2z2)

Let us say a point on the axis is (PQR)

Initial position of the axis and point is as bellow

p1

p2

(PQR)

Step1 (Translation)transformation of rotation axis so that it passes through the origin

This can be done by moving point P1 to the origin

This repositions the rotation axis and the object as shown

1111

0100

0010

0001

zyx

Tp1

p2

(PQR)

Step2 transform the rotation axis so that it coincides the z-axis

This can be performed in two sub-steps a) Rotate about x-axis to transform axis into xz plane

b) Swing rotation axis around to the z-axis using y-axis rotation

a) Take projection of line segment (000) to (PQR) onto yz plane as shown in fig ie (0QR)

(PQR)

(0QR)

Light

source

x

z

y

Step2-a

Now if we rotate the rotation (arbitrary) axis x-axis so that it lies in X-Z

In this situation its shadow will coincides the z-axis

So we are interested in angle α so that shadow will coincides with z-axis

length of shadow L = radicQ2+R2

sin α = QL

cos α = RL

Therefore the matrix for rotation about x-axis

Rx(α) =

1000

00

00

0001

LRLQ

LQLR

(PQR) (0QR)

L

α

After performing x-axis rotation the rotation axis will lie in x-z plane as shown

When we perform x-axis rotation x-value remains unchanged as axis of rotation is in xz plane so y-coordinate is zero We need to get z-value

L = radicP2+Q2+R2

z-coordinate will be v = radic(L2-P2)

(PQR)

L

P

Step2-b

Now we have to rotate the axis around y-axis so that it coincides the z-axis Let that angle be β

From figure cosβ = VL

sin β = pL

Therefore the transformation

matrix for rotation about y-axis

in clockwise rotation is

1000

00

0010

00

LvLp

LpLv

L

P

β

Ry(β) =

step3

Rotation about z-axis by given angle ie θ ie Rz (θ)

Step 4 and 5 does inverse transformations ie Ry-1 Rx-1 T-1

Therefore the final transformation matrix will be the product of all matrices in sequence

RA= T Rx RyRz Ry-1 Rx-1 T-1

1000

0100

00cossin

00sincos

zR

Reflection wrto xy plane

Consider a point P(xyz) The reflection of this point wrto xy plane is given by pointprsquo(xy-z)

Corresponding matrix is given as

M = 1 0 0

0 1 0

0 0 -1

Page 21: 2D transformations - E-STUDYthirdyearengineering.weebly.com/uploads/3/8/2/8/38286065/... · 2018. 9. 10. · In CG images are made up of series of line segments. Each line segment

Matrix Representations and Homogeneous Coordinates

Prsquo = M1 P + M2

P and Prsquo are row matrices

M1 is a 2 by 2 array containing scaling factors

M2 is a 2 element row matrix containing translational terms

Matrix Representations and Homogeneous Coordinates

To produce a sequence of operations such as scaling followed by rotation then translation we could calculate the transformed coordinates one step at a time

A more efficient approach is to combine transformations without calculating intermediate coordinate values

Matrix Representations and Homogeneous Coordinates

Multiplicative and translational terms for a 2D geometric transformation can be combined into a single matrix if we expand the representations to 3 by 3 matrices

We can use the third column for translation terms and all transformation equations can be expressed as matrix multiplications

Homogenous Coordinates

Letrsquos move our problem into 3D Let point (x y) in 2D be represented by point (x y 1) in

the new space

Scaling our new point by any value a puts us somewhere along a particular line (ax ay a)

A point in 2D can be represented in many ways in the new space

(2 4) ---------- (8 16 4) or (6 12 3) or (2 4 1) or etc

y y

x

x

w

Homogenous Coordinates

bull We can always map back to the original 2D point by dividing by the last coordinate

bull (15 6 3) --- (5 2)

bull (60 40 10) -

bull Why do we use 1 for the last coordinate

bull The fact that all the points along each line can be mapped back to the same point in 2D gives this coordinate system its name ndash homogeneous coordinates

Matrix Representations and Homogeneous Coordinates

Thus 2D Translation Matrix is as follows

1

010

001

tytx

xrsquo yrsquo 1 x y 1 =

Thus 2D Rotation Matrix becomes as

Note Positive values of the rotation angle define the counterclockwise rotation about the rotation point and negative values rotate objects in the clockwise sense

100

0cossin

0sincos

xrsquo yrsquo 1 x y 1 =

Thus 2D Scaling Matrix becomes as

100

00

00

y

x

s

sxrsquo yrsquo 1 x y 1 =

Inverse Transformations

When we apply any transformation to point(xy) we get a new point (xrsquoyrsquo) Some times we need to get original co-ordinate from the transformed point This can be achieved by inverse transformation

2D Inverse Translation Matrix

1

010

0011

yx tt

T

Inverse Transformations

2D Inverse Rotation Matrix

Rotation in clockwise direction making Փ negative

ie cos(-θ)=cos θ sin(-θ)=-sin θ

Matrix becomes

2D Inverse Scaling Matrix

100

0cossin

0sincos1

R

100

01

0

001

1

y

x

s

s

S

2D Composite Transformations

We can setup a sequence of transformations as a composite transformation matrix by calculating the product of the individual transformations

Prsquo=M2M1P

Prsquo=MP

ROTATION ABOUT AN ARBITRARY POINT

2D Composite Transformations

General 2D Pivot-Point Rotation bull Translate

bull Rotate

bull Retranslate

1

010

001

100

0cossin

0sincos

1

010

001

rrrr yxyx

Example

Perform a clockwise rotation of 450 a triangle A(00) B(11) and C(52) (Dec-20052009 10 Marks)

bull about a point (-1-1)

bull About origin

Answer about origin

Arsquo = (00) Brsquo=(radic20) Crsquo=((7 radic2)(-3 radic2))

Ex2 consider a square p(00) Q(010) R(1010) S(100) Rotate the Sq about fixed point R(1010) by an angle 45o (anticlockwise) followed by scaling by 2 units in X direction and 2 units in Y direction (Dec 2006 8 marks)

Prove that two scaling transformations commute that is

S1 S2=S2 S1

Show that transformation matrix for a reflection about a line Y=X is equivalent to reflection to X-axis followed by counterclockwise rotation of 900 (Dec 2008 8 marks)

Perform X-shear and Y-shear on a triangle having A(21) B(43) C(23) Consider the constant value b=c=2

(Dec 2008 8 marks) Answer Arsquo = 45

Brsquo = 1011

Crsquo = 87

Scaling with respect to an arbitrary point

1 Translation

2 Scaling

3 Retranslation

Pictorially shown on next slide

1

010

001

100

00

00

1

010

001

ff

y

x

ff yx

s

s

yx

Other Two Dimensional Transformations

Reflection

Transformation that produces a mirror image of an object

y

x

Reflection

x-axis y-axis

100

010

001

100

010

001

Reflection

origin line x=y

100

010

001

100

001

010

Shear Transformations

Shear

Transformation that distorts the shape of an object such that the transformed shape appears as the object was composed of internal layers that had been caused to slide over each other

y

x

(01) (11)

(10) (00)

y

x

(21) (31)

(10) (00) shx=2

X-Shear

An x-direction shear relative to the x axis

An y-direction shear relative to the y axis

100

01

001

ysh

100

010

01 xsh

yy

yshxx x

Transformations in 3D

Some graphics applications are 2D such as charts graphs maps etc

But to create realistic picture we need to represent picture in 3D

In 3D geometry we need additional third axis z-axis to specify the depth value of the object

Let us see the coordinate systems used in 3D graphics

Lets plot a point in 3D with coordinates (342)

1 first plot the point at(302)

it is on the plane X-Z

2 then lift the point up by 4 units

Y-axis

X-axis

Z-axis

h

e

i

g

h

t

width

Depth

Translation in 3D

Remembering 2D transformations -gt 3x3 matrices take a wild guess what happens to 3D transformations

3D means z-axis comes into picture Giving Depth information for an object

1

0100

0010

0001

1

010

001

zyx

zyxzyx

yx

yxyx

ttt

tttzxytttT

tt

ttyxttT

T=(tx ty tz)

Scale 3D Style

S=(sx sy sz)

zsz

ysy

xsx

z

y

x

1000

000

000

000

)(

pps

s

s

PPsssS

z

y

x

zyx

3D Rotation

In 3D we have to specify the axis of rotation along with the rotation angle

Positive rotation angles produce counterclockwise rotations about a coordinate axis assuming that we are looking in the negative direction along that coordinate axis

3D Rotation

z-axis rotation

xrsquo=x cos θ - y sin θ

yrsquo=x sin θ + y cos θ

zrsquo=z

or Prsquo = Rz(θ)P

1000

0100

00cossin

00sincos

xrsquo yrsquo zrsquo 1

= x y z 1

When we say that we want to rotate a point in anticlockwise direction about z-axis it is very similar to performing a 2D rotation in anticlockwise direction as follows

Fig2D Rotation Fig 3D Rotation

3D Rotation

z-axis rotation

xrsquo=x cos θ - y sin θ

yrsquo=x sin θ + y cos θ

zrsquo=z Transformation equations for rotation abt the other axes

can be obtained with a cyclic permutation of coordinate parameters xy and z That is we use the replacements

xrarr yrarr zrarr x

x-axis rotation

yrsquo=y cos θ - z sin θ

zrsquo=y sin θ + z cos θ

xrsquo=x

y-axis rotation

zrsquo=z cos θ - x sin θ

xrsquo=z sin θ + x cos θ

yrsquo=y

Matrices for anticlockwise 3D rotation

1000

0cossin0

0sincos0

0001

xR

1000

0cos0sin

0010

0sin0cos

yR

1000

0100

00cossin

00sincos

zR

3D Rotation about an arbitrary axis

General Three-Dimensional Rotations

Special case where an object is to be rotated about an axis that is parallel to one of the coordinate axes

1 Translate the object so that the rotation axis coincides with parallel coordinate axis

2 Perform the specified rotation about the axis

3 Translate the object so that the rotation axis is moved back to its original position

3D Rotation of an object about an arbitrary axis

When an object is to rotated about an axis that is not parallel to one of the coordinate axes

1 Translate the object so that the rotation axis passes through the coordinate origin

2 Rotate the object so that the axis of rotation coincides with one of the coordinate axes

3 Perform the specified rotation about the selected coordinate axis

4 Apply inverse rotations to bring the rotation axis back to its original position

5 Apply the inverse translation to bring the rotation axis back to its original spatial position

We can determine the transformation matrices for each step

Assume that rotation axis ie arbitrary axis is defined with two points p1(x1y1z1) and p2(x2y2z2)

Let us say a point on the axis is (PQR)

Initial position of the axis and point is as bellow

p1

p2

(PQR)

Step1 (Translation)transformation of rotation axis so that it passes through the origin

This can be done by moving point P1 to the origin

This repositions the rotation axis and the object as shown

1111

0100

0010

0001

zyx

Tp1

p2

(PQR)

Step2 transform the rotation axis so that it coincides the z-axis

This can be performed in two sub-steps a) Rotate about x-axis to transform axis into xz plane

b) Swing rotation axis around to the z-axis using y-axis rotation

a) Take projection of line segment (000) to (PQR) onto yz plane as shown in fig ie (0QR)

(PQR)

(0QR)

Light

source

x

z

y

Step2-a

Now if we rotate the rotation (arbitrary) axis x-axis so that it lies in X-Z

In this situation its shadow will coincides the z-axis

So we are interested in angle α so that shadow will coincides with z-axis

length of shadow L = radicQ2+R2

sin α = QL

cos α = RL

Therefore the matrix for rotation about x-axis

Rx(α) =

1000

00

00

0001

LRLQ

LQLR

(PQR) (0QR)

L

α

After performing x-axis rotation the rotation axis will lie in x-z plane as shown

When we perform x-axis rotation x-value remains unchanged as axis of rotation is in xz plane so y-coordinate is zero We need to get z-value

L = radicP2+Q2+R2

z-coordinate will be v = radic(L2-P2)

(PQR)

L

P

Step2-b

Now we have to rotate the axis around y-axis so that it coincides the z-axis Let that angle be β

From figure cosβ = VL

sin β = pL

Therefore the transformation

matrix for rotation about y-axis

in clockwise rotation is

1000

00

0010

00

LvLp

LpLv

L

P

β

Ry(β) =

step3

Rotation about z-axis by given angle ie θ ie Rz (θ)

Step 4 and 5 does inverse transformations ie Ry-1 Rx-1 T-1

Therefore the final transformation matrix will be the product of all matrices in sequence

RA= T Rx RyRz Ry-1 Rx-1 T-1

1000

0100

00cossin

00sincos

zR

Reflection wrto xy plane

Consider a point P(xyz) The reflection of this point wrto xy plane is given by pointprsquo(xy-z)

Corresponding matrix is given as

M = 1 0 0

0 1 0

0 0 -1

Page 22: 2D transformations - E-STUDYthirdyearengineering.weebly.com/uploads/3/8/2/8/38286065/... · 2018. 9. 10. · In CG images are made up of series of line segments. Each line segment

Matrix Representations and Homogeneous Coordinates

To produce a sequence of operations such as scaling followed by rotation then translation we could calculate the transformed coordinates one step at a time

A more efficient approach is to combine transformations without calculating intermediate coordinate values

Matrix Representations and Homogeneous Coordinates

Multiplicative and translational terms for a 2D geometric transformation can be combined into a single matrix if we expand the representations to 3 by 3 matrices

We can use the third column for translation terms and all transformation equations can be expressed as matrix multiplications

Homogenous Coordinates

Letrsquos move our problem into 3D Let point (x y) in 2D be represented by point (x y 1) in

the new space

Scaling our new point by any value a puts us somewhere along a particular line (ax ay a)

A point in 2D can be represented in many ways in the new space

(2 4) ---------- (8 16 4) or (6 12 3) or (2 4 1) or etc

y y

x

x

w

Homogenous Coordinates

bull We can always map back to the original 2D point by dividing by the last coordinate

bull (15 6 3) --- (5 2)

bull (60 40 10) -

bull Why do we use 1 for the last coordinate

bull The fact that all the points along each line can be mapped back to the same point in 2D gives this coordinate system its name ndash homogeneous coordinates

Matrix Representations and Homogeneous Coordinates

Thus 2D Translation Matrix is as follows

1

010

001

tytx

xrsquo yrsquo 1 x y 1 =

Thus 2D Rotation Matrix becomes as

Note Positive values of the rotation angle define the counterclockwise rotation about the rotation point and negative values rotate objects in the clockwise sense

100

0cossin

0sincos

xrsquo yrsquo 1 x y 1 =

Thus 2D Scaling Matrix becomes as

100

00

00

y

x

s

sxrsquo yrsquo 1 x y 1 =

Inverse Transformations

When we apply any transformation to point(xy) we get a new point (xrsquoyrsquo) Some times we need to get original co-ordinate from the transformed point This can be achieved by inverse transformation

2D Inverse Translation Matrix

1

010

0011

yx tt

T

Inverse Transformations

2D Inverse Rotation Matrix

Rotation in clockwise direction making Փ negative

ie cos(-θ)=cos θ sin(-θ)=-sin θ

Matrix becomes

2D Inverse Scaling Matrix

100

0cossin

0sincos1

R

100

01

0

001

1

y

x

s

s

S

2D Composite Transformations

We can setup a sequence of transformations as a composite transformation matrix by calculating the product of the individual transformations

Prsquo=M2M1P

Prsquo=MP

ROTATION ABOUT AN ARBITRARY POINT

2D Composite Transformations

General 2D Pivot-Point Rotation bull Translate

bull Rotate

bull Retranslate

1

010

001

100

0cossin

0sincos

1

010

001

rrrr yxyx

Example

Perform a clockwise rotation of 450 a triangle A(00) B(11) and C(52) (Dec-20052009 10 Marks)

bull about a point (-1-1)

bull About origin

Answer about origin

Arsquo = (00) Brsquo=(radic20) Crsquo=((7 radic2)(-3 radic2))

Ex2 consider a square p(00) Q(010) R(1010) S(100) Rotate the Sq about fixed point R(1010) by an angle 45o (anticlockwise) followed by scaling by 2 units in X direction and 2 units in Y direction (Dec 2006 8 marks)

Prove that two scaling transformations commute that is

S1 S2=S2 S1

Show that transformation matrix for a reflection about a line Y=X is equivalent to reflection to X-axis followed by counterclockwise rotation of 900 (Dec 2008 8 marks)

Perform X-shear and Y-shear on a triangle having A(21) B(43) C(23) Consider the constant value b=c=2

(Dec 2008 8 marks) Answer Arsquo = 45

Brsquo = 1011

Crsquo = 87

Scaling with respect to an arbitrary point

1 Translation

2 Scaling

3 Retranslation

Pictorially shown on next slide

1

010

001

100

00

00

1

010

001

ff

y

x

ff yx

s

s

yx

Other Two Dimensional Transformations

Reflection

Transformation that produces a mirror image of an object

y

x

Reflection

x-axis y-axis

100

010

001

100

010

001

Reflection

origin line x=y

100

010

001

100

001

010

Shear Transformations

Shear

Transformation that distorts the shape of an object such that the transformed shape appears as the object was composed of internal layers that had been caused to slide over each other

y

x

(01) (11)

(10) (00)

y

x

(21) (31)

(10) (00) shx=2

X-Shear

An x-direction shear relative to the x axis

An y-direction shear relative to the y axis

100

01

001

ysh

100

010

01 xsh

yy

yshxx x

Transformations in 3D

Some graphics applications are 2D such as charts graphs maps etc

But to create realistic picture we need to represent picture in 3D

In 3D geometry we need additional third axis z-axis to specify the depth value of the object

Let us see the coordinate systems used in 3D graphics

Lets plot a point in 3D with coordinates (342)

1 first plot the point at(302)

it is on the plane X-Z

2 then lift the point up by 4 units

Y-axis

X-axis

Z-axis

h

e

i

g

h

t

width

Depth

Translation in 3D

Remembering 2D transformations -gt 3x3 matrices take a wild guess what happens to 3D transformations

3D means z-axis comes into picture Giving Depth information for an object

1

0100

0010

0001

1

010

001

zyx

zyxzyx

yx

yxyx

ttt

tttzxytttT

tt

ttyxttT

T=(tx ty tz)

Scale 3D Style

S=(sx sy sz)

zsz

ysy

xsx

z

y

x

1000

000

000

000

)(

pps

s

s

PPsssS

z

y

x

zyx

3D Rotation

In 3D we have to specify the axis of rotation along with the rotation angle

Positive rotation angles produce counterclockwise rotations about a coordinate axis assuming that we are looking in the negative direction along that coordinate axis

3D Rotation

z-axis rotation

xrsquo=x cos θ - y sin θ

yrsquo=x sin θ + y cos θ

zrsquo=z

or Prsquo = Rz(θ)P

1000

0100

00cossin

00sincos

xrsquo yrsquo zrsquo 1

= x y z 1

When we say that we want to rotate a point in anticlockwise direction about z-axis it is very similar to performing a 2D rotation in anticlockwise direction as follows

Fig2D Rotation Fig 3D Rotation

3D Rotation

z-axis rotation

xrsquo=x cos θ - y sin θ

yrsquo=x sin θ + y cos θ

zrsquo=z Transformation equations for rotation abt the other axes

can be obtained with a cyclic permutation of coordinate parameters xy and z That is we use the replacements

xrarr yrarr zrarr x

x-axis rotation

yrsquo=y cos θ - z sin θ

zrsquo=y sin θ + z cos θ

xrsquo=x

y-axis rotation

zrsquo=z cos θ - x sin θ

xrsquo=z sin θ + x cos θ

yrsquo=y

Matrices for anticlockwise 3D rotation

1000

0cossin0

0sincos0

0001

xR

1000

0cos0sin

0010

0sin0cos

yR

1000

0100

00cossin

00sincos

zR

3D Rotation about an arbitrary axis

General Three-Dimensional Rotations

Special case where an object is to be rotated about an axis that is parallel to one of the coordinate axes

1 Translate the object so that the rotation axis coincides with parallel coordinate axis

2 Perform the specified rotation about the axis

3 Translate the object so that the rotation axis is moved back to its original position

3D Rotation of an object about an arbitrary axis

When an object is to rotated about an axis that is not parallel to one of the coordinate axes

1 Translate the object so that the rotation axis passes through the coordinate origin

2 Rotate the object so that the axis of rotation coincides with one of the coordinate axes

3 Perform the specified rotation about the selected coordinate axis

4 Apply inverse rotations to bring the rotation axis back to its original position

5 Apply the inverse translation to bring the rotation axis back to its original spatial position

We can determine the transformation matrices for each step

Assume that rotation axis ie arbitrary axis is defined with two points p1(x1y1z1) and p2(x2y2z2)

Let us say a point on the axis is (PQR)

Initial position of the axis and point is as bellow

p1

p2

(PQR)

Step1 (Translation)transformation of rotation axis so that it passes through the origin

This can be done by moving point P1 to the origin

This repositions the rotation axis and the object as shown

1111

0100

0010

0001

zyx

Tp1

p2

(PQR)

Step2 transform the rotation axis so that it coincides the z-axis

This can be performed in two sub-steps a) Rotate about x-axis to transform axis into xz plane

b) Swing rotation axis around to the z-axis using y-axis rotation

a) Take projection of line segment (000) to (PQR) onto yz plane as shown in fig ie (0QR)

(PQR)

(0QR)

Light

source

x

z

y

Step2-a

Now if we rotate the rotation (arbitrary) axis x-axis so that it lies in X-Z

In this situation its shadow will coincides the z-axis

So we are interested in angle α so that shadow will coincides with z-axis

length of shadow L = radicQ2+R2

sin α = QL

cos α = RL

Therefore the matrix for rotation about x-axis

Rx(α) =

1000

00

00

0001

LRLQ

LQLR

(PQR) (0QR)

L

α

After performing x-axis rotation the rotation axis will lie in x-z plane as shown

When we perform x-axis rotation x-value remains unchanged as axis of rotation is in xz plane so y-coordinate is zero We need to get z-value

L = radicP2+Q2+R2

z-coordinate will be v = radic(L2-P2)

(PQR)

L

P

Step2-b

Now we have to rotate the axis around y-axis so that it coincides the z-axis Let that angle be β

From figure cosβ = VL

sin β = pL

Therefore the transformation

matrix for rotation about y-axis

in clockwise rotation is

1000

00

0010

00

LvLp

LpLv

L

P

β

Ry(β) =

step3

Rotation about z-axis by given angle ie θ ie Rz (θ)

Step 4 and 5 does inverse transformations ie Ry-1 Rx-1 T-1

Therefore the final transformation matrix will be the product of all matrices in sequence

RA= T Rx RyRz Ry-1 Rx-1 T-1

1000

0100

00cossin

00sincos

zR

Reflection wrto xy plane

Consider a point P(xyz) The reflection of this point wrto xy plane is given by pointprsquo(xy-z)

Corresponding matrix is given as

M = 1 0 0

0 1 0

0 0 -1

Page 23: 2D transformations - E-STUDYthirdyearengineering.weebly.com/uploads/3/8/2/8/38286065/... · 2018. 9. 10. · In CG images are made up of series of line segments. Each line segment

Matrix Representations and Homogeneous Coordinates

Multiplicative and translational terms for a 2D geometric transformation can be combined into a single matrix if we expand the representations to 3 by 3 matrices

We can use the third column for translation terms and all transformation equations can be expressed as matrix multiplications

Homogenous Coordinates

Letrsquos move our problem into 3D Let point (x y) in 2D be represented by point (x y 1) in

the new space

Scaling our new point by any value a puts us somewhere along a particular line (ax ay a)

A point in 2D can be represented in many ways in the new space

(2 4) ---------- (8 16 4) or (6 12 3) or (2 4 1) or etc

y y

x

x

w

Homogenous Coordinates

bull We can always map back to the original 2D point by dividing by the last coordinate

bull (15 6 3) --- (5 2)

bull (60 40 10) -

bull Why do we use 1 for the last coordinate

bull The fact that all the points along each line can be mapped back to the same point in 2D gives this coordinate system its name ndash homogeneous coordinates

Matrix Representations and Homogeneous Coordinates

Thus 2D Translation Matrix is as follows

1

010

001

tytx

xrsquo yrsquo 1 x y 1 =

Thus 2D Rotation Matrix becomes as

Note Positive values of the rotation angle define the counterclockwise rotation about the rotation point and negative values rotate objects in the clockwise sense

100

0cossin

0sincos

xrsquo yrsquo 1 x y 1 =

Thus 2D Scaling Matrix becomes as

100

00

00

y

x

s

sxrsquo yrsquo 1 x y 1 =

Inverse Transformations

When we apply any transformation to point(xy) we get a new point (xrsquoyrsquo) Some times we need to get original co-ordinate from the transformed point This can be achieved by inverse transformation

2D Inverse Translation Matrix

1

010

0011

yx tt

T

Inverse Transformations

2D Inverse Rotation Matrix

Rotation in clockwise direction making Փ negative

ie cos(-θ)=cos θ sin(-θ)=-sin θ

Matrix becomes

2D Inverse Scaling Matrix

100

0cossin

0sincos1

R

100

01

0

001

1

y

x

s

s

S

2D Composite Transformations

We can setup a sequence of transformations as a composite transformation matrix by calculating the product of the individual transformations

Prsquo=M2M1P

Prsquo=MP

ROTATION ABOUT AN ARBITRARY POINT

2D Composite Transformations

General 2D Pivot-Point Rotation bull Translate

bull Rotate

bull Retranslate

1

010

001

100

0cossin

0sincos

1

010

001

rrrr yxyx

Example

Perform a clockwise rotation of 450 a triangle A(00) B(11) and C(52) (Dec-20052009 10 Marks)

bull about a point (-1-1)

bull About origin

Answer about origin

Arsquo = (00) Brsquo=(radic20) Crsquo=((7 radic2)(-3 radic2))

Ex2 consider a square p(00) Q(010) R(1010) S(100) Rotate the Sq about fixed point R(1010) by an angle 45o (anticlockwise) followed by scaling by 2 units in X direction and 2 units in Y direction (Dec 2006 8 marks)

Prove that two scaling transformations commute that is

S1 S2=S2 S1

Show that transformation matrix for a reflection about a line Y=X is equivalent to reflection to X-axis followed by counterclockwise rotation of 900 (Dec 2008 8 marks)

Perform X-shear and Y-shear on a triangle having A(21) B(43) C(23) Consider the constant value b=c=2

(Dec 2008 8 marks) Answer Arsquo = 45

Brsquo = 1011

Crsquo = 87

Scaling with respect to an arbitrary point

1 Translation

2 Scaling

3 Retranslation

Pictorially shown on next slide

1

010

001

100

00

00

1

010

001

ff

y

x

ff yx

s

s

yx

Other Two Dimensional Transformations

Reflection

Transformation that produces a mirror image of an object

y

x

Reflection

x-axis y-axis

100

010

001

100

010

001

Reflection

origin line x=y

100

010

001

100

001

010

Shear Transformations

Shear

Transformation that distorts the shape of an object such that the transformed shape appears as the object was composed of internal layers that had been caused to slide over each other

y

x

(01) (11)

(10) (00)

y

x

(21) (31)

(10) (00) shx=2

X-Shear

An x-direction shear relative to the x axis

An y-direction shear relative to the y axis

100

01

001

ysh

100

010

01 xsh

yy

yshxx x

Transformations in 3D

Some graphics applications are 2D such as charts graphs maps etc

But to create realistic picture we need to represent picture in 3D

In 3D geometry we need additional third axis z-axis to specify the depth value of the object

Let us see the coordinate systems used in 3D graphics

Lets plot a point in 3D with coordinates (342)

1 first plot the point at(302)

it is on the plane X-Z

2 then lift the point up by 4 units

Y-axis

X-axis

Z-axis

h

e

i

g

h

t

width

Depth

Translation in 3D

Remembering 2D transformations -gt 3x3 matrices take a wild guess what happens to 3D transformations

3D means z-axis comes into picture Giving Depth information for an object

1

0100

0010

0001

1

010

001

zyx

zyxzyx

yx

yxyx

ttt

tttzxytttT

tt

ttyxttT

T=(tx ty tz)

Scale 3D Style

S=(sx sy sz)

zsz

ysy

xsx

z

y

x

1000

000

000

000

)(

pps

s

s

PPsssS

z

y

x

zyx

3D Rotation

In 3D we have to specify the axis of rotation along with the rotation angle

Positive rotation angles produce counterclockwise rotations about a coordinate axis assuming that we are looking in the negative direction along that coordinate axis

3D Rotation

z-axis rotation

xrsquo=x cos θ - y sin θ

yrsquo=x sin θ + y cos θ

zrsquo=z

or Prsquo = Rz(θ)P

1000

0100

00cossin

00sincos

xrsquo yrsquo zrsquo 1

= x y z 1

When we say that we want to rotate a point in anticlockwise direction about z-axis it is very similar to performing a 2D rotation in anticlockwise direction as follows

Fig2D Rotation Fig 3D Rotation

3D Rotation

z-axis rotation

xrsquo=x cos θ - y sin θ

yrsquo=x sin θ + y cos θ

zrsquo=z Transformation equations for rotation abt the other axes

can be obtained with a cyclic permutation of coordinate parameters xy and z That is we use the replacements

xrarr yrarr zrarr x

x-axis rotation

yrsquo=y cos θ - z sin θ

zrsquo=y sin θ + z cos θ

xrsquo=x

y-axis rotation

zrsquo=z cos θ - x sin θ

xrsquo=z sin θ + x cos θ

yrsquo=y

Matrices for anticlockwise 3D rotation

1000

0cossin0

0sincos0

0001

xR

1000

0cos0sin

0010

0sin0cos

yR

1000

0100

00cossin

00sincos

zR

3D Rotation about an arbitrary axis

General Three-Dimensional Rotations

Special case where an object is to be rotated about an axis that is parallel to one of the coordinate axes

1 Translate the object so that the rotation axis coincides with parallel coordinate axis

2 Perform the specified rotation about the axis

3 Translate the object so that the rotation axis is moved back to its original position

3D Rotation of an object about an arbitrary axis

When an object is to rotated about an axis that is not parallel to one of the coordinate axes

1 Translate the object so that the rotation axis passes through the coordinate origin

2 Rotate the object so that the axis of rotation coincides with one of the coordinate axes

3 Perform the specified rotation about the selected coordinate axis

4 Apply inverse rotations to bring the rotation axis back to its original position

5 Apply the inverse translation to bring the rotation axis back to its original spatial position

We can determine the transformation matrices for each step

Assume that rotation axis ie arbitrary axis is defined with two points p1(x1y1z1) and p2(x2y2z2)

Let us say a point on the axis is (PQR)

Initial position of the axis and point is as bellow

p1

p2

(PQR)

Step1 (Translation)transformation of rotation axis so that it passes through the origin

This can be done by moving point P1 to the origin

This repositions the rotation axis and the object as shown

1111

0100

0010

0001

zyx

Tp1

p2

(PQR)

Step2 transform the rotation axis so that it coincides the z-axis

This can be performed in two sub-steps a) Rotate about x-axis to transform axis into xz plane

b) Swing rotation axis around to the z-axis using y-axis rotation

a) Take projection of line segment (000) to (PQR) onto yz plane as shown in fig ie (0QR)

(PQR)

(0QR)

Light

source

x

z

y

Step2-a

Now if we rotate the rotation (arbitrary) axis x-axis so that it lies in X-Z

In this situation its shadow will coincides the z-axis

So we are interested in angle α so that shadow will coincides with z-axis

length of shadow L = radicQ2+R2

sin α = QL

cos α = RL

Therefore the matrix for rotation about x-axis

Rx(α) =

1000

00

00

0001

LRLQ

LQLR

(PQR) (0QR)

L

α

After performing x-axis rotation the rotation axis will lie in x-z plane as shown

When we perform x-axis rotation x-value remains unchanged as axis of rotation is in xz plane so y-coordinate is zero We need to get z-value

L = radicP2+Q2+R2

z-coordinate will be v = radic(L2-P2)

(PQR)

L

P

Step2-b

Now we have to rotate the axis around y-axis so that it coincides the z-axis Let that angle be β

From figure cosβ = VL

sin β = pL

Therefore the transformation

matrix for rotation about y-axis

in clockwise rotation is

1000

00

0010

00

LvLp

LpLv

L

P

β

Ry(β) =

step3

Rotation about z-axis by given angle ie θ ie Rz (θ)

Step 4 and 5 does inverse transformations ie Ry-1 Rx-1 T-1

Therefore the final transformation matrix will be the product of all matrices in sequence

RA= T Rx RyRz Ry-1 Rx-1 T-1

1000

0100

00cossin

00sincos

zR

Reflection wrto xy plane

Consider a point P(xyz) The reflection of this point wrto xy plane is given by pointprsquo(xy-z)

Corresponding matrix is given as

M = 1 0 0

0 1 0

0 0 -1

Page 24: 2D transformations - E-STUDYthirdyearengineering.weebly.com/uploads/3/8/2/8/38286065/... · 2018. 9. 10. · In CG images are made up of series of line segments. Each line segment

Homogenous Coordinates

Letrsquos move our problem into 3D Let point (x y) in 2D be represented by point (x y 1) in

the new space

Scaling our new point by any value a puts us somewhere along a particular line (ax ay a)

A point in 2D can be represented in many ways in the new space

(2 4) ---------- (8 16 4) or (6 12 3) or (2 4 1) or etc

y y

x

x

w

Homogenous Coordinates

bull We can always map back to the original 2D point by dividing by the last coordinate

bull (15 6 3) --- (5 2)

bull (60 40 10) -

bull Why do we use 1 for the last coordinate

bull The fact that all the points along each line can be mapped back to the same point in 2D gives this coordinate system its name ndash homogeneous coordinates

Matrix Representations and Homogeneous Coordinates

Thus 2D Translation Matrix is as follows

1

010

001

tytx

xrsquo yrsquo 1 x y 1 =

Thus 2D Rotation Matrix becomes as

Note Positive values of the rotation angle define the counterclockwise rotation about the rotation point and negative values rotate objects in the clockwise sense

100

0cossin

0sincos

xrsquo yrsquo 1 x y 1 =

Thus 2D Scaling Matrix becomes as

100

00

00

y

x

s

sxrsquo yrsquo 1 x y 1 =

Inverse Transformations

When we apply any transformation to point(xy) we get a new point (xrsquoyrsquo) Some times we need to get original co-ordinate from the transformed point This can be achieved by inverse transformation

2D Inverse Translation Matrix

1

010

0011

yx tt

T

Inverse Transformations

2D Inverse Rotation Matrix

Rotation in clockwise direction making Փ negative

ie cos(-θ)=cos θ sin(-θ)=-sin θ

Matrix becomes

2D Inverse Scaling Matrix

100

0cossin

0sincos1

R

100

01

0

001

1

y

x

s

s

S

2D Composite Transformations

We can setup a sequence of transformations as a composite transformation matrix by calculating the product of the individual transformations

Prsquo=M2M1P

Prsquo=MP

ROTATION ABOUT AN ARBITRARY POINT

2D Composite Transformations

General 2D Pivot-Point Rotation bull Translate

bull Rotate

bull Retranslate

1

010

001

100

0cossin

0sincos

1

010

001

rrrr yxyx

Example

Perform a clockwise rotation of 450 a triangle A(00) B(11) and C(52) (Dec-20052009 10 Marks)

bull about a point (-1-1)

bull About origin

Answer about origin

Arsquo = (00) Brsquo=(radic20) Crsquo=((7 radic2)(-3 radic2))

Ex2 consider a square p(00) Q(010) R(1010) S(100) Rotate the Sq about fixed point R(1010) by an angle 45o (anticlockwise) followed by scaling by 2 units in X direction and 2 units in Y direction (Dec 2006 8 marks)

Prove that two scaling transformations commute that is

S1 S2=S2 S1

Show that transformation matrix for a reflection about a line Y=X is equivalent to reflection to X-axis followed by counterclockwise rotation of 900 (Dec 2008 8 marks)

Perform X-shear and Y-shear on a triangle having A(21) B(43) C(23) Consider the constant value b=c=2

(Dec 2008 8 marks) Answer Arsquo = 45

Brsquo = 1011

Crsquo = 87

Scaling with respect to an arbitrary point

1 Translation

2 Scaling

3 Retranslation

Pictorially shown on next slide

1

010

001

100

00

00

1

010

001

ff

y

x

ff yx

s

s

yx

Other Two Dimensional Transformations

Reflection

Transformation that produces a mirror image of an object

y

x

Reflection

x-axis y-axis

100

010

001

100

010

001

Reflection

origin line x=y

100

010

001

100

001

010

Shear Transformations

Shear

Transformation that distorts the shape of an object such that the transformed shape appears as the object was composed of internal layers that had been caused to slide over each other

y

x

(01) (11)

(10) (00)

y

x

(21) (31)

(10) (00) shx=2

X-Shear

An x-direction shear relative to the x axis

An y-direction shear relative to the y axis

100

01

001

ysh

100

010

01 xsh

yy

yshxx x

Transformations in 3D

Some graphics applications are 2D such as charts graphs maps etc

But to create realistic picture we need to represent picture in 3D

In 3D geometry we need additional third axis z-axis to specify the depth value of the object

Let us see the coordinate systems used in 3D graphics

Lets plot a point in 3D with coordinates (342)

1 first plot the point at(302)

it is on the plane X-Z

2 then lift the point up by 4 units

Y-axis

X-axis

Z-axis

h

e

i

g

h

t

width

Depth

Translation in 3D

Remembering 2D transformations -gt 3x3 matrices take a wild guess what happens to 3D transformations

3D means z-axis comes into picture Giving Depth information for an object

1

0100

0010

0001

1

010

001

zyx

zyxzyx

yx

yxyx

ttt

tttzxytttT

tt

ttyxttT

T=(tx ty tz)

Scale 3D Style

S=(sx sy sz)

zsz

ysy

xsx

z

y

x

1000

000

000

000

)(

pps

s

s

PPsssS

z

y

x

zyx

3D Rotation

In 3D we have to specify the axis of rotation along with the rotation angle

Positive rotation angles produce counterclockwise rotations about a coordinate axis assuming that we are looking in the negative direction along that coordinate axis

3D Rotation

z-axis rotation

xrsquo=x cos θ - y sin θ

yrsquo=x sin θ + y cos θ

zrsquo=z

or Prsquo = Rz(θ)P

1000

0100

00cossin

00sincos

xrsquo yrsquo zrsquo 1

= x y z 1

When we say that we want to rotate a point in anticlockwise direction about z-axis it is very similar to performing a 2D rotation in anticlockwise direction as follows

Fig2D Rotation Fig 3D Rotation

3D Rotation

z-axis rotation

xrsquo=x cos θ - y sin θ

yrsquo=x sin θ + y cos θ

zrsquo=z Transformation equations for rotation abt the other axes

can be obtained with a cyclic permutation of coordinate parameters xy and z That is we use the replacements

xrarr yrarr zrarr x

x-axis rotation

yrsquo=y cos θ - z sin θ

zrsquo=y sin θ + z cos θ

xrsquo=x

y-axis rotation

zrsquo=z cos θ - x sin θ

xrsquo=z sin θ + x cos θ

yrsquo=y

Matrices for anticlockwise 3D rotation

1000

0cossin0

0sincos0

0001

xR

1000

0cos0sin

0010

0sin0cos

yR

1000

0100

00cossin

00sincos

zR

3D Rotation about an arbitrary axis

General Three-Dimensional Rotations

Special case where an object is to be rotated about an axis that is parallel to one of the coordinate axes

1 Translate the object so that the rotation axis coincides with parallel coordinate axis

2 Perform the specified rotation about the axis

3 Translate the object so that the rotation axis is moved back to its original position

3D Rotation of an object about an arbitrary axis

When an object is to rotated about an axis that is not parallel to one of the coordinate axes

1 Translate the object so that the rotation axis passes through the coordinate origin

2 Rotate the object so that the axis of rotation coincides with one of the coordinate axes

3 Perform the specified rotation about the selected coordinate axis

4 Apply inverse rotations to bring the rotation axis back to its original position

5 Apply the inverse translation to bring the rotation axis back to its original spatial position

We can determine the transformation matrices for each step

Assume that rotation axis ie arbitrary axis is defined with two points p1(x1y1z1) and p2(x2y2z2)

Let us say a point on the axis is (PQR)

Initial position of the axis and point is as bellow

p1

p2

(PQR)

Step1 (Translation)transformation of rotation axis so that it passes through the origin

This can be done by moving point P1 to the origin

This repositions the rotation axis and the object as shown

1111

0100

0010

0001

zyx

Tp1

p2

(PQR)

Step2 transform the rotation axis so that it coincides the z-axis

This can be performed in two sub-steps a) Rotate about x-axis to transform axis into xz plane

b) Swing rotation axis around to the z-axis using y-axis rotation

a) Take projection of line segment (000) to (PQR) onto yz plane as shown in fig ie (0QR)

(PQR)

(0QR)

Light

source

x

z

y

Step2-a

Now if we rotate the rotation (arbitrary) axis x-axis so that it lies in X-Z

In this situation its shadow will coincides the z-axis

So we are interested in angle α so that shadow will coincides with z-axis

length of shadow L = radicQ2+R2

sin α = QL

cos α = RL

Therefore the matrix for rotation about x-axis

Rx(α) =

1000

00

00

0001

LRLQ

LQLR

(PQR) (0QR)

L

α

After performing x-axis rotation the rotation axis will lie in x-z plane as shown

When we perform x-axis rotation x-value remains unchanged as axis of rotation is in xz plane so y-coordinate is zero We need to get z-value

L = radicP2+Q2+R2

z-coordinate will be v = radic(L2-P2)

(PQR)

L

P

Step2-b

Now we have to rotate the axis around y-axis so that it coincides the z-axis Let that angle be β

From figure cosβ = VL

sin β = pL

Therefore the transformation

matrix for rotation about y-axis

in clockwise rotation is

1000

00

0010

00

LvLp

LpLv

L

P

β

Ry(β) =

step3

Rotation about z-axis by given angle ie θ ie Rz (θ)

Step 4 and 5 does inverse transformations ie Ry-1 Rx-1 T-1

Therefore the final transformation matrix will be the product of all matrices in sequence

RA= T Rx RyRz Ry-1 Rx-1 T-1

1000

0100

00cossin

00sincos

zR

Reflection wrto xy plane

Consider a point P(xyz) The reflection of this point wrto xy plane is given by pointprsquo(xy-z)

Corresponding matrix is given as

M = 1 0 0

0 1 0

0 0 -1

Page 25: 2D transformations - E-STUDYthirdyearengineering.weebly.com/uploads/3/8/2/8/38286065/... · 2018. 9. 10. · In CG images are made up of series of line segments. Each line segment

Homogenous Coordinates

bull We can always map back to the original 2D point by dividing by the last coordinate

bull (15 6 3) --- (5 2)

bull (60 40 10) -

bull Why do we use 1 for the last coordinate

bull The fact that all the points along each line can be mapped back to the same point in 2D gives this coordinate system its name ndash homogeneous coordinates

Matrix Representations and Homogeneous Coordinates

Thus 2D Translation Matrix is as follows

1

010

001

tytx

xrsquo yrsquo 1 x y 1 =

Thus 2D Rotation Matrix becomes as

Note Positive values of the rotation angle define the counterclockwise rotation about the rotation point and negative values rotate objects in the clockwise sense

100

0cossin

0sincos

xrsquo yrsquo 1 x y 1 =

Thus 2D Scaling Matrix becomes as

100

00

00

y

x

s

sxrsquo yrsquo 1 x y 1 =

Inverse Transformations

When we apply any transformation to point(xy) we get a new point (xrsquoyrsquo) Some times we need to get original co-ordinate from the transformed point This can be achieved by inverse transformation

2D Inverse Translation Matrix

1

010

0011

yx tt

T

Inverse Transformations

2D Inverse Rotation Matrix

Rotation in clockwise direction making Փ negative

ie cos(-θ)=cos θ sin(-θ)=-sin θ

Matrix becomes

2D Inverse Scaling Matrix

100

0cossin

0sincos1

R

100

01

0

001

1

y

x

s

s

S

2D Composite Transformations

We can setup a sequence of transformations as a composite transformation matrix by calculating the product of the individual transformations

Prsquo=M2M1P

Prsquo=MP

ROTATION ABOUT AN ARBITRARY POINT

2D Composite Transformations

General 2D Pivot-Point Rotation bull Translate

bull Rotate

bull Retranslate

1

010

001

100

0cossin

0sincos

1

010

001

rrrr yxyx

Example

Perform a clockwise rotation of 450 a triangle A(00) B(11) and C(52) (Dec-20052009 10 Marks)

bull about a point (-1-1)

bull About origin

Answer about origin

Arsquo = (00) Brsquo=(radic20) Crsquo=((7 radic2)(-3 radic2))

Ex2 consider a square p(00) Q(010) R(1010) S(100) Rotate the Sq about fixed point R(1010) by an angle 45o (anticlockwise) followed by scaling by 2 units in X direction and 2 units in Y direction (Dec 2006 8 marks)

Prove that two scaling transformations commute that is

S1 S2=S2 S1

Show that transformation matrix for a reflection about a line Y=X is equivalent to reflection to X-axis followed by counterclockwise rotation of 900 (Dec 2008 8 marks)

Perform X-shear and Y-shear on a triangle having A(21) B(43) C(23) Consider the constant value b=c=2

(Dec 2008 8 marks) Answer Arsquo = 45

Brsquo = 1011

Crsquo = 87

Scaling with respect to an arbitrary point

1 Translation

2 Scaling

3 Retranslation

Pictorially shown on next slide

1

010

001

100

00

00

1

010

001

ff

y

x

ff yx

s

s

yx

Other Two Dimensional Transformations

Reflection

Transformation that produces a mirror image of an object

y

x

Reflection

x-axis y-axis

100

010

001

100

010

001

Reflection

origin line x=y

100

010

001

100

001

010

Shear Transformations

Shear

Transformation that distorts the shape of an object such that the transformed shape appears as the object was composed of internal layers that had been caused to slide over each other

y

x

(01) (11)

(10) (00)

y

x

(21) (31)

(10) (00) shx=2

X-Shear

An x-direction shear relative to the x axis

An y-direction shear relative to the y axis

100

01

001

ysh

100

010

01 xsh

yy

yshxx x

Transformations in 3D

Some graphics applications are 2D such as charts graphs maps etc

But to create realistic picture we need to represent picture in 3D

In 3D geometry we need additional third axis z-axis to specify the depth value of the object

Let us see the coordinate systems used in 3D graphics

Lets plot a point in 3D with coordinates (342)

1 first plot the point at(302)

it is on the plane X-Z

2 then lift the point up by 4 units

Y-axis

X-axis

Z-axis

h

e

i

g

h

t

width

Depth

Translation in 3D

Remembering 2D transformations -gt 3x3 matrices take a wild guess what happens to 3D transformations

3D means z-axis comes into picture Giving Depth information for an object

1

0100

0010

0001

1

010

001

zyx

zyxzyx

yx

yxyx

ttt

tttzxytttT

tt

ttyxttT

T=(tx ty tz)

Scale 3D Style

S=(sx sy sz)

zsz

ysy

xsx

z

y

x

1000

000

000

000

)(

pps

s

s

PPsssS

z

y

x

zyx

3D Rotation

In 3D we have to specify the axis of rotation along with the rotation angle

Positive rotation angles produce counterclockwise rotations about a coordinate axis assuming that we are looking in the negative direction along that coordinate axis

3D Rotation

z-axis rotation

xrsquo=x cos θ - y sin θ

yrsquo=x sin θ + y cos θ

zrsquo=z

or Prsquo = Rz(θ)P

1000

0100

00cossin

00sincos

xrsquo yrsquo zrsquo 1

= x y z 1

When we say that we want to rotate a point in anticlockwise direction about z-axis it is very similar to performing a 2D rotation in anticlockwise direction as follows

Fig2D Rotation Fig 3D Rotation

3D Rotation

z-axis rotation

xrsquo=x cos θ - y sin θ

yrsquo=x sin θ + y cos θ

zrsquo=z Transformation equations for rotation abt the other axes

can be obtained with a cyclic permutation of coordinate parameters xy and z That is we use the replacements

xrarr yrarr zrarr x

x-axis rotation

yrsquo=y cos θ - z sin θ

zrsquo=y sin θ + z cos θ

xrsquo=x

y-axis rotation

zrsquo=z cos θ - x sin θ

xrsquo=z sin θ + x cos θ

yrsquo=y

Matrices for anticlockwise 3D rotation

1000

0cossin0

0sincos0

0001

xR

1000

0cos0sin

0010

0sin0cos

yR

1000

0100

00cossin

00sincos

zR

3D Rotation about an arbitrary axis

General Three-Dimensional Rotations

Special case where an object is to be rotated about an axis that is parallel to one of the coordinate axes

1 Translate the object so that the rotation axis coincides with parallel coordinate axis

2 Perform the specified rotation about the axis

3 Translate the object so that the rotation axis is moved back to its original position

3D Rotation of an object about an arbitrary axis

When an object is to rotated about an axis that is not parallel to one of the coordinate axes

1 Translate the object so that the rotation axis passes through the coordinate origin

2 Rotate the object so that the axis of rotation coincides with one of the coordinate axes

3 Perform the specified rotation about the selected coordinate axis

4 Apply inverse rotations to bring the rotation axis back to its original position

5 Apply the inverse translation to bring the rotation axis back to its original spatial position

We can determine the transformation matrices for each step

Assume that rotation axis ie arbitrary axis is defined with two points p1(x1y1z1) and p2(x2y2z2)

Let us say a point on the axis is (PQR)

Initial position of the axis and point is as bellow

p1

p2

(PQR)

Step1 (Translation)transformation of rotation axis so that it passes through the origin

This can be done by moving point P1 to the origin

This repositions the rotation axis and the object as shown

1111

0100

0010

0001

zyx

Tp1

p2

(PQR)

Step2 transform the rotation axis so that it coincides the z-axis

This can be performed in two sub-steps a) Rotate about x-axis to transform axis into xz plane

b) Swing rotation axis around to the z-axis using y-axis rotation

a) Take projection of line segment (000) to (PQR) onto yz plane as shown in fig ie (0QR)

(PQR)

(0QR)

Light

source

x

z

y

Step2-a

Now if we rotate the rotation (arbitrary) axis x-axis so that it lies in X-Z

In this situation its shadow will coincides the z-axis

So we are interested in angle α so that shadow will coincides with z-axis

length of shadow L = radicQ2+R2

sin α = QL

cos α = RL

Therefore the matrix for rotation about x-axis

Rx(α) =

1000

00

00

0001

LRLQ

LQLR

(PQR) (0QR)

L

α

After performing x-axis rotation the rotation axis will lie in x-z plane as shown

When we perform x-axis rotation x-value remains unchanged as axis of rotation is in xz plane so y-coordinate is zero We need to get z-value

L = radicP2+Q2+R2

z-coordinate will be v = radic(L2-P2)

(PQR)

L

P

Step2-b

Now we have to rotate the axis around y-axis so that it coincides the z-axis Let that angle be β

From figure cosβ = VL

sin β = pL

Therefore the transformation

matrix for rotation about y-axis

in clockwise rotation is

1000

00

0010

00

LvLp

LpLv

L

P

β

Ry(β) =

step3

Rotation about z-axis by given angle ie θ ie Rz (θ)

Step 4 and 5 does inverse transformations ie Ry-1 Rx-1 T-1

Therefore the final transformation matrix will be the product of all matrices in sequence

RA= T Rx RyRz Ry-1 Rx-1 T-1

1000

0100

00cossin

00sincos

zR

Reflection wrto xy plane

Consider a point P(xyz) The reflection of this point wrto xy plane is given by pointprsquo(xy-z)

Corresponding matrix is given as

M = 1 0 0

0 1 0

0 0 -1

Page 26: 2D transformations - E-STUDYthirdyearengineering.weebly.com/uploads/3/8/2/8/38286065/... · 2018. 9. 10. · In CG images are made up of series of line segments. Each line segment

Matrix Representations and Homogeneous Coordinates

Thus 2D Translation Matrix is as follows

1

010

001

tytx

xrsquo yrsquo 1 x y 1 =

Thus 2D Rotation Matrix becomes as

Note Positive values of the rotation angle define the counterclockwise rotation about the rotation point and negative values rotate objects in the clockwise sense

100

0cossin

0sincos

xrsquo yrsquo 1 x y 1 =

Thus 2D Scaling Matrix becomes as

100

00

00

y

x

s

sxrsquo yrsquo 1 x y 1 =

Inverse Transformations

When we apply any transformation to point(xy) we get a new point (xrsquoyrsquo) Some times we need to get original co-ordinate from the transformed point This can be achieved by inverse transformation

2D Inverse Translation Matrix

1

010

0011

yx tt

T

Inverse Transformations

2D Inverse Rotation Matrix

Rotation in clockwise direction making Փ negative

ie cos(-θ)=cos θ sin(-θ)=-sin θ

Matrix becomes

2D Inverse Scaling Matrix

100

0cossin

0sincos1

R

100

01

0

001

1

y

x

s

s

S

2D Composite Transformations

We can setup a sequence of transformations as a composite transformation matrix by calculating the product of the individual transformations

Prsquo=M2M1P

Prsquo=MP

ROTATION ABOUT AN ARBITRARY POINT

2D Composite Transformations

General 2D Pivot-Point Rotation bull Translate

bull Rotate

bull Retranslate

1

010

001

100

0cossin

0sincos

1

010

001

rrrr yxyx

Example

Perform a clockwise rotation of 450 a triangle A(00) B(11) and C(52) (Dec-20052009 10 Marks)

bull about a point (-1-1)

bull About origin

Answer about origin

Arsquo = (00) Brsquo=(radic20) Crsquo=((7 radic2)(-3 radic2))

Ex2 consider a square p(00) Q(010) R(1010) S(100) Rotate the Sq about fixed point R(1010) by an angle 45o (anticlockwise) followed by scaling by 2 units in X direction and 2 units in Y direction (Dec 2006 8 marks)

Prove that two scaling transformations commute that is

S1 S2=S2 S1

Show that transformation matrix for a reflection about a line Y=X is equivalent to reflection to X-axis followed by counterclockwise rotation of 900 (Dec 2008 8 marks)

Perform X-shear and Y-shear on a triangle having A(21) B(43) C(23) Consider the constant value b=c=2

(Dec 2008 8 marks) Answer Arsquo = 45

Brsquo = 1011

Crsquo = 87

Scaling with respect to an arbitrary point

1 Translation

2 Scaling

3 Retranslation

Pictorially shown on next slide

1

010

001

100

00

00

1

010

001

ff

y

x

ff yx

s

s

yx

Other Two Dimensional Transformations

Reflection

Transformation that produces a mirror image of an object

y

x

Reflection

x-axis y-axis

100

010

001

100

010

001

Reflection

origin line x=y

100

010

001

100

001

010

Shear Transformations

Shear

Transformation that distorts the shape of an object such that the transformed shape appears as the object was composed of internal layers that had been caused to slide over each other

y

x

(01) (11)

(10) (00)

y

x

(21) (31)

(10) (00) shx=2

X-Shear

An x-direction shear relative to the x axis

An y-direction shear relative to the y axis

100

01

001

ysh

100

010

01 xsh

yy

yshxx x

Transformations in 3D

Some graphics applications are 2D such as charts graphs maps etc

But to create realistic picture we need to represent picture in 3D

In 3D geometry we need additional third axis z-axis to specify the depth value of the object

Let us see the coordinate systems used in 3D graphics

Lets plot a point in 3D with coordinates (342)

1 first plot the point at(302)

it is on the plane X-Z

2 then lift the point up by 4 units

Y-axis

X-axis

Z-axis

h

e

i

g

h

t

width

Depth

Translation in 3D

Remembering 2D transformations -gt 3x3 matrices take a wild guess what happens to 3D transformations

3D means z-axis comes into picture Giving Depth information for an object

1

0100

0010

0001

1

010

001

zyx

zyxzyx

yx

yxyx

ttt

tttzxytttT

tt

ttyxttT

T=(tx ty tz)

Scale 3D Style

S=(sx sy sz)

zsz

ysy

xsx

z

y

x

1000

000

000

000

)(

pps

s

s

PPsssS

z

y

x

zyx

3D Rotation

In 3D we have to specify the axis of rotation along with the rotation angle

Positive rotation angles produce counterclockwise rotations about a coordinate axis assuming that we are looking in the negative direction along that coordinate axis

3D Rotation

z-axis rotation

xrsquo=x cos θ - y sin θ

yrsquo=x sin θ + y cos θ

zrsquo=z

or Prsquo = Rz(θ)P

1000

0100

00cossin

00sincos

xrsquo yrsquo zrsquo 1

= x y z 1

When we say that we want to rotate a point in anticlockwise direction about z-axis it is very similar to performing a 2D rotation in anticlockwise direction as follows

Fig2D Rotation Fig 3D Rotation

3D Rotation

z-axis rotation

xrsquo=x cos θ - y sin θ

yrsquo=x sin θ + y cos θ

zrsquo=z Transformation equations for rotation abt the other axes

can be obtained with a cyclic permutation of coordinate parameters xy and z That is we use the replacements

xrarr yrarr zrarr x

x-axis rotation

yrsquo=y cos θ - z sin θ

zrsquo=y sin θ + z cos θ

xrsquo=x

y-axis rotation

zrsquo=z cos θ - x sin θ

xrsquo=z sin θ + x cos θ

yrsquo=y

Matrices for anticlockwise 3D rotation

1000

0cossin0

0sincos0

0001

xR

1000

0cos0sin

0010

0sin0cos

yR

1000

0100

00cossin

00sincos

zR

3D Rotation about an arbitrary axis

General Three-Dimensional Rotations

Special case where an object is to be rotated about an axis that is parallel to one of the coordinate axes

1 Translate the object so that the rotation axis coincides with parallel coordinate axis

2 Perform the specified rotation about the axis

3 Translate the object so that the rotation axis is moved back to its original position

3D Rotation of an object about an arbitrary axis

When an object is to rotated about an axis that is not parallel to one of the coordinate axes

1 Translate the object so that the rotation axis passes through the coordinate origin

2 Rotate the object so that the axis of rotation coincides with one of the coordinate axes

3 Perform the specified rotation about the selected coordinate axis

4 Apply inverse rotations to bring the rotation axis back to its original position

5 Apply the inverse translation to bring the rotation axis back to its original spatial position

We can determine the transformation matrices for each step

Assume that rotation axis ie arbitrary axis is defined with two points p1(x1y1z1) and p2(x2y2z2)

Let us say a point on the axis is (PQR)

Initial position of the axis and point is as bellow

p1

p2

(PQR)

Step1 (Translation)transformation of rotation axis so that it passes through the origin

This can be done by moving point P1 to the origin

This repositions the rotation axis and the object as shown

1111

0100

0010

0001

zyx

Tp1

p2

(PQR)

Step2 transform the rotation axis so that it coincides the z-axis

This can be performed in two sub-steps a) Rotate about x-axis to transform axis into xz plane

b) Swing rotation axis around to the z-axis using y-axis rotation

a) Take projection of line segment (000) to (PQR) onto yz plane as shown in fig ie (0QR)

(PQR)

(0QR)

Light

source

x

z

y

Step2-a

Now if we rotate the rotation (arbitrary) axis x-axis so that it lies in X-Z

In this situation its shadow will coincides the z-axis

So we are interested in angle α so that shadow will coincides with z-axis

length of shadow L = radicQ2+R2

sin α = QL

cos α = RL

Therefore the matrix for rotation about x-axis

Rx(α) =

1000

00

00

0001

LRLQ

LQLR

(PQR) (0QR)

L

α

After performing x-axis rotation the rotation axis will lie in x-z plane as shown

When we perform x-axis rotation x-value remains unchanged as axis of rotation is in xz plane so y-coordinate is zero We need to get z-value

L = radicP2+Q2+R2

z-coordinate will be v = radic(L2-P2)

(PQR)

L

P

Step2-b

Now we have to rotate the axis around y-axis so that it coincides the z-axis Let that angle be β

From figure cosβ = VL

sin β = pL

Therefore the transformation

matrix for rotation about y-axis

in clockwise rotation is

1000

00

0010

00

LvLp

LpLv

L

P

β

Ry(β) =

step3

Rotation about z-axis by given angle ie θ ie Rz (θ)

Step 4 and 5 does inverse transformations ie Ry-1 Rx-1 T-1

Therefore the final transformation matrix will be the product of all matrices in sequence

RA= T Rx RyRz Ry-1 Rx-1 T-1

1000

0100

00cossin

00sincos

zR

Reflection wrto xy plane

Consider a point P(xyz) The reflection of this point wrto xy plane is given by pointprsquo(xy-z)

Corresponding matrix is given as

M = 1 0 0

0 1 0

0 0 -1

Page 27: 2D transformations - E-STUDYthirdyearengineering.weebly.com/uploads/3/8/2/8/38286065/... · 2018. 9. 10. · In CG images are made up of series of line segments. Each line segment

Thus 2D Rotation Matrix becomes as

Note Positive values of the rotation angle define the counterclockwise rotation about the rotation point and negative values rotate objects in the clockwise sense

100

0cossin

0sincos

xrsquo yrsquo 1 x y 1 =

Thus 2D Scaling Matrix becomes as

100

00

00

y

x

s

sxrsquo yrsquo 1 x y 1 =

Inverse Transformations

When we apply any transformation to point(xy) we get a new point (xrsquoyrsquo) Some times we need to get original co-ordinate from the transformed point This can be achieved by inverse transformation

2D Inverse Translation Matrix

1

010

0011

yx tt

T

Inverse Transformations

2D Inverse Rotation Matrix

Rotation in clockwise direction making Փ negative

ie cos(-θ)=cos θ sin(-θ)=-sin θ

Matrix becomes

2D Inverse Scaling Matrix

100

0cossin

0sincos1

R

100

01

0

001

1

y

x

s

s

S

2D Composite Transformations

We can setup a sequence of transformations as a composite transformation matrix by calculating the product of the individual transformations

Prsquo=M2M1P

Prsquo=MP

ROTATION ABOUT AN ARBITRARY POINT

2D Composite Transformations

General 2D Pivot-Point Rotation bull Translate

bull Rotate

bull Retranslate

1

010

001

100

0cossin

0sincos

1

010

001

rrrr yxyx

Example

Perform a clockwise rotation of 450 a triangle A(00) B(11) and C(52) (Dec-20052009 10 Marks)

bull about a point (-1-1)

bull About origin

Answer about origin

Arsquo = (00) Brsquo=(radic20) Crsquo=((7 radic2)(-3 radic2))

Ex2 consider a square p(00) Q(010) R(1010) S(100) Rotate the Sq about fixed point R(1010) by an angle 45o (anticlockwise) followed by scaling by 2 units in X direction and 2 units in Y direction (Dec 2006 8 marks)

Prove that two scaling transformations commute that is

S1 S2=S2 S1

Show that transformation matrix for a reflection about a line Y=X is equivalent to reflection to X-axis followed by counterclockwise rotation of 900 (Dec 2008 8 marks)

Perform X-shear and Y-shear on a triangle having A(21) B(43) C(23) Consider the constant value b=c=2

(Dec 2008 8 marks) Answer Arsquo = 45

Brsquo = 1011

Crsquo = 87

Scaling with respect to an arbitrary point

1 Translation

2 Scaling

3 Retranslation

Pictorially shown on next slide

1

010

001

100

00

00

1

010

001

ff

y

x

ff yx

s

s

yx

Other Two Dimensional Transformations

Reflection

Transformation that produces a mirror image of an object

y

x

Reflection

x-axis y-axis

100

010

001

100

010

001

Reflection

origin line x=y

100

010

001

100

001

010

Shear Transformations

Shear

Transformation that distorts the shape of an object such that the transformed shape appears as the object was composed of internal layers that had been caused to slide over each other

y

x

(01) (11)

(10) (00)

y

x

(21) (31)

(10) (00) shx=2

X-Shear

An x-direction shear relative to the x axis

An y-direction shear relative to the y axis

100

01

001

ysh

100

010

01 xsh

yy

yshxx x

Transformations in 3D

Some graphics applications are 2D such as charts graphs maps etc

But to create realistic picture we need to represent picture in 3D

In 3D geometry we need additional third axis z-axis to specify the depth value of the object

Let us see the coordinate systems used in 3D graphics

Lets plot a point in 3D with coordinates (342)

1 first plot the point at(302)

it is on the plane X-Z

2 then lift the point up by 4 units

Y-axis

X-axis

Z-axis

h

e

i

g

h

t

width

Depth

Translation in 3D

Remembering 2D transformations -gt 3x3 matrices take a wild guess what happens to 3D transformations

3D means z-axis comes into picture Giving Depth information for an object

1

0100

0010

0001

1

010

001

zyx

zyxzyx

yx

yxyx

ttt

tttzxytttT

tt

ttyxttT

T=(tx ty tz)

Scale 3D Style

S=(sx sy sz)

zsz

ysy

xsx

z

y

x

1000

000

000

000

)(

pps

s

s

PPsssS

z

y

x

zyx

3D Rotation

In 3D we have to specify the axis of rotation along with the rotation angle

Positive rotation angles produce counterclockwise rotations about a coordinate axis assuming that we are looking in the negative direction along that coordinate axis

3D Rotation

z-axis rotation

xrsquo=x cos θ - y sin θ

yrsquo=x sin θ + y cos θ

zrsquo=z

or Prsquo = Rz(θ)P

1000

0100

00cossin

00sincos

xrsquo yrsquo zrsquo 1

= x y z 1

When we say that we want to rotate a point in anticlockwise direction about z-axis it is very similar to performing a 2D rotation in anticlockwise direction as follows

Fig2D Rotation Fig 3D Rotation

3D Rotation

z-axis rotation

xrsquo=x cos θ - y sin θ

yrsquo=x sin θ + y cos θ

zrsquo=z Transformation equations for rotation abt the other axes

can be obtained with a cyclic permutation of coordinate parameters xy and z That is we use the replacements

xrarr yrarr zrarr x

x-axis rotation

yrsquo=y cos θ - z sin θ

zrsquo=y sin θ + z cos θ

xrsquo=x

y-axis rotation

zrsquo=z cos θ - x sin θ

xrsquo=z sin θ + x cos θ

yrsquo=y

Matrices for anticlockwise 3D rotation

1000

0cossin0

0sincos0

0001

xR

1000

0cos0sin

0010

0sin0cos

yR

1000

0100

00cossin

00sincos

zR

3D Rotation about an arbitrary axis

General Three-Dimensional Rotations

Special case where an object is to be rotated about an axis that is parallel to one of the coordinate axes

1 Translate the object so that the rotation axis coincides with parallel coordinate axis

2 Perform the specified rotation about the axis

3 Translate the object so that the rotation axis is moved back to its original position

3D Rotation of an object about an arbitrary axis

When an object is to rotated about an axis that is not parallel to one of the coordinate axes

1 Translate the object so that the rotation axis passes through the coordinate origin

2 Rotate the object so that the axis of rotation coincides with one of the coordinate axes

3 Perform the specified rotation about the selected coordinate axis

4 Apply inverse rotations to bring the rotation axis back to its original position

5 Apply the inverse translation to bring the rotation axis back to its original spatial position

We can determine the transformation matrices for each step

Assume that rotation axis ie arbitrary axis is defined with two points p1(x1y1z1) and p2(x2y2z2)

Let us say a point on the axis is (PQR)

Initial position of the axis and point is as bellow

p1

p2

(PQR)

Step1 (Translation)transformation of rotation axis so that it passes through the origin

This can be done by moving point P1 to the origin

This repositions the rotation axis and the object as shown

1111

0100

0010

0001

zyx

Tp1

p2

(PQR)

Step2 transform the rotation axis so that it coincides the z-axis

This can be performed in two sub-steps a) Rotate about x-axis to transform axis into xz plane

b) Swing rotation axis around to the z-axis using y-axis rotation

a) Take projection of line segment (000) to (PQR) onto yz plane as shown in fig ie (0QR)

(PQR)

(0QR)

Light

source

x

z

y

Step2-a

Now if we rotate the rotation (arbitrary) axis x-axis so that it lies in X-Z

In this situation its shadow will coincides the z-axis

So we are interested in angle α so that shadow will coincides with z-axis

length of shadow L = radicQ2+R2

sin α = QL

cos α = RL

Therefore the matrix for rotation about x-axis

Rx(α) =

1000

00

00

0001

LRLQ

LQLR

(PQR) (0QR)

L

α

After performing x-axis rotation the rotation axis will lie in x-z plane as shown

When we perform x-axis rotation x-value remains unchanged as axis of rotation is in xz plane so y-coordinate is zero We need to get z-value

L = radicP2+Q2+R2

z-coordinate will be v = radic(L2-P2)

(PQR)

L

P

Step2-b

Now we have to rotate the axis around y-axis so that it coincides the z-axis Let that angle be β

From figure cosβ = VL

sin β = pL

Therefore the transformation

matrix for rotation about y-axis

in clockwise rotation is

1000

00

0010

00

LvLp

LpLv

L

P

β

Ry(β) =

step3

Rotation about z-axis by given angle ie θ ie Rz (θ)

Step 4 and 5 does inverse transformations ie Ry-1 Rx-1 T-1

Therefore the final transformation matrix will be the product of all matrices in sequence

RA= T Rx RyRz Ry-1 Rx-1 T-1

1000

0100

00cossin

00sincos

zR

Reflection wrto xy plane

Consider a point P(xyz) The reflection of this point wrto xy plane is given by pointprsquo(xy-z)

Corresponding matrix is given as

M = 1 0 0

0 1 0

0 0 -1

Page 28: 2D transformations - E-STUDYthirdyearengineering.weebly.com/uploads/3/8/2/8/38286065/... · 2018. 9. 10. · In CG images are made up of series of line segments. Each line segment

Thus 2D Scaling Matrix becomes as

100

00

00

y

x

s

sxrsquo yrsquo 1 x y 1 =

Inverse Transformations

When we apply any transformation to point(xy) we get a new point (xrsquoyrsquo) Some times we need to get original co-ordinate from the transformed point This can be achieved by inverse transformation

2D Inverse Translation Matrix

1

010

0011

yx tt

T

Inverse Transformations

2D Inverse Rotation Matrix

Rotation in clockwise direction making Փ negative

ie cos(-θ)=cos θ sin(-θ)=-sin θ

Matrix becomes

2D Inverse Scaling Matrix

100

0cossin

0sincos1

R

100

01

0

001

1

y

x

s

s

S

2D Composite Transformations

We can setup a sequence of transformations as a composite transformation matrix by calculating the product of the individual transformations

Prsquo=M2M1P

Prsquo=MP

ROTATION ABOUT AN ARBITRARY POINT

2D Composite Transformations

General 2D Pivot-Point Rotation bull Translate

bull Rotate

bull Retranslate

1

010

001

100

0cossin

0sincos

1

010

001

rrrr yxyx

Example

Perform a clockwise rotation of 450 a triangle A(00) B(11) and C(52) (Dec-20052009 10 Marks)

bull about a point (-1-1)

bull About origin

Answer about origin

Arsquo = (00) Brsquo=(radic20) Crsquo=((7 radic2)(-3 radic2))

Ex2 consider a square p(00) Q(010) R(1010) S(100) Rotate the Sq about fixed point R(1010) by an angle 45o (anticlockwise) followed by scaling by 2 units in X direction and 2 units in Y direction (Dec 2006 8 marks)

Prove that two scaling transformations commute that is

S1 S2=S2 S1

Show that transformation matrix for a reflection about a line Y=X is equivalent to reflection to X-axis followed by counterclockwise rotation of 900 (Dec 2008 8 marks)

Perform X-shear and Y-shear on a triangle having A(21) B(43) C(23) Consider the constant value b=c=2

(Dec 2008 8 marks) Answer Arsquo = 45

Brsquo = 1011

Crsquo = 87

Scaling with respect to an arbitrary point

1 Translation

2 Scaling

3 Retranslation

Pictorially shown on next slide

1

010

001

100

00

00

1

010

001

ff

y

x

ff yx

s

s

yx

Other Two Dimensional Transformations

Reflection

Transformation that produces a mirror image of an object

y

x

Reflection

x-axis y-axis

100

010

001

100

010

001

Reflection

origin line x=y

100

010

001

100

001

010

Shear Transformations

Shear

Transformation that distorts the shape of an object such that the transformed shape appears as the object was composed of internal layers that had been caused to slide over each other

y

x

(01) (11)

(10) (00)

y

x

(21) (31)

(10) (00) shx=2

X-Shear

An x-direction shear relative to the x axis

An y-direction shear relative to the y axis

100

01

001

ysh

100

010

01 xsh

yy

yshxx x

Transformations in 3D

Some graphics applications are 2D such as charts graphs maps etc

But to create realistic picture we need to represent picture in 3D

In 3D geometry we need additional third axis z-axis to specify the depth value of the object

Let us see the coordinate systems used in 3D graphics

Lets plot a point in 3D with coordinates (342)

1 first plot the point at(302)

it is on the plane X-Z

2 then lift the point up by 4 units

Y-axis

X-axis

Z-axis

h

e

i

g

h

t

width

Depth

Translation in 3D

Remembering 2D transformations -gt 3x3 matrices take a wild guess what happens to 3D transformations

3D means z-axis comes into picture Giving Depth information for an object

1

0100

0010

0001

1

010

001

zyx

zyxzyx

yx

yxyx

ttt

tttzxytttT

tt

ttyxttT

T=(tx ty tz)

Scale 3D Style

S=(sx sy sz)

zsz

ysy

xsx

z

y

x

1000

000

000

000

)(

pps

s

s

PPsssS

z

y

x

zyx

3D Rotation

In 3D we have to specify the axis of rotation along with the rotation angle

Positive rotation angles produce counterclockwise rotations about a coordinate axis assuming that we are looking in the negative direction along that coordinate axis

3D Rotation

z-axis rotation

xrsquo=x cos θ - y sin θ

yrsquo=x sin θ + y cos θ

zrsquo=z

or Prsquo = Rz(θ)P

1000

0100

00cossin

00sincos

xrsquo yrsquo zrsquo 1

= x y z 1

When we say that we want to rotate a point in anticlockwise direction about z-axis it is very similar to performing a 2D rotation in anticlockwise direction as follows

Fig2D Rotation Fig 3D Rotation

3D Rotation

z-axis rotation

xrsquo=x cos θ - y sin θ

yrsquo=x sin θ + y cos θ

zrsquo=z Transformation equations for rotation abt the other axes

can be obtained with a cyclic permutation of coordinate parameters xy and z That is we use the replacements

xrarr yrarr zrarr x

x-axis rotation

yrsquo=y cos θ - z sin θ

zrsquo=y sin θ + z cos θ

xrsquo=x

y-axis rotation

zrsquo=z cos θ - x sin θ

xrsquo=z sin θ + x cos θ

yrsquo=y

Matrices for anticlockwise 3D rotation

1000

0cossin0

0sincos0

0001

xR

1000

0cos0sin

0010

0sin0cos

yR

1000

0100

00cossin

00sincos

zR

3D Rotation about an arbitrary axis

General Three-Dimensional Rotations

Special case where an object is to be rotated about an axis that is parallel to one of the coordinate axes

1 Translate the object so that the rotation axis coincides with parallel coordinate axis

2 Perform the specified rotation about the axis

3 Translate the object so that the rotation axis is moved back to its original position

3D Rotation of an object about an arbitrary axis

When an object is to rotated about an axis that is not parallel to one of the coordinate axes

1 Translate the object so that the rotation axis passes through the coordinate origin

2 Rotate the object so that the axis of rotation coincides with one of the coordinate axes

3 Perform the specified rotation about the selected coordinate axis

4 Apply inverse rotations to bring the rotation axis back to its original position

5 Apply the inverse translation to bring the rotation axis back to its original spatial position

We can determine the transformation matrices for each step

Assume that rotation axis ie arbitrary axis is defined with two points p1(x1y1z1) and p2(x2y2z2)

Let us say a point on the axis is (PQR)

Initial position of the axis and point is as bellow

p1

p2

(PQR)

Step1 (Translation)transformation of rotation axis so that it passes through the origin

This can be done by moving point P1 to the origin

This repositions the rotation axis and the object as shown

1111

0100

0010

0001

zyx

Tp1

p2

(PQR)

Step2 transform the rotation axis so that it coincides the z-axis

This can be performed in two sub-steps a) Rotate about x-axis to transform axis into xz plane

b) Swing rotation axis around to the z-axis using y-axis rotation

a) Take projection of line segment (000) to (PQR) onto yz plane as shown in fig ie (0QR)

(PQR)

(0QR)

Light

source

x

z

y

Step2-a

Now if we rotate the rotation (arbitrary) axis x-axis so that it lies in X-Z

In this situation its shadow will coincides the z-axis

So we are interested in angle α so that shadow will coincides with z-axis

length of shadow L = radicQ2+R2

sin α = QL

cos α = RL

Therefore the matrix for rotation about x-axis

Rx(α) =

1000

00

00

0001

LRLQ

LQLR

(PQR) (0QR)

L

α

After performing x-axis rotation the rotation axis will lie in x-z plane as shown

When we perform x-axis rotation x-value remains unchanged as axis of rotation is in xz plane so y-coordinate is zero We need to get z-value

L = radicP2+Q2+R2

z-coordinate will be v = radic(L2-P2)

(PQR)

L

P

Step2-b

Now we have to rotate the axis around y-axis so that it coincides the z-axis Let that angle be β

From figure cosβ = VL

sin β = pL

Therefore the transformation

matrix for rotation about y-axis

in clockwise rotation is

1000

00

0010

00

LvLp

LpLv

L

P

β

Ry(β) =

step3

Rotation about z-axis by given angle ie θ ie Rz (θ)

Step 4 and 5 does inverse transformations ie Ry-1 Rx-1 T-1

Therefore the final transformation matrix will be the product of all matrices in sequence

RA= T Rx RyRz Ry-1 Rx-1 T-1

1000

0100

00cossin

00sincos

zR

Reflection wrto xy plane

Consider a point P(xyz) The reflection of this point wrto xy plane is given by pointprsquo(xy-z)

Corresponding matrix is given as

M = 1 0 0

0 1 0

0 0 -1

Page 29: 2D transformations - E-STUDYthirdyearengineering.weebly.com/uploads/3/8/2/8/38286065/... · 2018. 9. 10. · In CG images are made up of series of line segments. Each line segment

Inverse Transformations

When we apply any transformation to point(xy) we get a new point (xrsquoyrsquo) Some times we need to get original co-ordinate from the transformed point This can be achieved by inverse transformation

2D Inverse Translation Matrix

1

010

0011

yx tt

T

Inverse Transformations

2D Inverse Rotation Matrix

Rotation in clockwise direction making Փ negative

ie cos(-θ)=cos θ sin(-θ)=-sin θ

Matrix becomes

2D Inverse Scaling Matrix

100

0cossin

0sincos1

R

100

01

0

001

1

y

x

s

s

S

2D Composite Transformations

We can setup a sequence of transformations as a composite transformation matrix by calculating the product of the individual transformations

Prsquo=M2M1P

Prsquo=MP

ROTATION ABOUT AN ARBITRARY POINT

2D Composite Transformations

General 2D Pivot-Point Rotation bull Translate

bull Rotate

bull Retranslate

1

010

001

100

0cossin

0sincos

1

010

001

rrrr yxyx

Example

Perform a clockwise rotation of 450 a triangle A(00) B(11) and C(52) (Dec-20052009 10 Marks)

bull about a point (-1-1)

bull About origin

Answer about origin

Arsquo = (00) Brsquo=(radic20) Crsquo=((7 radic2)(-3 radic2))

Ex2 consider a square p(00) Q(010) R(1010) S(100) Rotate the Sq about fixed point R(1010) by an angle 45o (anticlockwise) followed by scaling by 2 units in X direction and 2 units in Y direction (Dec 2006 8 marks)

Prove that two scaling transformations commute that is

S1 S2=S2 S1

Show that transformation matrix for a reflection about a line Y=X is equivalent to reflection to X-axis followed by counterclockwise rotation of 900 (Dec 2008 8 marks)

Perform X-shear and Y-shear on a triangle having A(21) B(43) C(23) Consider the constant value b=c=2

(Dec 2008 8 marks) Answer Arsquo = 45

Brsquo = 1011

Crsquo = 87

Scaling with respect to an arbitrary point

1 Translation

2 Scaling

3 Retranslation

Pictorially shown on next slide

1

010

001

100

00

00

1

010

001

ff

y

x

ff yx

s

s

yx

Other Two Dimensional Transformations

Reflection

Transformation that produces a mirror image of an object

y

x

Reflection

x-axis y-axis

100

010

001

100

010

001

Reflection

origin line x=y

100

010

001

100

001

010

Shear Transformations

Shear

Transformation that distorts the shape of an object such that the transformed shape appears as the object was composed of internal layers that had been caused to slide over each other

y

x

(01) (11)

(10) (00)

y

x

(21) (31)

(10) (00) shx=2

X-Shear

An x-direction shear relative to the x axis

An y-direction shear relative to the y axis

100

01

001

ysh

100

010

01 xsh

yy

yshxx x

Transformations in 3D

Some graphics applications are 2D such as charts graphs maps etc

But to create realistic picture we need to represent picture in 3D

In 3D geometry we need additional third axis z-axis to specify the depth value of the object

Let us see the coordinate systems used in 3D graphics

Lets plot a point in 3D with coordinates (342)

1 first plot the point at(302)

it is on the plane X-Z

2 then lift the point up by 4 units

Y-axis

X-axis

Z-axis

h

e

i

g

h

t

width

Depth

Translation in 3D

Remembering 2D transformations -gt 3x3 matrices take a wild guess what happens to 3D transformations

3D means z-axis comes into picture Giving Depth information for an object

1

0100

0010

0001

1

010

001

zyx

zyxzyx

yx

yxyx

ttt

tttzxytttT

tt

ttyxttT

T=(tx ty tz)

Scale 3D Style

S=(sx sy sz)

zsz

ysy

xsx

z

y

x

1000

000

000

000

)(

pps

s

s

PPsssS

z

y

x

zyx

3D Rotation

In 3D we have to specify the axis of rotation along with the rotation angle

Positive rotation angles produce counterclockwise rotations about a coordinate axis assuming that we are looking in the negative direction along that coordinate axis

3D Rotation

z-axis rotation

xrsquo=x cos θ - y sin θ

yrsquo=x sin θ + y cos θ

zrsquo=z

or Prsquo = Rz(θ)P

1000

0100

00cossin

00sincos

xrsquo yrsquo zrsquo 1

= x y z 1

When we say that we want to rotate a point in anticlockwise direction about z-axis it is very similar to performing a 2D rotation in anticlockwise direction as follows

Fig2D Rotation Fig 3D Rotation

3D Rotation

z-axis rotation

xrsquo=x cos θ - y sin θ

yrsquo=x sin θ + y cos θ

zrsquo=z Transformation equations for rotation abt the other axes

can be obtained with a cyclic permutation of coordinate parameters xy and z That is we use the replacements

xrarr yrarr zrarr x

x-axis rotation

yrsquo=y cos θ - z sin θ

zrsquo=y sin θ + z cos θ

xrsquo=x

y-axis rotation

zrsquo=z cos θ - x sin θ

xrsquo=z sin θ + x cos θ

yrsquo=y

Matrices for anticlockwise 3D rotation

1000

0cossin0

0sincos0

0001

xR

1000

0cos0sin

0010

0sin0cos

yR

1000

0100

00cossin

00sincos

zR

3D Rotation about an arbitrary axis

General Three-Dimensional Rotations

Special case where an object is to be rotated about an axis that is parallel to one of the coordinate axes

1 Translate the object so that the rotation axis coincides with parallel coordinate axis

2 Perform the specified rotation about the axis

3 Translate the object so that the rotation axis is moved back to its original position

3D Rotation of an object about an arbitrary axis

When an object is to rotated about an axis that is not parallel to one of the coordinate axes

1 Translate the object so that the rotation axis passes through the coordinate origin

2 Rotate the object so that the axis of rotation coincides with one of the coordinate axes

3 Perform the specified rotation about the selected coordinate axis

4 Apply inverse rotations to bring the rotation axis back to its original position

5 Apply the inverse translation to bring the rotation axis back to its original spatial position

We can determine the transformation matrices for each step

Assume that rotation axis ie arbitrary axis is defined with two points p1(x1y1z1) and p2(x2y2z2)

Let us say a point on the axis is (PQR)

Initial position of the axis and point is as bellow

p1

p2

(PQR)

Step1 (Translation)transformation of rotation axis so that it passes through the origin

This can be done by moving point P1 to the origin

This repositions the rotation axis and the object as shown

1111

0100

0010

0001

zyx

Tp1

p2

(PQR)

Step2 transform the rotation axis so that it coincides the z-axis

This can be performed in two sub-steps a) Rotate about x-axis to transform axis into xz plane

b) Swing rotation axis around to the z-axis using y-axis rotation

a) Take projection of line segment (000) to (PQR) onto yz plane as shown in fig ie (0QR)

(PQR)

(0QR)

Light

source

x

z

y

Step2-a

Now if we rotate the rotation (arbitrary) axis x-axis so that it lies in X-Z

In this situation its shadow will coincides the z-axis

So we are interested in angle α so that shadow will coincides with z-axis

length of shadow L = radicQ2+R2

sin α = QL

cos α = RL

Therefore the matrix for rotation about x-axis

Rx(α) =

1000

00

00

0001

LRLQ

LQLR

(PQR) (0QR)

L

α

After performing x-axis rotation the rotation axis will lie in x-z plane as shown

When we perform x-axis rotation x-value remains unchanged as axis of rotation is in xz plane so y-coordinate is zero We need to get z-value

L = radicP2+Q2+R2

z-coordinate will be v = radic(L2-P2)

(PQR)

L

P

Step2-b

Now we have to rotate the axis around y-axis so that it coincides the z-axis Let that angle be β

From figure cosβ = VL

sin β = pL

Therefore the transformation

matrix for rotation about y-axis

in clockwise rotation is

1000

00

0010

00

LvLp

LpLv

L

P

β

Ry(β) =

step3

Rotation about z-axis by given angle ie θ ie Rz (θ)

Step 4 and 5 does inverse transformations ie Ry-1 Rx-1 T-1

Therefore the final transformation matrix will be the product of all matrices in sequence

RA= T Rx RyRz Ry-1 Rx-1 T-1

1000

0100

00cossin

00sincos

zR

Reflection wrto xy plane

Consider a point P(xyz) The reflection of this point wrto xy plane is given by pointprsquo(xy-z)

Corresponding matrix is given as

M = 1 0 0

0 1 0

0 0 -1

Page 30: 2D transformations - E-STUDYthirdyearengineering.weebly.com/uploads/3/8/2/8/38286065/... · 2018. 9. 10. · In CG images are made up of series of line segments. Each line segment

Inverse Transformations

2D Inverse Rotation Matrix

Rotation in clockwise direction making Փ negative

ie cos(-θ)=cos θ sin(-θ)=-sin θ

Matrix becomes

2D Inverse Scaling Matrix

100

0cossin

0sincos1

R

100

01

0

001

1

y

x

s

s

S

2D Composite Transformations

We can setup a sequence of transformations as a composite transformation matrix by calculating the product of the individual transformations

Prsquo=M2M1P

Prsquo=MP

ROTATION ABOUT AN ARBITRARY POINT

2D Composite Transformations

General 2D Pivot-Point Rotation bull Translate

bull Rotate

bull Retranslate

1

010

001

100

0cossin

0sincos

1

010

001

rrrr yxyx

Example

Perform a clockwise rotation of 450 a triangle A(00) B(11) and C(52) (Dec-20052009 10 Marks)

bull about a point (-1-1)

bull About origin

Answer about origin

Arsquo = (00) Brsquo=(radic20) Crsquo=((7 radic2)(-3 radic2))

Ex2 consider a square p(00) Q(010) R(1010) S(100) Rotate the Sq about fixed point R(1010) by an angle 45o (anticlockwise) followed by scaling by 2 units in X direction and 2 units in Y direction (Dec 2006 8 marks)

Prove that two scaling transformations commute that is

S1 S2=S2 S1

Show that transformation matrix for a reflection about a line Y=X is equivalent to reflection to X-axis followed by counterclockwise rotation of 900 (Dec 2008 8 marks)

Perform X-shear and Y-shear on a triangle having A(21) B(43) C(23) Consider the constant value b=c=2

(Dec 2008 8 marks) Answer Arsquo = 45

Brsquo = 1011

Crsquo = 87

Scaling with respect to an arbitrary point

1 Translation

2 Scaling

3 Retranslation

Pictorially shown on next slide

1

010

001

100

00

00

1

010

001

ff

y

x

ff yx

s

s

yx

Other Two Dimensional Transformations

Reflection

Transformation that produces a mirror image of an object

y

x

Reflection

x-axis y-axis

100

010

001

100

010

001

Reflection

origin line x=y

100

010

001

100

001

010

Shear Transformations

Shear

Transformation that distorts the shape of an object such that the transformed shape appears as the object was composed of internal layers that had been caused to slide over each other

y

x

(01) (11)

(10) (00)

y

x

(21) (31)

(10) (00) shx=2

X-Shear

An x-direction shear relative to the x axis

An y-direction shear relative to the y axis

100

01

001

ysh

100

010

01 xsh

yy

yshxx x

Transformations in 3D

Some graphics applications are 2D such as charts graphs maps etc

But to create realistic picture we need to represent picture in 3D

In 3D geometry we need additional third axis z-axis to specify the depth value of the object

Let us see the coordinate systems used in 3D graphics

Lets plot a point in 3D with coordinates (342)

1 first plot the point at(302)

it is on the plane X-Z

2 then lift the point up by 4 units

Y-axis

X-axis

Z-axis

h

e

i

g

h

t

width

Depth

Translation in 3D

Remembering 2D transformations -gt 3x3 matrices take a wild guess what happens to 3D transformations

3D means z-axis comes into picture Giving Depth information for an object

1

0100

0010

0001

1

010

001

zyx

zyxzyx

yx

yxyx

ttt

tttzxytttT

tt

ttyxttT

T=(tx ty tz)

Scale 3D Style

S=(sx sy sz)

zsz

ysy

xsx

z

y

x

1000

000

000

000

)(

pps

s

s

PPsssS

z

y

x

zyx

3D Rotation

In 3D we have to specify the axis of rotation along with the rotation angle

Positive rotation angles produce counterclockwise rotations about a coordinate axis assuming that we are looking in the negative direction along that coordinate axis

3D Rotation

z-axis rotation

xrsquo=x cos θ - y sin θ

yrsquo=x sin θ + y cos θ

zrsquo=z

or Prsquo = Rz(θ)P

1000

0100

00cossin

00sincos

xrsquo yrsquo zrsquo 1

= x y z 1

When we say that we want to rotate a point in anticlockwise direction about z-axis it is very similar to performing a 2D rotation in anticlockwise direction as follows

Fig2D Rotation Fig 3D Rotation

3D Rotation

z-axis rotation

xrsquo=x cos θ - y sin θ

yrsquo=x sin θ + y cos θ

zrsquo=z Transformation equations for rotation abt the other axes

can be obtained with a cyclic permutation of coordinate parameters xy and z That is we use the replacements

xrarr yrarr zrarr x

x-axis rotation

yrsquo=y cos θ - z sin θ

zrsquo=y sin θ + z cos θ

xrsquo=x

y-axis rotation

zrsquo=z cos θ - x sin θ

xrsquo=z sin θ + x cos θ

yrsquo=y

Matrices for anticlockwise 3D rotation

1000

0cossin0

0sincos0

0001

xR

1000

0cos0sin

0010

0sin0cos

yR

1000

0100

00cossin

00sincos

zR

3D Rotation about an arbitrary axis

General Three-Dimensional Rotations

Special case where an object is to be rotated about an axis that is parallel to one of the coordinate axes

1 Translate the object so that the rotation axis coincides with parallel coordinate axis

2 Perform the specified rotation about the axis

3 Translate the object so that the rotation axis is moved back to its original position

3D Rotation of an object about an arbitrary axis

When an object is to rotated about an axis that is not parallel to one of the coordinate axes

1 Translate the object so that the rotation axis passes through the coordinate origin

2 Rotate the object so that the axis of rotation coincides with one of the coordinate axes

3 Perform the specified rotation about the selected coordinate axis

4 Apply inverse rotations to bring the rotation axis back to its original position

5 Apply the inverse translation to bring the rotation axis back to its original spatial position

We can determine the transformation matrices for each step

Assume that rotation axis ie arbitrary axis is defined with two points p1(x1y1z1) and p2(x2y2z2)

Let us say a point on the axis is (PQR)

Initial position of the axis and point is as bellow

p1

p2

(PQR)

Step1 (Translation)transformation of rotation axis so that it passes through the origin

This can be done by moving point P1 to the origin

This repositions the rotation axis and the object as shown

1111

0100

0010

0001

zyx

Tp1

p2

(PQR)

Step2 transform the rotation axis so that it coincides the z-axis

This can be performed in two sub-steps a) Rotate about x-axis to transform axis into xz plane

b) Swing rotation axis around to the z-axis using y-axis rotation

a) Take projection of line segment (000) to (PQR) onto yz plane as shown in fig ie (0QR)

(PQR)

(0QR)

Light

source

x

z

y

Step2-a

Now if we rotate the rotation (arbitrary) axis x-axis so that it lies in X-Z

In this situation its shadow will coincides the z-axis

So we are interested in angle α so that shadow will coincides with z-axis

length of shadow L = radicQ2+R2

sin α = QL

cos α = RL

Therefore the matrix for rotation about x-axis

Rx(α) =

1000

00

00

0001

LRLQ

LQLR

(PQR) (0QR)

L

α

After performing x-axis rotation the rotation axis will lie in x-z plane as shown

When we perform x-axis rotation x-value remains unchanged as axis of rotation is in xz plane so y-coordinate is zero We need to get z-value

L = radicP2+Q2+R2

z-coordinate will be v = radic(L2-P2)

(PQR)

L

P

Step2-b

Now we have to rotate the axis around y-axis so that it coincides the z-axis Let that angle be β

From figure cosβ = VL

sin β = pL

Therefore the transformation

matrix for rotation about y-axis

in clockwise rotation is

1000

00

0010

00

LvLp

LpLv

L

P

β

Ry(β) =

step3

Rotation about z-axis by given angle ie θ ie Rz (θ)

Step 4 and 5 does inverse transformations ie Ry-1 Rx-1 T-1

Therefore the final transformation matrix will be the product of all matrices in sequence

RA= T Rx RyRz Ry-1 Rx-1 T-1

1000

0100

00cossin

00sincos

zR

Reflection wrto xy plane

Consider a point P(xyz) The reflection of this point wrto xy plane is given by pointprsquo(xy-z)

Corresponding matrix is given as

M = 1 0 0

0 1 0

0 0 -1

Page 31: 2D transformations - E-STUDYthirdyearengineering.weebly.com/uploads/3/8/2/8/38286065/... · 2018. 9. 10. · In CG images are made up of series of line segments. Each line segment

2D Composite Transformations

We can setup a sequence of transformations as a composite transformation matrix by calculating the product of the individual transformations

Prsquo=M2M1P

Prsquo=MP

ROTATION ABOUT AN ARBITRARY POINT

2D Composite Transformations

General 2D Pivot-Point Rotation bull Translate

bull Rotate

bull Retranslate

1

010

001

100

0cossin

0sincos

1

010

001

rrrr yxyx

Example

Perform a clockwise rotation of 450 a triangle A(00) B(11) and C(52) (Dec-20052009 10 Marks)

bull about a point (-1-1)

bull About origin

Answer about origin

Arsquo = (00) Brsquo=(radic20) Crsquo=((7 radic2)(-3 radic2))

Ex2 consider a square p(00) Q(010) R(1010) S(100) Rotate the Sq about fixed point R(1010) by an angle 45o (anticlockwise) followed by scaling by 2 units in X direction and 2 units in Y direction (Dec 2006 8 marks)

Prove that two scaling transformations commute that is

S1 S2=S2 S1

Show that transformation matrix for a reflection about a line Y=X is equivalent to reflection to X-axis followed by counterclockwise rotation of 900 (Dec 2008 8 marks)

Perform X-shear and Y-shear on a triangle having A(21) B(43) C(23) Consider the constant value b=c=2

(Dec 2008 8 marks) Answer Arsquo = 45

Brsquo = 1011

Crsquo = 87

Scaling with respect to an arbitrary point

1 Translation

2 Scaling

3 Retranslation

Pictorially shown on next slide

1

010

001

100

00

00

1

010

001

ff

y

x

ff yx

s

s

yx

Other Two Dimensional Transformations

Reflection

Transformation that produces a mirror image of an object

y

x

Reflection

x-axis y-axis

100

010

001

100

010

001

Reflection

origin line x=y

100

010

001

100

001

010

Shear Transformations

Shear

Transformation that distorts the shape of an object such that the transformed shape appears as the object was composed of internal layers that had been caused to slide over each other

y

x

(01) (11)

(10) (00)

y

x

(21) (31)

(10) (00) shx=2

X-Shear

An x-direction shear relative to the x axis

An y-direction shear relative to the y axis

100

01

001

ysh

100

010

01 xsh

yy

yshxx x

Transformations in 3D

Some graphics applications are 2D such as charts graphs maps etc

But to create realistic picture we need to represent picture in 3D

In 3D geometry we need additional third axis z-axis to specify the depth value of the object

Let us see the coordinate systems used in 3D graphics

Lets plot a point in 3D with coordinates (342)

1 first plot the point at(302)

it is on the plane X-Z

2 then lift the point up by 4 units

Y-axis

X-axis

Z-axis

h

e

i

g

h

t

width

Depth

Translation in 3D

Remembering 2D transformations -gt 3x3 matrices take a wild guess what happens to 3D transformations

3D means z-axis comes into picture Giving Depth information for an object

1

0100

0010

0001

1

010

001

zyx

zyxzyx

yx

yxyx

ttt

tttzxytttT

tt

ttyxttT

T=(tx ty tz)

Scale 3D Style

S=(sx sy sz)

zsz

ysy

xsx

z

y

x

1000

000

000

000

)(

pps

s

s

PPsssS

z

y

x

zyx

3D Rotation

In 3D we have to specify the axis of rotation along with the rotation angle

Positive rotation angles produce counterclockwise rotations about a coordinate axis assuming that we are looking in the negative direction along that coordinate axis

3D Rotation

z-axis rotation

xrsquo=x cos θ - y sin θ

yrsquo=x sin θ + y cos θ

zrsquo=z

or Prsquo = Rz(θ)P

1000

0100

00cossin

00sincos

xrsquo yrsquo zrsquo 1

= x y z 1

When we say that we want to rotate a point in anticlockwise direction about z-axis it is very similar to performing a 2D rotation in anticlockwise direction as follows

Fig2D Rotation Fig 3D Rotation

3D Rotation

z-axis rotation

xrsquo=x cos θ - y sin θ

yrsquo=x sin θ + y cos θ

zrsquo=z Transformation equations for rotation abt the other axes

can be obtained with a cyclic permutation of coordinate parameters xy and z That is we use the replacements

xrarr yrarr zrarr x

x-axis rotation

yrsquo=y cos θ - z sin θ

zrsquo=y sin θ + z cos θ

xrsquo=x

y-axis rotation

zrsquo=z cos θ - x sin θ

xrsquo=z sin θ + x cos θ

yrsquo=y

Matrices for anticlockwise 3D rotation

1000

0cossin0

0sincos0

0001

xR

1000

0cos0sin

0010

0sin0cos

yR

1000

0100

00cossin

00sincos

zR

3D Rotation about an arbitrary axis

General Three-Dimensional Rotations

Special case where an object is to be rotated about an axis that is parallel to one of the coordinate axes

1 Translate the object so that the rotation axis coincides with parallel coordinate axis

2 Perform the specified rotation about the axis

3 Translate the object so that the rotation axis is moved back to its original position

3D Rotation of an object about an arbitrary axis

When an object is to rotated about an axis that is not parallel to one of the coordinate axes

1 Translate the object so that the rotation axis passes through the coordinate origin

2 Rotate the object so that the axis of rotation coincides with one of the coordinate axes

3 Perform the specified rotation about the selected coordinate axis

4 Apply inverse rotations to bring the rotation axis back to its original position

5 Apply the inverse translation to bring the rotation axis back to its original spatial position

We can determine the transformation matrices for each step

Assume that rotation axis ie arbitrary axis is defined with two points p1(x1y1z1) and p2(x2y2z2)

Let us say a point on the axis is (PQR)

Initial position of the axis and point is as bellow

p1

p2

(PQR)

Step1 (Translation)transformation of rotation axis so that it passes through the origin

This can be done by moving point P1 to the origin

This repositions the rotation axis and the object as shown

1111

0100

0010

0001

zyx

Tp1

p2

(PQR)

Step2 transform the rotation axis so that it coincides the z-axis

This can be performed in two sub-steps a) Rotate about x-axis to transform axis into xz plane

b) Swing rotation axis around to the z-axis using y-axis rotation

a) Take projection of line segment (000) to (PQR) onto yz plane as shown in fig ie (0QR)

(PQR)

(0QR)

Light

source

x

z

y

Step2-a

Now if we rotate the rotation (arbitrary) axis x-axis so that it lies in X-Z

In this situation its shadow will coincides the z-axis

So we are interested in angle α so that shadow will coincides with z-axis

length of shadow L = radicQ2+R2

sin α = QL

cos α = RL

Therefore the matrix for rotation about x-axis

Rx(α) =

1000

00

00

0001

LRLQ

LQLR

(PQR) (0QR)

L

α

After performing x-axis rotation the rotation axis will lie in x-z plane as shown

When we perform x-axis rotation x-value remains unchanged as axis of rotation is in xz plane so y-coordinate is zero We need to get z-value

L = radicP2+Q2+R2

z-coordinate will be v = radic(L2-P2)

(PQR)

L

P

Step2-b

Now we have to rotate the axis around y-axis so that it coincides the z-axis Let that angle be β

From figure cosβ = VL

sin β = pL

Therefore the transformation

matrix for rotation about y-axis

in clockwise rotation is

1000

00

0010

00

LvLp

LpLv

L

P

β

Ry(β) =

step3

Rotation about z-axis by given angle ie θ ie Rz (θ)

Step 4 and 5 does inverse transformations ie Ry-1 Rx-1 T-1

Therefore the final transformation matrix will be the product of all matrices in sequence

RA= T Rx RyRz Ry-1 Rx-1 T-1

1000

0100

00cossin

00sincos

zR

Reflection wrto xy plane

Consider a point P(xyz) The reflection of this point wrto xy plane is given by pointprsquo(xy-z)

Corresponding matrix is given as

M = 1 0 0

0 1 0

0 0 -1

Page 32: 2D transformations - E-STUDYthirdyearengineering.weebly.com/uploads/3/8/2/8/38286065/... · 2018. 9. 10. · In CG images are made up of series of line segments. Each line segment

ROTATION ABOUT AN ARBITRARY POINT

2D Composite Transformations

General 2D Pivot-Point Rotation bull Translate

bull Rotate

bull Retranslate

1

010

001

100

0cossin

0sincos

1

010

001

rrrr yxyx

Example

Perform a clockwise rotation of 450 a triangle A(00) B(11) and C(52) (Dec-20052009 10 Marks)

bull about a point (-1-1)

bull About origin

Answer about origin

Arsquo = (00) Brsquo=(radic20) Crsquo=((7 radic2)(-3 radic2))

Ex2 consider a square p(00) Q(010) R(1010) S(100) Rotate the Sq about fixed point R(1010) by an angle 45o (anticlockwise) followed by scaling by 2 units in X direction and 2 units in Y direction (Dec 2006 8 marks)

Prove that two scaling transformations commute that is

S1 S2=S2 S1

Show that transformation matrix for a reflection about a line Y=X is equivalent to reflection to X-axis followed by counterclockwise rotation of 900 (Dec 2008 8 marks)

Perform X-shear and Y-shear on a triangle having A(21) B(43) C(23) Consider the constant value b=c=2

(Dec 2008 8 marks) Answer Arsquo = 45

Brsquo = 1011

Crsquo = 87

Scaling with respect to an arbitrary point

1 Translation

2 Scaling

3 Retranslation

Pictorially shown on next slide

1

010

001

100

00

00

1

010

001

ff

y

x

ff yx

s

s

yx

Other Two Dimensional Transformations

Reflection

Transformation that produces a mirror image of an object

y

x

Reflection

x-axis y-axis

100

010

001

100

010

001

Reflection

origin line x=y

100

010

001

100

001

010

Shear Transformations

Shear

Transformation that distorts the shape of an object such that the transformed shape appears as the object was composed of internal layers that had been caused to slide over each other

y

x

(01) (11)

(10) (00)

y

x

(21) (31)

(10) (00) shx=2

X-Shear

An x-direction shear relative to the x axis

An y-direction shear relative to the y axis

100

01

001

ysh

100

010

01 xsh

yy

yshxx x

Transformations in 3D

Some graphics applications are 2D such as charts graphs maps etc

But to create realistic picture we need to represent picture in 3D

In 3D geometry we need additional third axis z-axis to specify the depth value of the object

Let us see the coordinate systems used in 3D graphics

Lets plot a point in 3D with coordinates (342)

1 first plot the point at(302)

it is on the plane X-Z

2 then lift the point up by 4 units

Y-axis

X-axis

Z-axis

h

e

i

g

h

t

width

Depth

Translation in 3D

Remembering 2D transformations -gt 3x3 matrices take a wild guess what happens to 3D transformations

3D means z-axis comes into picture Giving Depth information for an object

1

0100

0010

0001

1

010

001

zyx

zyxzyx

yx

yxyx

ttt

tttzxytttT

tt

ttyxttT

T=(tx ty tz)

Scale 3D Style

S=(sx sy sz)

zsz

ysy

xsx

z

y

x

1000

000

000

000

)(

pps

s

s

PPsssS

z

y

x

zyx

3D Rotation

In 3D we have to specify the axis of rotation along with the rotation angle

Positive rotation angles produce counterclockwise rotations about a coordinate axis assuming that we are looking in the negative direction along that coordinate axis

3D Rotation

z-axis rotation

xrsquo=x cos θ - y sin θ

yrsquo=x sin θ + y cos θ

zrsquo=z

or Prsquo = Rz(θ)P

1000

0100

00cossin

00sincos

xrsquo yrsquo zrsquo 1

= x y z 1

When we say that we want to rotate a point in anticlockwise direction about z-axis it is very similar to performing a 2D rotation in anticlockwise direction as follows

Fig2D Rotation Fig 3D Rotation

3D Rotation

z-axis rotation

xrsquo=x cos θ - y sin θ

yrsquo=x sin θ + y cos θ

zrsquo=z Transformation equations for rotation abt the other axes

can be obtained with a cyclic permutation of coordinate parameters xy and z That is we use the replacements

xrarr yrarr zrarr x

x-axis rotation

yrsquo=y cos θ - z sin θ

zrsquo=y sin θ + z cos θ

xrsquo=x

y-axis rotation

zrsquo=z cos θ - x sin θ

xrsquo=z sin θ + x cos θ

yrsquo=y

Matrices for anticlockwise 3D rotation

1000

0cossin0

0sincos0

0001

xR

1000

0cos0sin

0010

0sin0cos

yR

1000

0100

00cossin

00sincos

zR

3D Rotation about an arbitrary axis

General Three-Dimensional Rotations

Special case where an object is to be rotated about an axis that is parallel to one of the coordinate axes

1 Translate the object so that the rotation axis coincides with parallel coordinate axis

2 Perform the specified rotation about the axis

3 Translate the object so that the rotation axis is moved back to its original position

3D Rotation of an object about an arbitrary axis

When an object is to rotated about an axis that is not parallel to one of the coordinate axes

1 Translate the object so that the rotation axis passes through the coordinate origin

2 Rotate the object so that the axis of rotation coincides with one of the coordinate axes

3 Perform the specified rotation about the selected coordinate axis

4 Apply inverse rotations to bring the rotation axis back to its original position

5 Apply the inverse translation to bring the rotation axis back to its original spatial position

We can determine the transformation matrices for each step

Assume that rotation axis ie arbitrary axis is defined with two points p1(x1y1z1) and p2(x2y2z2)

Let us say a point on the axis is (PQR)

Initial position of the axis and point is as bellow

p1

p2

(PQR)

Step1 (Translation)transformation of rotation axis so that it passes through the origin

This can be done by moving point P1 to the origin

This repositions the rotation axis and the object as shown

1111

0100

0010

0001

zyx

Tp1

p2

(PQR)

Step2 transform the rotation axis so that it coincides the z-axis

This can be performed in two sub-steps a) Rotate about x-axis to transform axis into xz plane

b) Swing rotation axis around to the z-axis using y-axis rotation

a) Take projection of line segment (000) to (PQR) onto yz plane as shown in fig ie (0QR)

(PQR)

(0QR)

Light

source

x

z

y

Step2-a

Now if we rotate the rotation (arbitrary) axis x-axis so that it lies in X-Z

In this situation its shadow will coincides the z-axis

So we are interested in angle α so that shadow will coincides with z-axis

length of shadow L = radicQ2+R2

sin α = QL

cos α = RL

Therefore the matrix for rotation about x-axis

Rx(α) =

1000

00

00

0001

LRLQ

LQLR

(PQR) (0QR)

L

α

After performing x-axis rotation the rotation axis will lie in x-z plane as shown

When we perform x-axis rotation x-value remains unchanged as axis of rotation is in xz plane so y-coordinate is zero We need to get z-value

L = radicP2+Q2+R2

z-coordinate will be v = radic(L2-P2)

(PQR)

L

P

Step2-b

Now we have to rotate the axis around y-axis so that it coincides the z-axis Let that angle be β

From figure cosβ = VL

sin β = pL

Therefore the transformation

matrix for rotation about y-axis

in clockwise rotation is

1000

00

0010

00

LvLp

LpLv

L

P

β

Ry(β) =

step3

Rotation about z-axis by given angle ie θ ie Rz (θ)

Step 4 and 5 does inverse transformations ie Ry-1 Rx-1 T-1

Therefore the final transformation matrix will be the product of all matrices in sequence

RA= T Rx RyRz Ry-1 Rx-1 T-1

1000

0100

00cossin

00sincos

zR

Reflection wrto xy plane

Consider a point P(xyz) The reflection of this point wrto xy plane is given by pointprsquo(xy-z)

Corresponding matrix is given as

M = 1 0 0

0 1 0

0 0 -1

Page 33: 2D transformations - E-STUDYthirdyearengineering.weebly.com/uploads/3/8/2/8/38286065/... · 2018. 9. 10. · In CG images are made up of series of line segments. Each line segment

2D Composite Transformations

General 2D Pivot-Point Rotation bull Translate

bull Rotate

bull Retranslate

1

010

001

100

0cossin

0sincos

1

010

001

rrrr yxyx

Example

Perform a clockwise rotation of 450 a triangle A(00) B(11) and C(52) (Dec-20052009 10 Marks)

bull about a point (-1-1)

bull About origin

Answer about origin

Arsquo = (00) Brsquo=(radic20) Crsquo=((7 radic2)(-3 radic2))

Ex2 consider a square p(00) Q(010) R(1010) S(100) Rotate the Sq about fixed point R(1010) by an angle 45o (anticlockwise) followed by scaling by 2 units in X direction and 2 units in Y direction (Dec 2006 8 marks)

Prove that two scaling transformations commute that is

S1 S2=S2 S1

Show that transformation matrix for a reflection about a line Y=X is equivalent to reflection to X-axis followed by counterclockwise rotation of 900 (Dec 2008 8 marks)

Perform X-shear and Y-shear on a triangle having A(21) B(43) C(23) Consider the constant value b=c=2

(Dec 2008 8 marks) Answer Arsquo = 45

Brsquo = 1011

Crsquo = 87

Scaling with respect to an arbitrary point

1 Translation

2 Scaling

3 Retranslation

Pictorially shown on next slide

1

010

001

100

00

00

1

010

001

ff

y

x

ff yx

s

s

yx

Other Two Dimensional Transformations

Reflection

Transformation that produces a mirror image of an object

y

x

Reflection

x-axis y-axis

100

010

001

100

010

001

Reflection

origin line x=y

100

010

001

100

001

010

Shear Transformations

Shear

Transformation that distorts the shape of an object such that the transformed shape appears as the object was composed of internal layers that had been caused to slide over each other

y

x

(01) (11)

(10) (00)

y

x

(21) (31)

(10) (00) shx=2

X-Shear

An x-direction shear relative to the x axis

An y-direction shear relative to the y axis

100

01

001

ysh

100

010

01 xsh

yy

yshxx x

Transformations in 3D

Some graphics applications are 2D such as charts graphs maps etc

But to create realistic picture we need to represent picture in 3D

In 3D geometry we need additional third axis z-axis to specify the depth value of the object

Let us see the coordinate systems used in 3D graphics

Lets plot a point in 3D with coordinates (342)

1 first plot the point at(302)

it is on the plane X-Z

2 then lift the point up by 4 units

Y-axis

X-axis

Z-axis

h

e

i

g

h

t

width

Depth

Translation in 3D

Remembering 2D transformations -gt 3x3 matrices take a wild guess what happens to 3D transformations

3D means z-axis comes into picture Giving Depth information for an object

1

0100

0010

0001

1

010

001

zyx

zyxzyx

yx

yxyx

ttt

tttzxytttT

tt

ttyxttT

T=(tx ty tz)

Scale 3D Style

S=(sx sy sz)

zsz

ysy

xsx

z

y

x

1000

000

000

000

)(

pps

s

s

PPsssS

z

y

x

zyx

3D Rotation

In 3D we have to specify the axis of rotation along with the rotation angle

Positive rotation angles produce counterclockwise rotations about a coordinate axis assuming that we are looking in the negative direction along that coordinate axis

3D Rotation

z-axis rotation

xrsquo=x cos θ - y sin θ

yrsquo=x sin θ + y cos θ

zrsquo=z

or Prsquo = Rz(θ)P

1000

0100

00cossin

00sincos

xrsquo yrsquo zrsquo 1

= x y z 1

When we say that we want to rotate a point in anticlockwise direction about z-axis it is very similar to performing a 2D rotation in anticlockwise direction as follows

Fig2D Rotation Fig 3D Rotation

3D Rotation

z-axis rotation

xrsquo=x cos θ - y sin θ

yrsquo=x sin θ + y cos θ

zrsquo=z Transformation equations for rotation abt the other axes

can be obtained with a cyclic permutation of coordinate parameters xy and z That is we use the replacements

xrarr yrarr zrarr x

x-axis rotation

yrsquo=y cos θ - z sin θ

zrsquo=y sin θ + z cos θ

xrsquo=x

y-axis rotation

zrsquo=z cos θ - x sin θ

xrsquo=z sin θ + x cos θ

yrsquo=y

Matrices for anticlockwise 3D rotation

1000

0cossin0

0sincos0

0001

xR

1000

0cos0sin

0010

0sin0cos

yR

1000

0100

00cossin

00sincos

zR

3D Rotation about an arbitrary axis

General Three-Dimensional Rotations

Special case where an object is to be rotated about an axis that is parallel to one of the coordinate axes

1 Translate the object so that the rotation axis coincides with parallel coordinate axis

2 Perform the specified rotation about the axis

3 Translate the object so that the rotation axis is moved back to its original position

3D Rotation of an object about an arbitrary axis

When an object is to rotated about an axis that is not parallel to one of the coordinate axes

1 Translate the object so that the rotation axis passes through the coordinate origin

2 Rotate the object so that the axis of rotation coincides with one of the coordinate axes

3 Perform the specified rotation about the selected coordinate axis

4 Apply inverse rotations to bring the rotation axis back to its original position

5 Apply the inverse translation to bring the rotation axis back to its original spatial position

We can determine the transformation matrices for each step

Assume that rotation axis ie arbitrary axis is defined with two points p1(x1y1z1) and p2(x2y2z2)

Let us say a point on the axis is (PQR)

Initial position of the axis and point is as bellow

p1

p2

(PQR)

Step1 (Translation)transformation of rotation axis so that it passes through the origin

This can be done by moving point P1 to the origin

This repositions the rotation axis and the object as shown

1111

0100

0010

0001

zyx

Tp1

p2

(PQR)

Step2 transform the rotation axis so that it coincides the z-axis

This can be performed in two sub-steps a) Rotate about x-axis to transform axis into xz plane

b) Swing rotation axis around to the z-axis using y-axis rotation

a) Take projection of line segment (000) to (PQR) onto yz plane as shown in fig ie (0QR)

(PQR)

(0QR)

Light

source

x

z

y

Step2-a

Now if we rotate the rotation (arbitrary) axis x-axis so that it lies in X-Z

In this situation its shadow will coincides the z-axis

So we are interested in angle α so that shadow will coincides with z-axis

length of shadow L = radicQ2+R2

sin α = QL

cos α = RL

Therefore the matrix for rotation about x-axis

Rx(α) =

1000

00

00

0001

LRLQ

LQLR

(PQR) (0QR)

L

α

After performing x-axis rotation the rotation axis will lie in x-z plane as shown

When we perform x-axis rotation x-value remains unchanged as axis of rotation is in xz plane so y-coordinate is zero We need to get z-value

L = radicP2+Q2+R2

z-coordinate will be v = radic(L2-P2)

(PQR)

L

P

Step2-b

Now we have to rotate the axis around y-axis so that it coincides the z-axis Let that angle be β

From figure cosβ = VL

sin β = pL

Therefore the transformation

matrix for rotation about y-axis

in clockwise rotation is

1000

00

0010

00

LvLp

LpLv

L

P

β

Ry(β) =

step3

Rotation about z-axis by given angle ie θ ie Rz (θ)

Step 4 and 5 does inverse transformations ie Ry-1 Rx-1 T-1

Therefore the final transformation matrix will be the product of all matrices in sequence

RA= T Rx RyRz Ry-1 Rx-1 T-1

1000

0100

00cossin

00sincos

zR

Reflection wrto xy plane

Consider a point P(xyz) The reflection of this point wrto xy plane is given by pointprsquo(xy-z)

Corresponding matrix is given as

M = 1 0 0

0 1 0

0 0 -1

Page 34: 2D transformations - E-STUDYthirdyearengineering.weebly.com/uploads/3/8/2/8/38286065/... · 2018. 9. 10. · In CG images are made up of series of line segments. Each line segment

Example

Perform a clockwise rotation of 450 a triangle A(00) B(11) and C(52) (Dec-20052009 10 Marks)

bull about a point (-1-1)

bull About origin

Answer about origin

Arsquo = (00) Brsquo=(radic20) Crsquo=((7 radic2)(-3 radic2))

Ex2 consider a square p(00) Q(010) R(1010) S(100) Rotate the Sq about fixed point R(1010) by an angle 45o (anticlockwise) followed by scaling by 2 units in X direction and 2 units in Y direction (Dec 2006 8 marks)

Prove that two scaling transformations commute that is

S1 S2=S2 S1

Show that transformation matrix for a reflection about a line Y=X is equivalent to reflection to X-axis followed by counterclockwise rotation of 900 (Dec 2008 8 marks)

Perform X-shear and Y-shear on a triangle having A(21) B(43) C(23) Consider the constant value b=c=2

(Dec 2008 8 marks) Answer Arsquo = 45

Brsquo = 1011

Crsquo = 87

Scaling with respect to an arbitrary point

1 Translation

2 Scaling

3 Retranslation

Pictorially shown on next slide

1

010

001

100

00

00

1

010

001

ff

y

x

ff yx

s

s

yx

Other Two Dimensional Transformations

Reflection

Transformation that produces a mirror image of an object

y

x

Reflection

x-axis y-axis

100

010

001

100

010

001

Reflection

origin line x=y

100

010

001

100

001

010

Shear Transformations

Shear

Transformation that distorts the shape of an object such that the transformed shape appears as the object was composed of internal layers that had been caused to slide over each other

y

x

(01) (11)

(10) (00)

y

x

(21) (31)

(10) (00) shx=2

X-Shear

An x-direction shear relative to the x axis

An y-direction shear relative to the y axis

100

01

001

ysh

100

010

01 xsh

yy

yshxx x

Transformations in 3D

Some graphics applications are 2D such as charts graphs maps etc

But to create realistic picture we need to represent picture in 3D

In 3D geometry we need additional third axis z-axis to specify the depth value of the object

Let us see the coordinate systems used in 3D graphics

Lets plot a point in 3D with coordinates (342)

1 first plot the point at(302)

it is on the plane X-Z

2 then lift the point up by 4 units

Y-axis

X-axis

Z-axis

h

e

i

g

h

t

width

Depth

Translation in 3D

Remembering 2D transformations -gt 3x3 matrices take a wild guess what happens to 3D transformations

3D means z-axis comes into picture Giving Depth information for an object

1

0100

0010

0001

1

010

001

zyx

zyxzyx

yx

yxyx

ttt

tttzxytttT

tt

ttyxttT

T=(tx ty tz)

Scale 3D Style

S=(sx sy sz)

zsz

ysy

xsx

z

y

x

1000

000

000

000

)(

pps

s

s

PPsssS

z

y

x

zyx

3D Rotation

In 3D we have to specify the axis of rotation along with the rotation angle

Positive rotation angles produce counterclockwise rotations about a coordinate axis assuming that we are looking in the negative direction along that coordinate axis

3D Rotation

z-axis rotation

xrsquo=x cos θ - y sin θ

yrsquo=x sin θ + y cos θ

zrsquo=z

or Prsquo = Rz(θ)P

1000

0100

00cossin

00sincos

xrsquo yrsquo zrsquo 1

= x y z 1

When we say that we want to rotate a point in anticlockwise direction about z-axis it is very similar to performing a 2D rotation in anticlockwise direction as follows

Fig2D Rotation Fig 3D Rotation

3D Rotation

z-axis rotation

xrsquo=x cos θ - y sin θ

yrsquo=x sin θ + y cos θ

zrsquo=z Transformation equations for rotation abt the other axes

can be obtained with a cyclic permutation of coordinate parameters xy and z That is we use the replacements

xrarr yrarr zrarr x

x-axis rotation

yrsquo=y cos θ - z sin θ

zrsquo=y sin θ + z cos θ

xrsquo=x

y-axis rotation

zrsquo=z cos θ - x sin θ

xrsquo=z sin θ + x cos θ

yrsquo=y

Matrices for anticlockwise 3D rotation

1000

0cossin0

0sincos0

0001

xR

1000

0cos0sin

0010

0sin0cos

yR

1000

0100

00cossin

00sincos

zR

3D Rotation about an arbitrary axis

General Three-Dimensional Rotations

Special case where an object is to be rotated about an axis that is parallel to one of the coordinate axes

1 Translate the object so that the rotation axis coincides with parallel coordinate axis

2 Perform the specified rotation about the axis

3 Translate the object so that the rotation axis is moved back to its original position

3D Rotation of an object about an arbitrary axis

When an object is to rotated about an axis that is not parallel to one of the coordinate axes

1 Translate the object so that the rotation axis passes through the coordinate origin

2 Rotate the object so that the axis of rotation coincides with one of the coordinate axes

3 Perform the specified rotation about the selected coordinate axis

4 Apply inverse rotations to bring the rotation axis back to its original position

5 Apply the inverse translation to bring the rotation axis back to its original spatial position

We can determine the transformation matrices for each step

Assume that rotation axis ie arbitrary axis is defined with two points p1(x1y1z1) and p2(x2y2z2)

Let us say a point on the axis is (PQR)

Initial position of the axis and point is as bellow

p1

p2

(PQR)

Step1 (Translation)transformation of rotation axis so that it passes through the origin

This can be done by moving point P1 to the origin

This repositions the rotation axis and the object as shown

1111

0100

0010

0001

zyx

Tp1

p2

(PQR)

Step2 transform the rotation axis so that it coincides the z-axis

This can be performed in two sub-steps a) Rotate about x-axis to transform axis into xz plane

b) Swing rotation axis around to the z-axis using y-axis rotation

a) Take projection of line segment (000) to (PQR) onto yz plane as shown in fig ie (0QR)

(PQR)

(0QR)

Light

source

x

z

y

Step2-a

Now if we rotate the rotation (arbitrary) axis x-axis so that it lies in X-Z

In this situation its shadow will coincides the z-axis

So we are interested in angle α so that shadow will coincides with z-axis

length of shadow L = radicQ2+R2

sin α = QL

cos α = RL

Therefore the matrix for rotation about x-axis

Rx(α) =

1000

00

00

0001

LRLQ

LQLR

(PQR) (0QR)

L

α

After performing x-axis rotation the rotation axis will lie in x-z plane as shown

When we perform x-axis rotation x-value remains unchanged as axis of rotation is in xz plane so y-coordinate is zero We need to get z-value

L = radicP2+Q2+R2

z-coordinate will be v = radic(L2-P2)

(PQR)

L

P

Step2-b

Now we have to rotate the axis around y-axis so that it coincides the z-axis Let that angle be β

From figure cosβ = VL

sin β = pL

Therefore the transformation

matrix for rotation about y-axis

in clockwise rotation is

1000

00

0010

00

LvLp

LpLv

L

P

β

Ry(β) =

step3

Rotation about z-axis by given angle ie θ ie Rz (θ)

Step 4 and 5 does inverse transformations ie Ry-1 Rx-1 T-1

Therefore the final transformation matrix will be the product of all matrices in sequence

RA= T Rx RyRz Ry-1 Rx-1 T-1

1000

0100

00cossin

00sincos

zR

Reflection wrto xy plane

Consider a point P(xyz) The reflection of this point wrto xy plane is given by pointprsquo(xy-z)

Corresponding matrix is given as

M = 1 0 0

0 1 0

0 0 -1

Page 35: 2D transformations - E-STUDYthirdyearengineering.weebly.com/uploads/3/8/2/8/38286065/... · 2018. 9. 10. · In CG images are made up of series of line segments. Each line segment

Prove that two scaling transformations commute that is

S1 S2=S2 S1

Show that transformation matrix for a reflection about a line Y=X is equivalent to reflection to X-axis followed by counterclockwise rotation of 900 (Dec 2008 8 marks)

Perform X-shear and Y-shear on a triangle having A(21) B(43) C(23) Consider the constant value b=c=2

(Dec 2008 8 marks) Answer Arsquo = 45

Brsquo = 1011

Crsquo = 87

Scaling with respect to an arbitrary point

1 Translation

2 Scaling

3 Retranslation

Pictorially shown on next slide

1

010

001

100

00

00

1

010

001

ff

y

x

ff yx

s

s

yx

Other Two Dimensional Transformations

Reflection

Transformation that produces a mirror image of an object

y

x

Reflection

x-axis y-axis

100

010

001

100

010

001

Reflection

origin line x=y

100

010

001

100

001

010

Shear Transformations

Shear

Transformation that distorts the shape of an object such that the transformed shape appears as the object was composed of internal layers that had been caused to slide over each other

y

x

(01) (11)

(10) (00)

y

x

(21) (31)

(10) (00) shx=2

X-Shear

An x-direction shear relative to the x axis

An y-direction shear relative to the y axis

100

01

001

ysh

100

010

01 xsh

yy

yshxx x

Transformations in 3D

Some graphics applications are 2D such as charts graphs maps etc

But to create realistic picture we need to represent picture in 3D

In 3D geometry we need additional third axis z-axis to specify the depth value of the object

Let us see the coordinate systems used in 3D graphics

Lets plot a point in 3D with coordinates (342)

1 first plot the point at(302)

it is on the plane X-Z

2 then lift the point up by 4 units

Y-axis

X-axis

Z-axis

h

e

i

g

h

t

width

Depth

Translation in 3D

Remembering 2D transformations -gt 3x3 matrices take a wild guess what happens to 3D transformations

3D means z-axis comes into picture Giving Depth information for an object

1

0100

0010

0001

1

010

001

zyx

zyxzyx

yx

yxyx

ttt

tttzxytttT

tt

ttyxttT

T=(tx ty tz)

Scale 3D Style

S=(sx sy sz)

zsz

ysy

xsx

z

y

x

1000

000

000

000

)(

pps

s

s

PPsssS

z

y

x

zyx

3D Rotation

In 3D we have to specify the axis of rotation along with the rotation angle

Positive rotation angles produce counterclockwise rotations about a coordinate axis assuming that we are looking in the negative direction along that coordinate axis

3D Rotation

z-axis rotation

xrsquo=x cos θ - y sin θ

yrsquo=x sin θ + y cos θ

zrsquo=z

or Prsquo = Rz(θ)P

1000

0100

00cossin

00sincos

xrsquo yrsquo zrsquo 1

= x y z 1

When we say that we want to rotate a point in anticlockwise direction about z-axis it is very similar to performing a 2D rotation in anticlockwise direction as follows

Fig2D Rotation Fig 3D Rotation

3D Rotation

z-axis rotation

xrsquo=x cos θ - y sin θ

yrsquo=x sin θ + y cos θ

zrsquo=z Transformation equations for rotation abt the other axes

can be obtained with a cyclic permutation of coordinate parameters xy and z That is we use the replacements

xrarr yrarr zrarr x

x-axis rotation

yrsquo=y cos θ - z sin θ

zrsquo=y sin θ + z cos θ

xrsquo=x

y-axis rotation

zrsquo=z cos θ - x sin θ

xrsquo=z sin θ + x cos θ

yrsquo=y

Matrices for anticlockwise 3D rotation

1000

0cossin0

0sincos0

0001

xR

1000

0cos0sin

0010

0sin0cos

yR

1000

0100

00cossin

00sincos

zR

3D Rotation about an arbitrary axis

General Three-Dimensional Rotations

Special case where an object is to be rotated about an axis that is parallel to one of the coordinate axes

1 Translate the object so that the rotation axis coincides with parallel coordinate axis

2 Perform the specified rotation about the axis

3 Translate the object so that the rotation axis is moved back to its original position

3D Rotation of an object about an arbitrary axis

When an object is to rotated about an axis that is not parallel to one of the coordinate axes

1 Translate the object so that the rotation axis passes through the coordinate origin

2 Rotate the object so that the axis of rotation coincides with one of the coordinate axes

3 Perform the specified rotation about the selected coordinate axis

4 Apply inverse rotations to bring the rotation axis back to its original position

5 Apply the inverse translation to bring the rotation axis back to its original spatial position

We can determine the transformation matrices for each step

Assume that rotation axis ie arbitrary axis is defined with two points p1(x1y1z1) and p2(x2y2z2)

Let us say a point on the axis is (PQR)

Initial position of the axis and point is as bellow

p1

p2

(PQR)

Step1 (Translation)transformation of rotation axis so that it passes through the origin

This can be done by moving point P1 to the origin

This repositions the rotation axis and the object as shown

1111

0100

0010

0001

zyx

Tp1

p2

(PQR)

Step2 transform the rotation axis so that it coincides the z-axis

This can be performed in two sub-steps a) Rotate about x-axis to transform axis into xz plane

b) Swing rotation axis around to the z-axis using y-axis rotation

a) Take projection of line segment (000) to (PQR) onto yz plane as shown in fig ie (0QR)

(PQR)

(0QR)

Light

source

x

z

y

Step2-a

Now if we rotate the rotation (arbitrary) axis x-axis so that it lies in X-Z

In this situation its shadow will coincides the z-axis

So we are interested in angle α so that shadow will coincides with z-axis

length of shadow L = radicQ2+R2

sin α = QL

cos α = RL

Therefore the matrix for rotation about x-axis

Rx(α) =

1000

00

00

0001

LRLQ

LQLR

(PQR) (0QR)

L

α

After performing x-axis rotation the rotation axis will lie in x-z plane as shown

When we perform x-axis rotation x-value remains unchanged as axis of rotation is in xz plane so y-coordinate is zero We need to get z-value

L = radicP2+Q2+R2

z-coordinate will be v = radic(L2-P2)

(PQR)

L

P

Step2-b

Now we have to rotate the axis around y-axis so that it coincides the z-axis Let that angle be β

From figure cosβ = VL

sin β = pL

Therefore the transformation

matrix for rotation about y-axis

in clockwise rotation is

1000

00

0010

00

LvLp

LpLv

L

P

β

Ry(β) =

step3

Rotation about z-axis by given angle ie θ ie Rz (θ)

Step 4 and 5 does inverse transformations ie Ry-1 Rx-1 T-1

Therefore the final transformation matrix will be the product of all matrices in sequence

RA= T Rx RyRz Ry-1 Rx-1 T-1

1000

0100

00cossin

00sincos

zR

Reflection wrto xy plane

Consider a point P(xyz) The reflection of this point wrto xy plane is given by pointprsquo(xy-z)

Corresponding matrix is given as

M = 1 0 0

0 1 0

0 0 -1

Page 36: 2D transformations - E-STUDYthirdyearengineering.weebly.com/uploads/3/8/2/8/38286065/... · 2018. 9. 10. · In CG images are made up of series of line segments. Each line segment

Scaling with respect to an arbitrary point

1 Translation

2 Scaling

3 Retranslation

Pictorially shown on next slide

1

010

001

100

00

00

1

010

001

ff

y

x

ff yx

s

s

yx

Other Two Dimensional Transformations

Reflection

Transformation that produces a mirror image of an object

y

x

Reflection

x-axis y-axis

100

010

001

100

010

001

Reflection

origin line x=y

100

010

001

100

001

010

Shear Transformations

Shear

Transformation that distorts the shape of an object such that the transformed shape appears as the object was composed of internal layers that had been caused to slide over each other

y

x

(01) (11)

(10) (00)

y

x

(21) (31)

(10) (00) shx=2

X-Shear

An x-direction shear relative to the x axis

An y-direction shear relative to the y axis

100

01

001

ysh

100

010

01 xsh

yy

yshxx x

Transformations in 3D

Some graphics applications are 2D such as charts graphs maps etc

But to create realistic picture we need to represent picture in 3D

In 3D geometry we need additional third axis z-axis to specify the depth value of the object

Let us see the coordinate systems used in 3D graphics

Lets plot a point in 3D with coordinates (342)

1 first plot the point at(302)

it is on the plane X-Z

2 then lift the point up by 4 units

Y-axis

X-axis

Z-axis

h

e

i

g

h

t

width

Depth

Translation in 3D

Remembering 2D transformations -gt 3x3 matrices take a wild guess what happens to 3D transformations

3D means z-axis comes into picture Giving Depth information for an object

1

0100

0010

0001

1

010

001

zyx

zyxzyx

yx

yxyx

ttt

tttzxytttT

tt

ttyxttT

T=(tx ty tz)

Scale 3D Style

S=(sx sy sz)

zsz

ysy

xsx

z

y

x

1000

000

000

000

)(

pps

s

s

PPsssS

z

y

x

zyx

3D Rotation

In 3D we have to specify the axis of rotation along with the rotation angle

Positive rotation angles produce counterclockwise rotations about a coordinate axis assuming that we are looking in the negative direction along that coordinate axis

3D Rotation

z-axis rotation

xrsquo=x cos θ - y sin θ

yrsquo=x sin θ + y cos θ

zrsquo=z

or Prsquo = Rz(θ)P

1000

0100

00cossin

00sincos

xrsquo yrsquo zrsquo 1

= x y z 1

When we say that we want to rotate a point in anticlockwise direction about z-axis it is very similar to performing a 2D rotation in anticlockwise direction as follows

Fig2D Rotation Fig 3D Rotation

3D Rotation

z-axis rotation

xrsquo=x cos θ - y sin θ

yrsquo=x sin θ + y cos θ

zrsquo=z Transformation equations for rotation abt the other axes

can be obtained with a cyclic permutation of coordinate parameters xy and z That is we use the replacements

xrarr yrarr zrarr x

x-axis rotation

yrsquo=y cos θ - z sin θ

zrsquo=y sin θ + z cos θ

xrsquo=x

y-axis rotation

zrsquo=z cos θ - x sin θ

xrsquo=z sin θ + x cos θ

yrsquo=y

Matrices for anticlockwise 3D rotation

1000

0cossin0

0sincos0

0001

xR

1000

0cos0sin

0010

0sin0cos

yR

1000

0100

00cossin

00sincos

zR

3D Rotation about an arbitrary axis

General Three-Dimensional Rotations

Special case where an object is to be rotated about an axis that is parallel to one of the coordinate axes

1 Translate the object so that the rotation axis coincides with parallel coordinate axis

2 Perform the specified rotation about the axis

3 Translate the object so that the rotation axis is moved back to its original position

3D Rotation of an object about an arbitrary axis

When an object is to rotated about an axis that is not parallel to one of the coordinate axes

1 Translate the object so that the rotation axis passes through the coordinate origin

2 Rotate the object so that the axis of rotation coincides with one of the coordinate axes

3 Perform the specified rotation about the selected coordinate axis

4 Apply inverse rotations to bring the rotation axis back to its original position

5 Apply the inverse translation to bring the rotation axis back to its original spatial position

We can determine the transformation matrices for each step

Assume that rotation axis ie arbitrary axis is defined with two points p1(x1y1z1) and p2(x2y2z2)

Let us say a point on the axis is (PQR)

Initial position of the axis and point is as bellow

p1

p2

(PQR)

Step1 (Translation)transformation of rotation axis so that it passes through the origin

This can be done by moving point P1 to the origin

This repositions the rotation axis and the object as shown

1111

0100

0010

0001

zyx

Tp1

p2

(PQR)

Step2 transform the rotation axis so that it coincides the z-axis

This can be performed in two sub-steps a) Rotate about x-axis to transform axis into xz plane

b) Swing rotation axis around to the z-axis using y-axis rotation

a) Take projection of line segment (000) to (PQR) onto yz plane as shown in fig ie (0QR)

(PQR)

(0QR)

Light

source

x

z

y

Step2-a

Now if we rotate the rotation (arbitrary) axis x-axis so that it lies in X-Z

In this situation its shadow will coincides the z-axis

So we are interested in angle α so that shadow will coincides with z-axis

length of shadow L = radicQ2+R2

sin α = QL

cos α = RL

Therefore the matrix for rotation about x-axis

Rx(α) =

1000

00

00

0001

LRLQ

LQLR

(PQR) (0QR)

L

α

After performing x-axis rotation the rotation axis will lie in x-z plane as shown

When we perform x-axis rotation x-value remains unchanged as axis of rotation is in xz plane so y-coordinate is zero We need to get z-value

L = radicP2+Q2+R2

z-coordinate will be v = radic(L2-P2)

(PQR)

L

P

Step2-b

Now we have to rotate the axis around y-axis so that it coincides the z-axis Let that angle be β

From figure cosβ = VL

sin β = pL

Therefore the transformation

matrix for rotation about y-axis

in clockwise rotation is

1000

00

0010

00

LvLp

LpLv

L

P

β

Ry(β) =

step3

Rotation about z-axis by given angle ie θ ie Rz (θ)

Step 4 and 5 does inverse transformations ie Ry-1 Rx-1 T-1

Therefore the final transformation matrix will be the product of all matrices in sequence

RA= T Rx RyRz Ry-1 Rx-1 T-1

1000

0100

00cossin

00sincos

zR

Reflection wrto xy plane

Consider a point P(xyz) The reflection of this point wrto xy plane is given by pointprsquo(xy-z)

Corresponding matrix is given as

M = 1 0 0

0 1 0

0 0 -1

Page 37: 2D transformations - E-STUDYthirdyearengineering.weebly.com/uploads/3/8/2/8/38286065/... · 2018. 9. 10. · In CG images are made up of series of line segments. Each line segment

1

010

001

100

00

00

1

010

001

ff

y

x

ff yx

s

s

yx

Other Two Dimensional Transformations

Reflection

Transformation that produces a mirror image of an object

y

x

Reflection

x-axis y-axis

100

010

001

100

010

001

Reflection

origin line x=y

100

010

001

100

001

010

Shear Transformations

Shear

Transformation that distorts the shape of an object such that the transformed shape appears as the object was composed of internal layers that had been caused to slide over each other

y

x

(01) (11)

(10) (00)

y

x

(21) (31)

(10) (00) shx=2

X-Shear

An x-direction shear relative to the x axis

An y-direction shear relative to the y axis

100

01

001

ysh

100

010

01 xsh

yy

yshxx x

Transformations in 3D

Some graphics applications are 2D such as charts graphs maps etc

But to create realistic picture we need to represent picture in 3D

In 3D geometry we need additional third axis z-axis to specify the depth value of the object

Let us see the coordinate systems used in 3D graphics

Lets plot a point in 3D with coordinates (342)

1 first plot the point at(302)

it is on the plane X-Z

2 then lift the point up by 4 units

Y-axis

X-axis

Z-axis

h

e

i

g

h

t

width

Depth

Translation in 3D

Remembering 2D transformations -gt 3x3 matrices take a wild guess what happens to 3D transformations

3D means z-axis comes into picture Giving Depth information for an object

1

0100

0010

0001

1

010

001

zyx

zyxzyx

yx

yxyx

ttt

tttzxytttT

tt

ttyxttT

T=(tx ty tz)

Scale 3D Style

S=(sx sy sz)

zsz

ysy

xsx

z

y

x

1000

000

000

000

)(

pps

s

s

PPsssS

z

y

x

zyx

3D Rotation

In 3D we have to specify the axis of rotation along with the rotation angle

Positive rotation angles produce counterclockwise rotations about a coordinate axis assuming that we are looking in the negative direction along that coordinate axis

3D Rotation

z-axis rotation

xrsquo=x cos θ - y sin θ

yrsquo=x sin θ + y cos θ

zrsquo=z

or Prsquo = Rz(θ)P

1000

0100

00cossin

00sincos

xrsquo yrsquo zrsquo 1

= x y z 1

When we say that we want to rotate a point in anticlockwise direction about z-axis it is very similar to performing a 2D rotation in anticlockwise direction as follows

Fig2D Rotation Fig 3D Rotation

3D Rotation

z-axis rotation

xrsquo=x cos θ - y sin θ

yrsquo=x sin θ + y cos θ

zrsquo=z Transformation equations for rotation abt the other axes

can be obtained with a cyclic permutation of coordinate parameters xy and z That is we use the replacements

xrarr yrarr zrarr x

x-axis rotation

yrsquo=y cos θ - z sin θ

zrsquo=y sin θ + z cos θ

xrsquo=x

y-axis rotation

zrsquo=z cos θ - x sin θ

xrsquo=z sin θ + x cos θ

yrsquo=y

Matrices for anticlockwise 3D rotation

1000

0cossin0

0sincos0

0001

xR

1000

0cos0sin

0010

0sin0cos

yR

1000

0100

00cossin

00sincos

zR

3D Rotation about an arbitrary axis

General Three-Dimensional Rotations

Special case where an object is to be rotated about an axis that is parallel to one of the coordinate axes

1 Translate the object so that the rotation axis coincides with parallel coordinate axis

2 Perform the specified rotation about the axis

3 Translate the object so that the rotation axis is moved back to its original position

3D Rotation of an object about an arbitrary axis

When an object is to rotated about an axis that is not parallel to one of the coordinate axes

1 Translate the object so that the rotation axis passes through the coordinate origin

2 Rotate the object so that the axis of rotation coincides with one of the coordinate axes

3 Perform the specified rotation about the selected coordinate axis

4 Apply inverse rotations to bring the rotation axis back to its original position

5 Apply the inverse translation to bring the rotation axis back to its original spatial position

We can determine the transformation matrices for each step

Assume that rotation axis ie arbitrary axis is defined with two points p1(x1y1z1) and p2(x2y2z2)

Let us say a point on the axis is (PQR)

Initial position of the axis and point is as bellow

p1

p2

(PQR)

Step1 (Translation)transformation of rotation axis so that it passes through the origin

This can be done by moving point P1 to the origin

This repositions the rotation axis and the object as shown

1111

0100

0010

0001

zyx

Tp1

p2

(PQR)

Step2 transform the rotation axis so that it coincides the z-axis

This can be performed in two sub-steps a) Rotate about x-axis to transform axis into xz plane

b) Swing rotation axis around to the z-axis using y-axis rotation

a) Take projection of line segment (000) to (PQR) onto yz plane as shown in fig ie (0QR)

(PQR)

(0QR)

Light

source

x

z

y

Step2-a

Now if we rotate the rotation (arbitrary) axis x-axis so that it lies in X-Z

In this situation its shadow will coincides the z-axis

So we are interested in angle α so that shadow will coincides with z-axis

length of shadow L = radicQ2+R2

sin α = QL

cos α = RL

Therefore the matrix for rotation about x-axis

Rx(α) =

1000

00

00

0001

LRLQ

LQLR

(PQR) (0QR)

L

α

After performing x-axis rotation the rotation axis will lie in x-z plane as shown

When we perform x-axis rotation x-value remains unchanged as axis of rotation is in xz plane so y-coordinate is zero We need to get z-value

L = radicP2+Q2+R2

z-coordinate will be v = radic(L2-P2)

(PQR)

L

P

Step2-b

Now we have to rotate the axis around y-axis so that it coincides the z-axis Let that angle be β

From figure cosβ = VL

sin β = pL

Therefore the transformation

matrix for rotation about y-axis

in clockwise rotation is

1000

00

0010

00

LvLp

LpLv

L

P

β

Ry(β) =

step3

Rotation about z-axis by given angle ie θ ie Rz (θ)

Step 4 and 5 does inverse transformations ie Ry-1 Rx-1 T-1

Therefore the final transformation matrix will be the product of all matrices in sequence

RA= T Rx RyRz Ry-1 Rx-1 T-1

1000

0100

00cossin

00sincos

zR

Reflection wrto xy plane

Consider a point P(xyz) The reflection of this point wrto xy plane is given by pointprsquo(xy-z)

Corresponding matrix is given as

M = 1 0 0

0 1 0

0 0 -1

Page 38: 2D transformations - E-STUDYthirdyearengineering.weebly.com/uploads/3/8/2/8/38286065/... · 2018. 9. 10. · In CG images are made up of series of line segments. Each line segment

Other Two Dimensional Transformations

Reflection

Transformation that produces a mirror image of an object

y

x

Reflection

x-axis y-axis

100

010

001

100

010

001

Reflection

origin line x=y

100

010

001

100

001

010

Shear Transformations

Shear

Transformation that distorts the shape of an object such that the transformed shape appears as the object was composed of internal layers that had been caused to slide over each other

y

x

(01) (11)

(10) (00)

y

x

(21) (31)

(10) (00) shx=2

X-Shear

An x-direction shear relative to the x axis

An y-direction shear relative to the y axis

100

01

001

ysh

100

010

01 xsh

yy

yshxx x

Transformations in 3D

Some graphics applications are 2D such as charts graphs maps etc

But to create realistic picture we need to represent picture in 3D

In 3D geometry we need additional third axis z-axis to specify the depth value of the object

Let us see the coordinate systems used in 3D graphics

Lets plot a point in 3D with coordinates (342)

1 first plot the point at(302)

it is on the plane X-Z

2 then lift the point up by 4 units

Y-axis

X-axis

Z-axis

h

e

i

g

h

t

width

Depth

Translation in 3D

Remembering 2D transformations -gt 3x3 matrices take a wild guess what happens to 3D transformations

3D means z-axis comes into picture Giving Depth information for an object

1

0100

0010

0001

1

010

001

zyx

zyxzyx

yx

yxyx

ttt

tttzxytttT

tt

ttyxttT

T=(tx ty tz)

Scale 3D Style

S=(sx sy sz)

zsz

ysy

xsx

z

y

x

1000

000

000

000

)(

pps

s

s

PPsssS

z

y

x

zyx

3D Rotation

In 3D we have to specify the axis of rotation along with the rotation angle

Positive rotation angles produce counterclockwise rotations about a coordinate axis assuming that we are looking in the negative direction along that coordinate axis

3D Rotation

z-axis rotation

xrsquo=x cos θ - y sin θ

yrsquo=x sin θ + y cos θ

zrsquo=z

or Prsquo = Rz(θ)P

1000

0100

00cossin

00sincos

xrsquo yrsquo zrsquo 1

= x y z 1

When we say that we want to rotate a point in anticlockwise direction about z-axis it is very similar to performing a 2D rotation in anticlockwise direction as follows

Fig2D Rotation Fig 3D Rotation

3D Rotation

z-axis rotation

xrsquo=x cos θ - y sin θ

yrsquo=x sin θ + y cos θ

zrsquo=z Transformation equations for rotation abt the other axes

can be obtained with a cyclic permutation of coordinate parameters xy and z That is we use the replacements

xrarr yrarr zrarr x

x-axis rotation

yrsquo=y cos θ - z sin θ

zrsquo=y sin θ + z cos θ

xrsquo=x

y-axis rotation

zrsquo=z cos θ - x sin θ

xrsquo=z sin θ + x cos θ

yrsquo=y

Matrices for anticlockwise 3D rotation

1000

0cossin0

0sincos0

0001

xR

1000

0cos0sin

0010

0sin0cos

yR

1000

0100

00cossin

00sincos

zR

3D Rotation about an arbitrary axis

General Three-Dimensional Rotations

Special case where an object is to be rotated about an axis that is parallel to one of the coordinate axes

1 Translate the object so that the rotation axis coincides with parallel coordinate axis

2 Perform the specified rotation about the axis

3 Translate the object so that the rotation axis is moved back to its original position

3D Rotation of an object about an arbitrary axis

When an object is to rotated about an axis that is not parallel to one of the coordinate axes

1 Translate the object so that the rotation axis passes through the coordinate origin

2 Rotate the object so that the axis of rotation coincides with one of the coordinate axes

3 Perform the specified rotation about the selected coordinate axis

4 Apply inverse rotations to bring the rotation axis back to its original position

5 Apply the inverse translation to bring the rotation axis back to its original spatial position

We can determine the transformation matrices for each step

Assume that rotation axis ie arbitrary axis is defined with two points p1(x1y1z1) and p2(x2y2z2)

Let us say a point on the axis is (PQR)

Initial position of the axis and point is as bellow

p1

p2

(PQR)

Step1 (Translation)transformation of rotation axis so that it passes through the origin

This can be done by moving point P1 to the origin

This repositions the rotation axis and the object as shown

1111

0100

0010

0001

zyx

Tp1

p2

(PQR)

Step2 transform the rotation axis so that it coincides the z-axis

This can be performed in two sub-steps a) Rotate about x-axis to transform axis into xz plane

b) Swing rotation axis around to the z-axis using y-axis rotation

a) Take projection of line segment (000) to (PQR) onto yz plane as shown in fig ie (0QR)

(PQR)

(0QR)

Light

source

x

z

y

Step2-a

Now if we rotate the rotation (arbitrary) axis x-axis so that it lies in X-Z

In this situation its shadow will coincides the z-axis

So we are interested in angle α so that shadow will coincides with z-axis

length of shadow L = radicQ2+R2

sin α = QL

cos α = RL

Therefore the matrix for rotation about x-axis

Rx(α) =

1000

00

00

0001

LRLQ

LQLR

(PQR) (0QR)

L

α

After performing x-axis rotation the rotation axis will lie in x-z plane as shown

When we perform x-axis rotation x-value remains unchanged as axis of rotation is in xz plane so y-coordinate is zero We need to get z-value

L = radicP2+Q2+R2

z-coordinate will be v = radic(L2-P2)

(PQR)

L

P

Step2-b

Now we have to rotate the axis around y-axis so that it coincides the z-axis Let that angle be β

From figure cosβ = VL

sin β = pL

Therefore the transformation

matrix for rotation about y-axis

in clockwise rotation is

1000

00

0010

00

LvLp

LpLv

L

P

β

Ry(β) =

step3

Rotation about z-axis by given angle ie θ ie Rz (θ)

Step 4 and 5 does inverse transformations ie Ry-1 Rx-1 T-1

Therefore the final transformation matrix will be the product of all matrices in sequence

RA= T Rx RyRz Ry-1 Rx-1 T-1

1000

0100

00cossin

00sincos

zR

Reflection wrto xy plane

Consider a point P(xyz) The reflection of this point wrto xy plane is given by pointprsquo(xy-z)

Corresponding matrix is given as

M = 1 0 0

0 1 0

0 0 -1

Page 39: 2D transformations - E-STUDYthirdyearengineering.weebly.com/uploads/3/8/2/8/38286065/... · 2018. 9. 10. · In CG images are made up of series of line segments. Each line segment

Reflection

x-axis y-axis

100

010

001

100

010

001

Reflection

origin line x=y

100

010

001

100

001

010

Shear Transformations

Shear

Transformation that distorts the shape of an object such that the transformed shape appears as the object was composed of internal layers that had been caused to slide over each other

y

x

(01) (11)

(10) (00)

y

x

(21) (31)

(10) (00) shx=2

X-Shear

An x-direction shear relative to the x axis

An y-direction shear relative to the y axis

100

01

001

ysh

100

010

01 xsh

yy

yshxx x

Transformations in 3D

Some graphics applications are 2D such as charts graphs maps etc

But to create realistic picture we need to represent picture in 3D

In 3D geometry we need additional third axis z-axis to specify the depth value of the object

Let us see the coordinate systems used in 3D graphics

Lets plot a point in 3D with coordinates (342)

1 first plot the point at(302)

it is on the plane X-Z

2 then lift the point up by 4 units

Y-axis

X-axis

Z-axis

h

e

i

g

h

t

width

Depth

Translation in 3D

Remembering 2D transformations -gt 3x3 matrices take a wild guess what happens to 3D transformations

3D means z-axis comes into picture Giving Depth information for an object

1

0100

0010

0001

1

010

001

zyx

zyxzyx

yx

yxyx

ttt

tttzxytttT

tt

ttyxttT

T=(tx ty tz)

Scale 3D Style

S=(sx sy sz)

zsz

ysy

xsx

z

y

x

1000

000

000

000

)(

pps

s

s

PPsssS

z

y

x

zyx

3D Rotation

In 3D we have to specify the axis of rotation along with the rotation angle

Positive rotation angles produce counterclockwise rotations about a coordinate axis assuming that we are looking in the negative direction along that coordinate axis

3D Rotation

z-axis rotation

xrsquo=x cos θ - y sin θ

yrsquo=x sin θ + y cos θ

zrsquo=z

or Prsquo = Rz(θ)P

1000

0100

00cossin

00sincos

xrsquo yrsquo zrsquo 1

= x y z 1

When we say that we want to rotate a point in anticlockwise direction about z-axis it is very similar to performing a 2D rotation in anticlockwise direction as follows

Fig2D Rotation Fig 3D Rotation

3D Rotation

z-axis rotation

xrsquo=x cos θ - y sin θ

yrsquo=x sin θ + y cos θ

zrsquo=z Transformation equations for rotation abt the other axes

can be obtained with a cyclic permutation of coordinate parameters xy and z That is we use the replacements

xrarr yrarr zrarr x

x-axis rotation

yrsquo=y cos θ - z sin θ

zrsquo=y sin θ + z cos θ

xrsquo=x

y-axis rotation

zrsquo=z cos θ - x sin θ

xrsquo=z sin θ + x cos θ

yrsquo=y

Matrices for anticlockwise 3D rotation

1000

0cossin0

0sincos0

0001

xR

1000

0cos0sin

0010

0sin0cos

yR

1000

0100

00cossin

00sincos

zR

3D Rotation about an arbitrary axis

General Three-Dimensional Rotations

Special case where an object is to be rotated about an axis that is parallel to one of the coordinate axes

1 Translate the object so that the rotation axis coincides with parallel coordinate axis

2 Perform the specified rotation about the axis

3 Translate the object so that the rotation axis is moved back to its original position

3D Rotation of an object about an arbitrary axis

When an object is to rotated about an axis that is not parallel to one of the coordinate axes

1 Translate the object so that the rotation axis passes through the coordinate origin

2 Rotate the object so that the axis of rotation coincides with one of the coordinate axes

3 Perform the specified rotation about the selected coordinate axis

4 Apply inverse rotations to bring the rotation axis back to its original position

5 Apply the inverse translation to bring the rotation axis back to its original spatial position

We can determine the transformation matrices for each step

Assume that rotation axis ie arbitrary axis is defined with two points p1(x1y1z1) and p2(x2y2z2)

Let us say a point on the axis is (PQR)

Initial position of the axis and point is as bellow

p1

p2

(PQR)

Step1 (Translation)transformation of rotation axis so that it passes through the origin

This can be done by moving point P1 to the origin

This repositions the rotation axis and the object as shown

1111

0100

0010

0001

zyx

Tp1

p2

(PQR)

Step2 transform the rotation axis so that it coincides the z-axis

This can be performed in two sub-steps a) Rotate about x-axis to transform axis into xz plane

b) Swing rotation axis around to the z-axis using y-axis rotation

a) Take projection of line segment (000) to (PQR) onto yz plane as shown in fig ie (0QR)

(PQR)

(0QR)

Light

source

x

z

y

Step2-a

Now if we rotate the rotation (arbitrary) axis x-axis so that it lies in X-Z

In this situation its shadow will coincides the z-axis

So we are interested in angle α so that shadow will coincides with z-axis

length of shadow L = radicQ2+R2

sin α = QL

cos α = RL

Therefore the matrix for rotation about x-axis

Rx(α) =

1000

00

00

0001

LRLQ

LQLR

(PQR) (0QR)

L

α

After performing x-axis rotation the rotation axis will lie in x-z plane as shown

When we perform x-axis rotation x-value remains unchanged as axis of rotation is in xz plane so y-coordinate is zero We need to get z-value

L = radicP2+Q2+R2

z-coordinate will be v = radic(L2-P2)

(PQR)

L

P

Step2-b

Now we have to rotate the axis around y-axis so that it coincides the z-axis Let that angle be β

From figure cosβ = VL

sin β = pL

Therefore the transformation

matrix for rotation about y-axis

in clockwise rotation is

1000

00

0010

00

LvLp

LpLv

L

P

β

Ry(β) =

step3

Rotation about z-axis by given angle ie θ ie Rz (θ)

Step 4 and 5 does inverse transformations ie Ry-1 Rx-1 T-1

Therefore the final transformation matrix will be the product of all matrices in sequence

RA= T Rx RyRz Ry-1 Rx-1 T-1

1000

0100

00cossin

00sincos

zR

Reflection wrto xy plane

Consider a point P(xyz) The reflection of this point wrto xy plane is given by pointprsquo(xy-z)

Corresponding matrix is given as

M = 1 0 0

0 1 0

0 0 -1

Page 40: 2D transformations - E-STUDYthirdyearengineering.weebly.com/uploads/3/8/2/8/38286065/... · 2018. 9. 10. · In CG images are made up of series of line segments. Each line segment

Reflection

origin line x=y

100

010

001

100

001

010

Shear Transformations

Shear

Transformation that distorts the shape of an object such that the transformed shape appears as the object was composed of internal layers that had been caused to slide over each other

y

x

(01) (11)

(10) (00)

y

x

(21) (31)

(10) (00) shx=2

X-Shear

An x-direction shear relative to the x axis

An y-direction shear relative to the y axis

100

01

001

ysh

100

010

01 xsh

yy

yshxx x

Transformations in 3D

Some graphics applications are 2D such as charts graphs maps etc

But to create realistic picture we need to represent picture in 3D

In 3D geometry we need additional third axis z-axis to specify the depth value of the object

Let us see the coordinate systems used in 3D graphics

Lets plot a point in 3D with coordinates (342)

1 first plot the point at(302)

it is on the plane X-Z

2 then lift the point up by 4 units

Y-axis

X-axis

Z-axis

h

e

i

g

h

t

width

Depth

Translation in 3D

Remembering 2D transformations -gt 3x3 matrices take a wild guess what happens to 3D transformations

3D means z-axis comes into picture Giving Depth information for an object

1

0100

0010

0001

1

010

001

zyx

zyxzyx

yx

yxyx

ttt

tttzxytttT

tt

ttyxttT

T=(tx ty tz)

Scale 3D Style

S=(sx sy sz)

zsz

ysy

xsx

z

y

x

1000

000

000

000

)(

pps

s

s

PPsssS

z

y

x

zyx

3D Rotation

In 3D we have to specify the axis of rotation along with the rotation angle

Positive rotation angles produce counterclockwise rotations about a coordinate axis assuming that we are looking in the negative direction along that coordinate axis

3D Rotation

z-axis rotation

xrsquo=x cos θ - y sin θ

yrsquo=x sin θ + y cos θ

zrsquo=z

or Prsquo = Rz(θ)P

1000

0100

00cossin

00sincos

xrsquo yrsquo zrsquo 1

= x y z 1

When we say that we want to rotate a point in anticlockwise direction about z-axis it is very similar to performing a 2D rotation in anticlockwise direction as follows

Fig2D Rotation Fig 3D Rotation

3D Rotation

z-axis rotation

xrsquo=x cos θ - y sin θ

yrsquo=x sin θ + y cos θ

zrsquo=z Transformation equations for rotation abt the other axes

can be obtained with a cyclic permutation of coordinate parameters xy and z That is we use the replacements

xrarr yrarr zrarr x

x-axis rotation

yrsquo=y cos θ - z sin θ

zrsquo=y sin θ + z cos θ

xrsquo=x

y-axis rotation

zrsquo=z cos θ - x sin θ

xrsquo=z sin θ + x cos θ

yrsquo=y

Matrices for anticlockwise 3D rotation

1000

0cossin0

0sincos0

0001

xR

1000

0cos0sin

0010

0sin0cos

yR

1000

0100

00cossin

00sincos

zR

3D Rotation about an arbitrary axis

General Three-Dimensional Rotations

Special case where an object is to be rotated about an axis that is parallel to one of the coordinate axes

1 Translate the object so that the rotation axis coincides with parallel coordinate axis

2 Perform the specified rotation about the axis

3 Translate the object so that the rotation axis is moved back to its original position

3D Rotation of an object about an arbitrary axis

When an object is to rotated about an axis that is not parallel to one of the coordinate axes

1 Translate the object so that the rotation axis passes through the coordinate origin

2 Rotate the object so that the axis of rotation coincides with one of the coordinate axes

3 Perform the specified rotation about the selected coordinate axis

4 Apply inverse rotations to bring the rotation axis back to its original position

5 Apply the inverse translation to bring the rotation axis back to its original spatial position

We can determine the transformation matrices for each step

Assume that rotation axis ie arbitrary axis is defined with two points p1(x1y1z1) and p2(x2y2z2)

Let us say a point on the axis is (PQR)

Initial position of the axis and point is as bellow

p1

p2

(PQR)

Step1 (Translation)transformation of rotation axis so that it passes through the origin

This can be done by moving point P1 to the origin

This repositions the rotation axis and the object as shown

1111

0100

0010

0001

zyx

Tp1

p2

(PQR)

Step2 transform the rotation axis so that it coincides the z-axis

This can be performed in two sub-steps a) Rotate about x-axis to transform axis into xz plane

b) Swing rotation axis around to the z-axis using y-axis rotation

a) Take projection of line segment (000) to (PQR) onto yz plane as shown in fig ie (0QR)

(PQR)

(0QR)

Light

source

x

z

y

Step2-a

Now if we rotate the rotation (arbitrary) axis x-axis so that it lies in X-Z

In this situation its shadow will coincides the z-axis

So we are interested in angle α so that shadow will coincides with z-axis

length of shadow L = radicQ2+R2

sin α = QL

cos α = RL

Therefore the matrix for rotation about x-axis

Rx(α) =

1000

00

00

0001

LRLQ

LQLR

(PQR) (0QR)

L

α

After performing x-axis rotation the rotation axis will lie in x-z plane as shown

When we perform x-axis rotation x-value remains unchanged as axis of rotation is in xz plane so y-coordinate is zero We need to get z-value

L = radicP2+Q2+R2

z-coordinate will be v = radic(L2-P2)

(PQR)

L

P

Step2-b

Now we have to rotate the axis around y-axis so that it coincides the z-axis Let that angle be β

From figure cosβ = VL

sin β = pL

Therefore the transformation

matrix for rotation about y-axis

in clockwise rotation is

1000

00

0010

00

LvLp

LpLv

L

P

β

Ry(β) =

step3

Rotation about z-axis by given angle ie θ ie Rz (θ)

Step 4 and 5 does inverse transformations ie Ry-1 Rx-1 T-1

Therefore the final transformation matrix will be the product of all matrices in sequence

RA= T Rx RyRz Ry-1 Rx-1 T-1

1000

0100

00cossin

00sincos

zR

Reflection wrto xy plane

Consider a point P(xyz) The reflection of this point wrto xy plane is given by pointprsquo(xy-z)

Corresponding matrix is given as

M = 1 0 0

0 1 0

0 0 -1

Page 41: 2D transformations - E-STUDYthirdyearengineering.weebly.com/uploads/3/8/2/8/38286065/... · 2018. 9. 10. · In CG images are made up of series of line segments. Each line segment

Shear Transformations

Shear

Transformation that distorts the shape of an object such that the transformed shape appears as the object was composed of internal layers that had been caused to slide over each other

y

x

(01) (11)

(10) (00)

y

x

(21) (31)

(10) (00) shx=2

X-Shear

An x-direction shear relative to the x axis

An y-direction shear relative to the y axis

100

01

001

ysh

100

010

01 xsh

yy

yshxx x

Transformations in 3D

Some graphics applications are 2D such as charts graphs maps etc

But to create realistic picture we need to represent picture in 3D

In 3D geometry we need additional third axis z-axis to specify the depth value of the object

Let us see the coordinate systems used in 3D graphics

Lets plot a point in 3D with coordinates (342)

1 first plot the point at(302)

it is on the plane X-Z

2 then lift the point up by 4 units

Y-axis

X-axis

Z-axis

h

e

i

g

h

t

width

Depth

Translation in 3D

Remembering 2D transformations -gt 3x3 matrices take a wild guess what happens to 3D transformations

3D means z-axis comes into picture Giving Depth information for an object

1

0100

0010

0001

1

010

001

zyx

zyxzyx

yx

yxyx

ttt

tttzxytttT

tt

ttyxttT

T=(tx ty tz)

Scale 3D Style

S=(sx sy sz)

zsz

ysy

xsx

z

y

x

1000

000

000

000

)(

pps

s

s

PPsssS

z

y

x

zyx

3D Rotation

In 3D we have to specify the axis of rotation along with the rotation angle

Positive rotation angles produce counterclockwise rotations about a coordinate axis assuming that we are looking in the negative direction along that coordinate axis

3D Rotation

z-axis rotation

xrsquo=x cos θ - y sin θ

yrsquo=x sin θ + y cos θ

zrsquo=z

or Prsquo = Rz(θ)P

1000

0100

00cossin

00sincos

xrsquo yrsquo zrsquo 1

= x y z 1

When we say that we want to rotate a point in anticlockwise direction about z-axis it is very similar to performing a 2D rotation in anticlockwise direction as follows

Fig2D Rotation Fig 3D Rotation

3D Rotation

z-axis rotation

xrsquo=x cos θ - y sin θ

yrsquo=x sin θ + y cos θ

zrsquo=z Transformation equations for rotation abt the other axes

can be obtained with a cyclic permutation of coordinate parameters xy and z That is we use the replacements

xrarr yrarr zrarr x

x-axis rotation

yrsquo=y cos θ - z sin θ

zrsquo=y sin θ + z cos θ

xrsquo=x

y-axis rotation

zrsquo=z cos θ - x sin θ

xrsquo=z sin θ + x cos θ

yrsquo=y

Matrices for anticlockwise 3D rotation

1000

0cossin0

0sincos0

0001

xR

1000

0cos0sin

0010

0sin0cos

yR

1000

0100

00cossin

00sincos

zR

3D Rotation about an arbitrary axis

General Three-Dimensional Rotations

Special case where an object is to be rotated about an axis that is parallel to one of the coordinate axes

1 Translate the object so that the rotation axis coincides with parallel coordinate axis

2 Perform the specified rotation about the axis

3 Translate the object so that the rotation axis is moved back to its original position

3D Rotation of an object about an arbitrary axis

When an object is to rotated about an axis that is not parallel to one of the coordinate axes

1 Translate the object so that the rotation axis passes through the coordinate origin

2 Rotate the object so that the axis of rotation coincides with one of the coordinate axes

3 Perform the specified rotation about the selected coordinate axis

4 Apply inverse rotations to bring the rotation axis back to its original position

5 Apply the inverse translation to bring the rotation axis back to its original spatial position

We can determine the transformation matrices for each step

Assume that rotation axis ie arbitrary axis is defined with two points p1(x1y1z1) and p2(x2y2z2)

Let us say a point on the axis is (PQR)

Initial position of the axis and point is as bellow

p1

p2

(PQR)

Step1 (Translation)transformation of rotation axis so that it passes through the origin

This can be done by moving point P1 to the origin

This repositions the rotation axis and the object as shown

1111

0100

0010

0001

zyx

Tp1

p2

(PQR)

Step2 transform the rotation axis so that it coincides the z-axis

This can be performed in two sub-steps a) Rotate about x-axis to transform axis into xz plane

b) Swing rotation axis around to the z-axis using y-axis rotation

a) Take projection of line segment (000) to (PQR) onto yz plane as shown in fig ie (0QR)

(PQR)

(0QR)

Light

source

x

z

y

Step2-a

Now if we rotate the rotation (arbitrary) axis x-axis so that it lies in X-Z

In this situation its shadow will coincides the z-axis

So we are interested in angle α so that shadow will coincides with z-axis

length of shadow L = radicQ2+R2

sin α = QL

cos α = RL

Therefore the matrix for rotation about x-axis

Rx(α) =

1000

00

00

0001

LRLQ

LQLR

(PQR) (0QR)

L

α

After performing x-axis rotation the rotation axis will lie in x-z plane as shown

When we perform x-axis rotation x-value remains unchanged as axis of rotation is in xz plane so y-coordinate is zero We need to get z-value

L = radicP2+Q2+R2

z-coordinate will be v = radic(L2-P2)

(PQR)

L

P

Step2-b

Now we have to rotate the axis around y-axis so that it coincides the z-axis Let that angle be β

From figure cosβ = VL

sin β = pL

Therefore the transformation

matrix for rotation about y-axis

in clockwise rotation is

1000

00

0010

00

LvLp

LpLv

L

P

β

Ry(β) =

step3

Rotation about z-axis by given angle ie θ ie Rz (θ)

Step 4 and 5 does inverse transformations ie Ry-1 Rx-1 T-1

Therefore the final transformation matrix will be the product of all matrices in sequence

RA= T Rx RyRz Ry-1 Rx-1 T-1

1000

0100

00cossin

00sincos

zR

Reflection wrto xy plane

Consider a point P(xyz) The reflection of this point wrto xy plane is given by pointprsquo(xy-z)

Corresponding matrix is given as

M = 1 0 0

0 1 0

0 0 -1

Page 42: 2D transformations - E-STUDYthirdyearengineering.weebly.com/uploads/3/8/2/8/38286065/... · 2018. 9. 10. · In CG images are made up of series of line segments. Each line segment

X-Shear

An x-direction shear relative to the x axis

An y-direction shear relative to the y axis

100

01

001

ysh

100

010

01 xsh

yy

yshxx x

Transformations in 3D

Some graphics applications are 2D such as charts graphs maps etc

But to create realistic picture we need to represent picture in 3D

In 3D geometry we need additional third axis z-axis to specify the depth value of the object

Let us see the coordinate systems used in 3D graphics

Lets plot a point in 3D with coordinates (342)

1 first plot the point at(302)

it is on the plane X-Z

2 then lift the point up by 4 units

Y-axis

X-axis

Z-axis

h

e

i

g

h

t

width

Depth

Translation in 3D

Remembering 2D transformations -gt 3x3 matrices take a wild guess what happens to 3D transformations

3D means z-axis comes into picture Giving Depth information for an object

1

0100

0010

0001

1

010

001

zyx

zyxzyx

yx

yxyx

ttt

tttzxytttT

tt

ttyxttT

T=(tx ty tz)

Scale 3D Style

S=(sx sy sz)

zsz

ysy

xsx

z

y

x

1000

000

000

000

)(

pps

s

s

PPsssS

z

y

x

zyx

3D Rotation

In 3D we have to specify the axis of rotation along with the rotation angle

Positive rotation angles produce counterclockwise rotations about a coordinate axis assuming that we are looking in the negative direction along that coordinate axis

3D Rotation

z-axis rotation

xrsquo=x cos θ - y sin θ

yrsquo=x sin θ + y cos θ

zrsquo=z

or Prsquo = Rz(θ)P

1000

0100

00cossin

00sincos

xrsquo yrsquo zrsquo 1

= x y z 1

When we say that we want to rotate a point in anticlockwise direction about z-axis it is very similar to performing a 2D rotation in anticlockwise direction as follows

Fig2D Rotation Fig 3D Rotation

3D Rotation

z-axis rotation

xrsquo=x cos θ - y sin θ

yrsquo=x sin θ + y cos θ

zrsquo=z Transformation equations for rotation abt the other axes

can be obtained with a cyclic permutation of coordinate parameters xy and z That is we use the replacements

xrarr yrarr zrarr x

x-axis rotation

yrsquo=y cos θ - z sin θ

zrsquo=y sin θ + z cos θ

xrsquo=x

y-axis rotation

zrsquo=z cos θ - x sin θ

xrsquo=z sin θ + x cos θ

yrsquo=y

Matrices for anticlockwise 3D rotation

1000

0cossin0

0sincos0

0001

xR

1000

0cos0sin

0010

0sin0cos

yR

1000

0100

00cossin

00sincos

zR

3D Rotation about an arbitrary axis

General Three-Dimensional Rotations

Special case where an object is to be rotated about an axis that is parallel to one of the coordinate axes

1 Translate the object so that the rotation axis coincides with parallel coordinate axis

2 Perform the specified rotation about the axis

3 Translate the object so that the rotation axis is moved back to its original position

3D Rotation of an object about an arbitrary axis

When an object is to rotated about an axis that is not parallel to one of the coordinate axes

1 Translate the object so that the rotation axis passes through the coordinate origin

2 Rotate the object so that the axis of rotation coincides with one of the coordinate axes

3 Perform the specified rotation about the selected coordinate axis

4 Apply inverse rotations to bring the rotation axis back to its original position

5 Apply the inverse translation to bring the rotation axis back to its original spatial position

We can determine the transformation matrices for each step

Assume that rotation axis ie arbitrary axis is defined with two points p1(x1y1z1) and p2(x2y2z2)

Let us say a point on the axis is (PQR)

Initial position of the axis and point is as bellow

p1

p2

(PQR)

Step1 (Translation)transformation of rotation axis so that it passes through the origin

This can be done by moving point P1 to the origin

This repositions the rotation axis and the object as shown

1111

0100

0010

0001

zyx

Tp1

p2

(PQR)

Step2 transform the rotation axis so that it coincides the z-axis

This can be performed in two sub-steps a) Rotate about x-axis to transform axis into xz plane

b) Swing rotation axis around to the z-axis using y-axis rotation

a) Take projection of line segment (000) to (PQR) onto yz plane as shown in fig ie (0QR)

(PQR)

(0QR)

Light

source

x

z

y

Step2-a

Now if we rotate the rotation (arbitrary) axis x-axis so that it lies in X-Z

In this situation its shadow will coincides the z-axis

So we are interested in angle α so that shadow will coincides with z-axis

length of shadow L = radicQ2+R2

sin α = QL

cos α = RL

Therefore the matrix for rotation about x-axis

Rx(α) =

1000

00

00

0001

LRLQ

LQLR

(PQR) (0QR)

L

α

After performing x-axis rotation the rotation axis will lie in x-z plane as shown

When we perform x-axis rotation x-value remains unchanged as axis of rotation is in xz plane so y-coordinate is zero We need to get z-value

L = radicP2+Q2+R2

z-coordinate will be v = radic(L2-P2)

(PQR)

L

P

Step2-b

Now we have to rotate the axis around y-axis so that it coincides the z-axis Let that angle be β

From figure cosβ = VL

sin β = pL

Therefore the transformation

matrix for rotation about y-axis

in clockwise rotation is

1000

00

0010

00

LvLp

LpLv

L

P

β

Ry(β) =

step3

Rotation about z-axis by given angle ie θ ie Rz (θ)

Step 4 and 5 does inverse transformations ie Ry-1 Rx-1 T-1

Therefore the final transformation matrix will be the product of all matrices in sequence

RA= T Rx RyRz Ry-1 Rx-1 T-1

1000

0100

00cossin

00sincos

zR

Reflection wrto xy plane

Consider a point P(xyz) The reflection of this point wrto xy plane is given by pointprsquo(xy-z)

Corresponding matrix is given as

M = 1 0 0

0 1 0

0 0 -1

Page 43: 2D transformations - E-STUDYthirdyearengineering.weebly.com/uploads/3/8/2/8/38286065/... · 2018. 9. 10. · In CG images are made up of series of line segments. Each line segment

Transformations in 3D

Some graphics applications are 2D such as charts graphs maps etc

But to create realistic picture we need to represent picture in 3D

In 3D geometry we need additional third axis z-axis to specify the depth value of the object

Let us see the coordinate systems used in 3D graphics

Lets plot a point in 3D with coordinates (342)

1 first plot the point at(302)

it is on the plane X-Z

2 then lift the point up by 4 units

Y-axis

X-axis

Z-axis

h

e

i

g

h

t

width

Depth

Translation in 3D

Remembering 2D transformations -gt 3x3 matrices take a wild guess what happens to 3D transformations

3D means z-axis comes into picture Giving Depth information for an object

1

0100

0010

0001

1

010

001

zyx

zyxzyx

yx

yxyx

ttt

tttzxytttT

tt

ttyxttT

T=(tx ty tz)

Scale 3D Style

S=(sx sy sz)

zsz

ysy

xsx

z

y

x

1000

000

000

000

)(

pps

s

s

PPsssS

z

y

x

zyx

3D Rotation

In 3D we have to specify the axis of rotation along with the rotation angle

Positive rotation angles produce counterclockwise rotations about a coordinate axis assuming that we are looking in the negative direction along that coordinate axis

3D Rotation

z-axis rotation

xrsquo=x cos θ - y sin θ

yrsquo=x sin θ + y cos θ

zrsquo=z

or Prsquo = Rz(θ)P

1000

0100

00cossin

00sincos

xrsquo yrsquo zrsquo 1

= x y z 1

When we say that we want to rotate a point in anticlockwise direction about z-axis it is very similar to performing a 2D rotation in anticlockwise direction as follows

Fig2D Rotation Fig 3D Rotation

3D Rotation

z-axis rotation

xrsquo=x cos θ - y sin θ

yrsquo=x sin θ + y cos θ

zrsquo=z Transformation equations for rotation abt the other axes

can be obtained with a cyclic permutation of coordinate parameters xy and z That is we use the replacements

xrarr yrarr zrarr x

x-axis rotation

yrsquo=y cos θ - z sin θ

zrsquo=y sin θ + z cos θ

xrsquo=x

y-axis rotation

zrsquo=z cos θ - x sin θ

xrsquo=z sin θ + x cos θ

yrsquo=y

Matrices for anticlockwise 3D rotation

1000

0cossin0

0sincos0

0001

xR

1000

0cos0sin

0010

0sin0cos

yR

1000

0100

00cossin

00sincos

zR

3D Rotation about an arbitrary axis

General Three-Dimensional Rotations

Special case where an object is to be rotated about an axis that is parallel to one of the coordinate axes

1 Translate the object so that the rotation axis coincides with parallel coordinate axis

2 Perform the specified rotation about the axis

3 Translate the object so that the rotation axis is moved back to its original position

3D Rotation of an object about an arbitrary axis

When an object is to rotated about an axis that is not parallel to one of the coordinate axes

1 Translate the object so that the rotation axis passes through the coordinate origin

2 Rotate the object so that the axis of rotation coincides with one of the coordinate axes

3 Perform the specified rotation about the selected coordinate axis

4 Apply inverse rotations to bring the rotation axis back to its original position

5 Apply the inverse translation to bring the rotation axis back to its original spatial position

We can determine the transformation matrices for each step

Assume that rotation axis ie arbitrary axis is defined with two points p1(x1y1z1) and p2(x2y2z2)

Let us say a point on the axis is (PQR)

Initial position of the axis and point is as bellow

p1

p2

(PQR)

Step1 (Translation)transformation of rotation axis so that it passes through the origin

This can be done by moving point P1 to the origin

This repositions the rotation axis and the object as shown

1111

0100

0010

0001

zyx

Tp1

p2

(PQR)

Step2 transform the rotation axis so that it coincides the z-axis

This can be performed in two sub-steps a) Rotate about x-axis to transform axis into xz plane

b) Swing rotation axis around to the z-axis using y-axis rotation

a) Take projection of line segment (000) to (PQR) onto yz plane as shown in fig ie (0QR)

(PQR)

(0QR)

Light

source

x

z

y

Step2-a

Now if we rotate the rotation (arbitrary) axis x-axis so that it lies in X-Z

In this situation its shadow will coincides the z-axis

So we are interested in angle α so that shadow will coincides with z-axis

length of shadow L = radicQ2+R2

sin α = QL

cos α = RL

Therefore the matrix for rotation about x-axis

Rx(α) =

1000

00

00

0001

LRLQ

LQLR

(PQR) (0QR)

L

α

After performing x-axis rotation the rotation axis will lie in x-z plane as shown

When we perform x-axis rotation x-value remains unchanged as axis of rotation is in xz plane so y-coordinate is zero We need to get z-value

L = radicP2+Q2+R2

z-coordinate will be v = radic(L2-P2)

(PQR)

L

P

Step2-b

Now we have to rotate the axis around y-axis so that it coincides the z-axis Let that angle be β

From figure cosβ = VL

sin β = pL

Therefore the transformation

matrix for rotation about y-axis

in clockwise rotation is

1000

00

0010

00

LvLp

LpLv

L

P

β

Ry(β) =

step3

Rotation about z-axis by given angle ie θ ie Rz (θ)

Step 4 and 5 does inverse transformations ie Ry-1 Rx-1 T-1

Therefore the final transformation matrix will be the product of all matrices in sequence

RA= T Rx RyRz Ry-1 Rx-1 T-1

1000

0100

00cossin

00sincos

zR

Reflection wrto xy plane

Consider a point P(xyz) The reflection of this point wrto xy plane is given by pointprsquo(xy-z)

Corresponding matrix is given as

M = 1 0 0

0 1 0

0 0 -1

Page 44: 2D transformations - E-STUDYthirdyearengineering.weebly.com/uploads/3/8/2/8/38286065/... · 2018. 9. 10. · In CG images are made up of series of line segments. Each line segment

Some graphics applications are 2D such as charts graphs maps etc

But to create realistic picture we need to represent picture in 3D

In 3D geometry we need additional third axis z-axis to specify the depth value of the object

Let us see the coordinate systems used in 3D graphics

Lets plot a point in 3D with coordinates (342)

1 first plot the point at(302)

it is on the plane X-Z

2 then lift the point up by 4 units

Y-axis

X-axis

Z-axis

h

e

i

g

h

t

width

Depth

Translation in 3D

Remembering 2D transformations -gt 3x3 matrices take a wild guess what happens to 3D transformations

3D means z-axis comes into picture Giving Depth information for an object

1

0100

0010

0001

1

010

001

zyx

zyxzyx

yx

yxyx

ttt

tttzxytttT

tt

ttyxttT

T=(tx ty tz)

Scale 3D Style

S=(sx sy sz)

zsz

ysy

xsx

z

y

x

1000

000

000

000

)(

pps

s

s

PPsssS

z

y

x

zyx

3D Rotation

In 3D we have to specify the axis of rotation along with the rotation angle

Positive rotation angles produce counterclockwise rotations about a coordinate axis assuming that we are looking in the negative direction along that coordinate axis

3D Rotation

z-axis rotation

xrsquo=x cos θ - y sin θ

yrsquo=x sin θ + y cos θ

zrsquo=z

or Prsquo = Rz(θ)P

1000

0100

00cossin

00sincos

xrsquo yrsquo zrsquo 1

= x y z 1

When we say that we want to rotate a point in anticlockwise direction about z-axis it is very similar to performing a 2D rotation in anticlockwise direction as follows

Fig2D Rotation Fig 3D Rotation

3D Rotation

z-axis rotation

xrsquo=x cos θ - y sin θ

yrsquo=x sin θ + y cos θ

zrsquo=z Transformation equations for rotation abt the other axes

can be obtained with a cyclic permutation of coordinate parameters xy and z That is we use the replacements

xrarr yrarr zrarr x

x-axis rotation

yrsquo=y cos θ - z sin θ

zrsquo=y sin θ + z cos θ

xrsquo=x

y-axis rotation

zrsquo=z cos θ - x sin θ

xrsquo=z sin θ + x cos θ

yrsquo=y

Matrices for anticlockwise 3D rotation

1000

0cossin0

0sincos0

0001

xR

1000

0cos0sin

0010

0sin0cos

yR

1000

0100

00cossin

00sincos

zR

3D Rotation about an arbitrary axis

General Three-Dimensional Rotations

Special case where an object is to be rotated about an axis that is parallel to one of the coordinate axes

1 Translate the object so that the rotation axis coincides with parallel coordinate axis

2 Perform the specified rotation about the axis

3 Translate the object so that the rotation axis is moved back to its original position

3D Rotation of an object about an arbitrary axis

When an object is to rotated about an axis that is not parallel to one of the coordinate axes

1 Translate the object so that the rotation axis passes through the coordinate origin

2 Rotate the object so that the axis of rotation coincides with one of the coordinate axes

3 Perform the specified rotation about the selected coordinate axis

4 Apply inverse rotations to bring the rotation axis back to its original position

5 Apply the inverse translation to bring the rotation axis back to its original spatial position

We can determine the transformation matrices for each step

Assume that rotation axis ie arbitrary axis is defined with two points p1(x1y1z1) and p2(x2y2z2)

Let us say a point on the axis is (PQR)

Initial position of the axis and point is as bellow

p1

p2

(PQR)

Step1 (Translation)transformation of rotation axis so that it passes through the origin

This can be done by moving point P1 to the origin

This repositions the rotation axis and the object as shown

1111

0100

0010

0001

zyx

Tp1

p2

(PQR)

Step2 transform the rotation axis so that it coincides the z-axis

This can be performed in two sub-steps a) Rotate about x-axis to transform axis into xz plane

b) Swing rotation axis around to the z-axis using y-axis rotation

a) Take projection of line segment (000) to (PQR) onto yz plane as shown in fig ie (0QR)

(PQR)

(0QR)

Light

source

x

z

y

Step2-a

Now if we rotate the rotation (arbitrary) axis x-axis so that it lies in X-Z

In this situation its shadow will coincides the z-axis

So we are interested in angle α so that shadow will coincides with z-axis

length of shadow L = radicQ2+R2

sin α = QL

cos α = RL

Therefore the matrix for rotation about x-axis

Rx(α) =

1000

00

00

0001

LRLQ

LQLR

(PQR) (0QR)

L

α

After performing x-axis rotation the rotation axis will lie in x-z plane as shown

When we perform x-axis rotation x-value remains unchanged as axis of rotation is in xz plane so y-coordinate is zero We need to get z-value

L = radicP2+Q2+R2

z-coordinate will be v = radic(L2-P2)

(PQR)

L

P

Step2-b

Now we have to rotate the axis around y-axis so that it coincides the z-axis Let that angle be β

From figure cosβ = VL

sin β = pL

Therefore the transformation

matrix for rotation about y-axis

in clockwise rotation is

1000

00

0010

00

LvLp

LpLv

L

P

β

Ry(β) =

step3

Rotation about z-axis by given angle ie θ ie Rz (θ)

Step 4 and 5 does inverse transformations ie Ry-1 Rx-1 T-1

Therefore the final transformation matrix will be the product of all matrices in sequence

RA= T Rx RyRz Ry-1 Rx-1 T-1

1000

0100

00cossin

00sincos

zR

Reflection wrto xy plane

Consider a point P(xyz) The reflection of this point wrto xy plane is given by pointprsquo(xy-z)

Corresponding matrix is given as

M = 1 0 0

0 1 0

0 0 -1

Page 45: 2D transformations - E-STUDYthirdyearengineering.weebly.com/uploads/3/8/2/8/38286065/... · 2018. 9. 10. · In CG images are made up of series of line segments. Each line segment

Lets plot a point in 3D with coordinates (342)

1 first plot the point at(302)

it is on the plane X-Z

2 then lift the point up by 4 units

Y-axis

X-axis

Z-axis

h

e

i

g

h

t

width

Depth

Translation in 3D

Remembering 2D transformations -gt 3x3 matrices take a wild guess what happens to 3D transformations

3D means z-axis comes into picture Giving Depth information for an object

1

0100

0010

0001

1

010

001

zyx

zyxzyx

yx

yxyx

ttt

tttzxytttT

tt

ttyxttT

T=(tx ty tz)

Scale 3D Style

S=(sx sy sz)

zsz

ysy

xsx

z

y

x

1000

000

000

000

)(

pps

s

s

PPsssS

z

y

x

zyx

3D Rotation

In 3D we have to specify the axis of rotation along with the rotation angle

Positive rotation angles produce counterclockwise rotations about a coordinate axis assuming that we are looking in the negative direction along that coordinate axis

3D Rotation

z-axis rotation

xrsquo=x cos θ - y sin θ

yrsquo=x sin θ + y cos θ

zrsquo=z

or Prsquo = Rz(θ)P

1000

0100

00cossin

00sincos

xrsquo yrsquo zrsquo 1

= x y z 1

When we say that we want to rotate a point in anticlockwise direction about z-axis it is very similar to performing a 2D rotation in anticlockwise direction as follows

Fig2D Rotation Fig 3D Rotation

3D Rotation

z-axis rotation

xrsquo=x cos θ - y sin θ

yrsquo=x sin θ + y cos θ

zrsquo=z Transformation equations for rotation abt the other axes

can be obtained with a cyclic permutation of coordinate parameters xy and z That is we use the replacements

xrarr yrarr zrarr x

x-axis rotation

yrsquo=y cos θ - z sin θ

zrsquo=y sin θ + z cos θ

xrsquo=x

y-axis rotation

zrsquo=z cos θ - x sin θ

xrsquo=z sin θ + x cos θ

yrsquo=y

Matrices for anticlockwise 3D rotation

1000

0cossin0

0sincos0

0001

xR

1000

0cos0sin

0010

0sin0cos

yR

1000

0100

00cossin

00sincos

zR

3D Rotation about an arbitrary axis

General Three-Dimensional Rotations

Special case where an object is to be rotated about an axis that is parallel to one of the coordinate axes

1 Translate the object so that the rotation axis coincides with parallel coordinate axis

2 Perform the specified rotation about the axis

3 Translate the object so that the rotation axis is moved back to its original position

3D Rotation of an object about an arbitrary axis

When an object is to rotated about an axis that is not parallel to one of the coordinate axes

1 Translate the object so that the rotation axis passes through the coordinate origin

2 Rotate the object so that the axis of rotation coincides with one of the coordinate axes

3 Perform the specified rotation about the selected coordinate axis

4 Apply inverse rotations to bring the rotation axis back to its original position

5 Apply the inverse translation to bring the rotation axis back to its original spatial position

We can determine the transformation matrices for each step

Assume that rotation axis ie arbitrary axis is defined with two points p1(x1y1z1) and p2(x2y2z2)

Let us say a point on the axis is (PQR)

Initial position of the axis and point is as bellow

p1

p2

(PQR)

Step1 (Translation)transformation of rotation axis so that it passes through the origin

This can be done by moving point P1 to the origin

This repositions the rotation axis and the object as shown

1111

0100

0010

0001

zyx

Tp1

p2

(PQR)

Step2 transform the rotation axis so that it coincides the z-axis

This can be performed in two sub-steps a) Rotate about x-axis to transform axis into xz plane

b) Swing rotation axis around to the z-axis using y-axis rotation

a) Take projection of line segment (000) to (PQR) onto yz plane as shown in fig ie (0QR)

(PQR)

(0QR)

Light

source

x

z

y

Step2-a

Now if we rotate the rotation (arbitrary) axis x-axis so that it lies in X-Z

In this situation its shadow will coincides the z-axis

So we are interested in angle α so that shadow will coincides with z-axis

length of shadow L = radicQ2+R2

sin α = QL

cos α = RL

Therefore the matrix for rotation about x-axis

Rx(α) =

1000

00

00

0001

LRLQ

LQLR

(PQR) (0QR)

L

α

After performing x-axis rotation the rotation axis will lie in x-z plane as shown

When we perform x-axis rotation x-value remains unchanged as axis of rotation is in xz plane so y-coordinate is zero We need to get z-value

L = radicP2+Q2+R2

z-coordinate will be v = radic(L2-P2)

(PQR)

L

P

Step2-b

Now we have to rotate the axis around y-axis so that it coincides the z-axis Let that angle be β

From figure cosβ = VL

sin β = pL

Therefore the transformation

matrix for rotation about y-axis

in clockwise rotation is

1000

00

0010

00

LvLp

LpLv

L

P

β

Ry(β) =

step3

Rotation about z-axis by given angle ie θ ie Rz (θ)

Step 4 and 5 does inverse transformations ie Ry-1 Rx-1 T-1

Therefore the final transformation matrix will be the product of all matrices in sequence

RA= T Rx RyRz Ry-1 Rx-1 T-1

1000

0100

00cossin

00sincos

zR

Reflection wrto xy plane

Consider a point P(xyz) The reflection of this point wrto xy plane is given by pointprsquo(xy-z)

Corresponding matrix is given as

M = 1 0 0

0 1 0

0 0 -1

Page 46: 2D transformations - E-STUDYthirdyearengineering.weebly.com/uploads/3/8/2/8/38286065/... · 2018. 9. 10. · In CG images are made up of series of line segments. Each line segment

Translation in 3D

Remembering 2D transformations -gt 3x3 matrices take a wild guess what happens to 3D transformations

3D means z-axis comes into picture Giving Depth information for an object

1

0100

0010

0001

1

010

001

zyx

zyxzyx

yx

yxyx

ttt

tttzxytttT

tt

ttyxttT

T=(tx ty tz)

Scale 3D Style

S=(sx sy sz)

zsz

ysy

xsx

z

y

x

1000

000

000

000

)(

pps

s

s

PPsssS

z

y

x

zyx

3D Rotation

In 3D we have to specify the axis of rotation along with the rotation angle

Positive rotation angles produce counterclockwise rotations about a coordinate axis assuming that we are looking in the negative direction along that coordinate axis

3D Rotation

z-axis rotation

xrsquo=x cos θ - y sin θ

yrsquo=x sin θ + y cos θ

zrsquo=z

or Prsquo = Rz(θ)P

1000

0100

00cossin

00sincos

xrsquo yrsquo zrsquo 1

= x y z 1

When we say that we want to rotate a point in anticlockwise direction about z-axis it is very similar to performing a 2D rotation in anticlockwise direction as follows

Fig2D Rotation Fig 3D Rotation

3D Rotation

z-axis rotation

xrsquo=x cos θ - y sin θ

yrsquo=x sin θ + y cos θ

zrsquo=z Transformation equations for rotation abt the other axes

can be obtained with a cyclic permutation of coordinate parameters xy and z That is we use the replacements

xrarr yrarr zrarr x

x-axis rotation

yrsquo=y cos θ - z sin θ

zrsquo=y sin θ + z cos θ

xrsquo=x

y-axis rotation

zrsquo=z cos θ - x sin θ

xrsquo=z sin θ + x cos θ

yrsquo=y

Matrices for anticlockwise 3D rotation

1000

0cossin0

0sincos0

0001

xR

1000

0cos0sin

0010

0sin0cos

yR

1000

0100

00cossin

00sincos

zR

3D Rotation about an arbitrary axis

General Three-Dimensional Rotations

Special case where an object is to be rotated about an axis that is parallel to one of the coordinate axes

1 Translate the object so that the rotation axis coincides with parallel coordinate axis

2 Perform the specified rotation about the axis

3 Translate the object so that the rotation axis is moved back to its original position

3D Rotation of an object about an arbitrary axis

When an object is to rotated about an axis that is not parallel to one of the coordinate axes

1 Translate the object so that the rotation axis passes through the coordinate origin

2 Rotate the object so that the axis of rotation coincides with one of the coordinate axes

3 Perform the specified rotation about the selected coordinate axis

4 Apply inverse rotations to bring the rotation axis back to its original position

5 Apply the inverse translation to bring the rotation axis back to its original spatial position

We can determine the transformation matrices for each step

Assume that rotation axis ie arbitrary axis is defined with two points p1(x1y1z1) and p2(x2y2z2)

Let us say a point on the axis is (PQR)

Initial position of the axis and point is as bellow

p1

p2

(PQR)

Step1 (Translation)transformation of rotation axis so that it passes through the origin

This can be done by moving point P1 to the origin

This repositions the rotation axis and the object as shown

1111

0100

0010

0001

zyx

Tp1

p2

(PQR)

Step2 transform the rotation axis so that it coincides the z-axis

This can be performed in two sub-steps a) Rotate about x-axis to transform axis into xz plane

b) Swing rotation axis around to the z-axis using y-axis rotation

a) Take projection of line segment (000) to (PQR) onto yz plane as shown in fig ie (0QR)

(PQR)

(0QR)

Light

source

x

z

y

Step2-a

Now if we rotate the rotation (arbitrary) axis x-axis so that it lies in X-Z

In this situation its shadow will coincides the z-axis

So we are interested in angle α so that shadow will coincides with z-axis

length of shadow L = radicQ2+R2

sin α = QL

cos α = RL

Therefore the matrix for rotation about x-axis

Rx(α) =

1000

00

00

0001

LRLQ

LQLR

(PQR) (0QR)

L

α

After performing x-axis rotation the rotation axis will lie in x-z plane as shown

When we perform x-axis rotation x-value remains unchanged as axis of rotation is in xz plane so y-coordinate is zero We need to get z-value

L = radicP2+Q2+R2

z-coordinate will be v = radic(L2-P2)

(PQR)

L

P

Step2-b

Now we have to rotate the axis around y-axis so that it coincides the z-axis Let that angle be β

From figure cosβ = VL

sin β = pL

Therefore the transformation

matrix for rotation about y-axis

in clockwise rotation is

1000

00

0010

00

LvLp

LpLv

L

P

β

Ry(β) =

step3

Rotation about z-axis by given angle ie θ ie Rz (θ)

Step 4 and 5 does inverse transformations ie Ry-1 Rx-1 T-1

Therefore the final transformation matrix will be the product of all matrices in sequence

RA= T Rx RyRz Ry-1 Rx-1 T-1

1000

0100

00cossin

00sincos

zR

Reflection wrto xy plane

Consider a point P(xyz) The reflection of this point wrto xy plane is given by pointprsquo(xy-z)

Corresponding matrix is given as

M = 1 0 0

0 1 0

0 0 -1

Page 47: 2D transformations - E-STUDYthirdyearengineering.weebly.com/uploads/3/8/2/8/38286065/... · 2018. 9. 10. · In CG images are made up of series of line segments. Each line segment

Scale 3D Style

S=(sx sy sz)

zsz

ysy

xsx

z

y

x

1000

000

000

000

)(

pps

s

s

PPsssS

z

y

x

zyx

3D Rotation

In 3D we have to specify the axis of rotation along with the rotation angle

Positive rotation angles produce counterclockwise rotations about a coordinate axis assuming that we are looking in the negative direction along that coordinate axis

3D Rotation

z-axis rotation

xrsquo=x cos θ - y sin θ

yrsquo=x sin θ + y cos θ

zrsquo=z

or Prsquo = Rz(θ)P

1000

0100

00cossin

00sincos

xrsquo yrsquo zrsquo 1

= x y z 1

When we say that we want to rotate a point in anticlockwise direction about z-axis it is very similar to performing a 2D rotation in anticlockwise direction as follows

Fig2D Rotation Fig 3D Rotation

3D Rotation

z-axis rotation

xrsquo=x cos θ - y sin θ

yrsquo=x sin θ + y cos θ

zrsquo=z Transformation equations for rotation abt the other axes

can be obtained with a cyclic permutation of coordinate parameters xy and z That is we use the replacements

xrarr yrarr zrarr x

x-axis rotation

yrsquo=y cos θ - z sin θ

zrsquo=y sin θ + z cos θ

xrsquo=x

y-axis rotation

zrsquo=z cos θ - x sin θ

xrsquo=z sin θ + x cos θ

yrsquo=y

Matrices for anticlockwise 3D rotation

1000

0cossin0

0sincos0

0001

xR

1000

0cos0sin

0010

0sin0cos

yR

1000

0100

00cossin

00sincos

zR

3D Rotation about an arbitrary axis

General Three-Dimensional Rotations

Special case where an object is to be rotated about an axis that is parallel to one of the coordinate axes

1 Translate the object so that the rotation axis coincides with parallel coordinate axis

2 Perform the specified rotation about the axis

3 Translate the object so that the rotation axis is moved back to its original position

3D Rotation of an object about an arbitrary axis

When an object is to rotated about an axis that is not parallel to one of the coordinate axes

1 Translate the object so that the rotation axis passes through the coordinate origin

2 Rotate the object so that the axis of rotation coincides with one of the coordinate axes

3 Perform the specified rotation about the selected coordinate axis

4 Apply inverse rotations to bring the rotation axis back to its original position

5 Apply the inverse translation to bring the rotation axis back to its original spatial position

We can determine the transformation matrices for each step

Assume that rotation axis ie arbitrary axis is defined with two points p1(x1y1z1) and p2(x2y2z2)

Let us say a point on the axis is (PQR)

Initial position of the axis and point is as bellow

p1

p2

(PQR)

Step1 (Translation)transformation of rotation axis so that it passes through the origin

This can be done by moving point P1 to the origin

This repositions the rotation axis and the object as shown

1111

0100

0010

0001

zyx

Tp1

p2

(PQR)

Step2 transform the rotation axis so that it coincides the z-axis

This can be performed in two sub-steps a) Rotate about x-axis to transform axis into xz plane

b) Swing rotation axis around to the z-axis using y-axis rotation

a) Take projection of line segment (000) to (PQR) onto yz plane as shown in fig ie (0QR)

(PQR)

(0QR)

Light

source

x

z

y

Step2-a

Now if we rotate the rotation (arbitrary) axis x-axis so that it lies in X-Z

In this situation its shadow will coincides the z-axis

So we are interested in angle α so that shadow will coincides with z-axis

length of shadow L = radicQ2+R2

sin α = QL

cos α = RL

Therefore the matrix for rotation about x-axis

Rx(α) =

1000

00

00

0001

LRLQ

LQLR

(PQR) (0QR)

L

α

After performing x-axis rotation the rotation axis will lie in x-z plane as shown

When we perform x-axis rotation x-value remains unchanged as axis of rotation is in xz plane so y-coordinate is zero We need to get z-value

L = radicP2+Q2+R2

z-coordinate will be v = radic(L2-P2)

(PQR)

L

P

Step2-b

Now we have to rotate the axis around y-axis so that it coincides the z-axis Let that angle be β

From figure cosβ = VL

sin β = pL

Therefore the transformation

matrix for rotation about y-axis

in clockwise rotation is

1000

00

0010

00

LvLp

LpLv

L

P

β

Ry(β) =

step3

Rotation about z-axis by given angle ie θ ie Rz (θ)

Step 4 and 5 does inverse transformations ie Ry-1 Rx-1 T-1

Therefore the final transformation matrix will be the product of all matrices in sequence

RA= T Rx RyRz Ry-1 Rx-1 T-1

1000

0100

00cossin

00sincos

zR

Reflection wrto xy plane

Consider a point P(xyz) The reflection of this point wrto xy plane is given by pointprsquo(xy-z)

Corresponding matrix is given as

M = 1 0 0

0 1 0

0 0 -1

Page 48: 2D transformations - E-STUDYthirdyearengineering.weebly.com/uploads/3/8/2/8/38286065/... · 2018. 9. 10. · In CG images are made up of series of line segments. Each line segment

3D Rotation

In 3D we have to specify the axis of rotation along with the rotation angle

Positive rotation angles produce counterclockwise rotations about a coordinate axis assuming that we are looking in the negative direction along that coordinate axis

3D Rotation

z-axis rotation

xrsquo=x cos θ - y sin θ

yrsquo=x sin θ + y cos θ

zrsquo=z

or Prsquo = Rz(θ)P

1000

0100

00cossin

00sincos

xrsquo yrsquo zrsquo 1

= x y z 1

When we say that we want to rotate a point in anticlockwise direction about z-axis it is very similar to performing a 2D rotation in anticlockwise direction as follows

Fig2D Rotation Fig 3D Rotation

3D Rotation

z-axis rotation

xrsquo=x cos θ - y sin θ

yrsquo=x sin θ + y cos θ

zrsquo=z Transformation equations for rotation abt the other axes

can be obtained with a cyclic permutation of coordinate parameters xy and z That is we use the replacements

xrarr yrarr zrarr x

x-axis rotation

yrsquo=y cos θ - z sin θ

zrsquo=y sin θ + z cos θ

xrsquo=x

y-axis rotation

zrsquo=z cos θ - x sin θ

xrsquo=z sin θ + x cos θ

yrsquo=y

Matrices for anticlockwise 3D rotation

1000

0cossin0

0sincos0

0001

xR

1000

0cos0sin

0010

0sin0cos

yR

1000

0100

00cossin

00sincos

zR

3D Rotation about an arbitrary axis

General Three-Dimensional Rotations

Special case where an object is to be rotated about an axis that is parallel to one of the coordinate axes

1 Translate the object so that the rotation axis coincides with parallel coordinate axis

2 Perform the specified rotation about the axis

3 Translate the object so that the rotation axis is moved back to its original position

3D Rotation of an object about an arbitrary axis

When an object is to rotated about an axis that is not parallel to one of the coordinate axes

1 Translate the object so that the rotation axis passes through the coordinate origin

2 Rotate the object so that the axis of rotation coincides with one of the coordinate axes

3 Perform the specified rotation about the selected coordinate axis

4 Apply inverse rotations to bring the rotation axis back to its original position

5 Apply the inverse translation to bring the rotation axis back to its original spatial position

We can determine the transformation matrices for each step

Assume that rotation axis ie arbitrary axis is defined with two points p1(x1y1z1) and p2(x2y2z2)

Let us say a point on the axis is (PQR)

Initial position of the axis and point is as bellow

p1

p2

(PQR)

Step1 (Translation)transformation of rotation axis so that it passes through the origin

This can be done by moving point P1 to the origin

This repositions the rotation axis and the object as shown

1111

0100

0010

0001

zyx

Tp1

p2

(PQR)

Step2 transform the rotation axis so that it coincides the z-axis

This can be performed in two sub-steps a) Rotate about x-axis to transform axis into xz plane

b) Swing rotation axis around to the z-axis using y-axis rotation

a) Take projection of line segment (000) to (PQR) onto yz plane as shown in fig ie (0QR)

(PQR)

(0QR)

Light

source

x

z

y

Step2-a

Now if we rotate the rotation (arbitrary) axis x-axis so that it lies in X-Z

In this situation its shadow will coincides the z-axis

So we are interested in angle α so that shadow will coincides with z-axis

length of shadow L = radicQ2+R2

sin α = QL

cos α = RL

Therefore the matrix for rotation about x-axis

Rx(α) =

1000

00

00

0001

LRLQ

LQLR

(PQR) (0QR)

L

α

After performing x-axis rotation the rotation axis will lie in x-z plane as shown

When we perform x-axis rotation x-value remains unchanged as axis of rotation is in xz plane so y-coordinate is zero We need to get z-value

L = radicP2+Q2+R2

z-coordinate will be v = radic(L2-P2)

(PQR)

L

P

Step2-b

Now we have to rotate the axis around y-axis so that it coincides the z-axis Let that angle be β

From figure cosβ = VL

sin β = pL

Therefore the transformation

matrix for rotation about y-axis

in clockwise rotation is

1000

00

0010

00

LvLp

LpLv

L

P

β

Ry(β) =

step3

Rotation about z-axis by given angle ie θ ie Rz (θ)

Step 4 and 5 does inverse transformations ie Ry-1 Rx-1 T-1

Therefore the final transformation matrix will be the product of all matrices in sequence

RA= T Rx RyRz Ry-1 Rx-1 T-1

1000

0100

00cossin

00sincos

zR

Reflection wrto xy plane

Consider a point P(xyz) The reflection of this point wrto xy plane is given by pointprsquo(xy-z)

Corresponding matrix is given as

M = 1 0 0

0 1 0

0 0 -1

Page 49: 2D transformations - E-STUDYthirdyearengineering.weebly.com/uploads/3/8/2/8/38286065/... · 2018. 9. 10. · In CG images are made up of series of line segments. Each line segment

3D Rotation

z-axis rotation

xrsquo=x cos θ - y sin θ

yrsquo=x sin θ + y cos θ

zrsquo=z

or Prsquo = Rz(θ)P

1000

0100

00cossin

00sincos

xrsquo yrsquo zrsquo 1

= x y z 1

When we say that we want to rotate a point in anticlockwise direction about z-axis it is very similar to performing a 2D rotation in anticlockwise direction as follows

Fig2D Rotation Fig 3D Rotation

3D Rotation

z-axis rotation

xrsquo=x cos θ - y sin θ

yrsquo=x sin θ + y cos θ

zrsquo=z Transformation equations for rotation abt the other axes

can be obtained with a cyclic permutation of coordinate parameters xy and z That is we use the replacements

xrarr yrarr zrarr x

x-axis rotation

yrsquo=y cos θ - z sin θ

zrsquo=y sin θ + z cos θ

xrsquo=x

y-axis rotation

zrsquo=z cos θ - x sin θ

xrsquo=z sin θ + x cos θ

yrsquo=y

Matrices for anticlockwise 3D rotation

1000

0cossin0

0sincos0

0001

xR

1000

0cos0sin

0010

0sin0cos

yR

1000

0100

00cossin

00sincos

zR

3D Rotation about an arbitrary axis

General Three-Dimensional Rotations

Special case where an object is to be rotated about an axis that is parallel to one of the coordinate axes

1 Translate the object so that the rotation axis coincides with parallel coordinate axis

2 Perform the specified rotation about the axis

3 Translate the object so that the rotation axis is moved back to its original position

3D Rotation of an object about an arbitrary axis

When an object is to rotated about an axis that is not parallel to one of the coordinate axes

1 Translate the object so that the rotation axis passes through the coordinate origin

2 Rotate the object so that the axis of rotation coincides with one of the coordinate axes

3 Perform the specified rotation about the selected coordinate axis

4 Apply inverse rotations to bring the rotation axis back to its original position

5 Apply the inverse translation to bring the rotation axis back to its original spatial position

We can determine the transformation matrices for each step

Assume that rotation axis ie arbitrary axis is defined with two points p1(x1y1z1) and p2(x2y2z2)

Let us say a point on the axis is (PQR)

Initial position of the axis and point is as bellow

p1

p2

(PQR)

Step1 (Translation)transformation of rotation axis so that it passes through the origin

This can be done by moving point P1 to the origin

This repositions the rotation axis and the object as shown

1111

0100

0010

0001

zyx

Tp1

p2

(PQR)

Step2 transform the rotation axis so that it coincides the z-axis

This can be performed in two sub-steps a) Rotate about x-axis to transform axis into xz plane

b) Swing rotation axis around to the z-axis using y-axis rotation

a) Take projection of line segment (000) to (PQR) onto yz plane as shown in fig ie (0QR)

(PQR)

(0QR)

Light

source

x

z

y

Step2-a

Now if we rotate the rotation (arbitrary) axis x-axis so that it lies in X-Z

In this situation its shadow will coincides the z-axis

So we are interested in angle α so that shadow will coincides with z-axis

length of shadow L = radicQ2+R2

sin α = QL

cos α = RL

Therefore the matrix for rotation about x-axis

Rx(α) =

1000

00

00

0001

LRLQ

LQLR

(PQR) (0QR)

L

α

After performing x-axis rotation the rotation axis will lie in x-z plane as shown

When we perform x-axis rotation x-value remains unchanged as axis of rotation is in xz plane so y-coordinate is zero We need to get z-value

L = radicP2+Q2+R2

z-coordinate will be v = radic(L2-P2)

(PQR)

L

P

Step2-b

Now we have to rotate the axis around y-axis so that it coincides the z-axis Let that angle be β

From figure cosβ = VL

sin β = pL

Therefore the transformation

matrix for rotation about y-axis

in clockwise rotation is

1000

00

0010

00

LvLp

LpLv

L

P

β

Ry(β) =

step3

Rotation about z-axis by given angle ie θ ie Rz (θ)

Step 4 and 5 does inverse transformations ie Ry-1 Rx-1 T-1

Therefore the final transformation matrix will be the product of all matrices in sequence

RA= T Rx RyRz Ry-1 Rx-1 T-1

1000

0100

00cossin

00sincos

zR

Reflection wrto xy plane

Consider a point P(xyz) The reflection of this point wrto xy plane is given by pointprsquo(xy-z)

Corresponding matrix is given as

M = 1 0 0

0 1 0

0 0 -1

Page 50: 2D transformations - E-STUDYthirdyearengineering.weebly.com/uploads/3/8/2/8/38286065/... · 2018. 9. 10. · In CG images are made up of series of line segments. Each line segment

When we say that we want to rotate a point in anticlockwise direction about z-axis it is very similar to performing a 2D rotation in anticlockwise direction as follows

Fig2D Rotation Fig 3D Rotation

3D Rotation

z-axis rotation

xrsquo=x cos θ - y sin θ

yrsquo=x sin θ + y cos θ

zrsquo=z Transformation equations for rotation abt the other axes

can be obtained with a cyclic permutation of coordinate parameters xy and z That is we use the replacements

xrarr yrarr zrarr x

x-axis rotation

yrsquo=y cos θ - z sin θ

zrsquo=y sin θ + z cos θ

xrsquo=x

y-axis rotation

zrsquo=z cos θ - x sin θ

xrsquo=z sin θ + x cos θ

yrsquo=y

Matrices for anticlockwise 3D rotation

1000

0cossin0

0sincos0

0001

xR

1000

0cos0sin

0010

0sin0cos

yR

1000

0100

00cossin

00sincos

zR

3D Rotation about an arbitrary axis

General Three-Dimensional Rotations

Special case where an object is to be rotated about an axis that is parallel to one of the coordinate axes

1 Translate the object so that the rotation axis coincides with parallel coordinate axis

2 Perform the specified rotation about the axis

3 Translate the object so that the rotation axis is moved back to its original position

3D Rotation of an object about an arbitrary axis

When an object is to rotated about an axis that is not parallel to one of the coordinate axes

1 Translate the object so that the rotation axis passes through the coordinate origin

2 Rotate the object so that the axis of rotation coincides with one of the coordinate axes

3 Perform the specified rotation about the selected coordinate axis

4 Apply inverse rotations to bring the rotation axis back to its original position

5 Apply the inverse translation to bring the rotation axis back to its original spatial position

We can determine the transformation matrices for each step

Assume that rotation axis ie arbitrary axis is defined with two points p1(x1y1z1) and p2(x2y2z2)

Let us say a point on the axis is (PQR)

Initial position of the axis and point is as bellow

p1

p2

(PQR)

Step1 (Translation)transformation of rotation axis so that it passes through the origin

This can be done by moving point P1 to the origin

This repositions the rotation axis and the object as shown

1111

0100

0010

0001

zyx

Tp1

p2

(PQR)

Step2 transform the rotation axis so that it coincides the z-axis

This can be performed in two sub-steps a) Rotate about x-axis to transform axis into xz plane

b) Swing rotation axis around to the z-axis using y-axis rotation

a) Take projection of line segment (000) to (PQR) onto yz plane as shown in fig ie (0QR)

(PQR)

(0QR)

Light

source

x

z

y

Step2-a

Now if we rotate the rotation (arbitrary) axis x-axis so that it lies in X-Z

In this situation its shadow will coincides the z-axis

So we are interested in angle α so that shadow will coincides with z-axis

length of shadow L = radicQ2+R2

sin α = QL

cos α = RL

Therefore the matrix for rotation about x-axis

Rx(α) =

1000

00

00

0001

LRLQ

LQLR

(PQR) (0QR)

L

α

After performing x-axis rotation the rotation axis will lie in x-z plane as shown

When we perform x-axis rotation x-value remains unchanged as axis of rotation is in xz plane so y-coordinate is zero We need to get z-value

L = radicP2+Q2+R2

z-coordinate will be v = radic(L2-P2)

(PQR)

L

P

Step2-b

Now we have to rotate the axis around y-axis so that it coincides the z-axis Let that angle be β

From figure cosβ = VL

sin β = pL

Therefore the transformation

matrix for rotation about y-axis

in clockwise rotation is

1000

00

0010

00

LvLp

LpLv

L

P

β

Ry(β) =

step3

Rotation about z-axis by given angle ie θ ie Rz (θ)

Step 4 and 5 does inverse transformations ie Ry-1 Rx-1 T-1

Therefore the final transformation matrix will be the product of all matrices in sequence

RA= T Rx RyRz Ry-1 Rx-1 T-1

1000

0100

00cossin

00sincos

zR

Reflection wrto xy plane

Consider a point P(xyz) The reflection of this point wrto xy plane is given by pointprsquo(xy-z)

Corresponding matrix is given as

M = 1 0 0

0 1 0

0 0 -1

Page 51: 2D transformations - E-STUDYthirdyearengineering.weebly.com/uploads/3/8/2/8/38286065/... · 2018. 9. 10. · In CG images are made up of series of line segments. Each line segment

3D Rotation

z-axis rotation

xrsquo=x cos θ - y sin θ

yrsquo=x sin θ + y cos θ

zrsquo=z Transformation equations for rotation abt the other axes

can be obtained with a cyclic permutation of coordinate parameters xy and z That is we use the replacements

xrarr yrarr zrarr x

x-axis rotation

yrsquo=y cos θ - z sin θ

zrsquo=y sin θ + z cos θ

xrsquo=x

y-axis rotation

zrsquo=z cos θ - x sin θ

xrsquo=z sin θ + x cos θ

yrsquo=y

Matrices for anticlockwise 3D rotation

1000

0cossin0

0sincos0

0001

xR

1000

0cos0sin

0010

0sin0cos

yR

1000

0100

00cossin

00sincos

zR

3D Rotation about an arbitrary axis

General Three-Dimensional Rotations

Special case where an object is to be rotated about an axis that is parallel to one of the coordinate axes

1 Translate the object so that the rotation axis coincides with parallel coordinate axis

2 Perform the specified rotation about the axis

3 Translate the object so that the rotation axis is moved back to its original position

3D Rotation of an object about an arbitrary axis

When an object is to rotated about an axis that is not parallel to one of the coordinate axes

1 Translate the object so that the rotation axis passes through the coordinate origin

2 Rotate the object so that the axis of rotation coincides with one of the coordinate axes

3 Perform the specified rotation about the selected coordinate axis

4 Apply inverse rotations to bring the rotation axis back to its original position

5 Apply the inverse translation to bring the rotation axis back to its original spatial position

We can determine the transformation matrices for each step

Assume that rotation axis ie arbitrary axis is defined with two points p1(x1y1z1) and p2(x2y2z2)

Let us say a point on the axis is (PQR)

Initial position of the axis and point is as bellow

p1

p2

(PQR)

Step1 (Translation)transformation of rotation axis so that it passes through the origin

This can be done by moving point P1 to the origin

This repositions the rotation axis and the object as shown

1111

0100

0010

0001

zyx

Tp1

p2

(PQR)

Step2 transform the rotation axis so that it coincides the z-axis

This can be performed in two sub-steps a) Rotate about x-axis to transform axis into xz plane

b) Swing rotation axis around to the z-axis using y-axis rotation

a) Take projection of line segment (000) to (PQR) onto yz plane as shown in fig ie (0QR)

(PQR)

(0QR)

Light

source

x

z

y

Step2-a

Now if we rotate the rotation (arbitrary) axis x-axis so that it lies in X-Z

In this situation its shadow will coincides the z-axis

So we are interested in angle α so that shadow will coincides with z-axis

length of shadow L = radicQ2+R2

sin α = QL

cos α = RL

Therefore the matrix for rotation about x-axis

Rx(α) =

1000

00

00

0001

LRLQ

LQLR

(PQR) (0QR)

L

α

After performing x-axis rotation the rotation axis will lie in x-z plane as shown

When we perform x-axis rotation x-value remains unchanged as axis of rotation is in xz plane so y-coordinate is zero We need to get z-value

L = radicP2+Q2+R2

z-coordinate will be v = radic(L2-P2)

(PQR)

L

P

Step2-b

Now we have to rotate the axis around y-axis so that it coincides the z-axis Let that angle be β

From figure cosβ = VL

sin β = pL

Therefore the transformation

matrix for rotation about y-axis

in clockwise rotation is

1000

00

0010

00

LvLp

LpLv

L

P

β

Ry(β) =

step3

Rotation about z-axis by given angle ie θ ie Rz (θ)

Step 4 and 5 does inverse transformations ie Ry-1 Rx-1 T-1

Therefore the final transformation matrix will be the product of all matrices in sequence

RA= T Rx RyRz Ry-1 Rx-1 T-1

1000

0100

00cossin

00sincos

zR

Reflection wrto xy plane

Consider a point P(xyz) The reflection of this point wrto xy plane is given by pointprsquo(xy-z)

Corresponding matrix is given as

M = 1 0 0

0 1 0

0 0 -1

Page 52: 2D transformations - E-STUDYthirdyearengineering.weebly.com/uploads/3/8/2/8/38286065/... · 2018. 9. 10. · In CG images are made up of series of line segments. Each line segment

Matrices for anticlockwise 3D rotation

1000

0cossin0

0sincos0

0001

xR

1000

0cos0sin

0010

0sin0cos

yR

1000

0100

00cossin

00sincos

zR

3D Rotation about an arbitrary axis

General Three-Dimensional Rotations

Special case where an object is to be rotated about an axis that is parallel to one of the coordinate axes

1 Translate the object so that the rotation axis coincides with parallel coordinate axis

2 Perform the specified rotation about the axis

3 Translate the object so that the rotation axis is moved back to its original position

3D Rotation of an object about an arbitrary axis

When an object is to rotated about an axis that is not parallel to one of the coordinate axes

1 Translate the object so that the rotation axis passes through the coordinate origin

2 Rotate the object so that the axis of rotation coincides with one of the coordinate axes

3 Perform the specified rotation about the selected coordinate axis

4 Apply inverse rotations to bring the rotation axis back to its original position

5 Apply the inverse translation to bring the rotation axis back to its original spatial position

We can determine the transformation matrices for each step

Assume that rotation axis ie arbitrary axis is defined with two points p1(x1y1z1) and p2(x2y2z2)

Let us say a point on the axis is (PQR)

Initial position of the axis and point is as bellow

p1

p2

(PQR)

Step1 (Translation)transformation of rotation axis so that it passes through the origin

This can be done by moving point P1 to the origin

This repositions the rotation axis and the object as shown

1111

0100

0010

0001

zyx

Tp1

p2

(PQR)

Step2 transform the rotation axis so that it coincides the z-axis

This can be performed in two sub-steps a) Rotate about x-axis to transform axis into xz plane

b) Swing rotation axis around to the z-axis using y-axis rotation

a) Take projection of line segment (000) to (PQR) onto yz plane as shown in fig ie (0QR)

(PQR)

(0QR)

Light

source

x

z

y

Step2-a

Now if we rotate the rotation (arbitrary) axis x-axis so that it lies in X-Z

In this situation its shadow will coincides the z-axis

So we are interested in angle α so that shadow will coincides with z-axis

length of shadow L = radicQ2+R2

sin α = QL

cos α = RL

Therefore the matrix for rotation about x-axis

Rx(α) =

1000

00

00

0001

LRLQ

LQLR

(PQR) (0QR)

L

α

After performing x-axis rotation the rotation axis will lie in x-z plane as shown

When we perform x-axis rotation x-value remains unchanged as axis of rotation is in xz plane so y-coordinate is zero We need to get z-value

L = radicP2+Q2+R2

z-coordinate will be v = radic(L2-P2)

(PQR)

L

P

Step2-b

Now we have to rotate the axis around y-axis so that it coincides the z-axis Let that angle be β

From figure cosβ = VL

sin β = pL

Therefore the transformation

matrix for rotation about y-axis

in clockwise rotation is

1000

00

0010

00

LvLp

LpLv

L

P

β

Ry(β) =

step3

Rotation about z-axis by given angle ie θ ie Rz (θ)

Step 4 and 5 does inverse transformations ie Ry-1 Rx-1 T-1

Therefore the final transformation matrix will be the product of all matrices in sequence

RA= T Rx RyRz Ry-1 Rx-1 T-1

1000

0100

00cossin

00sincos

zR

Reflection wrto xy plane

Consider a point P(xyz) The reflection of this point wrto xy plane is given by pointprsquo(xy-z)

Corresponding matrix is given as

M = 1 0 0

0 1 0

0 0 -1

Page 53: 2D transformations - E-STUDYthirdyearengineering.weebly.com/uploads/3/8/2/8/38286065/... · 2018. 9. 10. · In CG images are made up of series of line segments. Each line segment

3D Rotation about an arbitrary axis

General Three-Dimensional Rotations

Special case where an object is to be rotated about an axis that is parallel to one of the coordinate axes

1 Translate the object so that the rotation axis coincides with parallel coordinate axis

2 Perform the specified rotation about the axis

3 Translate the object so that the rotation axis is moved back to its original position

3D Rotation of an object about an arbitrary axis

When an object is to rotated about an axis that is not parallel to one of the coordinate axes

1 Translate the object so that the rotation axis passes through the coordinate origin

2 Rotate the object so that the axis of rotation coincides with one of the coordinate axes

3 Perform the specified rotation about the selected coordinate axis

4 Apply inverse rotations to bring the rotation axis back to its original position

5 Apply the inverse translation to bring the rotation axis back to its original spatial position

We can determine the transformation matrices for each step

Assume that rotation axis ie arbitrary axis is defined with two points p1(x1y1z1) and p2(x2y2z2)

Let us say a point on the axis is (PQR)

Initial position of the axis and point is as bellow

p1

p2

(PQR)

Step1 (Translation)transformation of rotation axis so that it passes through the origin

This can be done by moving point P1 to the origin

This repositions the rotation axis and the object as shown

1111

0100

0010

0001

zyx

Tp1

p2

(PQR)

Step2 transform the rotation axis so that it coincides the z-axis

This can be performed in two sub-steps a) Rotate about x-axis to transform axis into xz plane

b) Swing rotation axis around to the z-axis using y-axis rotation

a) Take projection of line segment (000) to (PQR) onto yz plane as shown in fig ie (0QR)

(PQR)

(0QR)

Light

source

x

z

y

Step2-a

Now if we rotate the rotation (arbitrary) axis x-axis so that it lies in X-Z

In this situation its shadow will coincides the z-axis

So we are interested in angle α so that shadow will coincides with z-axis

length of shadow L = radicQ2+R2

sin α = QL

cos α = RL

Therefore the matrix for rotation about x-axis

Rx(α) =

1000

00

00

0001

LRLQ

LQLR

(PQR) (0QR)

L

α

After performing x-axis rotation the rotation axis will lie in x-z plane as shown

When we perform x-axis rotation x-value remains unchanged as axis of rotation is in xz plane so y-coordinate is zero We need to get z-value

L = radicP2+Q2+R2

z-coordinate will be v = radic(L2-P2)

(PQR)

L

P

Step2-b

Now we have to rotate the axis around y-axis so that it coincides the z-axis Let that angle be β

From figure cosβ = VL

sin β = pL

Therefore the transformation

matrix for rotation about y-axis

in clockwise rotation is

1000

00

0010

00

LvLp

LpLv

L

P

β

Ry(β) =

step3

Rotation about z-axis by given angle ie θ ie Rz (θ)

Step 4 and 5 does inverse transformations ie Ry-1 Rx-1 T-1

Therefore the final transformation matrix will be the product of all matrices in sequence

RA= T Rx RyRz Ry-1 Rx-1 T-1

1000

0100

00cossin

00sincos

zR

Reflection wrto xy plane

Consider a point P(xyz) The reflection of this point wrto xy plane is given by pointprsquo(xy-z)

Corresponding matrix is given as

M = 1 0 0

0 1 0

0 0 -1

Page 54: 2D transformations - E-STUDYthirdyearengineering.weebly.com/uploads/3/8/2/8/38286065/... · 2018. 9. 10. · In CG images are made up of series of line segments. Each line segment

3D Rotation of an object about an arbitrary axis

When an object is to rotated about an axis that is not parallel to one of the coordinate axes

1 Translate the object so that the rotation axis passes through the coordinate origin

2 Rotate the object so that the axis of rotation coincides with one of the coordinate axes

3 Perform the specified rotation about the selected coordinate axis

4 Apply inverse rotations to bring the rotation axis back to its original position

5 Apply the inverse translation to bring the rotation axis back to its original spatial position

We can determine the transformation matrices for each step

Assume that rotation axis ie arbitrary axis is defined with two points p1(x1y1z1) and p2(x2y2z2)

Let us say a point on the axis is (PQR)

Initial position of the axis and point is as bellow

p1

p2

(PQR)

Step1 (Translation)transformation of rotation axis so that it passes through the origin

This can be done by moving point P1 to the origin

This repositions the rotation axis and the object as shown

1111

0100

0010

0001

zyx

Tp1

p2

(PQR)

Step2 transform the rotation axis so that it coincides the z-axis

This can be performed in two sub-steps a) Rotate about x-axis to transform axis into xz plane

b) Swing rotation axis around to the z-axis using y-axis rotation

a) Take projection of line segment (000) to (PQR) onto yz plane as shown in fig ie (0QR)

(PQR)

(0QR)

Light

source

x

z

y

Step2-a

Now if we rotate the rotation (arbitrary) axis x-axis so that it lies in X-Z

In this situation its shadow will coincides the z-axis

So we are interested in angle α so that shadow will coincides with z-axis

length of shadow L = radicQ2+R2

sin α = QL

cos α = RL

Therefore the matrix for rotation about x-axis

Rx(α) =

1000

00

00

0001

LRLQ

LQLR

(PQR) (0QR)

L

α

After performing x-axis rotation the rotation axis will lie in x-z plane as shown

When we perform x-axis rotation x-value remains unchanged as axis of rotation is in xz plane so y-coordinate is zero We need to get z-value

L = radicP2+Q2+R2

z-coordinate will be v = radic(L2-P2)

(PQR)

L

P

Step2-b

Now we have to rotate the axis around y-axis so that it coincides the z-axis Let that angle be β

From figure cosβ = VL

sin β = pL

Therefore the transformation

matrix for rotation about y-axis

in clockwise rotation is

1000

00

0010

00

LvLp

LpLv

L

P

β

Ry(β) =

step3

Rotation about z-axis by given angle ie θ ie Rz (θ)

Step 4 and 5 does inverse transformations ie Ry-1 Rx-1 T-1

Therefore the final transformation matrix will be the product of all matrices in sequence

RA= T Rx RyRz Ry-1 Rx-1 T-1

1000

0100

00cossin

00sincos

zR

Reflection wrto xy plane

Consider a point P(xyz) The reflection of this point wrto xy plane is given by pointprsquo(xy-z)

Corresponding matrix is given as

M = 1 0 0

0 1 0

0 0 -1

Page 55: 2D transformations - E-STUDYthirdyearengineering.weebly.com/uploads/3/8/2/8/38286065/... · 2018. 9. 10. · In CG images are made up of series of line segments. Each line segment

We can determine the transformation matrices for each step

Assume that rotation axis ie arbitrary axis is defined with two points p1(x1y1z1) and p2(x2y2z2)

Let us say a point on the axis is (PQR)

Initial position of the axis and point is as bellow

p1

p2

(PQR)

Step1 (Translation)transformation of rotation axis so that it passes through the origin

This can be done by moving point P1 to the origin

This repositions the rotation axis and the object as shown

1111

0100

0010

0001

zyx

Tp1

p2

(PQR)

Step2 transform the rotation axis so that it coincides the z-axis

This can be performed in two sub-steps a) Rotate about x-axis to transform axis into xz plane

b) Swing rotation axis around to the z-axis using y-axis rotation

a) Take projection of line segment (000) to (PQR) onto yz plane as shown in fig ie (0QR)

(PQR)

(0QR)

Light

source

x

z

y

Step2-a

Now if we rotate the rotation (arbitrary) axis x-axis so that it lies in X-Z

In this situation its shadow will coincides the z-axis

So we are interested in angle α so that shadow will coincides with z-axis

length of shadow L = radicQ2+R2

sin α = QL

cos α = RL

Therefore the matrix for rotation about x-axis

Rx(α) =

1000

00

00

0001

LRLQ

LQLR

(PQR) (0QR)

L

α

After performing x-axis rotation the rotation axis will lie in x-z plane as shown

When we perform x-axis rotation x-value remains unchanged as axis of rotation is in xz plane so y-coordinate is zero We need to get z-value

L = radicP2+Q2+R2

z-coordinate will be v = radic(L2-P2)

(PQR)

L

P

Step2-b

Now we have to rotate the axis around y-axis so that it coincides the z-axis Let that angle be β

From figure cosβ = VL

sin β = pL

Therefore the transformation

matrix for rotation about y-axis

in clockwise rotation is

1000

00

0010

00

LvLp

LpLv

L

P

β

Ry(β) =

step3

Rotation about z-axis by given angle ie θ ie Rz (θ)

Step 4 and 5 does inverse transformations ie Ry-1 Rx-1 T-1

Therefore the final transformation matrix will be the product of all matrices in sequence

RA= T Rx RyRz Ry-1 Rx-1 T-1

1000

0100

00cossin

00sincos

zR

Reflection wrto xy plane

Consider a point P(xyz) The reflection of this point wrto xy plane is given by pointprsquo(xy-z)

Corresponding matrix is given as

M = 1 0 0

0 1 0

0 0 -1

Page 56: 2D transformations - E-STUDYthirdyearengineering.weebly.com/uploads/3/8/2/8/38286065/... · 2018. 9. 10. · In CG images are made up of series of line segments. Each line segment

Step1 (Translation)transformation of rotation axis so that it passes through the origin

This can be done by moving point P1 to the origin

This repositions the rotation axis and the object as shown

1111

0100

0010

0001

zyx

Tp1

p2

(PQR)

Step2 transform the rotation axis so that it coincides the z-axis

This can be performed in two sub-steps a) Rotate about x-axis to transform axis into xz plane

b) Swing rotation axis around to the z-axis using y-axis rotation

a) Take projection of line segment (000) to (PQR) onto yz plane as shown in fig ie (0QR)

(PQR)

(0QR)

Light

source

x

z

y

Step2-a

Now if we rotate the rotation (arbitrary) axis x-axis so that it lies in X-Z

In this situation its shadow will coincides the z-axis

So we are interested in angle α so that shadow will coincides with z-axis

length of shadow L = radicQ2+R2

sin α = QL

cos α = RL

Therefore the matrix for rotation about x-axis

Rx(α) =

1000

00

00

0001

LRLQ

LQLR

(PQR) (0QR)

L

α

After performing x-axis rotation the rotation axis will lie in x-z plane as shown

When we perform x-axis rotation x-value remains unchanged as axis of rotation is in xz plane so y-coordinate is zero We need to get z-value

L = radicP2+Q2+R2

z-coordinate will be v = radic(L2-P2)

(PQR)

L

P

Step2-b

Now we have to rotate the axis around y-axis so that it coincides the z-axis Let that angle be β

From figure cosβ = VL

sin β = pL

Therefore the transformation

matrix for rotation about y-axis

in clockwise rotation is

1000

00

0010

00

LvLp

LpLv

L

P

β

Ry(β) =

step3

Rotation about z-axis by given angle ie θ ie Rz (θ)

Step 4 and 5 does inverse transformations ie Ry-1 Rx-1 T-1

Therefore the final transformation matrix will be the product of all matrices in sequence

RA= T Rx RyRz Ry-1 Rx-1 T-1

1000

0100

00cossin

00sincos

zR

Reflection wrto xy plane

Consider a point P(xyz) The reflection of this point wrto xy plane is given by pointprsquo(xy-z)

Corresponding matrix is given as

M = 1 0 0

0 1 0

0 0 -1

Page 57: 2D transformations - E-STUDYthirdyearengineering.weebly.com/uploads/3/8/2/8/38286065/... · 2018. 9. 10. · In CG images are made up of series of line segments. Each line segment

Step2 transform the rotation axis so that it coincides the z-axis

This can be performed in two sub-steps a) Rotate about x-axis to transform axis into xz plane

b) Swing rotation axis around to the z-axis using y-axis rotation

a) Take projection of line segment (000) to (PQR) onto yz plane as shown in fig ie (0QR)

(PQR)

(0QR)

Light

source

x

z

y

Step2-a

Now if we rotate the rotation (arbitrary) axis x-axis so that it lies in X-Z

In this situation its shadow will coincides the z-axis

So we are interested in angle α so that shadow will coincides with z-axis

length of shadow L = radicQ2+R2

sin α = QL

cos α = RL

Therefore the matrix for rotation about x-axis

Rx(α) =

1000

00

00

0001

LRLQ

LQLR

(PQR) (0QR)

L

α

After performing x-axis rotation the rotation axis will lie in x-z plane as shown

When we perform x-axis rotation x-value remains unchanged as axis of rotation is in xz plane so y-coordinate is zero We need to get z-value

L = radicP2+Q2+R2

z-coordinate will be v = radic(L2-P2)

(PQR)

L

P

Step2-b

Now we have to rotate the axis around y-axis so that it coincides the z-axis Let that angle be β

From figure cosβ = VL

sin β = pL

Therefore the transformation

matrix for rotation about y-axis

in clockwise rotation is

1000

00

0010

00

LvLp

LpLv

L

P

β

Ry(β) =

step3

Rotation about z-axis by given angle ie θ ie Rz (θ)

Step 4 and 5 does inverse transformations ie Ry-1 Rx-1 T-1

Therefore the final transformation matrix will be the product of all matrices in sequence

RA= T Rx RyRz Ry-1 Rx-1 T-1

1000

0100

00cossin

00sincos

zR

Reflection wrto xy plane

Consider a point P(xyz) The reflection of this point wrto xy plane is given by pointprsquo(xy-z)

Corresponding matrix is given as

M = 1 0 0

0 1 0

0 0 -1

Page 58: 2D transformations - E-STUDYthirdyearengineering.weebly.com/uploads/3/8/2/8/38286065/... · 2018. 9. 10. · In CG images are made up of series of line segments. Each line segment

Step2-a

Now if we rotate the rotation (arbitrary) axis x-axis so that it lies in X-Z

In this situation its shadow will coincides the z-axis

So we are interested in angle α so that shadow will coincides with z-axis

length of shadow L = radicQ2+R2

sin α = QL

cos α = RL

Therefore the matrix for rotation about x-axis

Rx(α) =

1000

00

00

0001

LRLQ

LQLR

(PQR) (0QR)

L

α

After performing x-axis rotation the rotation axis will lie in x-z plane as shown

When we perform x-axis rotation x-value remains unchanged as axis of rotation is in xz plane so y-coordinate is zero We need to get z-value

L = radicP2+Q2+R2

z-coordinate will be v = radic(L2-P2)

(PQR)

L

P

Step2-b

Now we have to rotate the axis around y-axis so that it coincides the z-axis Let that angle be β

From figure cosβ = VL

sin β = pL

Therefore the transformation

matrix for rotation about y-axis

in clockwise rotation is

1000

00

0010

00

LvLp

LpLv

L

P

β

Ry(β) =

step3

Rotation about z-axis by given angle ie θ ie Rz (θ)

Step 4 and 5 does inverse transformations ie Ry-1 Rx-1 T-1

Therefore the final transformation matrix will be the product of all matrices in sequence

RA= T Rx RyRz Ry-1 Rx-1 T-1

1000

0100

00cossin

00sincos

zR

Reflection wrto xy plane

Consider a point P(xyz) The reflection of this point wrto xy plane is given by pointprsquo(xy-z)

Corresponding matrix is given as

M = 1 0 0

0 1 0

0 0 -1

Page 59: 2D transformations - E-STUDYthirdyearengineering.weebly.com/uploads/3/8/2/8/38286065/... · 2018. 9. 10. · In CG images are made up of series of line segments. Each line segment

After performing x-axis rotation the rotation axis will lie in x-z plane as shown

When we perform x-axis rotation x-value remains unchanged as axis of rotation is in xz plane so y-coordinate is zero We need to get z-value

L = radicP2+Q2+R2

z-coordinate will be v = radic(L2-P2)

(PQR)

L

P

Step2-b

Now we have to rotate the axis around y-axis so that it coincides the z-axis Let that angle be β

From figure cosβ = VL

sin β = pL

Therefore the transformation

matrix for rotation about y-axis

in clockwise rotation is

1000

00

0010

00

LvLp

LpLv

L

P

β

Ry(β) =

step3

Rotation about z-axis by given angle ie θ ie Rz (θ)

Step 4 and 5 does inverse transformations ie Ry-1 Rx-1 T-1

Therefore the final transformation matrix will be the product of all matrices in sequence

RA= T Rx RyRz Ry-1 Rx-1 T-1

1000

0100

00cossin

00sincos

zR

Reflection wrto xy plane

Consider a point P(xyz) The reflection of this point wrto xy plane is given by pointprsquo(xy-z)

Corresponding matrix is given as

M = 1 0 0

0 1 0

0 0 -1

Page 60: 2D transformations - E-STUDYthirdyearengineering.weebly.com/uploads/3/8/2/8/38286065/... · 2018. 9. 10. · In CG images are made up of series of line segments. Each line segment

Step2-b

Now we have to rotate the axis around y-axis so that it coincides the z-axis Let that angle be β

From figure cosβ = VL

sin β = pL

Therefore the transformation

matrix for rotation about y-axis

in clockwise rotation is

1000

00

0010

00

LvLp

LpLv

L

P

β

Ry(β) =

step3

Rotation about z-axis by given angle ie θ ie Rz (θ)

Step 4 and 5 does inverse transformations ie Ry-1 Rx-1 T-1

Therefore the final transformation matrix will be the product of all matrices in sequence

RA= T Rx RyRz Ry-1 Rx-1 T-1

1000

0100

00cossin

00sincos

zR

Reflection wrto xy plane

Consider a point P(xyz) The reflection of this point wrto xy plane is given by pointprsquo(xy-z)

Corresponding matrix is given as

M = 1 0 0

0 1 0

0 0 -1

Page 61: 2D transformations - E-STUDYthirdyearengineering.weebly.com/uploads/3/8/2/8/38286065/... · 2018. 9. 10. · In CG images are made up of series of line segments. Each line segment

step3

Rotation about z-axis by given angle ie θ ie Rz (θ)

Step 4 and 5 does inverse transformations ie Ry-1 Rx-1 T-1

Therefore the final transformation matrix will be the product of all matrices in sequence

RA= T Rx RyRz Ry-1 Rx-1 T-1

1000

0100

00cossin

00sincos

zR

Reflection wrto xy plane

Consider a point P(xyz) The reflection of this point wrto xy plane is given by pointprsquo(xy-z)

Corresponding matrix is given as

M = 1 0 0

0 1 0

0 0 -1

Page 62: 2D transformations - E-STUDYthirdyearengineering.weebly.com/uploads/3/8/2/8/38286065/... · 2018. 9. 10. · In CG images are made up of series of line segments. Each line segment

Reflection wrto xy plane

Consider a point P(xyz) The reflection of this point wrto xy plane is given by pointprsquo(xy-z)

Corresponding matrix is given as

M = 1 0 0

0 1 0

0 0 -1