PRAKTIKUM 3

3.1. Tujuan Praktikum1. Membuat struktur data titik dan vector,2. Membuat prosedur konvers diantara titik dan vektor dan sebaliknya diantara vektor

dan titik,3. Membuat macam-macam prosedur transformasi : translasi, rotasi, scalling dua

dimensi,4. Mengaplikasikan matrik transformasi pada objek dua dimensi,5. Melakukan komposisi transformasi.

3.2. Dasar Teori

3.2.1 Transformasi Object

Transformasi adalah adalah memindahkan obek tanpa merusak bentuk, dan tanpa

membuat objek baru. Jenis-jenis transformasi yang sering digunakan pada grafika komputer

dibagi menjadi 3 yaitu tarnslasi, rotasi, dan skalasi.  Tujuan transformasi adalah :

  Merubah atau menyesuaikan komposisi pemandangan.

Memudahkan membuat objek yang simetris.

Melihat objek dari sudut pandang yang berbeda.

Memindahkan satu atau beberapa objek dari satu tempat ke tempat lain, ini biasa

dipakai untuk animasi. Translasi (Translation)Translasi merupakan bentuk transformasi yang memindahkan posisi suatu objek, baik

pada sumbu x, sumbu y, maupun sumbu z.  dalam translasi dua dimensi diperlukaan dua parameter, yaitu pemindahan kearah sumbux dan ke arah sumbu y. Fungsi yang digunakan adalah : 1. glTranslatef (Tx,Ty,Tz)

2. glTranslated (Tx,Ty,Tz)parameter Tx digunakan untuk menentukan arah dan seberapa jauh suatu benda akan

dipindahkan berdasarkan sumbu x. Ty digunakan untuk menentukan arah dan seberapajauh suatu benda akan dipindahkan berdasarkan sumbu y. Sedangkan parameter Tz digunakan untuk menentukan arah dan seberapajauh suatu benda akan dipindahkan berdasarkan sumbu z(berlaku pada model 3D)

Gambar 1. Ilustrasi translasi

Berikut ini adalah perpindaha obyek dari tiik P ke titik P’ secara linier.

Matrik Transformasi dari Translasi 2D:

Implementasi Matrik Tranformasi Untuk Translasi:

Matri k Identitas MatrikIdentitas:

Rotasi (Rotation)

Rotasi merupakan bentuk transformasi yang digunakan untuk memutar posisi suatu benda, fungsi yang digunakan untuk melakukan rotasi adalah:

1. glRotatef(Ѳ, Rx, Ry, Rz)2. glRotated(Ѳ, Rx, Ry, Rz)

Parameter yang dibutuhkan pada fungsi tersebut ada 4 macam, yaitu parameter Ѳ untuk besar sudut putaran. Sudut rotasi adalah besaran yang menentukan seberapa jauh sebuah titik akan diputar. 

Parameter Rx untuk putaran berdasarkan sumbu x, parameter Ry untuk putaran berdasarkan sumbu y, parameter Rz untuk putaran berdasarkan sumbu z. Jika parameter Ѳ bernilai positif, maka objek akan diputar berlawanan arah jarum jam, sedangkan jika parameter Ѳ bernilai negatif, maka akan diputar searah jarum jam.

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 :

x’ = x .cos θ

y’ = x.sin θ

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

x’ = -y .cos θ

y’ = y.sin θ

3. Rotasi dari titik P(x, y) menjadi P’(x’, y’) merupakan kombinasi dari kedua macam transformasi di atas

R = Rx + Ry.

X’ = xp +(x - xp) cos θ – (y - yp) sin θ

Y’ = yp + (x – xp) sin θ + (y – yp) cos θ

Skalasi

Skalasi merupakan bentuk tarnsformasi yang dapat mengubah ukkuran (besar-kecil) suatu objek. Penskalaan m adalah perpindahan objek dari titik P ke titik P’, dimana jarak titik P’ adalah m kali titik P atau suatu operasi yang membuat objek berubah ukurannya baik menjadi kecil maupun besar. Fungsi yang digunakan untuk melakukan skalasi ialah :

1. glScalef(Sx, Sy, Sz)2. glScaled(Sx, Sy, Sz)

Berbeda dengan transformasi geser yang tidak mengubah bentuk objek, transformasi skala akan mengubah bentuk objek sebesat skala Sx dab Sy’ , sehingga : 

(Qx,Qy)= (Px*Sy*Sy)

Transformasi skala dilakukan terhadap titik pusat (0,) karena setiap titil p akan digeser sebesar Sx dari titik pusat dalam sumbu x dan sejauh Sy dalam sumbu Y. Apabila matrik M berisi nilai negative maka akan diperoleh pencerminan terdahap sumbu v dan Y.jika kedua factor skala berisi nilai yang sama, Sx=Sy=s maka akan diperoleh uniform scaling, dimana objek akan diperbesar pada kedua sumbu besar, jika 0<s<1 maka akandiperoleh objek yang diperkecil (demagnification). Jika factor skala tidak sama , maka akan diperoleh penskalaan defernsial. Jika salah satu dari factor skala sama dengan 1 maka akan diperoleh transfornasi strain.

1.1 Percobaan1. Program 1 :

Program ini akan menggambar huruf f, kemudian menggambar ulang huruf f yang telah ditranslasikan sebanyak 4 kali.

Kode program :#include <stdio.h>#include <math.h>#include <glut.h>

//--------------------------------------------// Struktur Data untuk Keperluan Grafis//-------------------------------------------typedef struct {

float m[3][3];}matrix2D_t;

typedef struct {float v[3];

}vector2D_t;

typedef struct {float x;float y;

}point2D_t;typedef struct {

float r;float g;float b;

}color_t;

//operasi matrik dan vektor 2D dan vektor 2D

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 multiply (matrix2D_t a, matrix2D_t b ){

matrix2D_t c; //c=a*bint 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;

}

vector2D_t multiply (matrix2D_t a, vector2D_t b){

vector2D_t c; //c=a*bint i,j;for (i=0;i<3;i++) {

c.v [i]=0;for (j=0;j<3;j++) c.v[i]+=a.m[i][j]*b.v[j];

}return c;

}matrix2D_t translationMTX(float dx, float dy){

matrix2D_t trans=createIdentity();trans.m[0][2]=dx;trans.m[1][2]=dy;return trans;

}

matrix2D_t rotationMTX(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;

}matrix2D_t scallingMTX(float factorx, float factory){

matrix2D_t scale=createIdentity();scale.m[0][0]=factorx;scale.m[1][1]=factory;return scale;

}//-----------------//Pemindahan Struktur Data//-----------------point2D_t Vector2Point(vector2D_t vec){

point2D_t pnt;

pnt.x=vec.v[0];pnt.y=vec.v[1];return pnt;

}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;

}//Fungsi-Fungsi openGL untuk menggambar void setColor(float red, float green, float blue){

glColor3f(red, green, blue);}void setColor(color_t col){

glColor3f(col.r, col.g, col.b);}void drawLine(float x1, float y1, float x2, float y2){

glBegin(GL_LINES);glVertex2f(x1, y1);glVertex2f(x2, y2);

glEnd();}void drawLine(point2D_t p1, point2D_t p2){

drawLine(p1.x,p1.y, p2.x,p2.y);}//n:jumlah vertexvoid drawPolygon(point2D_t pnt[], int n){

int i;glBegin(GL_LINE_LOOP);for (i=0; i<n;i++){

glVertex2f(pnt[i].x, pnt[i].y);}glEnd();

}void userdraw(void);void display(void){

glClear(GL_COLOR_BUFFER_BIT);userdraw();glutSwapBuffers();

}

void drawcharX(float x, float y){

drawLine(x,y,x+10,y+12); drawLine(x,y+12,x+10,y);}void drawcharY(float x, float y){

drawLine(x+5,y,x+5,y+7); drawLine(x,y+12,x+5,y+7);drawLine(x+10,y+12,x+5,y+7);

}void drawAxes(void){

drawLine(310,0,310,0); drawLine(310,0,300,5);drawLine(310,0,300,-5); drawcharX(300,-20);drawLine(0,-230,0,230); drawLine(0,230,5,220);drawLine(0,230,-5,220); drawcharY(-20,220);

}void userdraw(void){

static int tick=0;point2D_t ef[10] = {//defisisi obyek f

{10,100},{10,10},{30,10},{30,40},{60,40},{60,60},{30,60},{30,80},{70,80},{70,100}

};vector2D_t vec[10]; // vector obyek fmatrix2D_t trans; //operasi matrik translasiint i, loop;setColor(1,1,1); drawAxes();setColor(0,1,1); drawPolygon(ef,10); //gambar f asalglutSetWindowTitle("Translasi F");trans = translationMTX(62,22); //parameter translasifor (loop=0; loop<4; loop++) {

for (i=0; i<10; i++) {//proses transformasivec[i]=Point2Vector(ef[i]);vec[i]=multiply(trans, vec[i]);ef[i]=Vector2Point(vec[i]);

}drawPolygon(ef,10); //gambar f setelah translasi

}tick++;

}int main(int argc, char **argv){

glutInit(&argc,argv);glutInitDisplayMode(GLUT_DOUBLE | GLUT_RGB);

glutInitWindowPosition(100,100);glutInitWindowSize(640,480);glutCreateWindow("Translasi");glClearColor(0.0, 0.0, 0.0, 0.0);gluOrtho2D(-320., 320., -240.0, 240.0);glutIdleFunc(display); //idle event cal backglutDisplayFunc(display);glutMainLoop();return 0;

}

- Outputnya :

2. Program 2 : Program ini akan menggambar huruf f,kemudian menggambar ulang huruf f yang telah dirotasikan sebanyak 4 kali.

- Kode program :#include <stdio.h>#include <math.h>#include <glut.h>

//--------------------------------------------// Struktur Data untuk Keperluan Grafis//-------------------------------------------typedef struct {

float m[3][3];}matrix2D_t;

typedef struct {float v[3];

}vector2D_t;

typedef struct {float x;float y;

}point2D_t;

typedef struct {float r;float g;float b;

}color_t;

//operasi matrik dan vektor 2D dan vektor 2D

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 multiply (matrix2D_t a, matrix2D_t b ){

matrix2D_t c; //c=a*bint 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;

}

vector2D_t multiply (matrix2D_t a, vector2D_t b){

vector2D_t c; //c=a*bint i,j;for (i=0;i<3;i++) {

c.v [i]=0;for (j=0;j<3;j++) c.v[i]+=a.m[i][j]*b.v[j];

}return c;

}matrix2D_t translationMTX(float dx, float dy){

matrix2D_t trans=createIdentity();trans.m[0][2]=dx;trans.m[1][2]=dy;return trans;

}

matrix2D_t rotationMTX(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;

}matrix2D_t scallingMTX(float factorx, float factory){

matrix2D_t scale=createIdentity();scale.m[0][0]=factorx;scale.m[1][1]=factory;return scale;

}//-----------------//Pemindahan Struktur Data//-----------------point2D_t Vector2Point(vector2D_t vec){

point2D_t pnt;pnt.x=vec.v[0];pnt.y=vec.v[1];return pnt;

}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;

}//Fungsi-Fungsi openGL untuk menggambar void setColor(float red, float green, float blue){

glColor3f(red, green, blue);}void setColor(color_t col){

glColor3f(col.r, col.g, col.b);}void drawLine(float x1, float y1, float x2, float y2){

glBegin(GL_LINES);glVertex2f(x1, y1);

glVertex2f(x2, y2);glEnd();

}void drawLine(point2D_t p1, point2D_t p2){

drawLine(p1.x,p1.y, p2.x,p2.y);}//n:jumlah vertexvoid drawPolygon(point2D_t pnt[], int n){

int i;glBegin(GL_LINE_LOOP);for (i=0; i<n;i++){

glVertex2f(pnt[i].x, pnt[i].y);}glEnd();

}void userdraw(void);void display(void){

glClear(GL_COLOR_BUFFER_BIT);userdraw();glutSwapBuffers();

}

void drawcharX(float x, float y){

drawLine(x,y,x+10,y+12); drawLine(x,y+12,x+10,y);}void drawcharY(float x, float y){

drawLine(x+5,y,x+5,y+7); drawLine(x,y+12,x+5,y+7);drawLine(x+10,y+12,x+5,y+7);

}void drawAxes(void){

drawLine(310,0,310,0); drawLine(310,0,300,5);drawLine(310,0,300,-5); drawcharX(300,-20);drawLine(0,-230,0,230); drawLine(0,230,5,220);drawLine(0,230,-5,220); drawcharY(-20,220);

}void userdraw(void){

static int tick=0;point2D_t ef[10] = {//defisisi obyek f

{10,100},{10,10},{30,10},{30,40},{60,40},{60,60},{30,60},{30,80},{70,80},{70,100}

};vector2D_t vec[10]; // vector obyek fmatrix2D_t rot; //operasi matrik translasiint i, loop;setColor(1,1,1); drawAxes();setColor(0,1,1); drawPolygon(ef,10); //gambar f asalglutSetWindowTitle("Scalling F");rot = rotationMTX(1.); //parameter translasifor (loop=0; loop<4; loop++) {

for (i=0; i<10; i++) {//proses transformasivec[i]=Point2Vector(ef[i]);vec[i]=multiply(rot, vec[i]);ef[i]=Vector2Point(vec[i]);

}drawPolygon(ef,10); //gambar f setelah translasi

}tick++;

}int main(int argc, char **argv){

glutInit(&argc,argv);glutInitDisplayMode(GLUT_DOUBLE | GLUT_RGB);glutInitWindowPosition(100,100);glutInitWindowSize(640,480);glutCreateWindow("Translasi");glClearColor(0.0, 0.0, 0.0, 0.0);gluOrtho2D(-320., 320., -240.0, 240.0);glutIdleFunc(display); //idle event cal backglutDisplayFunc(display);glutMainLoop();return 0;

}

- Output program :

3. Program 3 :

Program ini akan menggambar huruf f, kemudan menggambar ulang huruf f yang telah di scalling sebanyak 4 kali. Lakukan modofikasi pada prosedur userdraw progam 1 dan 2,.

- Kode program :#include <stdio.h>#include <math.h>#include <glut.h>

//--------------------------------------------// Struktur Data untuk Keperluan Grafis//-------------------------------------------typedef struct {

float m[3][3];}matrix2D_t;

typedef struct {float v[3];

}vector2D_t;

typedef struct {float x;float y;

}point2D_t;typedef struct {

float r;float g;float b;

}color_t;

//operasi matrik dan vektor 2D dan vektor 2D

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 multiply (matrix2D_t a, matrix2D_t b ){

matrix2D_t c; //c=a*bint 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;

}

vector2D_t multiply (matrix2D_t a, vector2D_t b){

vector2D_t c; //c=a*bint i,j;for (i=0;i<3;i++) {

c.v [i]=0;for (j=0;j<3;j++) c.v[i]+=a.m[i][j]*b.v[j];

}return c;

}matrix2D_t translationMTX(float dx, float dy){

matrix2D_t trans=createIdentity();trans.m[0][2]=dx;trans.m[1][2]=dy;return trans;

}

matrix2D_t rotationMTX(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;

}matrix2D_t scallingMTX(float factorx, float factory){

matrix2D_t scale=createIdentity();scale.m[0][0]=factorx;scale.m[1][1]=factory;return scale;

}//-----------------//Pemindahan Struktur Data//-----------------point2D_t Vector2Point(vector2D_t vec){

point2D_t pnt;pnt.x=vec.v[0];

pnt.y=vec.v[1];return pnt;

}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;

}//Fungsi-Fungsi openGL untuk menggambar void setColor(float red, float green, float blue){

glColor3f(red, green, blue);}void setColor(color_t col){

glColor3f(col.r, col.g, col.b);}void drawLine(float x1, float y1, float x2, float y2){

glBegin(GL_LINES);glVertex2f(x1, y1);glVertex2f(x2, y2);

glEnd();}void drawLine(point2D_t p1, point2D_t p2){

drawLine(p1.x,p1.y, p2.x,p2.y);}//n:jumlah vertexvoid drawPolygon(point2D_t pnt[], int n){

int i;glBegin(GL_LINE_LOOP);for (i=0; i<n;i++){

glVertex2f(pnt[i].x, pnt[i].y);}glEnd();

}void userdraw(void);void display(void){

glClear(GL_COLOR_BUFFER_BIT);userdraw();glutSwapBuffers();

}

void drawcharX(float x, float y){

drawLine(x,y,x+10,y+12); drawLine(x,y+12,x+10,y);}void drawcharY(float x, float y){

drawLine(x+5,y,x+5,y+7); drawLine(x,y+12,x+5,y+7);drawLine(x+10,y+12,x+5,y+7);

}void drawAxes(void){

drawLine(310,0,310,0); drawLine(310,0,300,5);drawLine(310,0,300,-5); drawcharX(300,-20);drawLine(0,-230,0,230); drawLine(0,230,5,220);drawLine(0,230,-5,220); drawcharY(-20,220);

}void userdraw(void){

static int tick=0;point2D_t ef[10] = {//defisisi obyek f

{10,100},{10,10},{30,10},{30,40},{60,40},{60,60},{30,60},{30,80},{70,80},{70,100}

};vector2D_t vec[10]; // vector obyek fmatrix2D_t scale; //operasi matrik translasiint i, loop;setColor(1,1,1); drawAxes();setColor(0,1,1); drawPolygon(ef,10); //gambar f asalglutSetWindowTitle("Scalling F");scale = scallingMTX(1.2,1.2); //parameter translasifor (loop=0; loop<4; loop++) {

for (i=0; i<10; i++) {//proses transformasivec[i]=Point2Vector(ef[i]);vec[i]=multiply(scale, vec[i]);ef[i]=Vector2Point(vec[i]);

}drawPolygon(ef,10); //gambar f setelah translasi

}tick++;

}int main(int argc, char **argv){

glutInit(&argc,argv);glutInitDisplayMode(GLUT_DOUBLE | GLUT_RGB);glutInitWindowPosition(100,100);

glutInitWindowSize(640,480);glutCreateWindow("Translasi");glClearColor(0.0, 0.0, 0.0, 0.0);gluOrtho2D(-320., 320., -240.0, 240.0);glutIdleFunc(display); //idle event cal backglutDisplayFunc(display);glutMainLoop();return 0;

}

- Output program :

4. Program 4 : Program ini akan menggambar huruf f, kemudian menggambar ulang huruf f yang telah direfleksi terhadap sb x, sb y, dan terhadap sb x dan sb y. Lakukan modifikasi pada prosedur userdraw program 1 atau 2 atau 3.

- Kode program :#include <stdio.h>#include <math.h>#include <glut.h>

//--------------------------------------------// Struktur Data untuk Keperluan Grafis//-------------------------------------------typedef struct {

float m[3][3];}matrix2D_t;

typedef struct {float v[3];

}vector2D_t;

typedef struct {float x;float y;

}point2D_t;typedef struct {

float r;float g;float b;

}color_t;

//operasi matrik dan vektor 2D dan vektor 2D

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 multiply (matrix2D_t a, matrix2D_t b ){

matrix2D_t c; //c=a*bint 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;

}

vector2D_t multiply (matrix2D_t a, vector2D_t b){

vector2D_t c; //c=a*bint i,j;for (i=0;i<3;i++) {

c.v [i]=0;for (j=0;j<3;j++) c.v[i]+=a.m[i][j]*b.v[j];

}return c;

}matrix2D_t translationMTX(float dx, float dy){

matrix2D_t trans=createIdentity();trans.m[0][2]=dx;trans.m[1][2]=dy;return trans;

}

matrix2D_t rotationMTX(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;

}matrix2D_t scallingMTX(float factorx, float factory){

matrix2D_t scale=createIdentity();scale.m[0][0]=factorx;scale.m[1][1]=factory;return scale;

}//-----------------//Pemindahan Struktur Data//-----------------point2D_t Vector2Point(vector2D_t vec){

point2D_t pnt;pnt.x=vec.v[0];pnt.y=vec.v[1];return pnt;

}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;

}//Fungsi-Fungsi openGL untuk menggambar void setColor(float red, float green, float blue){

glColor3f(red, green, blue);}void setColor(color_t col){

glColor3f(col.r, col.g, col.b);}void drawLine(float x1, float y1, float x2, float y2){

glBegin(GL_LINES);

glVertex2f(x1, y1);glVertex2f(x2, y2);

glEnd();}void drawLine(point2D_t p1, point2D_t p2){

drawLine(p1.x,p1.y, p2.x,p2.y);}//n:jumlah vertexvoid drawPolygon(point2D_t pnt[], int n){

int i;glBegin(GL_LINE_LOOP);for (i=0; i<n;i++){

glVertex2f(pnt[i].x, pnt[i].y);}glEnd();

}void userdraw(void);void display(void){

glClear(GL_COLOR_BUFFER_BIT);userdraw();glutSwapBuffers();

}

void drawcharX(float x, float y){

drawLine(x,y,x+10,y+12); drawLine(x,y+12,x+10,y);}void drawcharY(float x, float y){

drawLine(x+5,y,x+5,y+7); drawLine(x,y+12,x+5,y+7);drawLine(x+10,y+12,x+5,y+7);

}void drawAxes(void){

drawLine(310,0,310,0); drawLine(310,0,300,5);drawLine(310,0,300,-5); drawcharX(300,-20);drawLine(0,-230,0,230); drawLine(0,230,5,220);drawLine(0,230,-5,220); drawcharY(-20,220);

}void userdraw(void){

static int tick=0;point2D_t ef[10] = {//defisisi obyek f

{10,100},{10,10},{30,10},{30,40},{60,40},

{60,60},{30,60},{30,80},{70,80},{70,100}};vector2D_t vec[10]; // vector obyek fmatrix2D_t refxaxis, refyaxis,reforg; //operasi matrik

translasiint i, loop;setColor(1,1,1); drawAxes();setColor(0,1,1); drawPolygon(ef,10); //gambar f asalglutSetWindowTitle("Reflection F");refxaxis = scallingMTX(1.,-1.);refyaxis = scallingMTX(-1.,-1.);reforg = scallingMTX(1.,-1.);//parameter translasifor (loop=0; loop<4; loop++) {

for (i=0; i<10; i++) {//proses transformasivec[i]=Point2Vector(ef[i]);vec[i]=multiply(refxaxis, vec[i]);ef[i]=Vector2Point(vec[i]);

}drawPolygon(ef,10); //gambar f setelah translasifor (i=0; i<10; i++) {

//proses transformasivec[i]=Point2Vector(ef[i]);vec[i]=multiply(refyaxis, vec[i]);ef[i]=Vector2Point(vec[i]);

}drawPolygon(ef,10);for (i=0; i<10; i++) {

//proses transformasivec[i]=Point2Vector(ef[i]);vec[i]=multiply(reforg, vec[i]);ef[i]=Vector2Point(vec[i]);

}drawPolygon(ef,10);

}tick++;

}int main(int argc, char **argv){

glutInit(&argc,argv);glutInitDisplayMode(GLUT_DOUBLE | GLUT_RGB);glutInitWindowPosition(100,100);glutInitWindowSize(640,480);glutCreateWindow("Translasi");glClearColor(0.0, 0.0, 0.0, 0.0);gluOrtho2D(-320., 320., -240.0, 240.0);glutIdleFunc(display); //idle event cal backglutDisplayFunc(display);

glutMainLoop();return 0;

}

- Output program :

5. Program 5 : Buatlah program dengan menggabungkan ke empat transformasi pada program 1,2,3 dan 4 diatas menjadi 1 progam yang berjalan bergantian, pergantian antar proses transformasi menggunakan pengaturan nilai tick pada variabel disp. Selengkapnya program pada prosedur user draw() adalah sebagai berikut :

- Kode program :#include <stdio.h>#include <math.h>#include <glut.h>

//--------------------------------------------// Struktur Data untuk Keperluan Grafis//-------------------------------------------typedef struct {

float m[3][3];}matrix2D_t;

typedef struct {float v[3];

}vector2D_t;

typedef struct {float x;float y;

}point2D_t;typedef struct {

float r;float g;float b;

}color_t;

//operasi matrik dan vektor 2D dan vektor 2D

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 multiply (matrix2D_t a, matrix2D_t b ){

matrix2D_t c; //c=a*bint 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;

}

vector2D_t multiply (matrix2D_t a, vector2D_t b){

vector2D_t c; //c=a*bint i,j;for (i=0;i<3;i++) {

c.v [i]=0;for (j=0;j<3;j++) c.v[i]+=a.m[i][j]*b.v[j];

}return c;

}matrix2D_t translationMTX(float dx, float dy){

matrix2D_t trans=createIdentity();trans.m[0][2]=dx;trans.m[1][2]=dy;return trans;

}

matrix2D_t rotationMTX(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;

}matrix2D_t scallingMTX(float factorx, float factory){

matrix2D_t scale=createIdentity();scale.m[0][0]=factorx;scale.m[1][1]=factory;return scale;

}//-----------------//Pemindahan Struktur Data//-----------------point2D_t Vector2Point(vector2D_t vec){

point2D_t pnt;pnt.x=vec.v[0];pnt.y=vec.v[1];return pnt;

}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;

}//Fungsi-Fungsi openGL untuk menggambar void setColor(float red, float green, float blue){

glColor3f(red, green, blue);}void setColor(color_t col){

glColor3f(col.r, col.g, col.b);}void drawLine(float x1, float y1, float x2, float y2){

glBegin(GL_LINES);glVertex2f(x1, y1);glVertex2f(x2, y2);

glEnd();}void drawLine(point2D_t p1, point2D_t p2)

{drawLine(p1.x,p1.y, p2.x,p2.y);

}//n:jumlah vertexvoid drawPolygon(point2D_t pnt[], int n){

int i;glBegin(GL_LINE_LOOP);for (i=0; i<n;i++){

glVertex2f(pnt[i].x, pnt[i].y);}glEnd();

}void userdraw(void);void display(void){

glClear(GL_COLOR_BUFFER_BIT);userdraw();glutSwapBuffers();

}

void drawcharX(float x, float y){

drawLine(x,y,x+10,y+12); drawLine(x,y+12,x+10,y);}void drawcharY(float x, float y){

drawLine(x+5,y,x+5,y+7); drawLine(x,y+12,x+5,y+7);drawLine(x+10,y+12,x+5,y+7);

}void drawAxes(void){

drawLine(310,0,310,0); drawLine(310,0,300,5);drawLine(310,0,300,-5); drawcharX(300,-20);drawLine(0,-230,0,230); drawLine(0,230,5,220);drawLine(0,230,-5,220); drawcharY(-20,220);

}void userdraw(void){

static int tick=0;int disp=(tick/100)%5;point2D_t ef[10] = { //defisisi obyek f

{10,100},{10,10},{30,10},{30,40},{60,40},{60,60},{30,60},{30,80},{70,80},{70,100}

};vector2D_t vec[10]; // vector obyek f

matrix2D_t trans, scale, rot, refxaxis, refyaxis,reforg; //operasi matrik translasi

int i, loop;setColor(1,1,1); drawAxes();setColor(0,1,1); drawPolygon(ef,10); //gambar f asalswitch(disp){

case 0:glutSetWindowTitle("MatrixVektor F");break;

case 1: //translasiglutSetWindowTitle("MatrixVektor - Translasi F");trans=translationMTX(62,22);for (loop=0; loop<4; loop++) {

for (i=0; i<10; i++) {//proses transformasivec[i]=Point2Vector(ef[i]);vec[i]=multiply(trans, vec[i]);ef[i]=Vector2Point(vec[i]);

}drawPolygon(ef,10);

}break;

case 2: //rotasiglutSetWindowTitle("MatrixVektor - Rotasi F");rot=rotationMTX(1.);for (loop=0; loop<4; loop++) {

for (i=0; i<10; i++) {//proses transformasivec[i]=Point2Vector(ef[i]);vec[i]=multiply(rot, vec[i]);ef[i]=Vector2Point(vec[i]);

}drawPolygon(ef,10);

}break;

case 3: //translasiglutSetWindowTitle("MatrixVektor - Scalling F");scale=scallingMTX(1.2,1.2);for (loop=0; loop<4; loop++) {

for (i=0; i<10; i++) {//proses transformasivec[i]=Point2Vector(ef[i]);vec[i]=multiply(scale, vec[i]);ef[i]=Vector2Point(vec[i]);

}drawPolygon(ef,10);

}break;

case 4: //refleksi khusus dari scalingglutSetWindowTitle("MatrixVektor - Reflection F");refxaxis=scallingMTX(1.,-1.);refyaxis=scallingMTX(-1.,1.);reforg=scallingMTX(-1.,-1.);

for (i=0; i<10; i++) {//proses transformasivec[i]=Point2Vector(ef[i]);vec[i]=multiply(refxaxis, vec[i]);ef[i]=Vector2Point(vec[i]);

}drawPolygon(ef,10);for (i=0; i<10; i++) {

//proses transformasivec[i]=Point2Vector(ef[i]);vec[i]=multiply(refyaxis, vec[i]);ef[i]=Vector2Point(vec[i]);

}drawPolygon(ef,10);for (i=0; i<10; i++) {

//proses transformasivec[i]=Point2Vector(ef[i]);vec[i]=multiply(reforg, vec[i]);ef[i]=Vector2Point(vec[i]);

}drawPolygon(ef,10);

break;default:

break;}tick++;

}int main(int argc, char **argv){

glutInit(&argc,argv);glutInitDisplayMode(GLUT_DOUBLE | GLUT_RGB);glutInitWindowPosition(100,100);glutInitWindowSize(640,480);glutCreateWindow("Translasi");glClearColor(0.0, 0.0, 0.0, 0.0);gluOrtho2D(-320., 320., -240.0, 240.0);glutIdleFunc(display); //idle event cal backglutDisplayFunc(display);

glutMainLoop();return 0;

}

- Output program :

(1) (2)

(3) (4)

(5)

6. Program 6 : Buatlah program komposisi transformasi, rotasi, scalling dari huruf f. Pada program dibawah ini terdapat 6 macam komposisi transformasi, amati perbedaan hasilnya!, pergantian antar proses transformasi menggunakan pengaturan nilai tick pada variabel disp.

- Kode programnya :

#include<stdio.h>#include<math.h>#include<glut.h>

// ------------------------------------// Struktur Data Untuk Keperluan Grafis// ------------------------------------typedef struct {

float m[3][3];} matrix2D_t;typedef struct {

float v[3];} vector2D_t;typedef struct {

float x;float y;

} point2D_t;typedef struct {

float r;float g;float b;

} color_t;

// Operasi Matrik dan Vektor 2Dmatrix2D_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 multiply(matrix2D_t a,matrix2D_t b){

matrix2D_t c; //c=a*bint 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;

}vector2D_t multiply(matrix2D_t a, vector2D_t b){

vector2D_t c; //c=a*bint i,j;

for (i=0;i<3;i++) {c.v[i]=0;for (j=0;j<3;j++) c.v[i]+=a.m[i][j]*b.v[j];

}return c;

}matrix2D_t translationMTX(float dx, float dy){

matrix2D_t trans=createIdentity();trans.m[0][2]=dx;trans.m[1][2]=dy;return trans;

}matrix2D_t rotationMTX(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;

}matrix2D_t scalingMTX(float factorx, float factory){

matrix2D_t scale=createIdentity();scale.m[0][0]=factorx;scale.m[1][1]=factory;return scale;

}//-------------------------// Pemindahan Struktur Data//-------------------------point2D_t Vector2Point(vector2D_t vec){

point2D_t pnt;pnt.x=vec.v[0];pnt.y=vec.v[1];return pnt;

}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;

}// Fungsi-Fungsi OpenGL unuk menggambar

void setColor(float red, float green, float blue){

glColor3f(red, green, blue);}void setColor(color_t col){

glColor3f(col.r, col.g, col.b);}void drawLine(float x1, float y1, float x2, float y2){

glBegin(GL_LINES);glVertex2f(x1, y1);glVertex2f(x2, y2);

glEnd();}void drawLine(point2D_t p1, point2D_t p2){

drawLine(p1.x,p1.y,p2.x,p2.y);}//n: jumlah vertexvoid drawPolygon(point2D_t pnt[], int n){

int i;glBegin(GL_LINE_LOOP);

for(i=0;i<n;i++) {glVertex2f(pnt[i].x, pnt[i].y);

}glEnd();

}void userdraw(void);void display(void){

glClear(GL_COLOR_BUFFER_BIT);userdraw();glutSwapBuffers();

}void drawcharX(float x, float y){

drawLine(x,y,x+10,y+12);drawLine(x,y+12,x+10,y);}void drawcharY(float x, float y){

drawLine(x+5,y,x+5,y+7); drawLine(x,y+12,x+5,y+7);drawLine(x=10,y+12,x+5,y+7);

}void drawAxes(void){

drawLine(310,0,310,0); drawLine(310,0,300,5);

drawLine(310,0,300,-5); drawcharX(300,-20);drawLine(0,-230,0,230); drawLine(0,230,5,220);drawLine(0,230,-5,220); drawcharY(-20,220);

}void userdraw(void){

static int tick=0;int disp=(tick/1000)%6;int tickindisp=tick%1000;point2D_t ef[10]={//definisi obyek f

{10,100},{10,10},{30,10},{30,40},{60,40},{60,60},{30,60},{30,80},{70,80},{70,100}

};matrix2D_t mat, trans1, rot1, trans2, rot2, scale;vector2D_t vec[10];int i;float factor;//untuk parameter scallingsetColor(0,0,0); drawAxes();setColor(0,0,1); drawPolygon(ef,10);switch(disp) {case 0://translation ->rotation

glutSetWindowTitle("Komposisi - Translasi -> Rotasi");

trans1=translationMTX(-40,-50);rot1=rotationMTX(tickindisp*0.01);mat=multiply(rot1,trans1);for (i=0; i<10; i++) {

vec[i]=Point2Vector(ef[i]);vec[i]=multiply(mat,vec[i]);ef[i]=Vector2Point(vec[i]);}

drawPolygon(ef, 10);break;

case 1://translation -> rotation -> translationglutSetWindowTitle("Komposisi - Translasi -> Rotasi

-> Translasi");trans1=translationMTX(-40,-50);rot1=rotationMTX(tickindisp*0.01);trans2=translationMTX(160,0);mat=multiply(rot1,trans1);mat=multiply(trans2,mat);for (i=0; i<10; i++) {

vec[i]=Point2Vector(ef[i]);vec[i]=multiply(mat,vec[i]);ef[i]=Vector2Point(vec[i]);

}drawPolygon(ef,10);break;

case 2://translation -> rotation glutSetWindowTitle("Komposisi - Translasi ->

Rotasi");trans1=translationMTX(120,-50);rot1=rotationMTX(tickindisp*0.01);mat=multiply(rot1,trans1);for (i=0; i<10; i++) {

vec[i]=Point2Vector(ef[i]);vec[i]=multiply(mat,vec[i]);ef[i]=Vector2Point(vec[i]);}

drawPolygon(ef,10);break;

case 3://translation -> rotation -> translation -> rotation

glutSetWindowTitle("Komposisi - Translasi -> Rotasi -> Translasi -> Rotasi");

trans1=translationMTX(-40,-50);rot1=rotationMTX(tickindisp*0.02);trans2=translationMTX(160,0);rot2=rotationMTX(tickindisp*0.01);mat=multiply(rot1,trans1);mat=multiply(trans2,mat);mat=multiply(rot2,mat);for (i=0; i<10; i++) {

vec[i]=Point2Vector(ef[i]);vec[i]=multiply(mat,vec[i]);ef[i]=Vector2Point(vec[i]);}

drawPolygon(ef,10);break;

case 4://translation -> rotation -> translation -> rotation

glutSetWindowTitle("Komposisi - Translasi -> Rotasi -> Translasi -> Rotasi");

trans1=translationMTX(-40,-50);rot1=rotationMTX(-tickindisp*0.01);trans2=translationMTX(160,0);rot2=rotationMTX(tickindisp*0.01);mat=multiply(rot1,trans1);mat=multiply(trans2,mat);mat=multiply(rot2,mat);

for (i=0; i<10; i++) {vec[i]=Point2Vector(ef[i]);vec[i]=multiply(mat,vec[i]);ef[i]=Vector2Point(vec[i]);}

drawPolygon(ef,10);break;

case 5://trans -> scaling -> rot -> trans -> rotglutSetWindowTitle("Komposisi - Trans -> Scaling ->

Rot -> Trans -> Rot");factor=0.3+0.35*(sin(tickindisp*0.1)+1);trans1=translationMTX(-40,-50);scale=scalingMTX(factor,factor);rot1=rotationMTX(-tickindisp*0.02);trans2=translationMTX(160,0);rot2=rotationMTX(tickindisp*0.01);mat=multiply(scale,trans1);mat=multiply(rot1,mat);mat=multiply(trans2,mat);mat=multiply(rot2,mat);for (i=0; i<10; i++) {

vec[i]=Point2Vector(ef[i]);vec[i]=multiply(mat,vec[i]);ef[i]=Vector2Point(vec[i]);}

drawPolygon(ef,10);break;

default:break;

}tick++;

}int main(int argc, char **argv){

glutInit(&argc, argv);glutInitDisplayMode(GLUT_DOUBLE|GLUT_RGB);glutInitWindowPosition(100,100);glutInitWindowSize(640,480);glutCreateWindow("Translasi");glClearColor(0.0, 0.0, 0.0, 0.0);gluOrtho2D(-320., 320., -240.0, 240.0);glutIdleFunc(display); //idle event call backglutDisplayFunc(display);glutMainLoop();return 0;

}

- Output program :

(1) Komposisi – Translasi – Rotasi

(2) Komposisi – Translasi – Rotasi – Translasi

(3) Komposisi – Translasi – Rotasi

(4) Komposisi – Translasi – Rotasi – Translasi – Rotasi

(5) Komposisi – Translasi – Rotasi – Translasi – Rotasi

(6) Komposisi – Trans – Scalling – Rot – Trans – Rot

3.3. Analisa3.3.1. Program 1

Pada program pertama ini pada syntak void user draw, kita mendefinisikan huruf f, sehingga nantinya pada output akan muncul huruf f, bila saat pendefinian kita merubah angkanya, maka hasilnyapun akan berubah, pada contoh ini kita mendefinisikan huruf f, selanjutnya menggunakan perintah loop kita menggambar ulang huruf f tersebut, kemudian menggunakan syntax translation kita mentranslasikan 4 huruf f tersebut. Sehingga output akhirnya adalah 5 buah f yang 4 buah lainnya telah ditranslasikan hingga membentuk seperti tangga.

3.3.2. Program 2Pada program kedua ini setelah kita menggambar huruf f menggunakan point2D_t vec[10]={ kemudian mendefinisikan huruf F, kemudian menggunakan fungsi loop(perulangan) kita menggambar ulang huruf F, selanjutnya menggunakan fungsi rotation kita memutar huruf f tersebut sebanyak 4 kali, sehingga output akhirnya 5 huruf f dengan 4 huruf yang telah terotasi.

3.3.3. Program 3Pada program ketiga ini pada syntak void user draw, kita mendefinisikan huruf f, sehingga nantinya pada output akan muncul huruf f, bila saat pendefinian kita merubah angkanya, maka hasilnyapun akan berubah, pada contoh ini kita akan mendefinisikan huruf f, selanjutnya menggunakan perintah loop kita menggambar ulang huruf f tersebut 4 kali, kemudian menggunakan perintah scalling(memperbesar ukuran) 4 buah huruf f tersebut diperbesar sesuai perulangan yang diberikan, sehingga hasil akhirnya 5 buah f, dengan ukuran setiap f berbeda beda, namun letah dari f tersebut sama, sehingga hurufnya tertimpa.

3.3.4. Program 4Pada program kedua ini setelah kita menggambar huruf f menggunakan point2D_t vec[10]={ kemudian mendefinisikan huruf F, selanjutanya kita mendefenisikan operasi matrik refleksi yakni refxaxis, refyaxis dan reforg. Dimana refxaxis didefinisikan sebagai refleksi huruf f pada sumbu x, sedangkan reyaxis didefinisikan sebagai refleksi huruf f pada sumbu y, dan reforg merupakan refleksi huruf f pada sumbu x dan y, sehingga pada output akhirnya akan muncul 4 buah huruf f pada masing masing kotak, yang merupakan refleksi dari huruf f pertama.

3.3.5. Program 5

Pada program ini kita menggabungkan 4 program sebelumnya yang menggunakan fungsi translasi, scalling, rotasi dan refleksi, selanjutnya menggunakan peraturan nilai tick pada variabel disp kita membuat output program 1, 2,3 dan 4 berjalan secara bergantian. Pada case 0 huruf f dipindahkan pada 62 sb x, dan 22 sb y, selanjutnya pada case 2 huruf x dirotasikan , pada case 3 huruf f ukurannya diubah menggunakan syntax scalling, kemudian pada case 5 huruf f direfleksikan seperti cermin dari huruf f yang telah di scalling.

3.3.6. Program 6Program 6 ini merupakan program komposisi transformasi translasi, rotasi, scalling dari huruf f. Sama seperti program sebelumnya, pertama kita akan menggambar huruf f dengan mendefinisikan hurufnya pada user draw(), selanjutanya pada case 0, yakni gambar yang pertama akan dimunculkan, kita akan membuat huruf f yang mengalami translasi dan rotasi yakni perpindahan sambil berputar, selanjutnya pada case 1, kita akan merubah huruf f mengalami translasi-rotasi-translasi yakni huruf f akan berpindah kemudian berputar selanjutnya berpindah lagi. Pada case 2 kita juga menggunakan traslasi dan rotasi hanya saja pada case 2 ini letak sumbu x dan y nya berbeda dari case 0, pada case 2 ini kita mentranslasikan huruf f pada 120 sb x, dan -50 sb y, sehingga arah perpindahannya berbeda dari case 0, selanjutnya pada case 3 kita akan memindahkan huruf f secara translasi-rotasi-translasi dan rotasi, diaman perpindahan(translasi) pertama f berada pada -40 sb x dan -50 sb y, kemudian di rotasikan dan dipindahkan(translasi) kembali pada 160 sb x dan 0 sb y, kemudian huruf f nya dirotasikan kembali.pada case 4 ini pergerakan huruf f sama dengan pada case ke3. Lalu yang terakhir adalah case 5, huruf f akan di trans-scalling-rot-trans-rot. Mula-mula huruf f dipindahkan pada -40 sb x dan -50 sb y, selanjutnya huruf f tersebut di scalling dimana ukurannya diubah, selanjutanya huruf f tersebut dirotasikan kemudian dipindahkan kembali pada 160 sb x dan 0 sb y, kemudian dirotasikan lagi.

3.4. Kesimpulan

Dari praktikum kali ini dapat disimpulkan :

Pada user draw kita dapat mendefinisikan objek yang ingin kita tampilkan, misalnya pada praktikum ini objek yang kita definisikan adalah huruf F, selnjutnya menggunkan syntax translasi kita dapat memindahkah objek tersebut sesuai dengan sumbu x dan y, kemudia menggunakan syntax rotasi kita dapat memutar objek, menggunakan fungsi loop kita dapat menggambar objek atau menggambar kembali huruf f tersebut, untuk memperbesar atau memperkecil ukuran objek kita dapat menggunakan syntak scalling, selnjutnya kita dapat merefleksikan objek tersebut sesuai sumbu x dan y. Sehingga hasil yang kita dapatkan bisa beragam, dan terlihat lebih hidup seperti animasi.

Untuk menggambarkan transformasi objek grafik dua dimensi, jika sebuah obyek gambar ditransformasikan, hal yang harus dilakukan adalah :

1. Merubah struktur data titik ke struktur data vector,

2. Menghitung transformasi,

3. Merubah struktur data vector ke struktur data titik,

4. Menggambar obyek.

Dan untuk dapat mengimplementasikan transformasi 2D dalam program, hal yang perlu dibuat adalah :

1. Struktur data titik 2D,

2. Struktur data vector 2D,

3. Struktur data matrik 2D.

DAFTAR PUSTAKA