Grafika Komputer
Grafika Komputer
Chapter 4
Chapter 4
Geometric Transformations
Materi Kuliah :
Minggu
ke-
tanggal
materi kuliah
Keterangan
9
7-8-9 Mei 2013
Bab IV : Transformasi Dua Dimensi
10
14-15-16 Mei
2013
Bab V : Teknik Clipping
11
21-22-23 Mei
2013
Quiz 2 : Bab IV & V
12
28-29-30 Mei
2013
Bab VI : Transformasi Tiga Dimensi
13
4-5-6 Juni 2013
Bab VII : Konsep Pewarnaan
14
11-12-13 Juni
2013
Bab VIII : Pengenalan Animasi
Komputer
Bab IX : Pengenalan OpenGL
15
18-19-20 Juni
2013
Quiz 3 : Bab VI & VII
25-26-27 Juni
2013
Minggu
Tenang
16
2-3-4 Juli
2013
“Transformations are the operations applied
to geometrical description of an object to
change its position, orientation, or size are
called geometric transformations”.
Why Transformations ?
“Transformations are needed to manipulate
the initially created object and to display the
modified object without having to redraw
Materi
Definisi
Translasi
Rotasi
Skala
Translasi
Translasi adalah suatu pergerakan/perpindahan
semua titik dari objek pada suatu jalur lurus
sehingga menempati posisi baru.
Jalur yang direpresentasikan oleh vektor disebut
Translasi atau Vektor Geser.
Pergeseran tersebut dapat ditulis :
Translasi
Untuk merepresentasikan translasi dalam matriks
3x3 kita dapat menulisnya :
2D Translation
2D Translation
Repositioning an object along a straight line path from
one co-ordinate location to another
(
x,y
) (
x’,y’
)
To translate a 2D position, we add translation distances
t
xand
t
yto the original coordinates
(
x,y
)
to obtain the
new coordinate position
(
x’,y’
)
x’= x + t
x,
y’= y + t
yT
y
Matrix form
Matrix form
x
y
t
x
x
t
y
y
2D Translation
2D Translation
Moving a polygon from position (a) to position (b) with
the translation vector (-5, 10), i.e.
x
y
5
10
15
20
5
10
15
20
(a)
x
y
5
10
15
20
5
10
15
20
(b)
5
10
T
t
xt
yP(2, 2)
= 6
=4
P
'
(8,6)
t
y
We can write the components:
p'
x= p
x+ t
xp'
y= p
y+ t
y
or in matrix form:
P' = P + T
2D Translation
Translating a Polygon
Translating a Polygon
class Point2D {
public:
GLfloat x, y;
};
void translatePoly(Point2D P[], GLint n,
GLfloat tx, GLfloat ty)
{
GLint i;
for (i=0; i<n; i++) {
P[i].x = P[i].x + tx;
P[i].y = P[i].y + ty;
}
glBegin (GL_POLYGON);
for (i=0; i<n; i++)
glVertex2f(P[i].x, P[i].y);
glEnd();
Rotasi
Rotasi adalah mereposisi semua titik dari objek
sepanjang jalur lingkaran dengan pusatnya pada
titik pivot.
)
cos(
)
sin(
'
)
sin(
)
cos(
'
y
x
y
y
x
x
Rotasi
Untuk memudahkan perhitungan dapat digunakan
matriks :
Dimana :
sin(θ) dan cos(θ) adalah fungsi linier dari θ,
x’kombinasi linier dari x dan y
y’kombinasi linier dari x and y
2D Rotation
2D Rotation
Repositioning an object along a circular path in the
xy
-plane
cos(
)
cos cos
sin sin
sin(
)
cos sin
sin cos
x
r
r
r
y
r
r
r
x
y
(x,y)
(x’,y’)
φ
θ
r
r
The original coordinates are:
cos( )
sin( )
x r
y r
2D Rotation
2D Rotation
Substituting
Matrix form
Matrix form
cos
sin
sin
cos
x
x
y
y
P
R P
cos
sin
sin
cos
x
x
y
y
x
y
P
P
A rotation repositions
all points in an object
along a circular path in
the plane centered at
the pivot point.
First, we’ll assume the
pivot is at the origin.
2D Rotation about a Pivot position
2D Rotation about a Pivot position
Rotating about pivot position
(
x
r
,
y
r
)
(
) cos
(
)sin
(
)sin
(
) cos
r
r
r
r
r
r
x
x
x x
y y
y
y
x x
y y
x
y
(x,y)
(x’,y’)
φ
θ
r
r
Translating a Polygon
Translating a Polygon
class Point2D {
public:
GLfloat x, y;
};
void rotatePoly(Point2D P[], GLint n,
Point2D pivot, GLdouble theta)
{
Point2D *V;
V = new Point2D[n];
GLint i;
for (i=0; i<n; i++) {
V[i].x = pivot.x + (P[i].x – pivot.x) * cos(theta)
- (P[i].y – pivot.y) * sin(theta);
V[i].y = pivot.y + (P[i].x – pivot.x) * sin(theta)
- (P[i].y – pivot.y) * cos(theta);
}
glBegin (GL_POLYGON);
for (i=0; i<n; i++
glVertex2f(V[i].x, V[i].y);
glEnd();
Skala
Penskalaan koordinat dimaksudkan untuk
menggandakan setiap komponen yang ada pada
objek secara skalar.
Keseragaman penskalaan berarti skalar yang
digunakan sama untuk semua komponen objek.
Scaling
Uniform Scaling
Un-uniform Scaling
Scaling
• Scaling changes the size of an
object and involves two scale
factors, S
xand S
yfor the x- and
y- coordinates respectively.
• Scales are about the origin.
• We can write the components:
p
'
x=
s
x•
p
xp
'
y=
s
y•
p
yor in matrix form:
P' = S • P
Scale matrix as:
xs
s
S
0
0
P
Scaling
• 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)
P’
• Example :
Scaling
• 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)
P’
•
Example :
•P(2, 5), S
x= 0.5, S
y= 0.5
•If the scale factors are larger
than 1
the points will be
moved away from the origin
the object will be larger.
P’
• Example :
Scaling
• If the scale factors are the
same, S
x= S
y uniform
scaling
• Only change in size (as
previous example)
P(1, 2)
P’
•If S
x
S
y differential
scaling.
•Change in size and shape
•Example : square
rectangle
2D Scaling
2D Scaling
Altering the size of an object.
S
xand
S
yare the scaling
factors. If
S
x= S
ythen uniform scaling.
x
y
x
xS
y
yS
Matrix form
Matrix form
0
0
x
y
S
x
x
S
y
y
P
S P
x
y
S
x=
S
y= ½
S
x=
S
y= ½
2D Scaling relative to Fixed point
2D Scaling relative to Fixed point
Scaling relative to fixed point
(
x
f
,
y
f
)
(
)
(
)
f
f
x
f
f
y
x
x
x x S
y
y
y y S
x
y
S
x= ¼ ,
S
y= ½
P
1P
2P
3P
1’P
2’P
3’(
x
f,
y
f)
(1
)
(1
)
x
f
x
y
f
y
x
xS
x
S
y
yS
y
S
OR
General fixed point scaling
Translate object so that the fixed point coincides with the
coordinate origin
Scale the object with respect to the coordinate origin
Use the inverse translation of step 1 to return the object to
its original position
(xf,yf)
(a)
Original Position
of Object and
Fixed point
(b)
Translation of
object so that
fixed point
(x
f,y
f)is at origin
(c)
scaling was
about origin
(d)
Translation of the object
so that the Fixed point
Translating a Polygon
Translating a Polygon
class Point2D {
public:
GLfloat x, y;
};
void scalePoly(Point2D P[], GLint n, Point2D fixedPt,
GLfloat Sx, GLfloat Sy)
{
Point2D *V;
V = new Point2D[n];
GLfloat addx = fixedPt.x * (1 – Sx);
GLfloat addy = fixedPt.y * (1 – Sy);
GLint i;
for (i=0; i<n; i++) {
V[i].x = P[i].x * Sx + addx;
V[i].y = P[i].y * Sy + addy;
}
glBegin (GL_POLYGON);
for (i=0; i<n; i++
glVertex2f(V[i].x, V[i].y);
glEnd();
Matrix Representation
Matrix Representation
Use 3×3 matrices to combine transformations
Translation
Rotation
Scaling
1 0
0 1
1
0 0 1
1
x
y
x
t
x
y
t
y
cos
sin
0
sin
cos
0
1
0
0
1
1
x
x
y
y
0
0
0
0
1
0
0
1
1
x
y
x
S
x
y
S
y
Inverse Transformations
Inverse Transformations
Translation
Rotation
Scaling
11 0
0 1
0 0
1
x
y
t
T
t
1cos
sin
0
sin
cos
0
0
0
1
R
1 1 10 0
0
0
0
0 1
Example
Example
Consider the line with endpoints (10, 10) and (30, 25).
Translate it by
t
x= -20,
t
y= -10 and then rotate it by
θ
= 90º.
x
y
(10, 10)
(30, 25)
Right-to-left
cos 90
sin 90
0 1 0
20
sin 90
cos 90
0 0 1
10
1
0
0
1 0 0
1
1
x
x
y
y
Solution
Solution
y
(10, 10)
(30, 25)
cos 90
sin 90
0 1 0
20
sin 90
cos 90
0 0 1
10
1
0
0
1 0 0
1
1
0
1 0 1 0
20
1
0
0 0 1
10
0
0
1 0 0
1
1
0
1 10
1
0
20
0
0
1
1
Solution (continue)
Solution (continue)
0
1 10
1
0
20
1
0
0
1
1
x
x
y
y
Point (10, 10)
0
1 10
10
0
1
0
20 10
10
1
0
0
1
1
1
x
y
Point (30, 25)
0
1 10
30
15
1
0
20 25
10
Result
Result
x
y
(10, 10)
(30, 25)
(0, -10)
(-15, 10)
x
y
(10, 15)
(-10, 0)
x
y
(0, -10)
(-15, 10)
Exercises
Exercises
Consider the following object:
1.
Apply a rotation by 145º then scale it by
S
x=2 and
S
y=1.5
and then translate it by
t
x=20 and
t
y=-30.
2.
Scale it by
S
x=½ and
S
y=2 and then rotate it by 30º.
3.
Apply a rotation by 90º and then another rotation by 45º.
x
y
10
10
25
Exercises
Exercises
Composite 2D Transformations
Composite 2D Transformations
1.
Translation
:
Show that:
2.
Rotation
:
Show that:
3.
Scaling
:
Show that:
1
1
2
2
1
2
1
2
( , )
x
y
( ,
x
y
)
(
x
x
,
y
y
)
T t t
T t t
T t
t t
t
1
2
1
2
( )
( )
(
)
R
R
R
1
1
2
2
1
2
1
2
( ,
x
y
) (
x
,
y
)
(
x
x
,
y
y
)
General 2D Pivot-Point Rotation
General 2D Pivot-Point Rotation
x
y
x
y
Original position
and Pivot Point
Translate Object so that
Pivot Point is at origin
Translate object so that Pivot Point
x
y
(x
r ,y
r)
General Pivot-point Rotation
General Pivot-point Rotation
1 0
cos
sin
0 1 0
0 1
sin
cos
0 0 1
1
0 0
1
0
0
1 0 0
1
1
( , )
( )
(
,
)
r r
r r
r r r r
x
x
x
x
y
y
y
y
T x y
R
T
x
y
P
Using Matrices
Exercises
Exercises
Consider the following object:
1.
Apply a rotation by 60° on the Pivot Point (-10, 10) and
display it.
2.
Apply a rotation by 30° on the Pivot Point (45, 10) and
display it.
3.
Apply a rotation by 270° on the Pivot Point (10, 0) and
then translate it by
t
= -20 and
t
= 5. Display the final
x
y
10
10
25
General 2D Fixed-Point Scaling
General 2D Fixed-Point Scaling
x
y
Original position
and Fixed Point
Translate Object so that
Fixed Point is at origin
Scale Object with
Translate Object so that Fixed Point
x
y
(x
f ,y
f)
x
y
(x
f ,y
f)
General 2D Fixed-Point Scaling
General 2D Fixed-Point Scaling
1 0
0 0 1 0
0 1
0
0 0 1
1
0 0
1
0
0 1 0 0
1
1
( , ) ( , )
(
,
)
r x r
r y r
r r x y r r
x
x
s
x
x
y
y
s
y
y
T x y
S s s
T
x
y
P
Using Matrices
Exercises
Exercises
Consider the following object:
1.
Scale it by
s
x= 2 and
s
y= ½ relative to the fixed point
(140, 125) and display it.
2.
Apply a rotation by 90° on the Pivot Point (50, 60) and
then scale it by
s
x=
s
y= 2 relative to the Fixed Point
(0, 200). Display the result.
3.
Scale it
s
x=
s
y= ½ relative to the Fixed Point (50, 60)
and then rotate it by 180° on the Pivot Point (50, 60).
x
y
60
50
125
Order of Transformations
Order of Transformations
Object is first translated in the
x
direction
and then rotated by 90º
x
y
Object is first rotated by 90º and then
translated in the
x
direction
Reflection
Reflection
Reflection of an object about the
x
axis
x
y
x
y
Reflection of an object about the
y
axis
1
0
0
0
1 0
1
0
0
1
1
x
x
y
y
About the x axis
1 0 0
0
1 0
1
0
0 1
1
x
x
y
y
Reflection
Reflection
Same as a rotation with 180º
x
y
1 0
0
0
1 0
1
0
0
1
1
x
x
y
y
Relative to the coordinate origin
0 1 0
1 0 0
1
0 0 1
1
x
x
y
y
With respect to the line y = x
Reflection
2D Shear
2D Shear
x
-direction shear
x
x
x sh y
y
y
Matrix form
Matrix form
1
0
0
1
0
1
0
0
1
1
x
x
sh
x
y
y
x
y
Initial object
1
1
x
y
sh
= 2
1
2D Shear
2D Shear
x-direction relative to other reference line
(
)
x
ref
x
x sh y y
y
y
Matrix form
Matrix form
1
0
1
0
1
0
0
1
1
x x ref
x
sh
sh y
x
y
y
y
x
y
1
1
y
ref= -1
x
sh
= ½,
y
= -1
1
1
2
3
2D Shear
2D Shear
y
-direction shear
y
x
x
y
y sh x
Matrix form
Matrix form
1
0 0
1 0
1
0
0 1
1
y
x
x
y
sh
y
2D Shear
2D Shear
y-direction relative to other reference line
(
)
y
ref
x
x
y
y sh x x
Matrix form
Matrix form
1
0
0
1
1
0
0
1
1
x y ref
x
x
y
sh
sh x
y
x
y
1
1
x
ref= -1
sh
= ½,
x
= -1
y
x
1
1
2
2D Shear
Transformations between
Transformations between
2D Coordinate Systems
2D Coordinate Systems
To translate object descriptions from
xy
coordinates to
x
’
y
’
coordinates, we set up a transformation that superimposes
the
x
’
y
’
axes onto the
xy
axes. This is done in two steps:
1.
Translate so that the origin (
x
0,
y
0) of the
x
’
y
’
system is
moved to the origin (0, 0) of the
xy
system.
2.
Rotate the
x
’
axis onto the
x
axis.
x
y
x
0x
’
y
’
Transformations between 2D
Transformations between 2D
Coordinate Systems
Coordinate Systems
i.e.
1)
2)
Concatenating:
00 0 0
1 0
(
,
)
0 1
0 0
1
x
T
x
y
y
cos
sin
0
(
)
sin
cos
0
0
0
1
R
,
(
)
(
0
,
0
)
xy x y
Example
Example
Find the
x
’
y
’
-coordinates of the
xy
points (10, 20) and (35,
20), as shown in the figure below:
,
cos30
sin 30 0 1 0
30
sin 30 cos30 0 0 1
10
0
0
1 0 0
1
0.866
0.5
0 1 0
30
0.866
0.5
31
0.5
0.866 0 0 1
10
0.5
0.866 6.34
0
0
1 0 0
1
0
0
1
xy x y
M
x
y
30
x
’
y
’
10
30º
(10, 20)
(10,20)
(35,20)
0.866
0.5
31
10
12.34
0.5
0.866 6.34
20
18.66
(-12.38, 18.66)
0
0
1
1
1
0.866
0.5
31
35
9.31
0.5
0.866 6.34
20
6.16
(9.31, 6.1
0
0
1
1
1
Composite Transformations
(A) Translations
If two successive translation vectors (t
x1,t
y1) and (t
x2,t
y2) are applied to
a coordinate position P, the final transformed location P’ is
calculated as:
-P’=T(t
x2,t
y2) . {T(t
x1,t
y1) .P}
={T(t
x2,t
y2) . T(t
x1,t
y1)} .P
Where P and P’ are represented as homogeneous-coordinate column
vectors. We can verify this result by calculating the matrix product
for the two associative groupings. Also, the composite
transformation matrix for this sequence of transformations is:
-1 0 t
x20 1 t
y20 0 1
1 0 t
x10 1 t
y10 0 1
1 0 t
x1+t
x20 1 t
y1+t
y20 0 1
.
=
(B)
Rotations
Two successive rotations applied to point P produce the
transformed position:
-P’= R(Ө
2) . {R(Ө
1) . P}
= {R(Ө
2) . R(Ө
1)} . P
By multiplication the two rotation matrices, we can verify
that two successive rotations are additive:
R(Ө
2) . R(Ө
1) = R (Ө
1+ Ө
2)
So that the final rotated coordinates can be calculated with
the composite rotation matrix as:
(C) Scaling
Concatenating transformation matrices for two successive
scaling operations produces the following composite scaling
matrix:
-S
x20 0
0 S
y20
0 0 1
.
=
S
x10 0
0 S
y10
0 0 1
S
x1. S
x20 0
0 S
y1.S
y20
0 0 1
Or, S(
S
x2,
S
y2) . S(
S
x1, S
y1) = S (
S
x1. S
x2,
S
y1.S
y2)
Other transformations
Reflection
is a transformation that produces a mirror image of
an object. It is obtained by rotating the object by 180 deg about
the reflection axis
1
2
3
3’
2’
1’
Original position
Reflected position
Reflection about the line y=0, the
X- axis , is accomplished with the
transformation matrix
1 0 0
0 -1 0
Reflection
-1 0 0
0 1 0
0 0 1
1’
3’
2’
3
2
1
Original position
Reflected position
Reflection
-1 0 0
0 -1 0
0 0 1
1’
2’
3’
3
2
1
Original position
Reflected position
Reflection of an object relative to an axis perpendicular to
the xy plane and passing through the coordinate origin
X-axis
Y-axis
Origin O
(0,0)
The above reflection matrix is
the
rotation
matrix
with
angle=180 degree.
Reflection of an object w.r.t the
straight line y=x
0 1 0
1 0 0
0 0 1
1’
3’
2’
3
2
1
Original position
Reflected position
X-axis
Y-axis
Reflection of an object w.r.t the
straight line y=-x
0 -1 0
-1 0 0
0 0 1
1’
3’
2’
3
X-axis
1
Original position
2
Y-axis
Origin O
(0,0)
Reflection of an arbitrary axis
y=mx+b
3
2
1
3
2
1
Original position
3
2
1
Original position
Translation so that it passes through origin
1’
3’
2’
3
2
1
Reflected position
Original position
Rotate so that it coincides with
x-axis and reflect also about x-x-axis
1’
3’
2’
3
2
1
Original position
Reflected position
1’
3’
2’
3
2
1
Original position
Reflected position
Rotate back
Shear Transformations
Shear is a transformation that distorts the shape of an
object such that the transformed shape appears as if
the object were composed of internal layers that had
been caused to slide over each other
Shears
Original Data
y Shear
x Shear
An X- direction Shear
(0,1)
(1,1)
(1,0)
(0,0)
(0,0)
(1,0)
(2,1)
(3,1)
An Y- direction Shear
(0,1)
(1,1)
(1,0)
(0,0)
(0,0)
(0,1)
(1,3)
(1,2)
For example, Sh
y=2
X
X
CONCLUSION
