Ti-2-kelompok-2

Bab I Pendahuluan Transformasi 2D adalah suatu model atau bentuk atau teknik memindahkan atau mengubah nilai posisi objek dalam sistem koordinasi 2 dimensi. Pemindahan objek ini dapat diartikan sebagai pemindahan titik. Untuk melakukan pemindahan digunakan vektor dan matrix, di mana vektor menunjukkan titik dan matrix adalah transformasinya. Hasil dari perkalian vektor dan matrix tersebut adalah hasil transformasinya. Transformasi dalam grafika komputer terdiri dari: a. Translasi, b. Scaling, c. Rotasi. Transformasi 2D dapat dilakukan dengan menggunakan perkalian antara matriks transformasi dan vector posisi dari setiap titik pada objek. Dapat ditulis dengan: − v hasil = A.v −posisi

Translasi adalah perpindahan obek dari titik P(x,y) ke titik P’(x’,y’) secara linier. Dapat ditulis dengan: x’ = x + dx y’ = y + dy Scaling adalah perpindahan objek dari titik P ke titik P’ sebanyak m kali titik P. Dapat ditulis dengan: P’(x’,y’) = m.P(x,y) Rotasi adalah penpindahan objek dari titik P’(x’,y’) yang berupa pemindahan berputar sebesar sudut θ. Dapat ditulis dengan: x’ = x.cos θ y’ = y.sin θ Komposisi transformasi adalah menggabungkan beberapa transformasi sehingga dapat menghasilkan bentuk transformasi yang lebih kompleks. Komposisi transformasi dapat dilakukan dengan mengalikan matriks-matriks dari transformasi yang digabungkan.

Bab II Pembahasan A.

Struktur data dan perubahannya Transformasi 2 dimensi adalah suatu model atau bentuk atau teknik memindahkan atau mengubah nilai posisi objek dalam sistem koordinat 2 dimensi. Pemindahan objek ini dapat diartikan sebagai pemindahan titik. Untuk dapat melakukan pemindahan maka digunakan 2 variabel dasar dalam matematika yaitu vektor dan matriks. Vektor menunjukkan titik atau objek yang dinyataka dalam vektor posisi v=(vx,vy,vz). Sedangkan matriks adalah sebuah operator yang akan memindahkan objek. Dari matriks inilah bermacam-macam transformasi dapat dibentuk. Dengan demikian dalam transformasi ini beberapa struktur harus dibuat terlebih dahulu sebelum diimplementasikan ke dalam program, yaitu: 1) Struktur data titik 2D, 2) Struktur data vektor 2D, 3) Struktur data matrix 2D. Struktur data dari titik 2D dapat didefinisikan dengan: typedef struct{ float x,y; }point2D_t;

Struktur data dari vector 2D dapat didefinisikan dengan: typedef struct{ float v[3]; }vector2D_t;

Struktur data dari matrix 2D didefinisikan dengan: typedef struct{ float m[3][3]; }matrix2D_t;

Struktur data 2D digunakan untuk menggambar objek ke layar komputer, karena nilainya sudah disesuaikan dengan sistem koordinat pada layar komputer. Sedangkan struktur data vektor digunakan untuk melakukan transformasi, hal yang harus dilakukan adalah:

• • • •

Mengubah struktur data titik ke struktur data vektor, Menghitung transformasi, Mengubah struktur data vektor ke struktur data titik, Menggambar objek.

Dalam mengubah struktur data titik ke vektor di gunakan fungsi point2vector. Berikut impelementasi dari fungsi point2vector adalah sebagai berikut: vector2D_t point2vector(point2D_t pnt) { vector2D_t vec; vec.v[0]=pnt.x; vec.v[1]=pnt.y; vec.v[2]=1.; return vec; }

Dalam mengubah dari vektor menjadi titik maka digunakan fungsi vector2point. Dimana fungsi ini digunakan untuk membuat vektor hasil transformasi menjadi titik kembali. Berikut adalah implementasinya dalam program: point2D_t vector2point(vector2D_t vec) { point2D_t pnt; pnt.x=vec.v[0]; pnt.y=vec.v[1]; return pnt; }

B.

Translasi Translasi adalah perpindahan objek dari titik P(x,y) ke titik P’(x’,y’) secara linier. Dalam translasi 2D diperlukan dua parameter, yaitu pemindahan ke arah smbu x dan pemindahan ke arah sumbu y. Translasi (dx,dy) didefinisikan dengan: x’ = x+dx y’ = y+dy atau dapat dituliskan dengan:

( ) =( )+( ) x' y'

x y

dx dy

P’(x’,y’) dy P(x,y)

dx Gambar Translasi titik

Proses translasi dengan menggunakan operasi matriks dapat dituliskan dengan: v1 '  v1  d x  v1 + d x  1.v1 + 0.v 2 + d x .1 v ' = v  + d  = v + d  = 0.v + 1.v + d .1 y 2 y   1  2   2  y  2  0.v + 0.v + 1.1  1  1  0  1   1 2  v1 '  1 0 d x  v1  v ' = 0 1 d  v  y  2   2  1  0 0 1  1 

Sehingga matriks transformasi dari translasi: 1 0 d x  T = 0 1 d y  0 0 1 

Sebelum melakukan implementasi matriks tersebut terlebih dahulu ditentukan matriks identitasnya. Matriks identitas adalah matriks yang nilai diagonal utamanya sama dengan satu dan yang lainnya nol. 1 0 0 I = 0 1 0 0 0 1

matrix2D_t createIdentity(void) { matrix2D_t u; int i,j; for (i=0;i<3;i++) { for (j=0;j<3;j++) u.m[i][j]=0.; u.m[i][i]=1.; } return u;

Implementasi fungsi untuk membuat matriks transformasi translasi adalah sebagai berikut: matrix2D_t translation(float dx, float dy) { matrix2D_t trans=createIdentity(); trans.m[0][2]=dx; trans.m[1][2]=dy; return trans; }

C.

Scaling Scaling m adalah perpindahan objek dari titik P ke titik P’, di mana jarak titik P’ adalah m kali titik P. y P’(x’,y’)

P(x,y)

my.y mx.x

Proses scaling dapat didefinisikan dengan: x’ = mx . x y’ = my . y

x

Proses scaling dengan menggunakan definisi vektor2D dapat dituliskan dengan:  x '  m x .x  m x .x + 0. y + 0.1 m x  y ' = m . y  = 0.x + m . y + 0.1 =  0 y      y    0.x + 0. y + 1.1   0 1  1    v 1 '  m x 0 0 v1  v ' =  0 m 0 v  y  2   2  1   0 0 1 1 

0 my 0

0 0 1

Matriks transformasi dari scaling: m x S =  0  0

0 my 0

0 0 1

Implementasi matriks transformasi untuk scaling adalah sebagai berikut: matrix2D_t scalling(float mx, float my) { matrix2D_t scale=createIdentity(); scale.m[0][0]=mx; scale.m[1][1]=my; return scale; }

D.

Rotasi Rotasi adalah perpindahan objek dari titik P(x,y) ke titik P’(x’,y’) yang berupa pemindahan berputar sebesar sudut θ dengan sumbu rotasi pada titik (0,0). Rotasi ini dapat digambarkan sebagai berikut: y

P’(x’,y’)

θ

P(x,y)

x

Operasi rotasi dapat diuraikan sebagai berikut: 1. Rotasi dari titik P yang berada di sumbu X, P(x,0) menjadi P’(x’,y’) dapat digambarkan dengan: y

x’=x.cos(θ) y’=x.sin(θ) P’(x’,y’)

θ x

Dengan operasi matrix dapat dituliskan:

P(x,0)

 x '   x. cos(θ ) + y.0 cos(θ ) 0  x   y ' =  x. sin (θ ) + y.0  =  sin (θ ) 0  y        

Sehingga diperoleh matriks transformasinya sebagai berikut: cos(θ ) 0 Rx =    sin (θ ) 0

2. Rotasi pada titik P yang berada di sumbu Y, P(x,0) menjadi P’(x’,y’) dapat digambarkan dengan:

y

x’=-y.sin(θ) y’=y.cos(θ)

P(x,0)

P’(x’,y’)

θ x

Dengan operasi matrix dapat dituliskan:  x '   x.0 − y. sin (θ )  0 − sin (θ )   x   y ' =  x.0 + y. cos(θ )  = 0 cos(θ )   y        

Diperoleh matrik transformasi sebagai berikut: 0 − sin (θ )  Ry =   0 cos(θ )  3. Rotasi dari titik P(x,y) menjadi P’(x’,y’) merupakan kombinasi dari

kedua macam transformasi di atas yaitu R = Rx + Ry. x’ = x.cos(θ) – y.sin(θ) y’ = x.sin(θ) + y.cos(θ) Operasi rotasi dapat dituliskan dengan:  x '   x. cos(θ ) − y. sin (θ ) + 1.0  cos(θ ) − sin (θ ) 0  x   y ' =  x. sin (θ ) + y. cos(θ ) + 1.0 =  sin (θ ) cos(θ ) 0  y         1   x.0 + y.0 + 1.1   0 0 1 1 

Sehingga diperoleh matrik untuk rotasi sebagai berikut: cos(θ ) − sin (θ ) 0 R =  sin (θ ) cos(θ ) 0  0 0 1

Impelementasi matrik di atas dalam program adalah sebagai berikut: matrix2D_t rotation(float theta) { matrix2D_t rotate=createIdentity(); float cs=cos(theta); float sn=sin(theta); rotate.m[0][0]=cs; rotate.m[0][1]=-sn; rotate.m[1][0]=sn; rotate.m[1][1]=cs; return rotate; }

E.

Perkalian Matriks Dalam perkalian matriks ini dikenal 2 jenis, yaitu: • Perkalian matrix dengan vector untuk menghasilkan vector dari titik hasil transformasi. • Perkalian matrix dengan matrix untuk menghasilkan matrix transformasi yang baru. 1. Perkalian matriks dengan vektor Perkalian matriks ini digunakan untuk operasional transformasi dari objek 2D guna menghasilkan vektor baru dari titik objek yang ditransformasikan. Berikut adalah implementasi perkalian matrix dengan vector: vector2D_t operator * (matrix2D_t a,vector2D_t b) { vector2D_t c; int i,k; for (i=0;i<3;i++) { c.v[i]=0; for(k=0;k<3;k++) c.v[i]+=a.m[i][k]*b.v[k]; } return c; }

2. Perkalian matrix dengan matrix Perkalian matrix ini digunakan untuk komposisi (menggabungkan) transformasi. Dalam hal ini 2 matrix dikalikan untuk menghasilkan sebuah matrix yang lebih kompleks. Berikut bentuk implementasi dalam program:

matrix2D_t operator *(matrix2D_t a,matrix2D_t b) { matrix2D_t c; int i,j,k; for (i=0;i<3;i++) { for (j=0;j<3;j++){ c.m[i][j]=0; for (k=0;k<3;k++) c.m[i][j]+=a.m[i][k]*b.m[k][j]; } } return c; }

Bab III Program Program membentuk transformasi gambar 2D: #include #include <math.h> typedef struct{ float x,y; }point2D_t; typedef struct{ float r,g,b; }color_t; typedef struct{ float v[3]; }vector2D_t; typedef struct{ float m[3][3]; }matrix2D_t; void setColor(color_t col) { glColor3f(col.r,col.g,col.b); } void drawDot(point2D_t p) { glBegin(GL_POINTS); glVertex2i(p.x,p.y); glEnd(); } void drawLine(point2D_t a,point2D_t b) { glBegin(GL_LINES); glVertex2i(a.x,a.y); glVertex2i(b.x,b.y); glEnd(); }

void drawPolyline(point2D_t pnt[],int n) { int i; glBegin(GL_LINE_STRIP); for (i=0;i
matrix2D_t createIdentity(void) { matrix2D_t u; int i,j; for (i=0;i<3;i++) { for (j=0;j<3;j++) u.m[i][j]=0.; u.m[i][i]=1.; } return u; } matrix2D_t translation(float dx, float dy) { matrix2D_t trans=createIdentity(); trans.m[0][2]=dx; trans.m[1][2]=dy; return trans; } matrix2D_t scaling(float mx, float my) { matrix2D_t scale=createIdentity(); scale.m[0][0]=mx; scale.m[1][1]=my; return scale; } matrix2D_t rotation(float theta) { matrix2D_t rotate=createIdentity(); float cs=cos(theta); float sn=sin(theta); rotate.m[0][0]=cs; rotate.m[0][1]=-sn; rotate.m[1][0]=sn; rotate.m[1][1]=cs; return rotate; }

vector2D_t operator * (matrix2D_t a,vector2D_t b) { vector2D_t c; int i,k; for (i=0;i<3;i++) { c.v[i]=0; for(k=0;k<3;k++) c.v[i]+=a.m[i][k]*b.v[k]; } return c; } matrix2D_t operator * (matrix2D_t a,matrix2D_t b) { matrix2D_t c; int i,j,k; for (i=0;i<3;i++) { for (j=0;j<3;j++){ c.m[i][j]=0; for (k=0;k<3;k++) c.m[i][j]+=a.m[i][k]*b.m[k][j]; } } return c; } void pindah(void) { glClear(GL_COLOR_BUFFER_BIT); color_t merah={1,0,0}; color_t kuning={1,1,0}; point2D_t a={0,0},b={50,0},c={25,25}; vector2D_t a1=point2vector(a); vector2D_t b1=point2vector(b),c1=point2vector(c); a1 = translation(30,40)*a1; b1 = translation(30,40)*b1; c1 = translation(30,40)*c1; a=vector2point(a1); b=vector2point(b1); c=vector2point(c1); point2D_t segitiga[3]; segitiga[0]=a; segitiga[1]=b; segitiga[2]=c;

setColor(merah); drawPolygon(segitiga,3); glutSwapBuffers(); } void skala(void) { glClear(GL_COLOR_BUFFER_BIT); color_t merah={1,0,0}; color_t kuning={1,1,0}; point2D_t a={0,0},b={50,0},c={25,25}; vector2D_t a1=point2vector(a); vector2D_t b1=point2vector(b),c1=point2vector(c); b1 = scaling(5,1)*b1; c1 = scaling(5,1)*c1; a=vector2point(a1); b=vector2point(b1); c=vector2point(c1); point2D_t segitiga[3]; segitiga[0]=a; segitiga[1]=b; segitiga[2]=c; setColor(merah); drawPolygon(segitiga,3); glutSwapBuffers(); } void rotasi(void) { glClear(GL_COLOR_BUFFER_BIT); color_t merah={1,0,0}; color_t kuning={1,1,0}; point2D_t a={0,0},b={50,0},c={25,25}; vector2D_t a1=point2vector(a); b1=point2vector(b),c1=point2vector(c); b1 = rotation(45)*b1; c1 = rotation(45)*c1; a=vector2point(a1); b=vector2point(b1); c=vector2point(c1); point2D_t segitiga[3]; segitiga[0]=a; segitiga[1]=b; segitiga[2]=c; setColor(merah); drawPolygon(segitiga,3);

glutSwapBuffers(); } void pindahskala(void) { glClear(GL_COLOR_BUFFER_BIT); color_t merah={1,0,0}; color_t kuning={1,1,0}; point2D_t a={0,0},b={50,0},c={25,25}; vector2D_t a1=point2vector(a); vector2D_t b1=point2vector(b),c1=point2vector(c); matrix2D_t hasil; hasil= translation(30,50)*scaling(5,1); b1 = hasil*b1; c1 = hasil*c1; a=vector2point(a1); b=vector2point(b1); c=vector2point(c1); point2D_t segitiga[3]; segitiga[0]=a; segitiga[1]=b; segitiga[2]=c; setColor(merah); drawPolygon(segitiga,3); glutSwapBuffers(); } int main(int argc, char **argv) { glutInit(&argc,argv); glutInitDisplayMode(GLUT_DOUBLE|GLUT_RGB); glutInitWindowPosition(100,100); glutInitWindowSize(640,480); glutCreateWindow("TES"); glClearColor(1.,1.,1.,0.); gluOrtho2D(-320.,320.,-240.,240.); glutIdleFunc(/*..fungsi penggambaran..*/); glutDisplayFunc(/*..fungsi penggambaran..*/); glutMainLoop(); return 0; }

Output jika menggunakan fungsi pindah atau translasi dengan glutIdleFunc(pindah) dan glutDisplayFunc(pindah) adalah sebagai berikut: Sebelum di translasi:

Setelah ditranslasi dengan matrix translation(30,40):

Output jika menggunakan fungsi skala dengan glutIdleFunc(skala) dan glutDisplayFunc(skala) adalah sebagai berikut: Sebelum di skala:

Setelah di skala pada x = 5 dengan matrix scaling(5,1):

Output jika menggunakan fungsi rotasi dengan glutIdleFunc(rotasi) dan glutDisplayFunc(rotasi) adalah sebagai berikut: Sebelum di rotasi:

Setelah dirotasi sejauh 45° dengan matrix rotation(45°) dengan sumbu putar (0,0):

Output jika menggunakan fungsi pindahskala dengan glutIdleFunc(pindahskala) dan glutDisplayFunc(pindahskala) adalah sebagai berikut: Sebelum di transformasi:

Setelah di transformasi dengan translation(30,50) dan di skala dengan scaling(5,1):

TRANSFORMASI 2D

Kelompok II:

•Jackson •Johan Liemena •Pieter Wonggianto •Taufik Rahmanto

(52007033) (52007036) (520070xx) (520070xx)