Transformasi Obyek (Kasus 2D)

Transkripsi

1 Transformasi Obek (Kasus 2D) Grafika Komputer Semester Ganjil 28 Teknik Informatika ITS Ann Yuniarti - 28

2 Kompetensi. Mampu membangun tool untuk mentransformasi obek 2. Mampu memahami konsep transformasi affine ang merupakan kombinasi dari rotasi, penskalaan, dan translasi 3. Mampu mengimplementasikan konsep transformasi dalam sebuah program OpenGL Teknik Informatika ITS Ann Yuniarti

3 Referensi Computer Graphics using OpenGL, 3rd Edition, b: F.S. Hill, Jr. and Stephen M. Kelle Chapter 5 Computer Graphics with OpenGL, 3rd Edition, b: Donald Hearn and M.Pauline Baker Chapter 5 Teknik Informatika ITS Ann Yuniarti

4 Pokok Bahasan. Transformasi 2D Dasar. Translasi 2. Rotasi 3. Penskalaan 2. Kombinasi Transformasi 3. Transformasi Affine Teknik Informatika ITS Ann Yuniarti

5 Kegunaan Transformasi Me-reposisi ataupun me-resize obek Pada proses viewing, untuk mengubah worldcoordinate menjadi displa untuk suatu output device Untuk aplikasi-aplikasi tertentu: CAD mengatur orientasi dan ukuran suatu komponen pada suatu rancangan Animasi menggerakkan letak kamera atau obek pada sebuah laar sesuai path tertentu Teknik Informatika ITS Ann Yuniarti

6 Jenis-jenis Transformasi Transformasi Geometri Diterapkan pada deskripsi geometri suatu obek Gunana untuk mengubah posisi, orientasi, atau ukuran suatu obek Transformasi modeling Digunakan untuk membentuk sebuah laar atau membuat deskripsi hierarki suatu obek kompleks ang terdiri dari beberapa bagian Contoh: pesawat terdiri dari saap, ekor, mesin, dan lain-lain, dimana masing-masing dapat dispesifikasikan dalam komponen-komponen level ke-2 dan seterusna. Transformasi modeling mendeskripsikan bagaimana setiap komponen disusun untuk rancangan keseluruhan Teknik Informatika ITS Ann Yuniarti

7 2D Modeling Transformations Modeling Coordinates Scale Translate Scale Rotate Translate World Coordinates Teknik Informatika ITS Ann Yuniarti

8 2D Modeling Transformations Modeling Coordinates Let s look at this in detail World Coordinates Teknik Informatika ITS Ann Yuniarti

9 2D Modeling Transformations Modeling Coordinates Initial location at (, ) with - and -aes aligned Teknik Informatika ITS Ann Yuniarti

10 2D Modeling Transformations Modeling Coordinates Scale.3,.3 Rotate -9 Translate 5, 3 Teknik Informatika ITS Ann Yuniarti - 28

11 2D Modeling Transformations Modeling Coordinates Scale.3,.3 Rotate -9 Translate 5, 3 Teknik Informatika ITS Ann Yuniarti - 28

12 2D Modeling Transformations Modeling Coordinates Scale.3,.3 Rotate -9 Translate 5, 3 World Coordinates Teknik Informatika ITS Ann Yuniarti

13 Transformasi Geometri 2D Translasi 2D = + t, = + t (t, t ) disebut vektor translasi atau pergeseran Dalam bentuk matriks: ' P P' ' Persamaan translasi 2D: P = P + T Line, polgon translasi titik endpoints, render Untuk menghapus obek ang asli displa it in background color before translating it Circle, ellipse, spline curve translasi titik-titik ang mendefinisikan (misalna koordinat titik pusat), render obek hasil translasi di posisi ang baru T t t Teknik Informatika ITS Ann Yuniarti

14 Transformasi Geometri 2D Scaling 2D = s, = s Dalam bentuk matriks: ' ' s s Uniform scaling berarti skalar pengali sama untuk semua komponen: 2 Teknik Informatika ITS Ann Yuniarti

15 Transformasi Geometri 2D Non-uniform scaling: skalar ang berbeda untuk tiap komponen: X 2, Y.5 Teknik Informatika ITS Ann Yuniarti

16 Transformasi Geometri 2D ' ' r (, ) r (, ) cos sin sin cos Rotasi 2D = r cos (Φ + ) = r sin (Φ + ) Trig Identit = r cos(f) cos( ) r sin(f) sin( ) = r sin(f) cos( ) + r cos(f) sin( ) Original point = r cos (f) = r sin (f) Hasil substitusi = cos( ) - sin( ) = sin( ) + cos( ) Teknik Informatika ITS Ann Yuniarti

17 Transformasi Geometri 2D Shear 2D Shear pada arah relatif terhadap sumbu : = + sh, = Parameter sh dapat berupa bilangan real Dalam bentuk matriks: ' ' Shear pada arah relatif terhadap sumbu : =, = + sh Dalam bentuk matriks: ' ' sh sh Teknik Informatika ITS Ann Yuniarti

18 Transformasi Geometri 2D Reflection 2D Pencerminan terhadap garis = (sumbu ): =, = - Dalam bentuk matriks: ' ' Pencerminan terhadap garis = (sumbu ): = -, = Dalam bentuk matriks: ' Pencerminan terhadap titik pusat (, ): = -, = - Dalam bentuk matriks: ' ' ' Teknik Informatika ITS Ann Yuniarti

19 Basic 2D Transformations Translation: = + t = + t Scale: = * s = * s Rotation: = *cos(θ) - *sin(θ) = *sin(θ) + *cos(θ) Transformations can be combined (with simple algebra) Teknik Informatika ITS Ann Yuniarti

20 Basic 2D Transformations Translation: = + t = + t Scale: = * s = * s Rotation: = *cos(θ) - *sin(θ) = *sin(θ) + *cos(θ) Teknik Informatika ITS Ann Yuniarti

21 Basic 2D Transformations Translation: = + t = + t Scale: = * s = * s Rotation: = *cos(θ) - *sin(θ) = *sin(θ) + *cos(θ) (, ) = *s = *s (,) Teknik Informatika ITS Ann Yuniarti

22 Basic 2D Transformations Translation: = + t = + t Scale: = * s = * s Rotation: = *cos(θ) - *sin(θ) = *sin(θ) + *cos(θ) (, ) = (*s )*cos θ) - (*s )*sin(θ) = (*s )*sin(θ) + (*s )*cos(θ) Teknik Informatika ITS Ann Yuniarti

23 Basic 2D Transformations Translation: = + t = + t Scale: = * s = * s Rotation: = *cos(θ) - *sin(θ) = *sin(θ) + *cos(θ) (, ) = ((*s )*cos(θ) - (*s )*sin(θ)) + t = ((*s )*sin(θ) + (*s )*cos(θ)) + t Teknik Informatika ITS Ann Yuniarti

24 Basic 2D Transformations Translation: = + t = + t Scale: = * s = * s Rotation: = *cos(θ) - *sin(θ) = *sin(θ) + *cos(θ) = ((*s )*cos(θ) - (*s )*sin(θ)) + t = ((*s )*sin(θ) + (*s )*cos(θ)) + t Teknik Informatika ITS Ann Yuniarti

25 Matri Representation Represent 2D transformation b a matri a c b d Multipl matri b column vector appl transformation to point ' ' a c b d ' ' a c b d Teknik Informatika ITS Ann Yuniarti

26 Matri Representation Transformations combined b multiplication ' ' a c b d e g f h i k j l Matrices are a convenient and efficient wa to represent a sequence of transformations! Teknik Informatika ITS Ann Yuniarti

27 Teknik Informatika ITS 27 Ann Yuniarti Matrices What tpes of transformations can be represented with a 22 matri? 2D Identit? ' ' ' ' 2D Scale around (,)? s s * ' * ' s s ' '

28 22 Matrices What tpes of transformations can be represented with a 22 matri? 2D Rotate around (,)? ' ' cos sin * * sin cos * * ' ' cos sin sin cos 2D Shear? ' ' sh sh * * Teknik Informatika ITS Ann Yuniarti ' ' sh sh

29 Teknik Informatika ITS 29 Ann Yuniarti Matrices What tpes of transformations can be represented with a 22 matri? 2D Mirror about Y ais? ' ' ' ' 2D Mirror over (,)? ' ' ' '

30 22 Matrices What tpes of transformations can be represented with a 22 matri? 2D Translation? ' t ' t NO! Onl linear 2D transformations can be represented with a 22 matri Teknik Informatika ITS Ann Yuniarti

31 Linear Transformations Linear transformations are combinations of Scale, Rotation, Shear, and Mirror Properties of linear transformations: Satisfies: ' ' T( sp s2p2) st ( p) s2t ( p2) Origin maps to origin Lines map to lines Parallel lines remain parallel Ratios are preserved a c b d Teknik Informatika ITS Ann Yuniarti

32 Homogeneous Coordinates Q: How can we represent translation as a 33 matri? ' ' t t Teknik Informatika ITS Ann Yuniarti

33 Homogeneous Coordinates Homogeneous coordinates represent coordinates in 2 dimensions with a 3- vector homogeneous coords Homogeneous coordinates seem unintuitive, but the make graphics operations much easier Teknik Informatika ITS Ann Yuniarti

34 Homogeneous Coordinates Q: How can we represent translation as a 33 matri? ' ' A: Using the rightmost column: t t Translation t t Teknik Informatika ITS Ann Yuniarti

35 Translation Eample of translation Homogeneous Coordinates ' ' t t t t t = 2 t = Teknik Informatika ITS Ann Yuniarti

36 Homogeneous Coordinates Add a 3rd coordinate to ever 2D point (,, w) represents a point at location (/w, /w) (,, ) represents a point at infinit (,, ) is not allowed Convenient coordinate sstem to represent man useful transformations 2 2 (2,,) or (4,2,2) or (6,3,3) Teknik Informatika ITS Ann Yuniarti

37 Teknik Informatika ITS 37 Ann Yuniarti - 28 Basic 2D Transformations Basic 2D transformations as 33 matrices cos sin sin cos ' ' ' ' t t ' ' sh sh Translate Rotate Shear ' ' s s Scale

38 Affine Transformations Affine transformations are combinations of Linear transformations, and ' a b c Translations ' d e f w w Properties of affine transformations: Origin does not necessaril map to origin Lines map to lines Parallel lines remain parallel Ratios are preserved Teknik Informatika ITS Ann Yuniarti

39 Matri Composition Transformations can be combined b matri multiplication ' ' w' t t cos sin sin cos s s w p = T(t,t ) R( ) S(s,s ) p Teknik Informatika ITS Ann Yuniarti

40 Matri Composition Matrices are a convenient and efficient wa to represent a sequence of transformations General purpose representation Hardware matri multipl p = (T * (R * (S*p) ) ) p = (T*R*S) * p Teknik Informatika ITS Ann Yuniarti

41 Matri Composition Be aware: order of transformations matters Matri multiplication is not commutative p = T * R * S * p Global Local Teknik Informatika ITS Ann Yuniarti

42 Matri Composition What if we want to rotate and translate? E: Rotate line segment b 45 degrees about endpoint a and lengthen a a Teknik Informatika ITS Ann Yuniarti

43 Multiplication Order Wrong Wa Our line is defined b two endpoints Appling a rotation of 45 degrees, R(45), affects both points We could tr to translate both endpoints to return endpoint a to its original position, but b how much? a a Wrong R(45) a Correct T(-3) R(45) T(3) Teknik Informatika ITS Ann Yuniarti

44 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) a Then translate back so a is where it was: T(3) a Teknik Informatika ITS Ann Yuniarti

45 Matri Composition Will this sequence of operations work? 3 cos(45) sin(45) sin(45) cos(45) 3 a a a' a' Teknik Informatika ITS Ann Yuniarti

46 Matri Composition After correctl ordering the matrices Multipl matrices together What results is one matri store it (on stack)! Multipl this matri b the vector of each verte All vertices easil transformed with one matri multipl Teknik Informatika ITS Ann Yuniarti

47 Reverse Rotations Q: How do ou undo a rotation of R( )? A: Appl the inverse of the rotation R - ( ) = R(- ) How to construct R-( ) = R(- ) Inside the rotation matri: cos( ) = cos(- ) The cosine elements of the inverse rotation matri are unchanged The sign of the sine elements will flip Therefore R - ( ) = R(- ) = R T ( ) Teknik Informatika ITS Ann Yuniarti

48 Teknik Informatika ITS Ann Yuniarti

49 #include <windows.h> #include <GL/glut.h> #include <stdlib.h> #include <math.h> GLsizei winwidth=6, winheight=6; //set initial displa window size GLfloat wcmin=.,wcma=225.; //set range for world coordinates GLfloat wcmin=.,wcma=225.; class wcpt2d { public: GLfloat,; }; tpedef GLfloat Matri33 [3][3]; Matri33 matcomposite; const GLdouble pi=3.459; void init(void) { glclearcolor(.,.,.,.); //set color of displa window to white } /* Construct the 3 b 3 identit matri */ void matri33setidentit (Matri33 matident33){ GLint row, col; for(row=;row<3;row++) for(col=;col<3;col++) matident33[row][col]=(row==col); } /* Premultipl matri m times matri m2, store result in m2. */ void matri33premultipl (Matri33 m, Matri33 m2) { GLint row, col; Matri33 mattemp; for(row=;row<3;row++) for(col=;col<3;col++) mattemp[row][col]=m[row][]*m2[][col]+m[row][]*m2[][col]+m[row][2]*m2[2][col]; for(row=;row<3;row++) for(col=;col<3;col++) m2[row][col]=mattemp[row][col];

50 void translate2d(glfloat t, GLfloat t){ Matri33 mattrans; matri33setidentit(mattrans); //initialize translation matri to identit mattrans[][2]=t; mattrans[][2]=t; matri33premultipl(mattrans,matcomposite);//concatenate mattrans with composite matri } void rotate2d(wcpt2d pivotpt, GLfloat theta){ Matri33 matrot; matri33setidentit(matrot); //initialize rotation matri to identit matrot[][]=cos(theta); matrot[][]=-sin(theta); matrot[][2]=pivotpt. * (-cos(theta))+pivotpt. * sin(theta); matrot[][]=sin(theta); matrot[][]=cos(theta); matrot[][2]=pivotpt. * (-cos(theta))-pivotpt. * sin(theta); matri33premultipl(matrot,matcomposite);//concatenate matrot with the composite matri } void scale2d(glfloat s, GLfloat s, wcpt2d fiedpt){ Matri33 matscale; matri33setidentit(matscale); //initialize scaling matri to identit matscale[][]=s; matscale[][2]=(-s)*fiedpt.; matscale[][]=s; matscale[][2]=(-s)*fiedpt.; matri33premultipl(matscale,matcomposite);//concatenate matscale with the composite matri } /* using the composite matri, calculate transformed coordinates. */ void transformverts2d(glint nverts, wcpt2d * verts){ GLint k; GLfloat temp; for(k=;k<nverts;k++){ temp=matcomposite[][]*verts[k].+matcomposite[][]*verts[k].+matcomposite[][2]; verts[k].=matcomposite[][]*verts[k].+matcomposite[][]*verts[k].+matcomposite[][ 2]; verts[k].=temp; } }

51 void triangle(wcpt2d *verts) { GLint k; glbegin(gl_triangles); for(k=;k<3;k++) glverte2f(verts[k].,verts[k].); glend(); } void displafcn(void){ GLint nverts=3; //define initial position for triangle wcpt2d verts[3]={{5.,25.},{5.,25.},{.,.}}; wcpt2d centroidpt; //calculate position of triangle centroid GLint k, Sum=, Sum=; for(k=;k<nverts;k++) { Sum+=verts[k].; Sum+=verts[k].; } centroidpt.=glfloat(sum)/glfloat(nverts); centroidpt.=glfloat(sum)/glfloat(nverts); wcpt2d pivpt,fiedpt; // set geometric transformation parameters pivpt=centroidpt; fiedpt=centroidpt; GLfloat t=., t=.; GLfloat s=.5, s=.5; GLdouble theta=pi/2.; glclear(gl_color_buffer_bit); //clear displa window glcolor3f(.,.,.); //set initial fill color to blue triangle(verts); //displa blue triangle matri33setidentit(matcomposite);//initialize composite matri to identit /* construct composite matri for transformation sequence */ scale2d(s,s,fiedpt); // first transformation: Scale. rotate2d(pivpt,theta); // second transformation: Rotate. translate2d(t,t); // final transformation: Translate. transformverts2d(nverts,verts);//appl composite matri to triangle vertices glcolor3f(.,.,.); //set color for transformed triangle triangle(verts); //displa red transformed triangle glflush(); }

52 void winreshapefcn(glint newwidth, GLint newheight){ glmatrimode(gl_projection); glloadidentit(); gluortho2d(wcmin,wcma,wcmin,wcma); glclear(gl_color_buffer_bit); } void main(int argc, char ** argv){ glutinit(&argc,argv); glutinitdisplamode(glut_single GLUT_RGB); glutinitwindowposition(5,5); glutinitwindowsize(winwidth,winheight); glutcreatewindow("geometric Transformation Sequence"); init(); glutdisplafunc(displafcn); glutreshapefunc(winreshapefcn); glutmainloop(); }

53 Some Interesting Images Teknik Informatika ITS Ann Yuniarti

54 Some Interesting Images Teknik Informatika ITS Ann Yuniarti

55 Tugas Kelas C Tulis sebuah program animasi ang mengimplementasikan prosedur rotasi 2D. Inputna sebuah polgon ang dirotasi terhadap sebuah pivot point menggunakan sudut ang kecil. Untuk meningkatkan kecepatan gunakan aproksimasi dari fungsi sin dan cos, dan untuk menghindari akumulasi error ang berlebihan reset nilai koordinat awal pada setiap putaran baru. Teknik Informatika ITS Ann Yuniarti

56 Tugas Kelas X Modifikasi contoh program sebelumna supaa: Parameter transformasi dapat dispesifikasikan sebagai input dari user Dapat diaplikasikan pada semua polgon dengan verteks-verteksna dispesikasikan oleh input dari user Urutan transformasi geometrik ditentukan oleh input dari user Teknik Informatika ITS Ann Yuniarti

57 Tugas Kelas A Implementasi program untuk membuat gambar: Untuk membuatna, buat sebuah fungsi ang menggambar polgon gambar (b) (seperlima dari bintang). Lalu transformasikan dengan rotasi untuk menggambar bintang secara keseluruhan. Teknik Informatika ITS Ann Yuniarti

58 Tugas Kelas B Implementasi program untuk membuat gambar: Untuk membuatna, buat sebuah fungsi ang menggambar sebuah motif (gambar kiri). Lalu transformasikan dengan refleksi untuk mendapatkan sebuah spoke ang utuh, lalu rotasi untuk menggambar snowflake secara keseluruhan. Teknik Informatika ITS Ann Yuniarti