Transformasi 2D(endang_pg)

Reff: “Fundamentals of interactive computer Graphics” james d. folley and andreas Van Dam”

Komputer GrafikDepartemen Ilmu Komputer FMIPA-IPB

2011

Agenda kali ini!

• Kenapa transformasi?• Jenis Transformasi

– Translasi– Scaling– Rotasi

• Sistem Koordinat Homogen dan representasi matrix transformasi

• Transformasi Komposit

Kenapa Transformasi?

• Transformasi ditujukan untuk menggambarkan operasi perubahan posisi, ukuran, ataupun view sebuah objek grafik

Translasi

• Transformasi bagi fenomena pergeseran suatu objek dari satu posisi ke posisi lain

x’ = x + dx y‘= y + dy

Translasi relatif terhadap sumbu koordinat

y

x 0

1

1

2

2

3 4 5 6 7 8 9 10

3

4

5

6

Contoh Translasiy

x0 1

1

2

2

3 4 5 6 7 8 9 10

3

4

5

6

(1, 1) (3, 1)

(2, 3)

Scaling

• Transformasi terkait perubahan ukuran objek grafis, dengan mengalikan setiap titik terhadap suatu skalar

• Perhatikan: tidak hanya berubah tetapi juga bergerak!

x’ = Sx × x y ‘= Sy × y

Relatif terhadap origin

y

x 0

1

1

2

2

3 4 5 6 7 8 9 10

3

4

5

6

1

2

1

3

3

6

3

9

Contoh Scalingy

x0 1

1

2

2

3 4 5 6 7 8 9 10

3

4

5

6

(1, 1) (3, 1)

(2, 3)

Rotasi• Rotasi dasar memutar objek terhadap titik origin dengan

suatu sudut putaran tertentu (θ)

x ‘= x × cosθ – yold × sinθ

y ‘= x × sinθ + yold × cosθ

formulasi di papan tulis

6

y

x 0

1

2

3

4

5

6

Contoh Rotasiy

x0 1

1

2

2

3 4 5 6 7 8 9 10

3

4

5

6

(1, 1) (3, 1)

(2, 3)

Sistem Koordinat Homogen

• Andaikan P adalah pasangan titik (xi,yi) – Translasi P’=P+T– Scaling P’=P.S– Rotasi P’=P.R

Perhatikan mana yang Operasinya sangat Berbeda?

Sistem Koordinat Homogen(ii)

• Seringkali transformasi merupakan proses berturutan dari dua atau lebih kombinasi jenis transformasi berbeda

• Bagaimana agar operasi ketiga transformasi dapat dengan mudah dikombinasikan?– PASTINYA OPERASINYA HARUS HOMOGEN

Homogeneous coordinates

y

w

xw = 0

(x, y, w)

w = 1

(x/w, y/w, 1)

x

y

Homogeneous Coordinates•Sebuah titik (x, y) dapat dituliskan pada homogeneous coordinates sebagai (xh, yh, h)•Dengan homogeneous parameter h sebuah nilai tidak Nol sehingga:

•Selanjutnya setiap titik (x, y) dapat ditulis sebagai (hx, hy, h)•Dengan mudah untuk h = 1 maka(x, y) menjadi (x, y, 1)

h

xx h

h

yy h

Why Homogeneous Coordinates?

•Matematikawan biasanya menggunakan koordinat homogen untuk dapat memberikan faktor skala yang dikemudian waktu dapat dihapus dari persamaan

•Kita akan lihat bahwa semua transformasi dapat direpresentasikan sebagai matriks 3 * 3

•Koordinat homogen dapat kita gunakan untuk mewujudkannya, sehingga operasi transformasi menjadi lebih efisien

Remember Matrix Multiplication

•Recall how matrix multiplication takes place:

ziyhxg

zfyexd

zcybxa

z

y

x

ihg

fed

cba

***

***

***

Homogeneous Translation

•Translasi titik oleh (dx, dy) dapat ditulis dalam bentuk matriks sebagai

•Mewakili titik sebagai vektor kolom homogen kita melakukan aksi ini sebagai perhitungan:

100

10

01

dy

dx

11*1*0*0

1**1*0

1**0*1

1100

10

01

dyy

dxx

yx

dyyx

dxyx

y

x

dy

dx

Homogenous Coordinates

•To make operations easier, 2-D points are written as homogenous coordinate column vectors

vdydxTvdyy

dxx

y

x

dy

dx

),(':

11100

10

01

vssSvys

xs

y

x

s

s

yxy

x

y

x

),(':

11100

00

00

Translation:

Scaling:

Homogenous Coordinates (cont…)

vRvyx

yx

y

x

)(':

1

cossin

sincos

1100

0cossin

0sincos

Rotation:

Inverse Transformations

•Secara mudah matriks transformasinya dapat dituliskan sebagai

100

10

011 dy

dx

T

100

01

0

001

1

y

x

s

s

S

100

0cossin

0sincos1

R

Combining Transformations

•Untuk memudahkan beberapa kombinasi transformasi dapat direpresentasikan sebagai sebuah matrik transformasi

•Contoh sebuah objek bentuk yang berputar pada poros titik beratnya (Z):

– Transformasikan Z ke origin– Rotasikan dengan poros origin– Transformasikan kembali origin pada Z

Combining Transformations (cont…)

)(HHouse HdydxT ),(

HdydxTR ),()( HdydxTRdydxT ),()(),(

1 2

3 4

Combining Transformations (cont…)

•The three transformation matrices are combined as follows

1100

10

01

100

0cossin

0sincos

100

10

01

y

x

dy

dx

dy

dx

REMEMBER: Matrix multiplication is not commutative so order matters

vdydxTRdydxTv ),()(),('

Transformasi 2D in Open GL(endang_pg)

Komputer GrafikDepartemen Ilmu Komputer FMIPA-IPB

2011

In OpenGL, all the model transformations are accumulated in the current transformation matrix (CTM). All vertices of an object will be transformed via this matrix before the object is drawn.

A system stack is provided for storing the backup copies of the CTM during execution.

We usually save the CTM in the stack before the drawing of a transformed object. And restore the original CTM afterwards.

CTM

Vertices Vertices

***

***

***

Stack

To save a copy of the CTM in the stack glPushMatrix();

CTM

Vertices Vertices

***

***

***

Stack

***

***

***

. . .

CTM

Vertices Vertices

***

***

***

Stack

***

***

***

***

***

***

. . .

(before)

(after)

To overwrite the CTM with the top matrix in the stackglPopMatrix();

***

***

***

CTM

Vertices Vertices

Stack

***

***

***

. . .

***

***

***

***

***

***

CTM

Vertices Vertices

Stack

***

***

***

. . .

(before)

(after)

To specify a translation glTranslatef( double Tx, double Ty, 0.0)

The system first generates the matrix representing the translation. Then post multiplies this matrix with the CTM. Finally overwrites the CTM with the result.

***

***

***

CTM

Vertices Vertices

***

***

***

CTM

Vertices Vertices

100

10

01

Ty

Tx

Before

After

Example

//draw a white head at (0,0) glColor3f( 1.0, 1.0, 1.0);

draw_head();

//draw a green head at (-2,-1) glColor3f( 0.0, 1.0, 0.0); glPushMatrix();

glTranslatef( -2.0, -1.0, 0.0);draw_head();

glPopMatrix();

glColor3f( 1.0, 1.0, 1.0); //draw a title hkgluBitMapString( -1.9, 1.8, "Translation of (-2, -

1)” );

Progressive Translation

To specify a scaling glScalef( double Sx, double Sy, 1.0)

Generate a matrix for the scaling. Post multiply it with

the CTM

//Scale by Sx = 1.5, Sy = 2 glPushMatrix();

glScalef( 1.5, 2.0, 1.0);draw_head();

glPopMatrix();

In general, an object moves away from the origin when scaled up, moves towards when scaled down

Progressive Scaling

To specify a rotation glRotatef( double degree, 0.0, 0.0, 1.0)

glPushMatrix(); glRotatef( 45.0, 0.0, 0.0, 1.0); draw_head(); glPopMatrix();

(Note that the angles providedto gl functions are expressed indegrees instead of radians.)

Progressive Rotation

First to scale( Sx =1.5, Sy =2) and then translate the picture to (-2, -1).

Note that the transformations are specified in reverse order: first call glTranslatef(...), and then glScalef(…)

z

y

x

Sy

Sx

T

T

z

y

x

T

T

w

y

x

z

y

x

Sy

Sx

w

y

x

y

x

y

x

100

00

00

100

10

01

'

'

'

100

10

01

"

"

"

100

00

00

'

'

'

***

***

***

CTM

Vertices Vertices

100

10

01

Ty

Tx

100

00

00

Sy

Sx

The program

glPushMatrix(); glTranslatef( -2.0, -1.0, 0.0); glScalef( 1.5, 2.0, 1.0); draw_head(); glPopMatrix();

Progressive (Scaling + Translation)

Scaling relative to a fix point

//Scaling relative to the //apex of the nose at (xf, yf)glPushMatrix(); glTranslatef( xf, yf, 0.0); glScalef( sx, sy, 1); glTranslatef( -xf, -yf, 0); draw_head();glPopMatrix();

(xf, yf)

Scaling relative to a fix point

Rotation about a pivot point

//Rotate 90 degree about //the apex of the noseglPushMatrix(); glTranslatef( xf, yf, 0.0); glRotatef( 90., 0.0, 0.0, 1.0); glTranslatef( -xf, -yf, 0); draw_head();glPopMatrix();

(xf, yf)

Rotation about a pivot point

Reflection about the x axis

The transformation matrix is the same as scaling matrix with Sx = 1 and Sy = 1. Thus, the reflection about the x axis can be achieved by calling

glScalef( 1.0, -1.0, 1.0)

Similarly, the reflection about the y axis is achieved by calling

glScalef( -1.0, 1.0, 1.0)

.

100

010

001

'

'

'

w

y

x

w

y

x

(x,y)

(x,-y)

Example

glPushMatrix(); glScalef( 1, -1, 1); draw_head(); glPopMatrix();

Reflection about x-axis

Reflection along a lineTranslate (0, -b) so that the line

passes through the originRotate the line onto the x axis by -o

Reflect about the x axisBackward rotatebackward translate

(Be reminded that these operations must be specified in reverse order.)

y =mx+b

)(tan 1 m

b

// To draw the reflection of the head about y = 2x + 0.5// (we need to convert theta from radians to degrees)double m = 2.0, b = .5, theta = atan(m)*180.0/3.1416;

glPushMatrix(); glTranslatef( 0, b, 0.); glRotatef( theta, 0.0, 0.0, 1.0);

glScalef( 1, -1, 1); //Reflect

glRotatef( -theta, 0.0, 0.0, 1.0); glTranslatef( 0, -b, 0.); draw_head();glPopMatrix();

Reflection against an arbitrary line

Summary•In this lecture we have taken a look at:

– 2D Transformations• Translation• Scaling• Rotation

– Homogeneous coordinates– Matrix multiplications– Combining transformations

•Next time we’ll start to look at how we take these abstract shapes etc and get them on-screen

Equations

•Translation:

•xnew = xold + dx ynew = yold + dy

•Scaling:•xnew = Sx × xold ynew = Sy × yold

•Rotation•xnew = xold × cosθ – yold × sinθ

•ynew = xold × sinθ + yold × cosθ

Terima Kasih

Komputer GrafikDepartemen Ilmu Komputer FMIPA-IPB

2011

Exercises 1

x

y

0 1

1

2

2

3 4 5 6 7 8 9 10

3

4

5

6

(2, 3)

(3, 2)(1, 2)

(2, 1)

•Translate the shape below by (7, 2)

Exercises 2

x

y

0 1

1

2

2

3 4 5 6 7 8 9 10

3

4

5

6

(2, 3)

(3, 2)(1, 2)

(2, 1)

•Scale the shape below by 3 in x and 2 in y

Exercises 3•Rotate the shape below by 30° about the origin

x

y

0 1

1

2

2

3 4 5 6 7 8 9 10

3

4

5

6

(7, 3)

(8, 2)(6, 2)

(7, 1)

Exercise 4

•Write out the homogeneous matrices for the previous three transformations

______

______

______

______

______

______

______

______

______Translation Scaling Rotation

Exercises 5•Using matrix multiplication calculate the rotation of the shape below by 45° about its centre (5, 3)

x

y

0 1

1

2

2

3 4 5 6 7 8 9 10

3

4

5

(5, 4)

(6, 3)(4, 3)

(5, 2)