Transformasi Obyek (Kasus 2D)

Transformasi Obyek (Kasus 2D) Grafika Komputer Semester Ganjil 2008

Kuliah Grafika Komputer Teknik Informatika ITS

Anny Yuniarti - 2008

1

Kompetensi 1.

Mampu membangun tool untuk mentransformasi obyek

2.

Mampu memahami konsep transformasi affine yang merupakan kombinasi dari rotasi, penskalaan, dan translasi

3.

Mampu mengimplementasikan konsep transformasi dalam sebuah program OpenGL



2

Referensi 





Computer Graphics using OpenGL, 3rd Edition, by: F.S. Hill, Jr. and Stephen M. Kelley – Chapter 5 Computer Graphics with OpenGL, 3rd Edition, by: Donald Hearn and M.Pauline Baker – Chapter 5 http://www.cs.virginia.edu



3

Pokok Bahasan 1.

Transformasi 2D Dasar 1. 2.

3.

2.

3.

Translasi Rotasi Penskalaan

Kombinasi Transformasi Transformasi Affine



4

Kegunaan Transformasi 

Me-reposisi ataupun me-resize obyek



Pada proses viewing, untuk mengubah worldcoordinate menjadi display untuk suatu output device



Untuk aplikasi-aplikasi tertentu:  

CAD  mengatur orientasi dan ukuran suatu komponen pada suatu rancangan Animasi  menggerakkan letak kamera atau obyek pada sebuah layar sesuai path tertentu



5

Jenis-jenis Transformasi 

Transformasi Geometri  



Diterapkan pada deskripsi geometri suatu obyek Gunanya untuk mengubah posisi, orientasi, atau ukuran suatu obyek

Transformasi modeling  



Digunakan untuk membentuk sebuah layar atau membuat deskripsi hierarki suatu obyek kompleks yang terdiri dari beberapa bagian Contoh: pesawat terdiri dari sayap, ekor, mesin, dan lain-lain, dimana masing-masing dapat dispesifikasikan dalam komponen-komponen level ke-2 dan seterusnya. Transformasi modeling mendeskripsikan bagaimana setiap komponen disusun untuk rancangan keseluruhan



6

2D Modeling Transformations Modeling Coordinates y

Scale Translate

x

Scale Rotate Translate

World Coordinates Kuliah Grafika Komputer Teknik Informatika ITS


7

2D Modeling Transformations Modeling Coordinates y x

Let’s look at this in detail… World Coordinates Kuliah Grafika Komputer Teknik Informatika ITS


8


Initial location at (0, 0) with x- and y-axes aligned Kuliah Grafika Komputer Teknik Informatika ITS


9


Scale .3, .3 Rotate -90 Translate 5, 3



10


Scale .3, .3 Rotate -90 Translate 5, 3



11


Scale .3, .3 Rotate -90 Translate 5, 3 World Coordinates Kuliah Grafika Komputer Teknik Informatika ITS


12

Transformasi Geometri 2D    

Translasi 2D x’ = x + tx, y’ = y + ty (tx, ty) disebut vektor translasi atau pergeseran Dalam bentuk matriks:

P     

x

y

P'

x'

y'

T

tx ty

Persamaan translasi 2D: P’ = P + T Line, polygon  translasi titik endpoints, render Untuk menghapus obyek yang asli  display it in background color before translating it Circle, ellipse, spline curve  translasi titik-titik yang mendefinisikan (misalnya koordinat titik pusat), render obyek hasil translasi di posisi yang baru



13

Transformasi Geometri 2D 

Scaling 2D x’ = x· sx, y’ = y· sy Dalam bentuk matriks:



Uniform scaling berarti skalar pengali sama untuk semua komponen:

 

x' y'

sx 0

0 sy

x y

2 Kuliah Grafika Komputer Teknik Informatika ITS


14

Transformasi Geometri 2D 

Non-uniform scaling: skalar yang berbeda untuk tiap komponen:

X 2, Y 0.5



15

Transformasi Geometri 2D (x’, y’) r

 

(x, y)

r

 

     

x' y'

cos sin

sin cos


x y

 

Rotasi 2D x’ = r cos (Φ + ) y’ = r sin (Φ + ) Trig Identity… x’ = r cos(f) cos( ) – r sin(f) sin( ) y’ = r sin(f) cos( ) + r cos(f) sin( ) Original point… x = r cos (f) y = r sin (f) Hasil substitusi… x’ = x cos( ) - y sin( ) y’ = x sin( ) + y cos( )


16

Transformasi Geometri 2D    

Shear 2D Shear pada arah x relatif terhadap sumbu x: x’ = x + shx· y, y’ = y Parameter shx dapat berupa bilangan real Dalam bentuk matriks: x' 1 sh x x

y'

 

0

1

y

Shear pada arah y relatif terhadap sumbu y: x’ = x, y’ = y + shy· x Dalam bentuk matriks: x' 1 0 x y'


shy

1

y


17

Transformasi Geometri 2D   

Reflection 2D Pencerminan terhadap garis y = 0 (sumbu x): x’ = x, y’ = -y Dalam bentuk matriks: x' 1 0 x y'

 



1

y

Pencerminan terhadap garis x = 0 (sumbu y): x’ = -x, y’ = y Dalam bentuk matriks: x' 1 0 x y'



0

0

1

y

Pencerminan terhadap titik pusat (0, 0): x’ = -x, y’ = -y Dalam bentuk matriks: x' 1 0 x y'


0

1


y

18

Basic 2D Transformations 

Translation:  



Scale: 





x’ = x + tx y’ = y + ty x’ = x * sx y’ = y * sy

Rotation: 



x’ = x*cos(θ) y*sin(θ) y’ = x*sin(θ) + y*cos(θ)


Transformations can be combined (with simple algebra)


19





Scale: 






Rotation: 






20





Scale: 






(x,y) (x’,y’)

Rotation: 





x’ = x*sx y’ = y*sy


21

Basic 2D Transformations Translation:



 

x’ = x + tx y’ = y + ty

Scale:



 



x’ = x * sx y’ = y * sy

Rotation:  x’ = x*cos(θ) y*sin(θ)  y’ = x*sin(θ) + y*cos(θ)


(x’,y’)

x’ = (x*sx)*cos θ) - (y*sy)*sin(θ) y’ = (x*sx)*sin(θ) + (y*sy)*cos(θ)


22





Scale: 








(x’,y’)

x’ = ((x*sx)*cos(θ) - (y*sy)*sin(θ)) + tx y’ = ((x*sx)*sin(θ) + (y*sy)*cos(θ)) + ty


23





Scale: 








x’ = ((x*sx)*cos(θ) - (y*sy)*sin(θ)) + tx y’ = ((x*sx)*sin(θ) + (y*sy)*cos(θ)) + ty


24

Matrix Representation 

Represent 2D transformation by a matrix a b c d



Multiply matrix by column vector apply transformation to point x' y'


a b c d

x y

x' ax by y ' cx dy Anny Yuniarti - 2008

25

Matrix Representation 

Transformations combined by multiplication x' y'

a b c d

e g

f i h k

j l

x y

Matrices are a convenient and efficient way to represent a sequence of transformations!



26

2x2 Matrices 

What types of transformations can be represented with a 2x2 matrix? 2D Identity?

x' x y' y

x' y'

1 0 x 0 1 y

2D Scale around (0,0)?

x' s x * x y' s y * y Kuliah Grafika Komputer Teknik Informatika ITS

x' y'

sx 0


0 sy

x y 27

2x2 Matrices 

What types of transformations can be represented with a 2x2 matrix? 2D Rotate around (0,0)? x' cos * x sin * y y ' sin * x cos * y

x' y'

cos sin

sin cos

x y

2D Shear? x ' x shx * y

x'

1

shx

x

y ' shy * x

y'

shy

1

y


y


28

2x2 Matrices 

What types of transformations can be represented with a 2x2 matrix? 2D Mirror about Y axis? x' y'

x y

x' y'

1 0 x 0 1 y

x' y'

1 0

2D Mirror over (0,0)? x' y'

x y



0 x 1 y 29

2x2 Matrices 

What types of transformations can be represented with a 2x2 matrix? 2D Translation? x' x t x y'

y ty

NO!

Only linear 2D transformations can be represented with a 2x2 matrix



30

Linear Transformations 

Linear transformations are combinations of … 

  



Scale, Rotation, Shear, and Mirror

x' y'

a b c d

x y

Properties of linear transformations: 

Satisfies:



Origin maps to origin Lines map to lines Parallel lines remain parallel Ratios are preserved

  

T (s1p1 s2p 2 )


s1T (p1 ) s2T (p 2 )


31

Homogeneous Coordinates 

Q: How can we represent translation as a 3x3 matrix? x' x t x y'


y ty


32

Homogeneous Coordinates Homogeneous coordinates  represent coordinates in 2 dimensions with a 3vector

x y

homogeneous coords

x y 1

Homogeneous coordinates seem unintuitive, but they make graphics operations much easier Kuliah Grafika Komputer Teknik Informatika ITS


33

Homogeneous Coordinates Q: How can we represent translation as a 3x3 matrix? x' x t x y' 

y ty

A: Using the rightmost column: 1 0 tx Translation


0 1 ty 0 0 1


34

Translation Homogeneous Coordinates

Example of translation

x'

1 0 tx x

x tx

y' 1

0 1 ty y 0 0 1 1

y ty 1

tx = 2 ty = 1 Kuliah Grafika Komputer Teknik Informatika ITS


35

Homogeneous Coordinates Add a 3rd coordinate to every 2D point   

(x, y, w) represents a point at location (x/w, y/w) (x, y, 0) represents a point at infinity (0, 0, 0) is not allowed y 2

Convenient coordinate system to represent many useful transformations Kuliah Grafika Komputer Teknik Informatika ITS

(2,1,1) or (4,2,2) or (6,3,3)

1 1


2

x

36


Basic 2D transformations as 3x3 matrices x' y'

1 0 tx 0 1 ty

x y

x' y'

sx 0

0 sy

0 x 0 y

1

0 0

1

1

0

0

1 1

1

Translate

Scale

x' y'

cos sin

sin cos

0 x 0 y

x' y'

1 shy

shx 1

0 x 0 y

1

0

0

1 1

1

0

0

1 1

Rotate Kuliah Grafika Komputer Teknik Informatika ITS

Shear Anny Yuniarti - 2008

37

Affine Transformations 

Affine transformations are combinations of …  



Linear transformations, and Translations

x' y' w

a b d e 0 0

c x f y 1 w

Properties of affine transformations:  

 

Origin does not necessarily map to origin Lines map to lines Parallel lines remain parallel Ratios are preserved



38

Matrix Composition 

Transformations can be combined by matrix multiplication x' y' w'

1 0 tx cos 0 1 ty sin 0 0 0 1

p’ =


T(tx,ty)

sin cos 0

0 sx 0 0 0 0 sy 0 1 0 0 1

x y w

R( )

S(sx,sy)

p


39


Matrices are a convenient and efficient way to represent a sequence of transformations General purpose representation  Hardware matrix multiply 

p’ = (T * (R * (S*p) ) ) p’ = (T*R*S) * p Kuliah Grafika Komputer Teknik Informatika ITS


40


Be aware: order of transformations matters 

Matrix multiplication is not commutative

p’ = T * R * S * p “Global”


“Local”


41


What if we want to rotate and translate? 

Ex: Rotate line segment by 45 degrees about endpoint a and lengthen

a


a


42

Multiplication Order – Wrong Way 

Our line is defined by two endpoints  

Applying a rotation of 45 degrees, R(45), affects both points We could try to translate both endpoints to return endpoint a to its original position, but by how much?

a

a Wrong R(45)



a Correct T(-3) R(45) T(3) 43

Multiplication Order - Correct Isolate endpoint a from rotation effects



a

First translate line so a is at origin: T (-3) a



Then rotate line 45 degrees: R(45)



Then translate back so a is where it was: T(3)



a

a 44


Will this sequence of operations work? 1 0 0 1

3 cos(45) 0 sin(45)

0 0

1


0

sin(45) 0 1 0 3 a x cos(45) 0 0 1 0 a y 0

1 0 0 1


1

a' x a' y 1

45

Matrix Composition     

After correctly ordering the matrices Multiply matrices together What results is one matrix – store it (on stack)! Multiply this matrix by the vector of each vertex All vertices easily transformed with one matrix multiply



46

Reverse Rotations 

Q: How do you undo a rotation of R( )? A: Apply the inverse of the rotation… R-1( ) = R(- )



How to construct R-1( ) = R(- )





Inside the rotation matrix: cos( ) = cos(- ) 





The cosine elements of the inverse rotation matrix are unchanged

The sign of the sine elements will flip

Therefore… R-1( ) = R(- ) = RT( )



47



48

#include #include #include #include

<windows.h> <stdlib.h> <math.h>

GLsizei winWidth=600, winHeight=600; //set initial display window size GLfloat xwcMin=0.0,xwcMax=225.0; //set range for world coordinates GLfloat ywcMin=0.0,ywcMax=225.0; class wcPt2D { public: GLfloat x,y; }; typedef GLfloat Matrix3x3 [3][3]; Matrix3x3 matComposite; const GLdouble pi=3.14159; void init(void) { glClearColor(1.0,1.0,1.0,0.0); //set color of display window to white } /* Construct the 3 by 3 identity matrix */ void matrix3x3SetIdentity (Matrix3x3 matIdent3x3){ GLint row, col; for(row=0;row<3;row++) for(col=0;col<3;col++) matIdent3x3[row][col]=(row==col); } /* Premultiply matrix m1 times matrix m2, store result in m2. */ void matrix3x3PreMultiply (Matrix3x3 m1, Matrix3x3 m2) { GLint row, col; Matrix3x3 matTemp; for(row=0;row<3;row++) for(col=0;col<3;col++) matTemp[row][col]=m1[row][0]*m2[0][col]+m1[row][1]*m2[1][col]+m1[row][2]*m2[2][col]; for(row=0;row<3;row++) for(col=0;col<3;col++) m2[row][col]=matTemp[row][col];

void translate2D(GLfloat tx, GLfloat ty){ Matrix3x3 matTrans1; matrix3x3SetIdentity(matTrans1); //initialize translation matrix to identity matTrans1[0][2]=tx; matTrans1[1][2]=ty; matrix3x3PreMultiply(matTrans1,matComposite);//concatenate matTrans1 with composite matrix } void rotate2D(wcPt2D pivotPt, GLfloat theta){ Matrix3x3 matRot; matrix3x3SetIdentity(matRot); //initialize rotation matrix to identity matRot[0][0]=cos(theta); matRot[0][1]=-sin(theta); matRot[0][2]=pivotPt.x * (1-cos(theta))+pivotPt.y * sin(theta); matRot[1][0]=sin(theta); matRot[1][1]=cos(theta); matRot[1][2]=pivotPt.y * (1-cos(theta))-pivotPt.x * sin(theta); matrix3x3PreMultiply(matRot,matComposite);//concatenate matRot with the composite matrix } void scale2D(GLfloat sx, GLfloat sy, wcPt2D fixedPt){ Matrix3x3 matScale; matrix3x3SetIdentity(matScale); //initialize scaling matrix to identity matScale[0][0]=sx; matScale[0][2]=(1-sx)*fixedPt.x; matScale[1][1]=sy; matScale[1][2]=(1-sy)*fixedPt.y; matrix3x3PreMultiply(matScale,matComposite);//concatenate matScale with the composite matrix } /* using the composite matrix, calculate transformed coordinates. */ void transformVerts2D(GLint nVerts, wcPt2D * verts){ GLint k; GLfloat temp; for(k=0;k
void triangle(wcPt2D *verts) { GLint k; glBegin(GL_TRIANGLES); for(k=0;k<3;k++) glVertex2f(verts[k].x,verts[k].y); glEnd(); } void displayFcn(void){ GLint nVerts=3; //define initial position for triangle wcPt2D verts[3]={{50.0,25.0},{150.0,25.0},{100.0,100.0}}; wcPt2D centroidPt; //calculate position of triangle centroid GLint k, xSum=0, ySum=0; for(k=0;k
void winReshapeFcn(GLint newWidth, GLint newHeight){ glMatrixMode(GL_PROJECTION); glLoadIdentity(); gluOrtho2D(xwcMin,xwcMax,ywcMin,ywcMax); glClear(GL_COLOR_BUFFER_BIT); } void main(int argc, char ** argv){ glutInit(&argc,argv); glutInitDisplayMode(GLUT_SINGLE|GLUT_RGB); glutInitWindowPosition(50,50); glutInitWindowSize(winWidth,winHeight); glutCreateWindow("Geometric Transformation Sequence"); init(); glutDisplayFunc(displayFcn); glutReshapeFunc(winReshapeFcn); glutMainLoop(); }

Some Interesting Images



53

Some Interesting Images



54

Tugas Kelas C 





Tulis sebuah program animasi yang mengimplementasikan prosedur rotasi 2D. Inputnya sebuah polygon yang dirotasi terhadap sebuah pivot point menggunakan sudut yang kecil. Untuk meningkatkan kecepatan gunakan aproksimasi dari fungsi sin dan cos, dan untuk menghindari akumulasi error yang berlebihan reset nilai koordinat awal pada setiap putaran baru.



55

Tugas Kelas X 

Modifikasi contoh program sebelumnya supaya: Parameter transformasi dapat dispesifikasikan sebagai input dari user  Dapat diaplikasikan pada semua polygon dengan verteks-verteksnya dispesikasikan oleh input dari user  Urutan transformasi geometrik ditentukan oleh input dari user 



56

Tugas Kelas A 

Implementasi program untuk membuat gambar:



Untuk membuatnya, buat sebuah fungsi yang menggambar polygon gambar (b) (seperlima dari bintang). Lalu transformasikan dengan rotasi untuk menggambar bintang secara keseluruhan.





57

Tugas Kelas B 

Implementasi program untuk membuat gambar:



Untuk membuatnya, buat sebuah fungsi yang menggambar sebuah motif (gambar kiri). Lalu transformasikan dengan refleksi untuk mendapatkan sebuah spoke yang utuh, lalu rotasi untuk menggambar snowflake secara keseluruhan.





58

Transformasi Obyek (Kasus 2D)

Recommend Documents