Grafika Komputer "Transformasi 2D dengan Open GL"

GRAFIKA KOMPUTER

A. Pengertian Grafika komputer 
(bahasa Inggris: computer graphics) adalah bagian dari ilmu komputer yang berkaitan dengan pembuatan dan manipulasi gambar (visual) secara digital. Bentuk sederhana dari grafika komputer adalah grafika komputer 2D yang kemudian berkembang menjadi grafika komputer 3D, pemrosesan citra (image processing), dan pengenalan pola (pattern recognition). Grafika komputer sering dikenal juga dengan istilah visualisasi data
B. Tranformasi Dua Dimensi (2D).
Transformasi dua dimensi adalah suatu model atau bentuk atau teknik memindahkan atau mengubah 
nilai posisi objek dalam sistem koordinat dua dimensi. Pemindahan objek ini dapat diartikan sebagai pemindahan 
titik.

Pada OpenGL terdapat beberapa tipe Transformasi diantaranya adalah :

1. Modeling Transformation : memodelkan transformasi dengan cara menggerakkan objek disekitar layar dan juga merubah objek dalam satuan koordinat lokal menjadi koordinat yang umum. Maksudnya adalah proses transformasi tertuju pada posisi dan orientasi pada pergerakan, perputaran, dan ukuran objek
2. Viewing Transformation : tipe transformasi ini memanfaatkan posisi kamera dan cara pandang objek tersebut sehingga jika dilakukan transformasi, maka yang akan melakukan transformasi adalah kamera atau cara pandang objek tersebut
3. Project Transformation : Transformasi ini berfokus pada isi/volume dari objek tersebut dan batasan pandangan dari layar yang ada.
4. Viewport Transformation : Transformasi ini memetakan koordinat yang terbuat kaena transformasi perspektif pada permukaan layar, Kita juga bisa membayangkan ini sebegai hasil akhir yang mampu memperbesar ataupun memperkecil objek tersebut, atau yang sering kita lakukan adalah seperti melakukan zoom in atau zoom out pada suatu objek, karena pada dasarnya ukuran dari objek tersebut tidak berubah, melainkan cara pandang kita memaksa kita untuk melihat objek tersebut menjadi objek yang lebih besar.

Pada dasarnya, operasi yang dapat dilakukan dengan menggunakan model transformasi ada 3, yaitu :

1. Translation : Pemindahan Objek ke posisi yang baru
2. Rotation : Proses memutarkan objek
3. Scaling : Memperbesar dan Memperkecil Objek, disini kita bisa merubah ukuran objek tersebut tidak harus seragam antara panjang, lebar atau tingginya, sehingga kita bebas untuk me-resize objek yang telah kita buat

Ada beberapa hal yang perlu diketahui, yaitu :

1. Pada Objek tersebut, penulis membuat 2 bangun yang sama, hanya membuat viewport ataupun titik koordinat yang berbeda,yaitu balok.
2. Balok tersebut kemudian dilakukan transformasi untuk objek-objek yang lainnya seperti jari
3. semua operasi modeling trasnformasi dilakukan (Translation, Rotate, dan Scaling)
4. program ditulis dengan menggunakan procedure, sehingga nantinya hanya butuh pemanggilan dari prosedure yang sudah dideklarasikan sebelumnya.

Berikut ini syntak yang dipakai :

Langkah-langkah membuat Transformasi 2 Dimensi :

1. Membuat Sisi Bawah dari Balok

//BALOK//

void balok(float x, float y, float z, float a, float b, float c)
{

//Sisi Bawah
glBegin(GL_QUADS);
glVertex2f(10,10);
glVertex2f(0,0);
glVertex2f(120,0);
glVertex2f(110,10);

glEnd(); 

2. Membuat Sisi Belakang

//Sisi Belakang

glBegin(GL_QUADS);
glVertex2f(10,50);
glVertex2f(10,10);
glVertex2f(130,10);
glVertex2f(130,50);
glEnd();

3. Membuat Sisi Samping Kanan

//Sisi Samping Kanan
glBegin(GL_QUADS);

glVertex2f(120,40);
glVertex2f(120,0);
glVertex2f(130,10);
glVertex2f(130,50);
glEnd();

4. Membuat Sisi Samping Kiri

//Sisi Samping Kiri
glBegin(GL_QUADS);
glColor3f(x,y,z);
glVertex2f(0,40);
glVertex2f(0,0);
glVertex2f(10,10);
glVertex2f(10,50);
glEnd();

5. Membuat Sisi Depan

//Sisi Depan
glBegin(GL_QUADS);
glVertex2f(0,40);
glVertex2f(0,0);
glVertex2f(120,0);
glVertex2f(120,40);
glEnd();
6.Membuat Sisi Atas

//Sisi Atas
glBegin(GL_QUADS);
glColor3f(a,b,c);
glVertex2f(10,50);
glVertex2f(0,40);
glVertex2f(120,40);
glVertex2f(130,50);
glEnd();
}

void balok2(float d, float e, float f, float g, float h, float i)
{

1. Membuat Sisi Bawah

//Sisi Bawah
glBegin(GL_QUADS);
glColor3f(d,f,g);
glVertex2f(10,10);
glVertex2f(0,0);
glVertex2f(120,0);
glVertex2f(130,10);
glEnd();

2. Membuat Sisi Belakang

//Sisi Belakang
glBegin(GL_QUADS);
glColor3f(f,e,f);
glVertex2f(10,30);
glVertex2f(10,10);
glVertex2f(130,10);
glVertex2f(130,30);
glEnd();

3. Membuat Sisi Samping Kanan

//Sisi Samping Kanan
glBegin(GL_QUADS);
glColor3f(d,f,f);
glVertex2f(120,40);
glVertex2f(120,0);
glVertex2f(130,10);
glVertex2f(130,30);
glEnd();

4. Membuat Sisi Samping Kiri

//Sisi Samping Kiri
glBegin(GL_QUADS);
glColor3f(g,h,i);
glVertex2f(0,40);
glVertex2f(0,0);
glVertex2f(10,10);
glVertex2f(10,30);
glEnd();
5. Membuat Sisi Atas

//Sisi Atas
glBegin(GL_QUADS);
glColor3f(f,g,d);
glVertex2f(10,30);
glVertex2f(0,40);
glVertex2f(120,40);
glVertex2f(130,40);
glEnd();

6.Membuat Sisi Depan

//Sisi Depan
glBegin(GL_QUADS);
glColor3f(d,e,f);
glVertex2f(0,40);
glVertex2f(0,0);
glVertex2f(120,0);
glVertex2f(120,40);
glEnd();
}

void display(void)

{
/* Membersihkan semua pixel di buffer(clear all pixels) */
glClear (GL_COLOR_BUFFER_BIT);

glPushMatrix();
glTranslatef(300.0,300.0,0.0);
balok(1.0,0.0,0.0,0,0,1);
glPopMatrix();

1. Membuat Tangan Robot datar

//Tangan Robot Datar
glPushMatrix();
glColor3f(0.6,0.3,0.8);
glTranslatef(448.0,312.0,0.0);
glRotatef(45.0,0.0,0.0,1.0);
balok2(0.1,0.1,0.4,0.6,0.8,0.3);
glPopMatrix();

2. Membuat Jari Bawah

//jari  bawah
glColor3f(0.6,0.4,0.8);
glPushMatrix();
glTranslatef(532.0,396.0,0.0);
glScalef(0.32,0.30,0.0);
glRotatef(0.0,0.0,0.0,1.0);
balok(0.8,0.7,0.3,2.8,0.8,0.8);
glPopMatrix();

3. Membuat Jari Atas

//bawah atas
glColor3f(0.6,0.4,0.8);
glPushMatrix();
glTranslatef(577.0,400.0,0.0);
glScalef(0.32,0.30,0.0);
glRotatef(50.0,0.0,0.0,1.0);
balok2(0.8,0.7,0.3,2.8,0.8,0.8);
glPopMatrix();

4.Membuat Jari Kedua Atas

//jari kedua atas
glColor3f(0.6,0.4,0.8);
glPushMatrix();
glTranslatef(546.0,439.0,0.0);
glScalef(0.32,0.30,0.0);
glRotatef(15.0,0.0,0.0,1.0);
balok(0.5,0.6,0.3,0.6,0.8,0.2);
glPopMatrix();

5. Membuat Jari Ketiga Atas

//jari ketiga atas
glColor3f(0.6,0.4,0.8);
glPushMatrix();
glTranslatef(535.0,450.0,0.0);
glScalef(0.32,0.30,0.0);
glRotatef(25.0,0.0,0.0,1.0);
balok(0.9,0.5,0.3,0.6,0.4,0.2);
glPopMatrix();

glColor3f(0.6,0.4,0.8);
glPushMatrix();
glTranslatef(515.0,463.0,0.0);
glScalef(0.32,0.30,0.0);
glRotatef(30.0,0.0,0.0,1.0);
balok(0.9,0.6,0.8,0.4,0.4,0.3);
glPopMatrix();

glColor3f(0.6,0.4,0.8);
glPushMatrix();
glTranslatef(516.0,415.0,0.0);
glScalef(0.32,0.30,0.0);
glRotatef(40.0,0.0,0.0,1.0);
balok2(0.5,0.6,0.3,0.6,0.8,0.2);
glPopMatrix();

glColor3f(0.6,0.4,0.8);
glPushMatrix();
glTranslatef(517.0,418.0,0.0);
glScalef(0.32,0.30,0.0);
glRotatef(60.0,0.0,0.0,1.0);
balok2(0.9,0.5,0.3,0.6,0.4,0.2);
glPopMatrix();

glColor3f(1.5,1.7,1.3);
glPushMatrix();
glTranslatef(519.0,425.0,0.0);
glScalef(0.32,0.30,0.0);
glRotatef(90.0,0.0,0.0,1.0);
balok2(0.9,0.6,0.8,0.4,0.4,0.3);
glPopMatrix();

glFlush ();
}
void init (void)
{
6. Membuat Warna Background

// Membuat warna background
glClearColor (0.0, 0.0, 0.0, 0.0);
/* inisialisasi nilai tampilan (viewing values) */
glMatrixMode(GL_PROJECTION);
glLoadIdentity(); // memanggil matriks identitas
glOrtho(0.0, 1024.0, 0.0, 700.0, -1.0, 1.0);
}
/* Deklarasi window size, position, dan display mode(single buffer and RGBA).
* Pemanggilan routin inisialisasi.
* Memanggil fungsi untuk manampilkan objek di layar
*/
int main(int argc, char** argv)
{
glutInit(&argc, argv);
glutInitDisplayMode (GLUT_SINGLE | GLUT_RGB);
glutInitWindowSize (600,400);
glutInitWindowPosition (150, 20);
glutCreateWindow (“Program Transformasi”);
init ();
glutDisplayFunc(display);
glutMainLoop();
return 0;
}

Kira-kira Hasilnya Seperti pada Gambar dibawah ini :

Dibuat Oleh Kelompok 1:

1. Rati Gustina
2. Siti Hajar
3. Robianto Dwi Rahmawan
4. Lazarus