Anda di halaman 1dari 56

LAPORAN PRAKTIKUM

KOMPUTER GRAFIK

KELAS
TI4C SORE

NAMA PRAKTIKAN
Mulia Hamonangan
Tambunan

NAMA PENILAI

NOMOR
MAHASISWA

TANGGAL
KUMPUL

TANDA TANGAN
PRAKTIKAN

1214370473

TANGGAL
KOREKSI

NILAI

TANDA TANGAN
DOSEN

Indri Sulistianingsih S.Kom

Universitas Pembangunan Panca Budi


Fakultas Teknik
Jurusan Teknik Informatika
Medan
2014

DAFTAR ISI

DAFTAR ISI............................................................................................................................1
KATA PENGANTAR .............................................................................................................2
BAB I PENDAHULUAN........................................................................................................3
1.1 Umum ....................................................................................................................3
1.2 Latar Belakang .......................................................................................................4
1.3 Tujuan Praktikum...................................................................................................5
BAB II LANDASAN TEORI..................................................................................................6
BAB III PRAKTIKUM............................................................................................................8
3.1 Latihan Fungsi Primitif Drawing ...........................................................................8
a) Garis.............................................................................................................8
b) Persegi .........................................................................................................10
3.2 Latihan Fungsi Dua Dimensi (2D).........................................................................12
a) Diamond.......................................................................................................12
b) Bunga...........................................................................................................14
c) Heptagram....................................................................................................18
d) Rumah Minimalis ........................................................................................20
e) Meja dan Kursi.............................................................................................32
3.3 Latihan Fungsi Tiga Dimensi (3D) ........................................................................37
a) Point to Vector .............................................................................................37
b) The Cube World ..........................................................................................44
BAB IV ANALISA..................................................................................................................51
BAB V PENUTUP ..................................................................................................................52
5.1 Kesimpulan ............................................................................................................52
5.2 Saran ......................................................................................................................52
5.3 Hasil Aplikasi.........................................................................................................53
DAFTAR PUSTAKA ..............................................................................................................55

KATA PENGANTAR

Puji dan Syukur penulis panjatkan kepada Tuhan Yang Maha Esa yang mana karena
rahmat dan hidayahNya penulis dapat menyelesaikan laporan praktikum sesuai dengan waktu
yang telah ditetapkan sebagai syarat tugas akhir praktikum pada mata kuliah Komputer Grafik
dengan judul Laporan Praktikum Komputer Aplikasi Menggunakan OpenGL.

Rasa dan ucapan terima kasih penulis sampaikan kepada pihak yang telah membantu
dalam penyusunan laporan ini, pihak yang penulis ucapkan terima kasih adalah:
1. Ibu Indri Sulistianingsih S.Kom selaku dosen pembimbing mata kuliah komputer
grafik.
2. Semua pihak yang ikut dalam penyusunan laporan praktikum ini.

Demikian laporan praktikum ini dibuat, semoga Tuhan Yang Maha Esa memberikan
balasan yang berlipat ganda kepada semuanya. Demi perbaikan selanjutnya, saran dan kritik
yang membangun akan penulis terima dengan senang hati. Akhirnya, hanya kepada Tuhan Yang
Maha Esa penulis serahkan segalanya mudah-mudahan dapat bermanfaat khususnya bagi penulis
umumnya bagi kita semua.

Medan, 8 Juni 2014

Penulis

BAB I
PENDAHULUAN

1.1 Umum
Grafika Komputer adalah suatu bidang ilmu yang mempelajari bagaimana membangun
grafik(gambar), memanipulasi gambar (visual) secara digital baik 2 dimensi maupun 3 dimensi
yang keliatan nyata menggunakan komputer. Grafika komputer meliputi gambar dan pencitraan
lain yang dihasilkan komputer berbentuk garis, lengkungan, kurva, dan lain sebagainya.
OpenGL (Open Graphics Library) adalah standar API yang dapat digunakan untuk
membuat aplikasi berbasis grafik, baik dua dimensi (2D) maupun tiga dimensi (3D). OpenGL ini
bersifat cross-platform, artinya dapat dijalankan pada berbagai platform sistem operasi yang ada
saat ini.
OpenGL menyediakan set perintah untuk menggambar dan semua penggambaran yang
lebih tinggi tingkatnya harus dilakukan dengan mengambil fungsi dasar dari perintah ini. Maka
dari itu dapat dibuat library itu sendiri di atas program OpenGL yang mempermudah
pemrograman lebih lanjut. Fungsi asli dari OpenGL sendiri selalu diawali dengan gl yang
terdapat pada library opengl32.dll dan file header gl.h. Sedangkan beberapa library yang telah
ditulis untuk menyediakan fungsi-fungsi tambahan pada OpenGL adalah :
1. OpenGL Utility Library (GLU) yang didalamnya terdapat sejumlah rutin yang
menggunakan level bawah dari perintah OpenGL. Rutin-rutin ini mempunyai awalan
glu. Library ini digunakan sebagai bagian dari implementasi OpenGL.
2. OpenGL Extension untuk X-Windows yang menyediakan fungsi untuk menciptakan
OpenGL context dan mengasosiasikannya dengan mesin yang menggunakan XWindows. Rutin-rutin ini mempunyai awalan glx.
3. Auxiliary atau aux library terdapat pada library glaux.lib dan file header glaux.h.
Perintah yang akan digunakan selalu menggunakan awalan aux .
4. OpenGL Utility Toolkit (GLUT) adalah toolkit untuk sistem windows yang ditulis
oleh Mark Kilgard untuk menyembunyikan perintah API sistem windows yang
kompleks.
3

Yang digunakan kali ini adalah GLUT (OpenGL Utility Toolkit), GLUT dipilih karena di
dalamnya terdapat banyak fungsi yang dapat dipakai untuk pembuatan application window.
Disamping itu, windowing pada GLUT juga bersifat independen terhadap sistem operasi,
sehingga tidak perlu repot-repot untuk mengubah kode program jika diterapkan pada sistem
operasi yang berbeda.

1.2 Latar Belakang


Digital Image Processing, Komputer Grafik, Analisis dan Computer telah dikembangkan
dan diaplikasikan dengan mengesankan selama beberapa dekade. Dimana perkembangan
aplikasi-aplikasi yang menggunakan disiplin ilmu telah memimpin teknologi di beberapa bidang
seperti komunikasi digital dan internet, penyiaran (broadcasting), alat kedokteran, sistem
multimedia, biologi, ilmu pengetahuan material, robot dan manufaktur, sistem intelligent
sensing, remote sensing, seni grafik dan proses print. Pertumbuhan yang pesat ini direfleksikan
dengan diterbitkannya paper di jurnal ilmiah internasional setiap tahunnya dan diluncurkannya
buku-buku tentang Pemrosesan Image Digital dan Komputer Grafik.
Grafik komputer dua dimensi (2D) adalah pembuatan objek gambar dengan
menggunakan dua titik sebagai acuannya, yaitu sumbu x dan y. Karakteristik pada grafik
komputer 2D adalah terlihat dari tampilan objeknya yang datar, tidak beruang, berupa struktur
garis dan tampilan frame layarnya terbatas. Dalam grafika komputer, objek 2D memiliki
keunggulan di antaranya adalah kemudahan dalam membuat gambar dan tidak memerlukan
waktu banyak untuk meresource.
Selain itu, objek 2D juga memiliki kelemahan, yaitu gambar terlihat biasa saja, belum
mendukung bentuk-bentuk 3D atau fenomena yang bersifat tiga dimensi, seperti pencahayaan,
bayangan, pantulan, refraksi, dan sebagainya. Macam-macam objek 2D di antaranya, line, circle,
arc, polygon, text, section, rectangle, ellips, donut, star, dan helix.
Riset-riset mengenai cara mempermudah memvisualisasikan idea tau data secara lebih
cepat dan akurat telah banyak dilakukan, khususnya teknologi visualisasi tiga dimensi (3D) telah
mengalami perkembangan yang sangat pesat, misalnya dengan diciptakan teknologi motion
capture, menggerakan objek 3D menjadi lebih mudah, facial capture membuat animasi ekspresi
4

wajah menjadi lebih mudah dan akurat, scanner 3D membuat proses pemodelan objek tiga
dimensi (3D) menjadi lebih cepat dan akurat, software-software authoring tiga dimensi yang
lengkap dengan objek-objek 3D mempercepat desain suatu model objek tiga dimensi.
Namun pada umumnya software-software authoring tiga dimensi tersebut tidak
mendukung representasi visual tiga dimensi (3D), maka perlu proses render yang cukup
memakan waktu sebelum hasil akhirnya bisa dilihat.
Ada 3 file penting dalam OpenGL yang akan digunakan dalam sistem operasi MSWindows, yaitu glut.h, glut32.lib dan glut32.dll. Dimana masing-masing file OpenGL tersebut
akan diinstal kedalam Windows, adapun cara penginstalannya sebagai berikut:

 Letakkan glut.h di direktori include pada Visual C (vc98/include/GL)


 Letakkan glut32.lib di direktori lib pada Visual C (vc98/lib)
 Letakkan glut32.dll di direktori windows/system
OpenGL tersebut harus sudah terinstal kedalam komputer apabila di dalam komputer

tidak terdapat OpenGL maka hasil gambar tidak akan dapat terlihat meskipun listing program
yang telah dibuat didalam C++ telah sukses (jalan). Oleh karena itu OpenGL tersebut harus
sudah terinstal agar hasil gambar tersebut dapat terlihat.

1.3 Tujuan Praktikum


1. Membuat objek primitive drawing
2. Mengembangkan beberapa objek dasar menjadi objek 2D hingga 3D
3. Membuat objek dua dimensi (2D)
4. Membuat objek tiga dimensi (3D)

BAB II
LANDASAN TEORI

2.1 Landasan Teori


Grafika Komputer adalah suatu bidang ilmu yang mempelajari bagaimana membangun
grafik(gambar), memanipulasi gambar (visual) secara digital baik 2 dimensi maupun 3 dimensi
yang keliatan nyata menggunakan komputer. Grafika komputer meliputi gambar dan pencitraan
lain yang dihasilkan komputer berbentuk garis, lengkungan, ku rva, dan lain sebagainya.
Bagian dari grafika komputer meliputi:
Geometri: mempelajari cara menggambar permukaan bidang
Animasi: mempelajari cara menggambarkan dan memanipulasi gerakan
Rendering: mempelajari algoritma untuk menampilkan efek cahaya
Citra (Imaging): mempelajari cara pengambilan dan penyuntingan gambar

Salah satu bidang grafika komputer yang sangat terkenal adalah design grafis. Beberapa
penerapan grafika komputer sebagai berikut:
1) Entertainment
Misalnya dalam pembuatan animasi pada film Terminator 2 dan Titanic
merupakan contoh film non animasi yang memanfaatkan efek-efek dari grafika
komputer yang sangat canggih.
2) Visualisasi Proses
Misalnya menggambarkan layout kinerja proses public atau proses-proses yang dalam
modul saja.
3) Visualisasi Hasil Penelitian
Visualisasi hasil penelitian ini seperti menggambar perfomers grafik perubahan
bahkan grafik model hasil implementasi program.

4) Image Prosesi

Image Prosesi digunakan sebagai algoritma identifikasi seperti yang dilakukan pada
kepolisian untuk menggambar wajah seseorang dan identifikasi seseorang.
5) GIS ( Geografic Information Sytem).

Adapun macam-macam gambar komputer yang mana disetiap jenisnya memiliki sturktur
yang berbeda sehingga disetiap gambar memiliki penggunaan atau pemanfaatan pada grafika
komputer yang berbeda, yakni:
a.

Raster Image
Raster Image adalah gambar yang strukturnya berupa matrik, dimana setiap titik
(x,y) mempunyai nilai berupa warna sesuai dengan model warna yang digunakan
seperti RGB/CYMK. File dengan ekstensi (.BMP), (.Gif), (.Tiff), (.JPG), (.PNG) itu
merupakan contoh dari RASTER IMAGE. Model gambar semacam ini digunakan
emage processing.

b.

Vektor Image
Vektor image adalah gambar yang strukturnya berupa vector gambar yang dibuat
menggunakan AutoCad / maya atau gambar-gambar pada GIS merupakan contoh
dari Vektor Image. Model gambar semacam ini digunakan dalam grafika komputer
dan GIS.

BAB III
PRAKTIKUM

3.1 Latihan Fungsi dari Primitive drawing


Beberapa objek yang dihasilkan dari fungsi primitive drawing, sebagai berikut:
a) Garis

List Programnya:
#include <GL/glut.h>
void userdraw()
{
static int tick=0;
void drawline(int x1,int x2, int y1,int
y2); glBegin(GL_LINES);
glVertex2i(100,100);
glVertex2i(200,150);
glEnd();
8

}
void display(void)
{
//clear screen
glClear(GL_COLOR_BUFFER_BIT);
userdraw();
glutSwapBuffers();
}
int main(int argc, char **argv)
{
glutInit(&argc,argv);//Inisialisasi Toolkit
glutInitDisplayMode(GLUT_DOUBLE|GLUT_RGB);
glutInitWindowPosition(100,100);
glutInitWindowSize(640,480);
glutCreateWindow("GARIS");
glClearColor(0.0,0.0,0.0,0.0); gluOrtho2D(0.,640.,240.,240.); glutIdleFunc(display);
glutDisplayFunc(display);
glutMainLoop();
return 0;
}

b) Persegi

List programnya:
#include <GL/glut.h>

void userdraw()
{
static int tick=0;
void drawDot(int x, int y);
glBegin(GL_LINES);
glVertex2i(50,50);
glVertex2i(150,50);
glVertex2i(150,50);
glVertex2i(150,150);
glVertex2i(50,50);
glVertex2i(50,150);
glVertex2i(50,150);
glVertex2i(150,150);

10

glEnd();
}
void display(void)
{
//clear screen
glClear(GL_COLOR_BUFFER_BIT);
userdraw();
glutSwapBuffers();
}
int main(int argc, char **argv)
{
glutInit(&argc,argv);//Inisialisasi Toolkit
glutInitDisplayMode(GLUT_DOUBLE|GLUT_RGB);
glutInitWindowPosition(100,100);
glutInitWindowSize(640,480);
glutCreateWindow("PERSEGI");
glClearColor(0.0,0.0,0.0,0.0); gluOrtho2D(0.,640.,240.,240.); glutIdleFunc(display);
glutDisplayFunc(display);
glutMainLoop();
return 0;
}

11

3.2 Latihan Fungsi dari Dua Dimensi (2D)


Grafik Dua Dimensi adalah merupakan sekumpulan titik-titik dua dimensi yang
dihubungkan dengan garis lurus baik berupa Polyline, polygon atau kurva.
Berikut beberapa objek dua dimensi (2D), yakni:
a). Diamond

List Programnya:
#include <GL/glut.h>
void userdraw()
{
static int tick=0;
void drawDot(int x, int y);
glBegin(GL_LINES);
glVertex2i(100,250);
glVertex2i(300,250);

glVertex2i(100,250);
glVertex2i(200,200);

glVertex2i(200,200);
glVertex2i(300,250);

glVertex2i(100,250);
glVertex2i(200,50);
12

glVertex2i(200,200);
glVertex2i(200,50);

glVertex2i(300,250);
glVertex2i(200,50);

glEnd();
}
void display(void)
{
//BERSIH LAYAR
glClear(GL_COLOR_BUFFER_BIT);
userdraw();
glutSwapBuffers();
}
int main(int argc,char **argv)
{
glutInit(&argc,argv);//Inisialisasi Toolkit
glutInitDisplayMode(GLUT_DOUBLE|GLUT_RGB);
glutInitWindowPosition(100,100);
glutInitWindowSize(640,480);
glutCreateWindow("Diamond");
glClearColor(0.0f,0.0f,1.0f,0.0f);
gluOrtho2D(0.,640.,0.,300.);
glutIdleFunc(display);
glutDisplayFunc(display);
glutMainLoop();
return 0;
}
13

b) Bunga

List Programnya:
#include <GL/glut.h>
#include <math.h>

typedef struct
{
int x,y;
}point2D_t;

typedef struct
{
float r,g,b;
}color_t;

void setColor (color_t col)


{
glColor3f(col.r, col.g, col.b);
}
14

void drawPolygon(point2D_t pnt[],int n)


{
int i;
glBegin(GL_POLYGON);
for (i=0; i<n; i++)
{
glVertex2i(pnt[i].x,pnt[i].y);
}
glEnd();
}

void fillPolygon (point2D_t pnt[], int n, color_t color)


{
int i;
setColor(color);
glBegin(GL_POLYGON);
for (i=0; i<n; i++)
{
glVertex2f(pnt[i].x, pnt[i].y);
}
glEnd();
}

void userdraw()
{

point2D_t batang[4]={{-5,-190},{5,0},{5,0},{5,-190}}; color_t biru ={0,0,1};


fillPolygon(batang,4, biru);
15

drawPolygon(batang,4);

point2D_t pot[4]={{-60,-190},{60,-190},{30,-240},{30,-240}}; color_t hitam ={0,0,0};

fillPolygon(pot,4, hitam);
drawPolygon(pot,4);

point2D_t pot2[6]={{-80,-160},{-50,-160},{-50,-190},{-60,-190},{-60,-170},{80,-170}}; color_t hitam3 ={0,0,0};

fillPolygon(pot2,4, hitam3);
drawPolygon(pot2,4);

point2D_t pot3[6]={{80,-160},{50,-160},{50,-190},{60,-190},{60,170},{80,-170}}; color_t hitam2 ={0,0,0};

fillPolygon(pot3,4, hitam2);
drawPolygon(pot3,4);

static int tick=0;


point2D_t shape[360];
double srad,r;

for(int s=0; s<360; s++)


{
srad =(s+tick)*3.14/360;
r=80*sin(200*srad);
shape [s].x = (float)(r*cos(100*srad));
shape [s].y = (float)(r*sin(100*srad));

16

color_t merah ={1,0,0};


fillPolygon(shape,1, merah);
}
drawPolygon(shape, 360);
}

void display(void)
{
//clear screen
glClear(GL_COLOR_BUFFER_BIT);
userdraw();
glutSwapBuffers();
}
int main(int argc, char **argv)
{
glutInit(&argc,argv);
glutInitDisplayMode(GLUT_DOUBLE|GLUT_RGB);
//posisi layar
glutInitWindowPosition(150,150);
//ukuran layar
glutInitWindowSize(640,480);
//title windows

glutCreateWindow("Bunga
Raflesia"); //warna back layar
glClearColor(1.0,1.0,1.0,0.0);
gluOrtho2D(-300.,400.,-300.,300.);
glutIdleFunc(display);
glutDisplayFunc(display);
glutMainLoop();
return 0;
}
17

c) Heptagram

List Program:
#include <GL/glut.h>
void userdraw()
{
static int tick=0;
void drawDot(int x, int y);
glBegin(GL_LINES);
glVertex2i(100,250);
glVertex2i(300,250);

glVertex2i(300,250);
glVertex2i(250,50);

glVertex2i(250,50);
glVertex2i(50,150);

glVertex2i(50,150);
glVertex2i(200,300);

glVertex2i(200,300);
glVertex2i(350,150);

18

glVertex2i(350,150);
glVertex2i(150,50);

glVertex2i(150,50);
glVertex2i(100,250);

glEnd();
}
void display(void)
{
//BERSIH LAYAR
glClear(GL_COLOR_BUFFER_BIT);
userdraw();
glutSwapBuffers();
}
int main(int argc,char **argv)
{
glutInit(&argc,argv);//Inisialisasi Toolkit
glutInitDisplayMode(GLUT_DOUBLE|GLUT_RGB);
glutInitWindowPosition(100,100);
glutInitWindowSize(640,480);
glutCreateWindow("HEPTAGRAM");
glClearColor(0.0f,0.0f,1.0f,0.0f);
gluOrtho2D(0.,640.,0.,350.);
glutIdleFunc(display);
glutDisplayFunc(display);
glutMainLoop();
return 0;
}
19

d) Rumah Minimalis

List Programnya:
#include <GL/glut.h>
typedef struct
{
int x,y;
}point2D_t;

void polyline(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)

20

{
point2D_t
petak[4]={{100,50},{100,250},{350,250},{350,50}};
polyline(petak,4);

point2D_t
plang[4]={{50,250},{50,270},{400,270},{400,250}};
polyline(plang,4);

point2D_t
plang2[4]={{400,250},{400,270},{700,270},{700,250}};
polyline(plang2,4);

point2D_t
segitiga[3]={{50,270},{220.5,400},{400,270}};
polyline(segitiga,3);

point2D_t
jendela[4]={{120.5,70.5},{120.5,150},{170.5,150},{170.5,70.5}};
polyline(jendela,4);

point2D_t
jendela2[4]={{270.5,70.5},{270.5,150},{320.5,150},{320.5,70.5}};
polyline(jendela2,4);

point2D_t
pintu[4]={{200,50},{200,150},{250,150},{250,50}};
polyline(pintu,4);

point2D_t
pin[4]={{200.5,90.5},{200.5,100},{210,100},{210,90.5}};

21

polyline(pin,4);

point2D_t
daunjendela[4]={{110,60},{120.5,150},{170.5,150},{160.5,60}};
polyline(daunjendela,4);

point2D_t
daunjendela2[4]={{260,60},{270.5,150},{320.5,150},{310.5,60}};
polyline(daunjendela2,4);

point2D_t jalan[4]={{100,250},{170.5,50},{270.5,50},{200,-250}};
polyline(jalan,4);

point2D_t garisjln[4]={{120,-160},{120.5,-150},{220.5,150},{220,-160}}; polyline(garisjln,4);

point2D_t garisjln2[4]={{140.5,-60},{150,-50},{250,50},{240.5,-60}}; polyline(garisjln2,4);

point2D_t
cerobong[4]={{150,340.5},{150,450},{200,450},{200,380.5}};
polyline(cerobong,4);

point2D_t
petak2[4]={{350,50},{350,250},{650,250},{650,50}};
polyline(petak2,4);

point2D_t
22

genteng[6]={{400,250},{400,270},{220.5,400},{520.5,400},{700,270},{700,250}};
polyline(genteng,6);

point2D_t
jendela3[9]={{450,100},{450,170.5},{500,170.5},{500,100},{450,170.5},{450,100},{500,170.
5},{450,100},{500,100}};

polyline(jendela3,9);

point2D_t
jendela4[9]={{500,100},{500,170.5},{550,170.5},{550,100},{500,170.5},{500,100},{550,170.
5},{500,100},{550,100}};

polyline(jendela4,9);

point2D_t
atapjendela[4]={{430.5,160},{430.5,170.5},{500,210},{500,200}};
polyline(atapjendela,4);

point2D_t
atapjendela2[4]={{500,200},{500,210},{570,170},{570,160}};
polyline(atapjendela2,4);

point2D_t pot[4]={{30.5,-120.5},{20.5,-70.5},{70.5,70.5},{60.5,-120.5}}; polyline(pot,4);

point2D_t pot2[4]={{310,-120.5},{300,-70.5},{350,70.5},{340,-120.5}}; polyline(pot2,4);

point2D_t bunga[4]={{30.5,-70.5},{20.5,-50},{30.5,50},{40.5,-70.5}};
23

polyline(bunga,4);

point2D_t bunga2[4]={{40.5,-70.5},{40.5,-20.5},{50.5,20.5},{50.5,-70.5}}; polyline(bunga2,4);

point2D_t bunga3[4]={{50.5,-70.5},{60.5,-50},{70.5,50},{60.5,-70.5}}; polyline(bunga3,4);

point2D_t bunga4[4]={{310,-70.5},{300,-50},{310,50},{320,-70.5}}; polyline(bunga4,4);

point2D_t bunga5[4]={{320,-70.5},{320,-20.5},{330,20.5},{330,-70.5}}; polyline(bunga5,4);

point2D_t bunga6[4]={{330,-70.5},{340,-50},{350,50},{340,-70.5}}; polyline(bunga6,4);

point2D_t pagar[4]={{-250,-250},{-250,-150},{-230,-150},{230,-250}}; polyline(pagar,4);

point2D_t pagar2[4]={{-150,-250},{-150,-150},{-130,-150},{130,-250}}; polyline(pagar2,4);

point2D_t
24

pagar3[4]={{-50,-250},{-50,-150},{-30,-150},{-30,250}}; polyline(pagar3,4);

point2D_t pagar4[4]={{50,-250},{50,-150},{70,150},{70,-250}}; polyline(pagar4,4);

point2D_t pagar5[4]={{250,-250},{250,-150},{270,150},{270,-250}}; polyline(pagar5,4);

point2D_t pagar6[4]={{350,-250},{350,-150},{370,150},{370,-250}}; polyline(pagar6,4);

point2D_t pagar7[4]={{450,-250},{450,-150},{470,150},{470,-250}}; polyline(pagar7,4);

point2D_t pagar8[4]={{550,-250},{550,-150},{570,150},{570,-250}}; polyline(pagar8,4);

point2D_t pagar9[4]={{650,-250},{650,-150},{670,150},{670,-250}}; polyline(pagar9,4);

point2D_t pagar10[4]={{750,-250},{750,-150},{770,150},{770,-250}}; polyline(pagar10,4);

25

point2D_t palang[4]={{-230,-210},{-230,-190},{-150,-190},{150,-210}}; polyline(palang,4);

point2D_t palang2[4]={{-130,-210},{-130,-190},{-50,-190},{50,-210}}; polyline(palang2,4);

point2D_t palang3[4]={{-30,-210},{-30,-190},{50,190},{50,-210}}; polyline(palang3,4);

point2D_t palang4[4]={{270,-210},{270,-190},{350,190},{350,-210}}; polyline(palang4,4);

point2D_t palang5[4]={{370,-210},{370,-190},{450,190},{450,-210}}; polyline(palang5,4);

point2D_t palang6[4]={{470,-210},{470,-190},{550,190},{550,-210}}; polyline(palang6,4);

point2D_t palang7[4]={{570,-210},{570,-190},{650,190},{650,-210}}; polyline(palang7,4);

point2D_t palang8[4]={{670,-210},{670,-190},{750,190},{750,-210}}; polyline(palang8,4);

26

point2D_t tembok[6]={{-230,-190},{-230,-150},{-250,-150},{100,200},{100,100},{190,-190}}; polyline(tembok,6);

point2D_t
tembok2[4]={{650,100},{650,200},{1020,200},{950,100}};
polyline(tembok2,4);

point2D_t tembok3[4]={{770,-250},{770,150},{1020,200},{1020,100}}; polyline(tembok3,4);

point2D_t temboksegitiga[3]={{-230,-230},{-230,-210},{210,-210}}; polyline(temboksegitiga,3);

point2D_t jndlkecil[9]={{130.5,170.5},{130.5,200},{160.5,200},{160.5,170.5},{130.5,200},{130.5,170.5}

,{160.5,200},{130.5,170.5},{160.5,170.5}};

polyline(jndlkecil,9);

point2D_t jndlkecil2[9]={{280.5,170.5},{280.5,200},{310.5,200},{310.5,170.5},{280.5,200},{280.5,170.5

},{310.5,200},{280.5,170.5},{310.5,170.5}};

polyline(jndlkecil2,9);

point2D_t
asesoris[3]={{220.5,290},{210.5,310.5},{220.5,320.5}};
polyline(asesoris,3);

27

point2D_t
asesoris2[3]={{210.5,310.5},{190,320.5},{220.5,320.5}};
polyline(asesoris2,3);

point2D_t
asesoris3[3]={{190,320.5},{210.5,330.5},{220.5,320.5}};
polyline(asesoris3,3);

point2D_t
asesoris4[3]={{210.5,330.5},{220.5,360},{220.5,320.5}};
polyline(asesoris4,3);

point2D_t
asesoris5[3]={{220.5,360},{230.5,330.5},{220.5,320.5}};
polyline(asesoris5,3);

point2D_t
asesoris6[3]={{230.5,330.5},{260,320.5},{220.5,320.5}};
polyline(asesoris6,3);

point2D_t
asesoris7[3]={{260,320.5},{230.5,310.5},{220.5,320.5}};
polyline(asesoris7,3);

point2D_t
asesoris8[3]={{230.5,310.5},{220.5,290},{220.5,320.5}};
polyline(asesoris8,3);

point2D_t tiang[4]={{780,270.5},{780,70.5},{790.5,70.5},{790.5,-270.5}};
polyline(tiang,4);
28

point2D_t
tiangatas[4]={{720.5,50.5},{720.5,60.5},{780,60.5},{780,50.5}};
polyline(tiangatas,4);

point2D_t
gantunganlampu[4]={{740,40.5},{740,50.5},{750,50.5},{750,40.5}};
polyline(gantunganlampu,4);

point2D_t
gantunganlampu2[4]={{720.5,20.5},{740,40.5},{750,40.5},{760.5,20.5}};
polyline(gantunganlampu2,4);

point2D_t
lampu[4]={{740,10.5},{740,20.5},{750,20.5},{750,10.5}};
polyline(lampu,4);

point2D_t
batangpohon[4]={{850,50},{860.5,150},{880.5,150},{900,50}};
polyline(batangpohon,4);

point2D_t
pohon[4]={{790,150},{860.5,220.5},{880.5,220.5},{960,150}};
polyline(pohon,4);

point2D_t
pohon2[4]={{810,220.5},{860.5,300},{880.5,300},{940,220.5}};
polyline(pohon2,4);

point2D_t
pohon3[4]={{820.5,300},{860.5,350},{880.5,350},{920.5,300}};
29

polyline(pohon3,4);

point2D_t
pohon4[3]={{840,350},{870.5,400},{910,350}};
polyline(pohon4,3);

point2D_t
atap[4]={{400,270},{220.5,400},{300,400},{470.5,270}};
polyline(atap,4);

point2D_t
atap2[4]={{470.5,270},{300,400},{370.5,400},{550,270}};
polyline(atap2,4);

point2D_t
atap3[4]={{550,270},{370.5,400},{450,400},{620.5,270}};
polyline(atap3,4);

point2D_t
atap4[4]={{260,370.5},{220.5,400},{520.5,400},{560,370.5}};
polyline(atap4,4);

point2D_t
atap5[4]={{320.5,330},{290.5,350},{590,350},{620.5,330}};
polyline(atap5,4);

point2D_t
atap6[4]={{360,300},{320.5,330},{620.5,330},{660,300}};
polyline(atap6,4);

}
30

void display(void)
{
//clear screen
glClear(GL_COLOR_BUFFER_BIT);
userdraw();
glutSwapBuffers();
}

int main(int argc,char**argv)


{
glutInit(&argc,argv);//lnisialisasi toolkit
glutInitDisplayMode(GLUT_DOUBLE|GLUT_RGB);
glutInitWindowPosition(100,100);
glutInitWindowSize(940,580);
glutCreateWindow("Gambar Garis");
glClearColor(0.0,0.0,0.0,0.0); gluOrtho2D(300.,1240.,-300.,1240.); glutIdleFunc(display);
glutDisplayFunc(display);
glutMainLoop();
return 0;
}

31

e) Meja dan Kursi

List Programnya:
#include<GL/glut.h>
#include<math.h>

typedef struct {
float x,y;
} point2D_t;
typedef struct {

int r,g,b;
} color_t;
void setColor ( color_t col )
{ glColor3f(col.r, col.g, col.b); }
void fillPolygon (point2D_t pnt[], int n, color_t color)
{
int i;
setColor(color);
glBegin(GL_POLYGON);
for (i=0; i<n; ++i)

{
32

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

void drawPolygon(point2D_t pnt[], int n)


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

glEnd();
}

void userdraw() {
static int tic = 0;
point2D_t
meja[4]={{20,80},{60,160},{200,160},{160,80}};
color_t magenta ={1,1,0};
fillPolygon(meja,4, magenta);
//setColor(1,1,0);
drawPolygon(meja,4);

point2D_t
depankiri[4]={{20,20}, {20,80}, {30,80},
{30,20}}; color_t white ={1,1,1};
fillPolygon(depankiri,4, white);
//setColor(1,1,1);
drawPolygon(depankiri,4);

point2D_t
33

depankanan[4]={{150,20},{150,80},{160,80},{160,20}};
color_t green ={0,1,0};
fillPolygon(depankanan,4, green);

drawPolygon(depankanan,4);

point2D_t
belakangkiri[4]={{60,50},{60,80},{70,80},{70,50}};
color_t yellow ={1,1,0};
fillPolygon(belakangkiri,4, yellow);
drawPolygon(belakangkiri,4);

point2D_t
belakangkanan[4]={{190,50},{190,140},{200,160},{200,50}};
color_t red ={1,0,0};
fillPolygon(belakangkanan,4, red);
drawPolygon(belakangkanan,4);

point2D_t
kursi[4]={{220,80},{240,120},{320,120},{300,80}};
color_t birumuda ={0,1,1};
fillPolygon(kursi,4, birumuda);

//setColor(0,0,1);
drawPolygon(kursi,4);

point2D_t
depankiri1[4]={{220,20}, {220,80}, {230,80},
{230,20}}; color_t hijau ={0,1,0};
fillPolygon(depankiri1,4, hijau);
//setColor(0,1,0);
drawPolygon(depankiri1,4);

34

point2D_t
depankanan1[4]={{290,20},{290,80},{300,80},{300,20}};
color_t biru ={0,0,1};
fillPolygon(depankanan1,4, biru);
drawPolygon(depankanan1,4);

point2D_t
belakangkiri1[4]={{240,50},{240,80},{250,80},{250,50}};
color_t kuning ={1,1,0};
fillPolygon(belakangkiri1,4, kuning);
drawPolygon(belakangkiri1,4);

point2D_t
belakangkanan1[4]={{310,50},{310,100},{320,120},{320,50}};
color_t merah ={1,0,0};
fillPolygon(belakangkanan1,4, merah);
drawPolygon(belakangkanan1,4);
point2D_t

kursi1[4]={{300,80},{300,160},{320,200},{320,120}};
color_t putih ={1,1,1};
fillPolygon(kursi1,4, putih);
//setColor(1,1,1);
drawPolygon(kursi1,4);

point2D_t
kursi2[4]={{290,160},{310,200},{320,200},{300,160}};
color_t ungu ={1,0,1};
fillPolygon(kursi2,4, ungu);
//setColor(1,0,1);
drawPolygon(kursi2,4);

35

point2D_t
kursi3[4]={{290,160},{290,80},{300,80},{300,160}};
color_t hijau1 ={0,1,0};
fillPolygon(kursi3,4, hijau1);

//setColor(0,1,0);
drawPolygon(kursi3,4);

}
void display(void)
{ //clear screen
glClear(GL_COLOR_BUFFER_BIT);
userdraw();
glutSwapBuffers();
int main(int argc, char **argv)

}
{

glutInit(&argc,argv);//Inisialisasi Toolkit
glutInitDisplayMode(GLUT_DOUBLE|GLUT_RGB);
glutInitWindowPosition(100,100);
glutInitWindowSize(640,480);
glutCreateWindow("Meja Kursi");
glClearColor(0.0,0.0,0.0,0.0); gluOrtho2D(0.,640.,240.,240.); glutIdleFunc(display);
glutDisplayFunc(display);
glutMainLoop();
return 0;
}

36

3.3 Latihan Fungsi dari Tiga Dimensi (3D)


Grafik Komputer 3D merupakan perkembangan dari grafik 2D. Istilah atau Pengertian
Grafik 3D adalah sebuah gambar,garis,lengkungan,dan sebagainya yang memiliki titik-titik
yang menghubungkan menjadi sebuah bentuk 3D.
Berikut beberapa objek dari grafik tiga dimensi (3D), yakni:
a. Point to Vektor
Dapat dilihat pada gambar di bawah bahwa objek kubus tersebut bergerak:

List Programnya:
#include <GL/glut.h>
#include <math.h>
struct point {
float x,y,z;
};
struct vektor
{ float v[4];
};
struct matriks
{ float
m[4][4]; };
struct face {
int jumtitikons;
int indextitik[40];
37

};
struct objek {
int jumtitik;
point
titik[40]; int
jumsisi; face
sisi[30]; };
matriks mat;
float theta=0.5;

vektor point2vektor(objek balok, int i)


{ vektor vec;
vec.v[0] = balok.titik[i].x;
vec.v[1] = balok.titik[i].y;
vec.v[2] = balok.titik[i].z;
vec.v[3] = 1;

return vec;

}
point vektor2point(vektor vec)
{ point pnt;
pnt.x = vec.v[0];
pnt.y = vec.v[1];
pnt.z = vec.v[2];
return pnt;

}
matriks identitas(void) {
int i,j;
matriks mat;
for (i=0;i<4;i++) {
for (j=0;j<4;j++) {
if (i==j)

38

mat.m[i][j] = 1;
else mat.m[i][j]
= 0;

}
}
return mat;
}
matriks translasi(float dx, float dy, float dz)
{ matriks trans = identitas();
trans.m[0][3] = dx;
trans.m[1][3] = dx;
trans.m[2][3] = dx;
return trans;
}
matriks rotasiX(float theta) {
matriks rotate = identitas();
float cs = cos(theta);

float sn = sin(theta);
rotate.m[1][1] = cs;
rotate.m[1][2] = -sn;
rotate.m[2][1] = sn;
rotate.m[2][2] = cs;
return rotate;
}
matriks rotasiY(float theta) {
matriks rotate = identitas();
float cs = cos(theta);

float sn = sin(theta);
rotate.m[0][0] = cs;
rotate.m[0][2] = sn;
rotate.m[2][0] = -sn;
39

rotate.m[2][2] = cs;
return rotate;

}
matriks rotasiZ(float theta) {
matriks rotate = identitas();
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][2] = cs;
return rotate;
}
vektor kali (matriks mat, vektor b)
{ int i,j;
vektor c;
for (i=0;i<4;i++)
{ c.v[i] = 0;
for (j=0;j<4;j++) {
c.v[i]+= mat.m[i][j] * b.v[j];
}
}
return c;
}
matriks kalim (matriks a, matriks b)
{ int i,j,k;
matriks c;
for (i=0;i<4;i++) {
for (j=0;j<4;j++) {
c.m[i][j] = 0;

40

for (k=0;k<4;k++) {
c.m[i][j]+=a.m[i][k] * b.m[k][j];
}
}
}
return c;
}
matriks titling = kalim(rotasiX(theta),rotasiY(theta)); vektor cross (vektor a, vektor b) {
vektor c;
c.v[0] = a.v[1]*b.v[2]-a.v[2]*b.v[1];
c.v[1] = a.v[2]*b.v[0]-a.v[0]*b.v[2];
c.v[2] = a.v[0]*b.v[1]-a.v[1]*b.v[0];
c.v[3] = 1;

return c;
}
void DrawPolygon(objek obj)
{
int i,j;
float r,g,b;

for(i=0;i<obj.jumsisi;i++)
{
r=1.0f; g=0.0f; b=0.0f;
glBegin(GL_LINE_LOOP);
if (i==0) { r=1.0f; g=0.0f; b=0.0f; }
if (i==1) { r=0.0f; g=1.0f; b=0.0f; }
if (i==2) { r=0.0f; g=0.0f; b=1.0f; }
if (i==3) { r=1.0f; g=1.0f; b=0.0f; }
if (i==4) { r=1.0f; g=0.0f; b=1.0f; }
if (i==5) { r=0.0f; g=1.0f; b=1.0f; }

41

if (i==6) { r=0.5f; g=0.0f; b=1.0f; } if


(i==7) { r=0.5f; g=0.5f; b=0.5f; }
glColor3f(r,g,b);
for(j=0;j<obj.sisi[i].jumtitikons;j++)

{
glVertex3f(obj.titik[obj.sisi[i].indextitik[j]].x,
obj.titik[obj.sisi[i].indextitik[j]].y,
obj.titik[obj.sisi[i].indextitik[j]].z);
}
glEnd();
}
}

void gambarbalok() {
int i;
vektor hasil,HslKali;
point HslTitik;
mat = titling;
objek balok =

{8,{{10,15,30},{30,15,30},{30,15,10},{10,15,10},{10,30,30},{30,30,30},{30,30,10},{10,30,10
}},
6,{{4,{0,1,5,4}},{4,{3,2,6,7}},{4,{0,3,7,4}},{4,{1,2,6,5}},{4,{0,1,2,3}},{4,{4,5,6,7}}}};
for (i=0;i<8;i++) {
hasil = point2vektor(balok,i);
HslKali = kali(mat,hasil);
HslTitik = vektor2point(HslKali);
balok.titik[i] = HslTitik;
}
DrawPolygon(balok);
}
void UserDraw() {
42

glClearColor(1.0f,1.0f,1.0f,0.0f);
glClear(GL_COLOR_BUFFER_BIT);
glRotatef(0.1f,0.0f,1.0f,0.0f);
gambarbalok();
glutSwapBuffers();
}
void main(int argc,char **argv)
{ glutInit(&argc,argv);
glutInitWindowPosition(20,20);
glutInitWindowSize(640,640);
glutInitDisplayMode(GLUT_DOUBLE|GLUT_RGB);
glutCreateWindow("Point To Vektor"); glOrtho(100.0f,100.0f,-100.0f,100.0f,-100.0f,100.0f);
glutIdleFunc(UserDraw);
glutDisplayFunc(UserDraw);
glutMainLoop();
}

43

b. The Cube World

List Programnya:
#include <windows.h>
#include <gl\gl.h>
#include <gl\glut.h>

#include <gl\glu.h> /* GLU extention library */

void init(void);
void display(void);
void keyboard(unsigned char, int, int);
void resize(int, int);
void drawcube(int, int, int);

int is_depth; /* depth testing flag */

int main (int argc, char **argv)


{
glutInit(&argc, argv);
44

glutInitDisplayMode(GLUT_DOUBLE | GLUT_RGB);
glutInitWindowSize(600, 600);
glutInitWindowPosition(40, 40);
glutCreateWindow("The Cube World");
init();
glutDisplayFunc(display);
glutKeyboardFunc(keyboard);

/* this time we're going to keep the aspect ratio


constant by trapping the window resizes */
glutReshapeFunc(resize);

glutMainLoop();
return 0;
}

void init(void)
{
glClearColor(0.0, 0.0, 0.0, 0.0);
glEnable(GL_DEPTH_TEST);
is_depth = 1;
glMatrixMode(GL_MODELVIEW);

void display(void)
{
if (is_depth)
glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);
else
glClear(GL_COLOR_BUFFER_BIT);
/* draw the floor */
45

glBegin(GL_QUADS); glColor3f(0.2f,
0.2f, 0.2f); glVertex3f(-100.0,
0.0, -100.0); glColor3f(0.4f,
0.4f, 0.4f); glVertex3f(-100.0,
0.0, 100.0); glColor3f(0.6f, 0.6f,
0.6f); glVertex3f(100.0, 0.0,
100.0); glColor3f(0.8f, 0.8f,
0.8f); glVertex3f(100.0, 0.0, 100.0);

glEnd();
/* draw 12 cubes with different colors */
drawcube(75, 57, 2);
drawcube(-65, -12, 3);
drawcube(50, -50, 1);
drawcube(-56, 17, 2);
drawcube(67, 12, 3);
drawcube(-87, 32, 1);
drawcube(-26, 75, 2);
drawcube(57, 82, 3);
drawcube(-3, 12, 1);
drawcube(46, 35, 2);
drawcube(37, -2, 3);
glutSwapBuffers();
}

void keyboard(unsigned char key, int x, int y)


{
/* This time the controls are:

"a": move left


"d": move right

46

"w": move forward


"s": move back

"t": toggle depth-testing

*/
switch (key)
{
case 'a':
case 'A':
glTranslatef(5.0, 0.0,
0.0); break;
case 'd':
case 'D':
glTranslatef(-5.0, 0.0,
0.0); break;
case 'w':
case 'W':
glTranslatef(0.0, 0.0,
5.0); break;
case 's':
case 'S':

glTranslatef(0.0, 0.0, 5.0); break;


case 't':
case 'T':

if (is_depth)
{
is_depth = 0;
glDisable(GL_DEPTH_TEST);
}
else
47

{
is_depth = 1;
glEnable(GL_DEPTH_TEST);

}
}
display();
}

void resize(int width, int height)


{
if (height == 0) height = 1;

glMatrixMode(GL_PROJECTION);
glLoadIdentity();

/* note we divide our width by our height to get the aspect ratio
*/ gluPerspective(45.0, width / height, 1.0, 400.0);

/* set initial position */


glTranslatef(0.0, -5.0, -150.0);

glMatrixMode(GL_MODELVIEW);
}

void drawcube(int x_offset, int z_offset, int color)


{
/* this function draws a cube centerd at (x_offset, z_offset)
x and z _big are the back and rightmost points, x and z _small are
the front and leftmost points */
float x_big = (float)x_offset + 5;
float z_big = (float)z_offset + 5;

48

float x_small = (float)x_offset 5; float z_small = (float)z_offset 5; switch(color)


{
case 1:
glColor3f(1.0,1.0,0.0);
break;
case 2:
glColor3f(0.0,1.0,0.0);
break;
case 3:
glColor3f(0.0,1.0,0.0);
break;
}
glBegin(GL_QUADS);
glVertex3f(x_small,10.0,z_big); /* front */
glVertex3f(x_small,0.0,z_big);
glVertex3f(x_big,0.0,z_big);
glVertex3f(x_big,10.0,z_big);

glVertex3f(x_big,10.0,z_small); /* back
*/ glVertex3f(x_big,0.0,z_small);
glVertex3f(x_small,0.0,z_small);
glVertex3f(x_small,10.0,z_small);

glVertex3f(x_big,10.0,z_big); /* right */
glVertex3f(x_big,0.0,z_big);
glVertex3f(x_big,0.0,z_small);
glVertex3f(x_big,10.0,z_small);

glVertex3f(x_small,10.0,z_small); /* left */
49

glVertex3f(x_small,0.0,z_small);
glVertex3f(x_small,0.0,z_big);
glVertex3f(x_small,10.0,z_big);

glVertex3f(x_small,10.0,z_big); /* top */
glVertex3f(x_big,10.0,z_big);
glVertex3f(x_big,10.0,z_small);
glVertex3f(x_small,10.0,z_small);

glVertex3f(x_small,0.0,z_small); /* bottom */
glVertex3f(x_big,0.0,z_small);
glVertex3f(x_big,0.0,z_big);
glVertex3f(x_small,0.0,z_big);
glEnd();
}

50

BAB IV
ANALISA

Dari objek-objek atau gambar di atas yang telah dibuat, dapat dilihat perkembangannya
tahap demi tahap dari hasil objek yang tahap pertama memakai fungsi primitive drawing hanya
berupa garis-garis yang membentuk gambar sangat sederhana.
Pada tahap kedua yaitu objek yang memakai fungsi dua dimensi (2D) dapat dilihat
perkembangannya dimana kumpulan titik, garis, gambar yang memakai titik kordinat sumbu x,y
dapat membentuk suatu objek yang indah seperti meja, kursi, bunga, rumah minimalis.
Pada tahap akhir yaitu objek yang memakai fungsi tiga dimensi (3D) dapat dilihat
perkembangannya dimana objek primitive drawing dan dua dimensi (2D) yang hanya memakai 2
titik kordinat yaitu x dan y digunakan juga namun pada objek tiga dimensi (3D) ini pemakaian
fungsinya memakai 3 titik kordinat yaitu sumbu x,y dan z sehingga objek memiliki ruang dan
gambar tampak lebih hidup, bahkan objek dapat bergerak seperti berputar, berpindah tempat,
ataupun keduanya dapat juga terjadi pada waktu yang bersamaan saat program dijalankan.

51

BAB V
PENUTUP

5.1 Kesimpulan
Dalam pembuatan gambar-gambar diatas dengan menggunakan bahasa pemograman
Visual C++, selain menggunakan keahlian dalam menguasai bahasa pemograman Visual C++,
membutuhkan ketelitian dan kesabaran dalam pembuatan program-program gambar diatas
agar program tersebut tidak terdapat kesalahan (error) sehingga program tersebut dapat di
jalankan (Execute) dan gambar tersebut dapat di tampilkan hasilnya.

5.2 Saran
Adapun saran yang dapat penulis sampaikan ialah agar pembelajaran komputer grafik
dalam pembuatan gambar 2D dan 3D menggunakan bahasa pemograman Visual C++ ini dapat
di implementasikan menjadi Tugas Akhir nantinya.

52

5.3 Hasil Aplikasi


Primitif Drawing

Dua Dimensi (2D)

53

Tiga Dimensi (3D)

54

DAFTAR PUSTAKA

http://informasi-inofatif.blogspot.com/2012/05/praktikum-grafika-komputer.html
http://ejournal.unsrat.ac.id/index.php/elekdankom/article/download/595/467

http://daraluvheechul.blogspot.com/2010/02/grafik-2d-3d.html

55