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

move the object to a relative position.

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

The original coordinates are: x r cos


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:

unit vector in the y' direction :


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

the object to a relative position.

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

arround the coordinate axes

x
z

x
z

x axis

x
z

y axis

Counterclockwise when looking along


the positive half towards origin

z axis

Rotation around coordinate


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

Rotation Arround a Parallel


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

u is the unit vector along V: u

V
(a, b, c)
V

First step: Translate P1 to origin:

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

Check if this is equal to

R y ( ) Rx ( )

Scaling
Change

the coordinates of the object by scaling


factors.
y
P
P

z
y

P S P
x
z

Scaling with respect to a


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

over planes, lines or points

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

the shape depending on another dimension

SH z

1
0
0
0

0
1
0
0

a
b
1
0

0
0
0
1

x and y value depends on z value of the shape

SH x

1
a
b
0

0
1
0
0

0
0
1
0

0
0
0
1

y and z value depends on x value of the shape

OpenGL GeometricTransformation Functions


In

the core OpenGL library,

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*

(tx, ty, tz);

For 2D applications set tz = 0


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*

(sx, sy, sz);

Use negative values to get reflection


transformation

OpenGL Matrix Operations


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

OpenGL Matrix Operations


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
glLoadIdentity();
glLoadMatrix* (elements16);
where elements16 is a single subscripted array that
specifies a matrix in column-major order

OpenGL Matrix Operations


Example:

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


elements16[k]=(float)k;
glLoadMatrixf(elements16);
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

6.0 10.0 14.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

what does this imply?

In a sequence of transformation commands, the last


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

OpenGL Matrix Stacks


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

OpenGL Matrix Stacks


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 ( );