Modul 3
Objek 2 Dimensi
A. KOMPETENSI DASAR
• Memahami jenis-jenis objek 2 Dimensi.
• Memahami dan dapat membuat objek 2 Dimensi.
• Memahami penerapan Objek primitif menjadi bangun 2 dimensi dasar.
• Memahami dan dapat membuat fungsi untuk bangun 2 dimensi dasar.
B. ALOKASI WAKTU
2 JS (2x50 menit)
C. PETUNJUK
• Awali setiap aktivitas dengan do’a, semoga berkah dan mendapat kemudahan.
• Pahami Tujuan, dasar teori, dan latihan-latihan praktikum dengan baik dan benar.
• Kerjakan tugas-tugas dengan baik, sabar, dan jujur.
• Tanyakan kepada asisten/dosen apabila ada hal-hal yang kurang jelas.
D. DASAR TEORI
1. OBJEK 2D
Untuk membangun sebuah bangun 2 Dimensi dengan efisien, maka diperlukan sebuah fungsi yang
memiliki parameter tertentu untuk membangun bangun tersebut. Perhatikan kode program bangun 2D
dengan menggunakan fungsi berikut ini:
Transformasi 2 dimensi adalah suatu model atau bentuk atau teknik memindahkan atau mengubah nilai
posisi objek dalam sistem korordinat 2 dimensi. Pemindahan objek ini dapat diartikan sebagai pemindahan
titik.
Untuk dapat melakukan pemindahan maka digunakan dua variabel dasar didalam matemtika, yaitu
vektor dan matriks, dimana vektor menunjukkan titik atau objek yang dinyatakan dalam vektor posisi
a. Clipping Area dan Viewport
Ketika kita mencoba memindahkan jendela Open GL lebih besar atau lebih kecil terkadang beberapa
obbjek akan ikut mengecil, hal ini sangat menggangu. Hal ini dapat diatasi dengan clpping area dan
viewport sehingga bentuk objek dapat terdistori, re-sizing jendela ini juga dapat memanggil fungsi
callback handler (), yang dapat diprogram untuk menyesuaikan OpenGL kliping-daerah sesuai dengan
rasio aspek jendela.
Contoh Program :
/*
* GL03Viewport.cpp: Clipping-area and Viewport
* Implementing reshape to ensure same aspect ratio between the
* clipping-area and the viewport.
*/
#include <windows.h> // for MS Windows
#include <GL/glut.h> // GLUT, include glu.h and gl.h
void display() {
glClear(GL_COLOR_BUFFER_BIT); // Clear the color buffer with current clearing color
/* Handler for window re-size event. Called back when the window first appears and
whenever the window is re-sized with its new width and height */
void reshape(GLsizei width, GLsizei height) { // GLsizei for non-negative integer
// Compute aspect ratio of the new window
if (height == 0) height = 1; // To prevent divide by 0
GLfloat aspect = (GLfloat)width / (GLfloat)height;
// Set the aspect ratio of the clipping area to match the viewport
glMatrixMode(GL_PROJECTION); // To operate on the Projection matrix
glLoadIdentity(); // Reset the projection matrix
if (width >= height) {
// aspect >= 1, set the height from -1 to 1, with larger width
gluOrtho2D(-1.0 * aspect, 1.0 * aspect, -1.0, 1.0);
} else {
// aspect < 1, set the width to -1 to 1, with larger height
gluOrtho2D(-1.0, 1.0, -1.0 / aspect, 1.0 / aspect);
}
}
void display(){
glClear( GL_COLOR_BUFFER_BIT);//membersihkan bidang gambar
glPointSize(10);
glLineWidth(5);
glBegin(GL_POLYGON);
glVertex2f(-0.8,0.7);
glColor3f(1.0,0.0,0.0);
glVertex2f(-0.7,0.7);
glColor3f(1.0,0.0,1.0);
glVertex2f(-0.7,0.2);
glVertex2f(-0.8,0.2);
glEnd();
glBegin(GL_POLYGON);
glVertex2f(-0.7,0.7);
glColor3f(1.0,1.5,0.0);
glVertex2f(-0.7,0.6);
glVertex2f(-0.3,0.2);
glVertex2f(-0.3,0.3);
glEnd();
glBegin(GL_POLYGON);
glVertex2f(-0.3,0.7);
glColor3f(0.0,0.5,1.0);
glVertex2f(-0.2,0.7);
glColor3f(1.0,0.0,1.0);
glVertex2f(-0.2,0.2);
glVertex2f(-0.3,0.2);
glEnd();
glBegin(GL_POLYGON);
© 2016 Jurusan Teknik Elektro FT UM 5
Modul Praktikum Grafika Komputer Revisi 02 - Ahmad Mursyidun Nidhom
glVertex2f(-0.1,0.7);
glColor3f(0.0,1.0,1.0);
glVertex2f(0.0,0.7);
glVertex2f(0.0,0.2);
glColor3f(0.0,0.0,1.0);
glVertex2f(-0.1,0.2);
glEnd();
glBegin(GL_POLYGON);
glVertex2f(0.0,0.3);
glColor3f(0.0,1.0,1.0);
glVertex2f(0.2,0.3);
glVertex2f(0.2,0.2);
glVertex2f(0.0,0.2);
glEnd();
glBegin(GL_POLYGON);
glVertex2f(0.2,0.7);
glColor3f(0.0,0.5,1.5);
glVertex2f(0.3,0.7);
glVertex2f(0.3,0.2);
glVertex2f(0.2,0.2);
glEnd();
glBegin(GL_POLYGON);
glVertex2f(0.4,0.7);
glColor3f(0.0,1.0,0.0);
glVertex2f(0.5,0.7);
glVertex2f(0.5,0.2);
glVertex2f(0.4,0.2);
glEnd();
glBegin(GL_POLYGON);
glVertex2f(0.5,0.7);
glColor3f(0.0,1.5,0.0);
glVertex2f(0.7,0.7);
glVertex2f(0.7,0.6);
glVertex2f(0.5,0.6);
glEnd();
glBegin(GL_POLYGON);
glVertex2f(0.7,0.7);
glColor3f(0.0,0.9,0.0);
glVertex2f(0.8,0.7);
glVertex2f(0.8,0.4);
glVertex2f(0.7,0.4);
glEnd();
glBegin(GL_POLYGON);
glVertex2f(0.5,0.5);
glColor3f(0.0,0.5,0.0);
glVertex2f(0.7,0.5);
glVertex2f(0.7,0.4);
glVertex2f(0.5,0.4);
glEnd();
glBegin(GL_POLYGON);
glVertex2f(0.4,0.5);
glColor3f(0.0,1.5,1.0);
glVertex2f(0.8,0.3);
glColor3f(1.0,1.5,0.0);
glVertex2f(0.8,0.2);
glVertex2f(0.4,0.4);
glEnd();
© 2016 Jurusan Teknik Elektro FT UM 6
Modul Praktikum Grafika Komputer Revisi 02 - Ahmad Mursyidun Nidhom
glFlush();
void init(){
glClearColor(0.0, 0.0, 0.0, 0.0);//definisiin warna clear atau background
glMatrixMode(GL_PROJECTION);
glLoadIdentity ();
void Draw() {
glClear(GL_COLOR_BUFFER_BIT);
glColor3f(1.0, 1.0, 1.0);
glBegin(GL_LINE_LOOP);
radius=40;
jumlah_titik=20;
x_tengah=50;
y_tengah=50;
for (i=0;i<=360;i++){
float sudut=i*(2*PI/jumlah_titik);
float x=x_tengah+radius*cos(sudut);
float y=y_tengah+radius*sin(sudut);
glVertex2f(x/100,y/100);
}
glEnd();
glFlush();
}
void Initialize() {
glClearColor(0.0, 0.0, 0.0, 0.0);
glMatrixMode(GL_PROJECTION);
glLoadIdentity();
glOrtho(0.0, 1.0, 0.0, 1.0, -1.0, 1.0);
}
c. Object Bintang
Untuk membuat bintang 2D dengan memanfaatkan openGL sangat mudah, yang perlu
diperhatikan adalah letak koordinat objek-objek 2D. Dalam membuat segitiga 2D ini membutuhkan
setidak-tidaknya 2 buah bentuk objek abstrak yaitu objek segitiga dan objek segiempat. Segitiga dibuat
dengan menggunakan pernyataan seperti berikut
glBegin(GL_TRIANGLES);
glVertex3f( 0.14f, -0.3f, 0.0f);
glVertex3f( 0.3f, -0.12f, 0.0f);
glVertex3f( 0.1f, -0.1f, 0.0f);
glEnd();
Membuat segitiga dengan objek yang merupakan objek primitif. Yaitu dinyatakn
dengan glBegin(GL_TRIANGLE). Kemudian membuat titik sudut segitiga dinyatakan
dengan glVertex3f(x,y,z). Karena segitiga memiliki 3 titik sudut maka
membuat glVertex3f(x,y,z) sebanyak 3, untuk titik nomor 1, 2, dan 3.
Kemudian harus membuat glEnd() untuk menunjukkan akhir dari pernyataan pembuatan segitiga 2D.
Untuk membuat bintang membutuhkan 5 segitiga yang memiliki koordinat berbeda sehingga membentuk
sebuah bintang. PenambahanglBegin(GL_TRIANGLES) ditambahkan sebelum glEnd() dengan
koordinat yang berbeda-beda yang dapat ditentukan sendiri sehingga hanya ada satu buah glEnd()dalam 5
segitiga.
Kemudian diberikan dengan segi empat atau poligon agar kotak hitam yang berada di tengah hilang. Bentuk
pernyataannya adalah seperti berikut
glBegin(GL_QUADS); glVertex3f( 0.1f, -0.1f, 0.0f);
glVertex3f( -0.1f, -0.1f, 0.0f);
glVertex3f( -0.16f, -0.4f, 0.0f);
glVertex3f( 0.16f, -0.4f, 0.0f);
glEnd();
glBegin(GL_QUADS) menunjukkan dimulainya membuat sebuah segi empat. Karena segi empat memiliki 4 titik sudut
maka diberikan 4 titik kordinat untuk membuat 4 titik sudut tersebut. Koordinat dapat ditentukan sesuai
keinginan.glEnd() menunjukkan akhir dari segi empat.
Source Code :
#include <stdlib.h>
#include <GL/glut.h>
void renderScene(void) {
glClear(GL_COLOR_BUFFER_BIT);
glPointSize(5);
glBegin(GL_POINTS);
glVertex3f(-0.2,-0.1,0.0);
glPointSize(5);
glBegin(GL_POINTS);
glVertex3f(-0.25,-0.55,0.0);
glPointSize(5);
glBegin(GL_POINTS);
glVertex3f(-0.8,-0.15,0.0);
glPointSize(5);
glBegin(GL_POINTS);
glVertex3f(-0.5,0.1,0.0);
glPointSize(5);
glBegin(GL_POINTS);
glVertex3f(-0.7,-0.56,0.0);
glEnd();
glTranslatef(-0.5f,0.0f,0.0f);
glBegin(GL_TRIANGLES);
glVertex3f( 0.0f, 0.1f, 0.0f);
glVertex3f( -0.1f,-0.1f, 0.0f);
glVertex3f( 0.1f,-0.1f, 0.0f);
glTranslatef(-0.5f,0.0f,0.0f);
glBegin(GL_TRIANGLES);
glVertex3f( -0.1f, -0.1f, 0.0f);
glVertex3f( -0.3f,-0.12f, 0.0f);
glVertex3f( -0.1f,-0.36f, 0.0f);
glTranslatef(-0.5f,0.0f,0.0f);
glBegin(GL_TRIANGLES);
© 2016 Jurusan Teknik Elektro FT UM 10
Modul Praktikum Grafika Komputer Revisi 02 - Ahmad Mursyidun Nidhom
glTranslatef(-0.5f,0.0f,0.0f);
glBegin(GL_TRIANGLES);
glVertex3f( 0.0f, -0.4f, 0.0f);
glVertex3f( 0.22f,-0.55f, 0.0f);
glVertex3f( 0.14f,-0.3f, 0.0f);
glTranslatef(-0.5f,0.0f,0.0f);
glBegin(GL_TRIANGLES);
glVertex3f( 0.14f, -0.3f, 0.0f);
glVertex3f( 0.3f, -0.12f, 0.0f);
glVertex3f( 0.1f, -0.1f, 0.0f);
glEnd();
glBegin(GL_QUADS);
glVertex3f( 0.1f, -0.1f, 0.0f);
glVertex3f( -0.1f, -0.1f, 0.0f);
glVertex3f( -0.16f, -0.4f, 0.0f);
glVertex3f( 0.16f, -0.4f, 0.0f);
glEnd();
glFlush();
}
void init()
{
glClearColor(0.69, 0.89, 1.0, 1.0);
glColor3f(1.0, 1.0, 1.0);
glMatrixMode(GL_PROJECTION);
glLoadIdentity();
glOrtho(-1.0, 1.0, -1.0, 1.0, -1.0, 1.0);
}
void mydisplay()
{
glClear(GL_COLOR_BUFFER_BIT);
//head
glBegin(GL_POLYGON);
glColor3f(1.0, 0.92, 0.80); //make the color Blanced Almond
glVertex2f(-0.2, 0.9);
glVertex2f(-0.2, 0.6);
glVertex2f(0.2, 0.6);
glVertex2f(0.2, 0.9);
glEnd();
//eye left
glBegin(GL_POLYGON);
glColor3f(0.0, 0.0, 0.0); //make the color Black
glVertex2f(-0.15, 0.82);
glVertex2f(-0.15, 0.75);
glVertex2f(-0.05, 0.75);
glVertex2f(-0.05, 0.82);
glEnd();
//eye right
glBegin(GL_POLYGON);
glColor3f(0.0, 0.0, 0.0); //make the color Black
glVertex2f(0.15, 0.82);
glVertex2f(0.15, 0.75);
glVertex2f(0.05, 0.75);
glVertex2f(0.05, 0.82);
glEnd();
//alis kanan
glBegin(GL_POLYGON);
glColor3f(0.0, 0.0, 0.0); //make the color Black
glVertex2f(0.15, 0.85);
glVertex2f(0.15, 0.87);
glVertex2f(0.05, 0.87);
glVertex2f(0.05, 0.85);
glEnd();
//alis kiri
glBegin(GL_POLYGON);
glColor3f(0.0, 0.0, 0.0); //make the color Black
glVertex2f(-0.15, 0.85);
glVertex2f(-0.15, 0.87);
glVertex2f(-0.05, 0.87);
glVertex2f(-0.05, 0.85);
glEnd();
//bibir senyum
glBegin(GL_POLYGON);
glColor3f(0.69, 0.19, 0.38); //make the color Maroon
glVertex2f(-0.05, 0.65);
glVertex2f(-0.05, 0.67);
glVertex2f(0.05, 0.67);
glVertex2f(0.05, 0.65);
glEnd();
glBegin(GL_POLYGON);
glColor3f(0.69, 0.19, 0.38); //make the color Maroon
glVertex2f(-0.05, 0.65);
glVertex2f(-0.05, 0.70);
glVertex2f(-0.04, 0.70);
glVertex2f(-0.04, 0.65);
glEnd();
glBegin(GL_POLYGON);
glColor3f(0.69, 0.19, 0.38); //make the color Maroon
glVertex2f(0.05, 0.65);
glVertex2f(0.05, 0.70);
glVertex2f(0.06, 0.70);
glVertex2f(0.06, 0.65);
glEnd();
//telinga kanan
glBegin(GL_POLYGON);
glColor3f(0.55, 0.55, 0.51); //make the color Azure
glVertex2f(0.20, 0.80);
glVertex2f(0.20, 0.70);
glVertex2f(0.23, 0.70);
glVertex2f(0.23, 0.80);
glEnd();
//telinga kiri
glBegin(GL_POLYGON);
glColor3f(0.55, 0.55, 0.51); //make the color Azure
glVertex2f(-0.20, 0.80);
glVertex2f(-0.20, 0.70);
glVertex2f(-0.23, 0.70);
glVertex2f(-0.23, 0.80);
glEnd();
//leher
glBegin(GL_POLYGON);
glColor3f(0.55, 0.55, 0.51); //make the color Azure
glVertex2f(-0.07, 0.60);
glVertex2f(-0.07, 0.55);
glVertex2f(0.07, 0.55);
glVertex2f(0.07, 0.60);
glEnd();
//badan
glBegin(GL_POLYGON);
glColor3f(0.00, 0.00, 0.55); //make the color Dark Blue
glVertex2f(-0.20, 0.10);
glVertex2f(-0.20, 0.55);
glVertex2f(0.20, 0.55);
glVertex2f(0.20, 0.10);
glEnd();
//sendi kiri
glBegin(GL_POLYGON);
glColor3f(0.55, 0.55, 0.51); //make the color Azure
© 2016 Jurusan Teknik Elektro FT UM 13
Modul Praktikum Grafika Komputer Revisi 02 - Ahmad Mursyidun Nidhom
/*glVertex2f(-0.30, 0.55);
glVertex2f(-0.30, 0.50);
glVertex2f(-0.20, 0.50);
glVertex2f(-0.20, 0.55);*/
glVertex2f(-0.30, 0.55);
glVertex2f(-0.30, 0.42);
glVertex2f(-0.20, 0.42);
glVertex2f(-0.20, 0.55);
glEnd();
//sendi kanan
glBegin(GL_POLYGON);
glColor3f(0.55, 0.55, 0.51); //make the color Azure
/*glVertex2f(0.30, 0.55);
glVertex2f(0.30, 0.50);
glVertex2f(0.20, 0.50);
glVertex2f(0.20, 0.55);*/
glVertex2f(0.30, 0.55);
glVertex2f(0.30, 0.42);
glVertex2f(0.20, 0.42);
glVertex2f(0.20, 0.55);
glEnd();
//lengan kiri
glBegin(GL_POLYGON);
glColor3f(0.55, 0.00, 0.00); //make the color Dark red
/*glVertex2f(-0.30, 0.50);
glVertex2f(-0.40, 0.30);
glVertex2f(-0.30, 0.30);
glVertex2f(-0.20, 0.45);
glVertex2f(-0.20, 0.50);*/
glVertex2f(-0.30, 0.55);
glVertex2f(-0.30, 0.45);
glVertex2f(-0.50, 0.45);
glVertex2f(-0.50, 0.55);
glEnd();
glBegin(GL_POLYGON);
glColor3f(0.55, 0.00, 0.00); //make the color Dark red
glVertex2f(-0.50, 0.70);
glVertex2f(-0.50, 0.55);
glVertex2f(-0.40, 0.55);
glVertex2f(-0.40, 0.70);
glEnd();
//lengan kanan
glBegin(GL_POLYGON);
glColor3f(0.55, 0.00, 0.00); //make the color Dark red
/*glVertex2f(0.30, 0.50);
glVertex2f(0.40, 0.30);
glVertex2f(0.30, 0.30);
glVertex2f(0.20, 0.45);
glVertex2f(0.20, 0.50);*/
glVertex2f(0.30, 0.55);
glVertex2f(0.30, 0.45);
glVertex2f(0.50, 0.45);
glVertex2f(0.50, 0.55);
glEnd();
glBegin(GL_POLYGON);
glColor3f(0.55, 0.00, 0.00); //make the color Dark red
glVertex2f(0.50, 0.45);
© 2016 Jurusan Teknik Elektro FT UM 14
Modul Praktikum Grafika Komputer Revisi 02 - Ahmad Mursyidun Nidhom
glVertex2f(0.50, 0.20);
glVertex2f(0.40, 0.20);
glVertex2f(0.40, 0.45);
glEnd();
//telapak kiri
glBegin(GL_POLYGON);
glColor3f(0.00, 0.55, 0.55); //make the color Dark cyan
glVertex2f(-0.50, 0.70);
glVertex2f(-0.50, 0.77);
glVertex2f(-0.40, 0.77);
glVertex2f(-0.40, 0.70);
glEnd();
//telapak kanan
glBegin(GL_POLYGON);
glColor3f(0.00, 0.55, 0.55); //make the color Royal blue
glVertex2f(0.50, 0.20);
glVertex2f(0.50, 0.27);
glVertex2f(0.40, 0.27);
glVertex2f(0.40, 0.20);
glEnd();
//sabuk
glBegin(GL_POLYGON);
glColor3f(0.20, 0.20, 0.20); //make the color Grey 20
glVertex2f(-0.22, 0.10);
glVertex2f(-0.22, 0.00);
glVertex2f(0.22, 0.00);
glVertex2f(0.22, 0.10);
glEnd();
//paha kiri
glBegin(GL_POLYGON);
glColor3f(0.00, 0.00, 0.55); //make the color Dark Blue
glVertex2f(-0.20, 0.00);
glVertex2f(-0.20, -0.20);
glVertex2f(-0.02, -0.20);
glVertex2f(-0.02, 0.00);
glEnd();
//paha kanan
glBegin(GL_POLYGON);
glColor3f(0.00, 0.00, 0.55); //make the color Dark Blue
glVertex2f(0.20, 0.00);
glVertex2f(0.20, -0.20);
glVertex2f(0.02, -0.20);
glVertex2f(0.02, 0.00);
glEnd();
//kaki kanan
glBegin(GL_POLYGON);
glColor3f(0.20, 0.20, 0.20); //make the color Grey 20
glVertex2f(0.18, -0.20);
glVertex2f(0.18, -0.40);
glVertex2f(0.05, -0.40);
glVertex2f(0.05, -0.20);
glEnd();
//kaki kiri
glBegin(GL_POLYGON);
glColor3f(0.20, 0.20, 0.20); //make the color Grey 20
glVertex2f(-0.18, -0.20);
glVertex2f(-0.18, -0.40);
© 2016 Jurusan Teknik Elektro FT UM 15
Modul Praktikum Grafika Komputer Revisi 02 - Ahmad Mursyidun Nidhom
glVertex2f(-0.05, -0.40);
glVertex2f(-0.05, -0.20);
glEnd();
//spatu kiri
glBegin(GL_POLYGON);
glColor3f(0.55, 0.00, 0.00); //make the color Dark red
glVertex2f(-0.18, -0.40);
glVertex2f(-0.25, -0.43);
glVertex2f(-0.25, -0.50);
glVertex2f(-0.05, -0.50);
glVertex2f(-0.05, -0.40);
glEnd();
//spatu kanan
glBegin(GL_POLYGON);
glColor3f(0.55, 0.00, 0.00); //make the color Dark red
glVertex2f(0.18, -0.40);
glVertex2f(0.25, -0.43);
glVertex2f(0.25, -0.50);
glVertex2f(0.05, -0.50);
glVertex2f(0.05, -0.40);
glEnd();
glFlush();
}
int main(int argc, char** argv)
{
glutInit(&argc, argv);
glutInitDisplayMode(GLUT_SINGLE|GLUT_RGB);
glutInitWindowSize(500,500);
glutInitWindowPosition(0,0);
glutCreateWindow("Simple Robot");
glutDisplayFunc(mydisplay);
init();
glutMainLoop();
}
E. TUGAS PRAKTIKUM
1. Buatlah inisialisasi nama anda menggunakan object 2 Dimensi, minimal 3 karakter, misalnya
eduardo menjadi "EDO" !
2. Buatlah object lingkaran yang memiliki gradasi fill warna !
3. Buatlah bentuk bintang dengan warna pelangi !