Tutorial Transformasi 2D dengan OpenGL
Transformasi 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. Ada dua cara yang
dapat digunakan untuk mentransformasi gambar yaitu :
- Transformasi objek
Definisinya adalah mengubah koordinat-koordinat dari tiap titik di objek dengan beberapa aturan, meninggalkan underlying sistem koordinat yang tidak bisa diubah lagi. - Transformasi koordinat
Definisinya adalah system koordinat yang baru dibuat sebelumnya merupakan perwakilan dari semua titik objek dalam sistem yang baru.
Ada banyak cara untuk melakukan transformasi objek grafis,
tapi beberapa cara transformasi yang umum adalah
a. Perpindahan
(Translasi)
Translasi adalah perpindahan objek dari titik P(x, y) ke
titik P’(x’, y’) secara linier. Dalam translasi dua dimensi diperlukan dua
parameter, yaitu pemindahan kearah sumbu x dan pemindahan kearah
sumbu y. Translasi (dx,
dy) didefinisikan dengan :
x’= x + dx
y’ = y + dy
Bentuk umum :
• glTranslatef( x, y, z
)
• glTranslated( x, y, z
)
glVertex3f(1.0f, -1.0f, -10.0f );
glColor3f( 1.0,
0.0, 0.0 );
glVertex3f(-1.0f, -1.0f, -10.0f );
glEnd();
b.Penskalaran (Scale)
Definisi dari 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 suatu objek berubah ukurannya baik menjadi mengecil ataupun membesar
secara seragam atau tidak seragam tergantung pada faktor penskalaan yang
diberikan.
Proses penskalaan dapat
didefinisikan dengan :
x’ = mx x
y’ = my y
Bentuk umum :
• glScalef( xf, yf, zf )
c. Perputaran (Rotate)
Definisi rotasi adalah perpindahan objek dari titik P(x, y) ke
titik P’(x’,y’) yang berupa pemindahan berputar sebesar sudut θ atau suatu
operasi yang menyebabkan objek bergerak berputar pada titik pusat atau pada
sumbu putar yang dipilih berdasarkan sudut putaran tertentu.
Operasi rotasi dapat
diuraikan sebagai berikut :
·
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 θ
·
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 θ
·
Rotasi dari titik P(x,
y) menjadi P’(x’, y’) merupakan kombinasi dari kedua macam transformasi di atas
R = Rx + Ry.
x’ = x .cos θ - y.sin
θ
y’ = x.sin θ +
y.cos θ
Bentuk umum :
• glRotatef( sudut, sx,
sy, sz );
d. Pencerminan
(Reflection)
Definisi pencerminan adalah transformasi objek yang mengubah
lokasi objek pada kedudukan yang berlawanan dengan sembarang sumbu yang
dipilih. Sumbu ini bisa sumbu x, sumbu y,sumbu z, atau sumbu lain yang
ditentukan oleh pengguna. Transformasi ini menghasilkan citra cermin objek
terhadap sumbu tertentu bagi objek yang dicerminkan.
OpenGL
OpenGL (Open
Graphics Library) adalah spesifikasi standar yang mendefinisikan
sebuah lintas-bahasa, lintas platform API untuk mengembangkan aplikasi
yang menghasilkan grafis komputer 2D maupun 3D.
Simpelnya, OpenGL adalah Interface (library) untuk software dalam
berinteraksi dengan graphic hardware .OpenGL menyediakan
fungsi untuk pembuatan grafik primitif termasuk termasuk titik, garis dan
lingkaran dan digunakan untuk keperluan-keperluan pemrograman
grafis. OpenGL dapat berjalan pada sistem operasi Windows, UNIX dan sistem
operasi lainnya karena merupakan suatu antarmuka pemrograman aplikasi
Application Programing Interface (API).
GLUT
(GL Utility Toolkit) Merupakan pengembangan dari OpenGL yang didesain untuk
aplikasi dengan level kecil hingga menengah dan menggunakan callback functions
untuk menambahkan interaksi dari user. Untuk pemrograman OpenGL menggunakan
C++, diperlukan tambahan library tambahan yaitu:
- Glut.h
- Glut32.lib
- Libglut32.dll
Oke, kita mulai cara membuat gambar transformasi 2D dengan
OpenGL. yang harus kita siapkan pastinya OpenGLnya dulu, jadi kalo belum ada
langsung aja gan install OpenGL .
Disini gua menggunakan Compiler Dev C++,
TITIK
Untuk
menyatakan titik tersebut OpenGL menyediakan fungsi glVertex yang didahului dan
diakhiri dengan glBegin dan glEnd:
glBegin(GL_POINTS);
/* Ingin menggambar titik
*/
glVertex3f(2.0, 0.0, 4.0); /*
menyatakan sejumlah titik */
glVertex3f(3.0, -4.0, -2.0);
glEnd();
/*
Akhir dari menggambar titik */
Coding :
#include <windows.h>
#include <GL/glut.h>
void mydisplay()
{
glClear(GL_COLOR_BUFFER_BIT);
glPointSize(4.0f); //
mengatur besar titik
glColor3f(127,255,0);
// mengatur warna
glBegin(GL_POINTS);
glVertex3f(0.25,0.25,0.0); // koordinat titik
glEnd();
glFlush();
}
int main(int argc, char** argv)
{
printf("Transformasi 2 Dimensi");
glutCreateWindow("Contoh Vertex");
glutDisplayFunc(mydisplay);
glutMainLoop();
}
Output :
GARIS
Fungsi glBegin memberitahu kepada OpenGL bahwa kita akan mulai
menggambar sekaligus menyatakan apa yang akan digambar, yaitu dengan memberikan
parameter GL_Lines. Fungsi glEnd menyatakan pembuatan gambar
diakhiri. menggambar suatu garis, pada glBegin diberi parameter GL_LINES.
Dengan ini pasangan-pasangan glVertex akan membentuk garis. Bila glVertex tidak
memiliki pasangan maka perintah tersebut diabaikan (tidak akan menggambar
titik).
Codingan :
#include <windows.h>
#include <GL/glut.h>
void mydisplay()
{
glClear(GL_COLOR_BUFFER_BIT);
glColor3f(127.0f,7.0f,54.0f);
// mengatur warna titik
glBegin(GL_LINES);
// mulai menggambar garis //
glVertex3f(4.0, 2.0,
1.0); //
garis pertama, pasangan glVertex //
glVertex3f(2.0, -4.0,
3.3);
glVertex3f(8.0, 2.0,
1.0); //
garis ke dua //
glVertex3f(-4.7, 5.0,
-3.0);
glVertex3f(0.0, 0.0,
0.0); //
garis ke tiga //
glVertex3f(2.0, -1.0,
-7.0);
glEnd();
glFlush();
}
int main(int argc, char** argv)
{
printf("Transformasi 2 Dimensi");
glutCreateWindow("Contoh Line");
glutDisplayFunc(mydisplay);
glutMainLoop();
}
Output :
SEGITIGA
Untuk menggambar suatu bangun, OpenGL memiliki 6 macam bangun
primitif, yaitu :
GL_TRIANGLES
: setiap 3 glVertex membentuk segitiga, dan tiap segitiga saling
lepas.
GL_TRIANGLE_STRIP : setiap 3 glVertex
membentuk segitiga, dan semua segitiga saling terkait
GL_TRIANGLE_FAN :
membentuk beberapa segitiga yang berpusat pada satu titik (seperti kipas)
GL_QUADS
: tiap 4 glVertex membentuk segi empat
GL_QUAD_STRIP :
tiap 4 glVertex membentuk segi empat, dan semuanya saling menempel
GL_POLYGON. :
n glVertex akan membentuk bidang bersisi n
Contoh
di bawah ini adalah menggambar segitiga biasa.
glBegin(GL_TRIANGLES);
glVertex2f(0.8, 0.8);
glVertex2f(-0.8, -0.8);
glVertex2f(-0.5, 0.5);
glEnd();
Codingan:
#include
<windows.h>
#include
<stdio.h> //merupakan library yang digunakan untuk operasi
input output
#include
<GL/glut.h>
//Membuat Method
void mydisplay()
{
glClear(GL_COLOR_BUFFER_BIT);
glBegin(GL_TRIANGLES);
glVertex2f(0.1, 0.1);
glVertex2f(0.5, 0.5);
glVertex2f(1.0, 0.3);
glEnd();
glFlush();
}
//Main Program
int main(int
argc, char** argv){
printf("Transformasi 2 Dimensi");
glutCreateWindow("Contoh Triangles");
glutDisplayFunc(mydisplay);
glutMainLoop();
}
Output :
POLYGON
Hampir sama dengan
membuat segitiga, hanya saja dengan polygon bisa membuat gambar/objek dengan
lebih banyak titik. untuk menggunakan polygon , kita harus mendeklarasikan
methodnya, yaitu glBegin(GL_POLYGON)
Codingan :
#include <stdio.h>
#include <stdlib.h>
#include <string.h>
#include <stdarg.h>
#include <GL/glut.h>
//Membuat Method
void mydisplay(){
glClear(GL_COLOR_BUFFER_BIT);
glBegin(GL_POLYGON);
glColor3f(0, 255, 255);
glVertex2f(-0.2, -0.2);
glVertex2f(-0.75, 0);
glVertex2f(-0.5, 0.5);
glVertex2f(0, 0.75);
glVertex2f(0.2, 0.2);
glVertex2f(0.75, 0);
glVertex2f(0.5, -0.5);
glVertex2f(0,-0.75);
glEnd();
glFlush();
}
//Main Program
int main(int argc, char** argv){
printf("Transformasi
2 Dimensi");
glutCreateWindow("Contoh
Polygon");
glutDisplayFunc(mydisplay);
glutMainLoop();
}
Output :
Contoh Gambar Tranformasi 2D OpenGL
Dengan dasar dasar
OpenGL diatas, berikut ini adalah contoh seerhana tranformasi 2D yang lebih
kompleks. Disini kami membuat gambar 2D dengan menggabungkan beberapa bidang
dilengkapi gradasi warna
Codingan :
#include
<windows.h>
#include
<GL\glut.h>
void init()
{
//
Set display window color to as glClearColor(R,G,B,Alpha)
glClearColor(0,0,0,0);
//
Set projection parameters.
glMatrixMode(GL_PROJECTION);}
void display(void)
{
glClear(GL_COLOR_BUFFER_BIT);
glBegin(GL_POLYGON);//
lautan
glColor3f(0,0,128);
//warna biru
glVertex2f(-1,-0.6);
glColor3f(0,0,128);
glVertex2f(1,-0.6);
glColor3f(0,206,209);
glVertex2f(1,-1);
glColor3f(254,255,255);
glVertex2f(-1,-1);
glEnd();
glBegin(GL_POLYGON);//badan
kapal
glColor3f(0,0,0);
glVertex2f(-0.6,-0.8);
glVertex2f(0.6,-0.8);
glColor3f(0.9,0.91,0.98);
glColor3f(192,192,192);
glColor3f(34,139,34);
glVertex2f(0.8,-0.4);
glColor3f(
0.184314,0.309804,0.309804);
glVertex2f(-0.8,-0.4);
glColor3f(0,0,0);
glEnd();
glBegin(GL_POLYGON);//atas
kapal
glColor3f(0.1,0.3,0.3);
glVertex2f(-0.4,-0.4);
glVertex2f(0.6,-0.4);
glVertex2f(0.5,-0.1);
glColor3f(1,1,1);
glVertex2f(-0.2,-0.1);
glEnd();
glBegin(GL_POLYGON);//atas
kapal 2
glColor3f(0.1,0.3,0.3);
glVertex2f(-0.15,-0.1);
glVertex2f(0.45,-0.1);
glVertex2f(0.4,0.15);
glColor3f(1,1,1);
glVertex2f(-0.03,0.15);
glEnd();
glBegin(GL_POLYGON);//jendela
kapal TINGKAT 2.1
glColor3f(1,1,1);
glVertex2f(0.0,-0.05);
glColor3f(255,215,0);
glVertex2f(0.15,-0.05);
glColor3f(1,1,1);
glVertex2f(0.15,0.1);
glColor3f(255,215,0);
glVertex2f(0.0,0.1);
glEnd();
glBegin(GL_POLYGON);//jendela
kapal TINGKAT 2.2
glColor3f(1,1,1);
glVertex2f(0.2,-0.05);
glColor3f(255,215,0);
glVertex2f(0.35,-0.05);
glColor3f(1,1,1);
glVertex2f(0.35,0.1);
glColor3f(255,215,0);
glVertex2f(0.2,0.1);
glEnd();
glBegin(GL_POLYGON);//jendela
kapal
glColor3f(1,1,1);
glVertex2f(-0.2,-0.3);
glColor3f(1,1,1);
glVertex2f(-0.1,-0.3);
glColor3f(255,215,0);
glVertex2f(-0.1,-0.2);
glColor3f(255,215,0);
glVertex2f(-0.2,-0.2);
glEnd();
glBegin(GL_POLYGON);//jendela
kapal
glColor3f(1,1,1);
glVertex2f(0,-0.3);
glColor3f(1,1,1);
glVertex2f(0.1,-0.3);
glColor3f(255,215,0);
glVertex2f(0.1,-0.2);
glColor3f(255,215,0);
glVertex2f(0,-0.2);
glEnd();
glBegin(GL_POLYGON);//jendela
kapal
glColor3f(1,1,1);
glVertex2f(0.2,-0.3);
glColor3f(1,1,1);
glVertex2f(0.3,-0.3);
glColor3f(255,215,0);
glVertex2f(0.3,-0.2);
glColor3f(255,215,0);
glVertex2f(0.2,-0.2);
glEnd();
glBegin(GL_POLYGON);//jendela
kapal
glColor3f(1,1,1);
glVertex2f(0.4,-0.3);
glColor3f(1,1,1);
glVertex2f(0.5,-0.3);
glColor3f(255,215,0);
glVertex2f(0.5,-0.2);
glColor3f(255,215,0);
glVertex2f(0.4,-0.2);
glEnd();
glFlush();
}
int main(int argc,
char** argv)
{
glutInit(&argc,
argv);
glutInitDisplayMode
(GLUT_SINGLE | GLUT_RGB);
glutInitWindowSize
(700, 400);
glutInitWindowPosition
(200, 100);
glutCreateWindow
("KAPAL C.I.B (BOAK'S HOTEL)");
init();
glutDisplayFunc(display);
glutMainLoop();
return 0;
}
Sekian tutorial Transformasi 2D kali ini,
Jangan lupa share and comment . Semoga bermanfaat. Thanks !
Kelompok 3 Grafika Komputer :
1. MHD. Sokhibul Padila Padli
2. Nanang Budiansyah
3.Ramdayani
4.Sukma
Komentar
Posting Komentar