• Tidak ada hasil yang ditemukan

LAPORAN PRAKTIKUM KOMPUTER GRAFIK

N/A
N/A
Protected

Academic year: 2021

Membagikan "LAPORAN PRAKTIKUM KOMPUTER GRAFIK"

Copied!
56
0
0

Teks penuh

(1)

LAPORAN PRAKTIKUM

KOMPUTER GRAFIK

KELAS

TI4C SORE

NAMA PRAKTIKAN NOMOR TANGGAL TANDA TANGAN

MAHASISWA KUMPUL PRAKTIKAN

Mulia Hamonangan

1214370473 Tambunan

NAMA PENILAI TANGGAL NILAI TANDA TANGAN

KOREKSI DOSEN

Indri Sulistianingsih S.Kom

Universitas Pembangunan Panca Budi

Fakultas Teknik

Jurusan Teknik Informatika

Medan

(2)

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

(3)

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

(4)

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 X-Windows. 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.

(5)

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

(6)

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 MS-Windows, 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)

(7)

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.

(8)

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.

(9)

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();

(10)

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

(11)

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

(12)

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

(13)

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

(14)

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

(15)

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

(16)

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

(17)

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

(18)

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

(19)

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

(20)

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

(21)

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)

(22)

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

(23)

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

(24)

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

(25)

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

(26)

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

(27)

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

(28)

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

(29)

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

(30)

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

(31)

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

(32)

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

(33)

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)

(34)

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

(35)

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

(36)

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

(37)

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

(38)

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

(39)

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

(40)

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;

(41)

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;

(42)

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

(43)

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() {

(44)

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();

(45)

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) {

(46)

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 */

(47)

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

(48)

"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

(49)

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

(50)

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 */

(51)

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

(52)

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.

(53)

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.

(54)

5.3 Hasil Aplikasi

Primitif Drawing

(55)
(56)

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

Gambar

Grafik Dua Dimensi adalah merupakan sekumpulan titik-titik dua dimensi yang  dihubungkan dengan garis lurus baik berupa Polyline, polygon atau kurva.
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.

Referensi

Dokumen terkait

Fungsi yang digunakan dalam memvisualisasikan data dalam bentuk permukaan tiga dimensi disebut fungsi mesh.. Fungsi ini sering disebut sebagai grafik jala yang terdapat

Pada penelitian yang dilakukan, telah dikembangkan aplikasi Augmented Reality untuk memvisualisasikan drawing 2D ke dalam bentuk objek 3D dengan marker based

Paper ini menjelaskan rekonstruksi obyek tiga dimensi (3D) dari kumpulan gambar citra dua dimensi (2D) yang diambil menggunakan sebuah kamera dari posisi berbeda.Tahapan

Informasi kontur yang terdapat pada peta kontur dapat digunakan untuk membuat model grafik, peta dua dimensi (2D), dan tiga dimensi (3D), sehingga

Akan tetapi untuk menggambar grafik fungsi yang rumus fungsinya cukup kompleks (misalnya fungsi implisit, fungsi dalam bentuk parameter, grafik tiga dimensi, dsb) akan

Hasil dari penyelesaian fungsi radial, polar, dan fungsi gelombang diplotkan ke dalam grafik yaitu 2D untuk grafik 2 dimensi dan 3D untuk grafik 3 dimensi

Untuk pembuatan program tersebut diperlukan file freeglut yang telah dikonversi dengan aplikasi yang akan kita gunakan, yang bertujuan untuk memudahkan dalam pembuatan proses program

Analisis Dalam program robot 2D dan 3D pada praktikum modul1 kali ini kita diarahkan untuk membuat sudut dengan orientasi berbeda-beda, sebelum itu kita diwajibkan meng-install