You are on page 1of 60

# Geometric

Transformations
Ceng 477 Introduction to Computer Graphics
Computer Engineering
METU

2D Geometric
Transformations

Basic Geometric
Transformations
Geometric

## transformations are used to transform

the objects and the camera in a scene (for
animation or modelling) and are also used to
transform World Coordinates to View Coordinates

Given

## the shape, transform all the points of the

shape? Transform the points and/or vectors
describing it.
For example:
Polygon: corner points
Circle, Ellipse: center point(s), point at angle 0
Some transformations preserves some of the
attributes like sizes, angles, ratios of the shape.

Translation
Simply

x' = x + t x

y' = y + t y

x
P=
y

tx
T=
ty
P '= P + T

x'
P '=
y'

P'

Rotation
A

## rotation is defined by a rotation axis

and a rotation angle.
For 2D rotation, the parameters are
rotation angle () and the rotation
point (xr,yr).
We reposition the object in a circular
path arround the rotation point (pivot
point)

yr
xr

Rotation
(xr,yr)=(0,0) we have

## x r cos( ) r cos cos r sin sin

y r sin( ) r cos sin r sin cos

P'

When

y r sin

## Substituting them in the

first equation we get:
In the matrix form we have:
where

cos
R
sin

sin
cos

x x cos y sin
y x sin y cos

P R P

Rotation
Rotation

## around an arbitrary point (xr,yr)

x xr ( x xr ) cos ( y yr ) sin
y yr ( x xr ) sin ( y yr ) cos
This

P'
P

(xr,yr)

## equations can be written as matrix

operations (we will see when we
discuss homogeneous coordinates).

Scaling
Change

## the size of an object. Input:

scaling factors (sx,sy)
x' = xs x
sx
S=
0

y' = ys y

P'

s y

P' = S P
non-uniform vs.
uniform scaling

Homogenous Coordinates
All

## transformations can be represented by matrix

operations.
Translation is additive, rotation and scaling is
multiplicative (+ additive if you rotate around an
arbitrary point or scale around a fixed point);
making the operations complicated.
Adding another dimension to transformations make
translation also representable by multiplication.
Cartesian coordinates vs homogenous coordinates.

xh
x=
h

yh
y=
h

xh h x

P = yh = h y
h h

Many

points in homogenous
coordinates can represent the
same point in Cartesian
coordinates.
In homogenous coordinates, all
transformations can be written as
matrix multiplications.

Transformations in
Homogenous C.
Translation

Rotation

Scaling

1 0 tx
T t x ,t y = 0 1 t y
0 0 1
P' = T t x , t y P
cos
R = sin
0

sin 0
cos 0
0
1

P' = R P

sx
S s x , s y = 0
0

0
sy
0

P = S s x , s y P

0
1

Composite
Transformations
Application

of a sequence of
transformations to a point:

P M 2 M 1 P
MP

Composite Transformations
First:

## composition of similar type

transformations
If we apply to successive
P T(tto
{T(t1x , t1 y ) P}
translations
2 x , t 2a
y )point:
{T(t 2 x , t 2 y ) T(t1x , t1 y )} P
1 0 t2 x
T t 2 x ,t 2 y T t1x ,t1 y = 0 1 t 2 y
0 0 1

1 0 t1x 1 0 t1x t 2 x
0 1 t1 y = 0 1 t1 y t 2 y = T t1x + t 2 x ,t1 y + t 2 y
0 0 1 0 0
1

Composite Transformations
sin 0 cos sin 0
cos 0 sin cos 0 =
0
1 0
0
1
coscos sinsin cossin sincos 0 cos( + ) sin( + ) 0
sincos + cossin sinsin + coscos 0 = sin( + ) cos( + ) 0 = R +
0
0
1
0
0
1
cos
R R = sin
0

s2 x
S s2 x , s2 y S s1x , s1 y = 0
0

0
s2 y
0

0
0

s1x
0
1 0

0
s1 y
0

0 s1x s2 x
0 =
0
1
0

0
s1 y s2 y
0

0
0 = S s1x s2 x , s1 y s2 y
1

## Rotation around a pivot

point
Translate the object so that the
pivot point moves to the origin
Rotate around origin
Translate the object so that the
pivot point is back to its original
position

T xr , yr R T xr , yr =
xr
yr
1

1 0
0 1
0 0

cos
sin

cos
sin
0

sin
cos
0

sin 0 1 0 xr
cos 0 0 1 yr =
0
1 0 0
1
xr 1 cos + yr sin
yr 1 cos xr sin

T xr , yr

T x r , y r

## Scaling with respect to a fixed

point
Translate to origin

Scale
Translate back

T x f , y f

T x f , y f S s x , s y T x f , y f =
1 0
0 1

0 0

s x 0 0 1 0 x f
0 s y 0 0 1 y f =
1 0 0 1 0 0
1
s x 0 x f 1 s x
0 s y 1 s
y
f
y

0 0

xf
y f

S s x , s y
T x f , y f

Order of matrix
compositions
Matrix

composition is not
commutative. So, be careful when
applying a sequence of
transformations.

pivot

same pivot

Other Transformations
Reflection

0 1 0
0 0 1

1 0

0
0

0
0

1 0 0
1

0 1

1 0
0 1

Shear:

## Deform the shape like

shifted slices.
(0,1) (1,1) (2,1)
(3,1)

x'

x sh x y
1 sh x 0
0 1 0
0 0 1

y'

## Transformations Between the

Coordinate Systems
Between

## different systems: Polar

coordinates to cartesian
coordinates
Between two cartesian coordinate
systems. For example, relative
coordinates or window to viewport
transformation.

How

## to transform from x,y

to x',y' ?
Superimpose x',y' to x,y
Transformation:
Translate so that (x0,y0)
moves to (0,0) of x,y
Rotate x' axis onto x axis

R T x0, y0

y
y'
x'

y0
x0

y
y'

x'

Alternate

## method for rotation:

Specify a vector V for positive
y' axis:

V
v=
= vx ,v y
V

y
y'
x'

## unit vector in the x' direction, rotate v clockwise 90

u = v y ,v x = u x ,u y

Elements

## of any rotation matrix can be expressed

as elements of a set of orthogonal unit vectors:

ux
R = v x
0

uy
vy
0

0 v y
0 = v x
1 0

vx
vy
0

0
0
1

P P0
v=
P P0

y' P
P0

x'

Example:

P0 = 2,1

P = 3.5,3

P P0
1.5,2 = 1.5 , 2 = 0.6,0.8
v=
=

## P P0 1.52 + 2 2 2.5 2.5

u = 0.8,0.6
M = R u , v T 2,1 =
0.6 0 1 0 2 = 0.8 0.6 1

0.6
0.8
0
0
1

1
0.6
0.8

0
0
0
1 0 0 1
0
1
3 4 4
Let triangle T be defined as

1
2
1

## three column vectors:

1 1 1
M T = 0.8 1 1.6

0.6
2
1.2

1
1 1
0.8

y'

P
MT

P0

x'

Affine Transformations
Coordinate

## transformations of the form:

x' = a xx x + a xy y + bx
y' = a yx x + a yy y + by
Translation,

## rotation, scaling, reflection, shear. Any

affine transformation can be expressed as the
combination of these.
Rotation, translation, reflection:
preserve angles, lengths, parallel lines

3 DIMENSIONAL
TRANSFORMATIONS

3D Transformations
z

x,y,z

## coordinates. Usual notation:

Right handed coordinate system
Analogous to 2D we have 4 dimensions
in homogenous coordinates.
Basic transformations:
x
Translation
y
Rotation
Scaling

x
z

Translation
move

x 1
y 0

z 0

1 0

0
1
0
0

0 tx x

0 t y y

1 tz z

0 1 1

y
P
P

z
y

P T P

x
z

Rotation
Rotation

x
z

x
z

x axis

x
z

y axis

## Counterclockwise when looking along

the positive half towards origin

z axis

axes
0
0
0
1
Arround

Arround

Arround

R x ( )

0 cos

0 sin

0
0

cos
0
R y ( )
sin

0
cos
sin
R z ( )
0

sin

cos
0

0 sin
1
0
0 cos
0
0

0
0
0

sin
cos
0
0

0
0
1
0

0
0
0

P R x ( ) P

P R y ( ) P

P R z ( ) P

Axis
Rotating

## the object around a line parallel to one of

the axes: Translate to axis, rotate, translate back.

P T(0, y p , z p ) R x ( ) T(0, y p , z p ) P
y

x
z

z
Translate

Rotate

Translate back

## Figure from the textbook

Rotation Around an
Arbitrary Axis
the object so that the
rotation axis passes though the
origin
Rotate the object so that the
rotation axis is aligned with one
of the coordinate axes
Make the specified rotation
Reverse the axis rotation
Translate back

Translate

x
z

Rotation Around an
Arbitrary Axis

Rotation Around an
Arbitrary
Axis
V P P (x x , y y , z z )
2

V
(a, b, c)
V

1
0
T
0

0
1
0
0

0 x1
0 y1
1 z1

0 1

## Next step: Align u with the z axis

we need two rotations: rotate around x axis to get u
onto the xz plane, rotate around y axis to get u aligned
with z axis.

Rotation Around an
Arbitrary
Axis
Align u with the z axis
1) rotate around x axis to get u into the xz plane,
2) rotate around y axis to get u aligned with the z axis
y

u'

uz

## Dot product and Cross

Product

v dot u = vx * ux + vy * uy + vz * uz.
That equals also to |v|*|u|*cos(a) if a is
the angle between v and u vectors. Dot
product is zero if vectors are
perpendicular.
v x u is a vector that is perpendicular to
both vectors you multiply. Its length is |v|
*|u|*sin(a), that is an area of
parallelogram built on them. If v and u
are parallel then the product is the null
vector.

Rotation Around an
Arbitrary
Axis
Align u with the z axis
1) rotate around x axis to get u into the xz plane,
2) rotate around y axis to get u aligned with the z axis
We need cosine and sine of
u

u'

uz

u (0, b, c)
Projection of
yz plane

u on

u u z c
cos

u u z d

for rotation

d b2 c2

u u z u x u u z sin u x b
1

b d sin
cos

c
d

sin

b
d

R x ( )

0
0

0
c
d
b
d
0

0
b

d
c
d
0

0
1

Rotation Around an
Arbitrary
Axis
Align u with the z axis
1) rotate around x axis to get u into the xz plane,
2) rotate around y axis to get u aligned with the z axis
u u z
cos
d
u u z

u u z u y u u z sin u y (a )
cos d
d
0
R y ( )
a

sin a

u''=(a,0,d)

0 a 0
1 0 0
0 d 0
0

R ( ) T( x1 , y1 , z1 ) R x ( ) R y ( ) R z ( ) R y ( ) R x ( ) T( x1 , y1 , z1 )

## Rotation, ... Alternative

Method
Any rotation around origin can be represented by
3 orthogonal unit vectors:

r11
r
21

r13

r22

r23

r31

r32

r33

r12

0
0
0

## This matrix can be thought of as

rotating the unit r1*, r2*, and r3* vectors

onto

x, y, and z axes.

## So, to align a given rotation axis u onto the z axis,

we can define an (orthogonal) coordinate system and form this R matrix
Define a new coordinate system (ux , uy , uz )
with the given rotation axis u using:

uz u
uy

u ux
u ux

ux uy uz

## Rotation, ... Alternative Method

uz u (a, b, c)
u u x (a, b, c) (1,0,0) (0, c,b)

(0, c / d ,b / d )
2
2
u ux
u ux
b c
ux uy uz (0, c / d ,b / d ) (a, b, c) (d , a b / d ,a c / d )
uy

R 0

a
0

a b
d
c
d
b

ac
d
b
d
c

R y ( ) Rx ( )

Scaling
Change

factors.
y
P
P

z
y

P S P
x
z

Fixed Point
Translate

## to origin, scale, translate back

P T( x f , y f , z f ) S T ( x f , y f , z f ) P
y

x
z

z
Translate

Scale

Translate back

## Scaling with respect to a Fixed

Point
T( x f , y f , z f ) S T( x f , y f , z f )

1 0 0
0 1 0

x f sx
y f 0

zf 0

1 0

sy

sz

0 0 1

0 0
1 0 0 x f sx 0 0 sx x f
0 1 0 y 0 s

s
y
f
y
y f

0 0 1 z f 0 0 sz sz z f

0
0
0
1
0
0
0
1

sx
0
T( x f , y f , z f ) S T( x f , y f , z f )
0

sy

sz

x f (1 s x )

y f (1 s y )
z f (1 s z )
1

0 1
0 0
0 0

1 0

0 0
1 0
0 1
0 0

xf
y f
zf

Reflection
Reflection

x
z
1
0
0
0

0
0
1
0

0
0
0
1

x
z

z
0
1
0
0

1
0
0
0

0
1
0
0

0
0
1
0

0
0
0
1

1
0
0
0

x
z

0
1
0
0

0
0
1
0

0
0
0
1

1
0
0
0

0
1
0
0

0
0
1
0

0
0
0
1

Shear
Deform

SH z

1
0
0
0

0
1
0
0

a
b
1
0

0
0
0
1

SH x

1
a
b
0

0
1
0
0

0
0
1
0

0
0
0
1

In

## a separate function is available for each basic

transformation (translate, rotate, scale)
all transformations are specified in 3D
Parameters

## Translation: translation amount in x, y, z axes

Rotation: angle, orientation of the rotation axis
that passes through the origin
Scaling: scaling factors for three coordinates

Basic OpenGL
Transformations
glTranslate*

glRotate*

## (theta, vx, vy, vz);

theta in degrees
The rotation axis is defined by the
vector (vx,vy,vz), i.e., P0 = (0,0,0) P1
= (vx,vy,vz)
glScale*

transformation

glMatrixMode

(GL_MODELVIEW);

## modelview mode to tell OpenGL that we

will be specifying geometric
transformations. The command simply
says that the current matrix operations
will be applied on the 4 by 4 modelview
matrix.
the other mode is the projection mode,
which specifies the matrix that is used of
projection transformations (i.e., how a
scene is projected onto the screen)
There are also color and texture modes
that we will discuss later

Once

## you are in the modelview mode, a call to a

transformation routine generates a matrix that is
multiplied by the current matrix for that mode
Whatever object defined is multiplied with
the current matrix
The contents of the current matrix can also be
manipulated explicitly
where elements16 is a single subscripted array that
specifies a matrix in column-major order

Example:

## for (int k=0; k<16;k++)

elements16[k]=(float)k;
will produce the matrix
0.0
1.0
M
2.0

3.0

4.0

8.0

12.0

13.0

5.0 9.0

## 7.0 11.0 15.0

OpenGL Matrix
composition
glMultMatrix*

(otherElements16)

## The current matrix is

postmultiplied with the matrix
specified in otherElements16

M curr M curr M

## In a sequence of transformation commands, the last

one specified in the code will be the first
transformation to be applied.

OpenGL

## maintains a matrix stack for all

the four matrix modes
When we apply geometric
transformations using OpenGL functions,
the 4 by 4 matrix at the top of the
matrix stack is modified
The top is also called the current matrix
If we want to create multiple
transformation sequences and save the
composition results we can make use of
the OpenGL matrix stack

Initially,

## there is only the identity

matrix in the stack
To find out how many matrices
are currently in the stack:
glGetIntegerv(GL_MODELVIEW_STACK_DEPTH,numMats)

glPushMatrix ();
The current matrix is copied and stored in the second
stack position
glPopMatrix ();
Destroys the matrix at the top and the second
matrix in the stack becomes the current matrix

OpenGL
Modelview Matrix

## glColor3f (0.0, 0.0, 1.0);

glRecti(0,0,80,40);
glFlush ( );

// blue

OpenGL
Modelview Matrix

I
I.T

## glColor3f (0.0, 0.0, 1.0);

glRecti(0,0,80,40);
glFlush ( );
glColor3f (1.0, 0.0, 0.0);
glTranslatef(10.0, 10.0, 0.0);
glRecti(0,0,80,40);
glFlush ( );

// blue

// red

OpenGL
Modelview Matrix

I
I.T
I.T.S

## glColor3f (0.0, 0.0, 1.0);

glRecti(0,0,80,40);
glFlush ( );
glColor3f (1.0, 0.0, 0.0);
glTranslatef(10.0, 10.0, 0.0);
glRecti(0,0,80,40);
glFlush ( );

## glColor3f (1.0, 0.0, 0.0);

glScalef(2.0, 2.0, 0.0);
glRecti(0,0,80,40);
glFlush ( );

// blue

// red

// red

OpenGL
Modelview Matrix

I
I.T
I.T.S

I.T.S.R

## glColor3f (0.0, 0.0, 1.0);

glRecti(0,0,80,40);
glFlush ( );
glColor3f (1.0, 0.0, 0.0);
glTranslatef(10.0, 10.0, 0.0);
glRecti(0,0,80,40);
glFlush ( );

## glColor3f (1.0, 0.0, 0.0);

glScalef(2.0, 2.0, 0.0);
glRecti(0,0,80,40);
glFlush ( );

// blue

// red

// red

## glColor3f (0.0, 1.0, 0.0);

// green
glRotatef(20.0, 0.0, 0.0, 1.0);
glRecti(0,0,80,40);
glFlush ( );

OpenGL Transformations
Matrix Stack
glPushMatrix ();
glPopMatrix ();

OpenGL
glColor3f (0.0, 0.0, 1.0);
glRecti(0,0,80,40);
glFlush ( );

I
I.T
I.T.S

I.T.R

I.T

I.T

## glColor3f (1.0, 0.0, 0.0);

glTranslatef(10.0, 10.0, 0.0);
glRecti(0,0,80,40);
glPushMatrix();
glFlush ( );
glColor3f (1.0, 0.0, 0.0);
glScalef(2.0, 2.0, 0.0);
glRecti(0,0,80,40);
glFlush ( );

// blue

// red

// red

## glColor3f (0.0, 1.0, 0.0);

// green
glPopMatrix();
glRotatef(20.0, 0.0, 0.0, 1.0);
glRecti(0,0,80,40);
glFlush ( );