LAPORAN
KOMPUTER GRAFIK
Nama Praktikan Nomor
Mahasiswa
Tanggal
Kumpul
Tanda tangan
Pratikan
Muhammad Ridwan 1214370383
Nama Penilai Tanggal
Koreksi Nilai
Tanda tangan
Dosen
Indri Sulistianingsih, S.Kom
UNIVERSITAS PEMBANGUNAN PANCABUDI MEDAN
FAKULTAS TEKNIK
SISTEM KOMPUTER
2014
KELAS TI
4 SORE B
i
Daftar Isi Daftar Isi........................................................................................................... i
Kata Pengantar ................................................................................................. iii
Bab 1 Pendahuluan
1.1 Latar Belakang .................................................................................... 1
1.2 Tujuan ................................................................................................... 1
Bab 2 Dasar Teori
2.1 Pengertian Grafika Komputer .............................................................. 2
2.2 Pengertian OpenGL .............................................................................. 2
2.3 Pengertian Polyline .............................................................................. 5
2.4 Pengertian Polygon .............................................................................. 5
2.5 Pewarnaan ............................................................................................ 5
Bab 3 Primitive Drawing
3.1 Membuat Titik ...................................................................................... 6
3.2 Membuat Garis ..................................................................................... 8
3.3 Membuat Polyline ................................................................................ 9
3.4 Membuat Polygon ................................................................................ 11
3.5 Membuat Jajar Genjang ....................................................................... 13
3.6 Membuat Prisma .................................................................................. 15
3.7 Ujian Tengah Semester ........................................................................ 16
Bab 4 Object 2 Dimensi
4.1 Dasar Teori .......................................................................................... 19
4.2 Tujuan Praktikum ................................................................................. 19
4.3 Membuat Bunga Pot ............................................................................ 20
4.4 Membuat Monas ................................................................................. 24
Bab 5 Object 3 Dimensi
5.1 Dasar Teori .......................................................................................... 30
5.2 Tujuan Praktikum ................................................................................ 30
5.3 Simpel Kubus 3D ................................................................................ 30
5.4 Kubus 3D Point To Vektor .................................................................. 34
5.5 Star 3D .................................................................................................. 40
ii
Bab 6 Analisa
6.1 Analisa Pengenalan .............................................................................. 47
6.2 Analisa Primitive Drawing ................................................................... 47
6.3 Analisa 2D ............................................................................................ 47
6.4 Analisa 3D ............................................................................................ 47
Bab 7 Kesimpulan
7.1 Kesimpulan .......................................................................................... 48
7.2 Saran .................................................................................................... 48
iii
KATA PENGANTAR
Puji dan syukur saya panjatkan kehadirat Tuhan Yang Maha Esa. Karena
atas berkat rahmatNya saya dapat menyelesaikan praktikum serta laporan akhir
Komputer Grafik.
Adapun isi dari laporan akhir ini adalah kumpulan dari setiap laporan
mingguan selama praktikum berlangsung. Laporan ini merupakan syarat untuk
dapat mengikuti ujian dan merupakan syarat dalam mengontrak mata kuliah
Komputer Grafik.
Laporan ini masih sangat jauh dari kesempurnaan oleh karena itu kritik
serta saran yang membangun masih saya harapkan untuk penyempurnaan Laporan
praktikum ini.
Sebagai manusia biasa saya merasa memiliki banyak kesalahan, oleh
karena itu saya mohon maaf sebesar besarnya untuk kelancaran penyelesaian
laporan ini.
Atas perhatian dari semua pihak yang membantu penulisan ini saya
ucapkan terimakasih. Semoga Laporan ini dapat dipergunakan seperlunya.
Binjai, 11 Juni 2014
Muhammad Ridwan
1214370383
1
BAB 1
PENDAHULUAN
1.1 Latar Belakang
Grafika komputer akhir akhir ini mulai dirasa sangat penting dan
mencakup hampir semua bidang kehidupan seiring dengan semakin
pentingnya sistem komputer dalam berbagai kegiatan. Seperti halnya lukisan,
animasi atau kartun dan sketsa gambar manusia lainnya, grafika komputer
sudah mulai dan banyak digunakan untuk keperluan keperluan:
1. Seni, entertainment dan publishing seperti produksi film, animasi, special
efek, game komputer, web browsing, buku, slide dan majalah.
2. Image processing atau pengolahan citra digital, yang dalam hal ini grafika
komputer dapat digunakan misalnya seperti dalam coding (pemindahan
data citra menjadi data vector) yang banyak digunakan untuk keperluan
GIS.
3. Menampilkan simulasi, yang dalam hal ini grafik yang dihasilakan berupa
grafik data atau grafik visual proses. Seperti dalam simulasi perempatan
jalan, grafika komputer digunakan untuk melakukan visualisasi secara
detail bagaimana kedatangan mobil, pengaturan lampu lalu lintas, dan
semua item didalamnya.
4. CAD (Computer Aidet Desaign). Satu program CAD yang paling banyak
dalam dunia teknik, yaitu AUTOCAD, dimana grafik komputer dapat
menunjukkan rancangan atau desain pola atau desain layout.
5. Visualisasi analisis sains, yang dalam hal ini grafik komputer dapat
digunakan sebagai sarana untuk menunjukkan proses ilmiah.
1.2 Tujuan
a) Mengenal dan mulai menulis program untuk membuat gambar
b) Mampu Membuat Gambar 2D dan 3D
c) Mempelajari dasar-dasar pembuatan grafik dengan OpenGL
d) Mengembangkan beberapa perangkat dasar untuk menggambar
line, polyline dan polygon.
2
BAB II
DASAR TEORI
2.1 Pengertian Grafika Komputer
Grafika komputer adalah suatu bidang ilmu yang mempelajari
bagaimana membangun grafik (gambar) baik 2D maupun 3D yang kelihatan
nyata menggunakan komputer.
Salah satu bidang grafika komputer yang sangat terkenal adalah
Desain Grafis.Teknik teknik yang dipelajari dalam grafika computer adalah
teknik teknik bagaimana membuat atau menciptakan gambar dengan
menggunakan computer.Ada perbedaan yang sangat mendasar antara photo
dan gambar, dimana pada photo semua detail objek terlihat sedangkan gambar
(baik itu gambar manusia atau gambar computer) tidak dapat memperlihatkan
semua detail yang ada tetapi hanya detail yang dianggap penting dalam
menunjukkan pola suatu gambar.
Grafika computer merupakan perangkat (tool) dasar yang digunakan
untuk membuat gambar dengan computer.Dengan menggunakan perangkat
ini, penciptaan gambar dapat dilakukan, bahkan dimudahkan, dengan
menggunakan computer. Ada beberapa program yang sangat kompleks guna
membuat gambar computer, antara lain Microsoft Photo Editor, Adobe
Photoshop, Maya, Autocad, 3D space Max, dan lain lain.
Untuk membuat program program diatas dapat digunakan berbagai
macam bahasa pemrograman dengan library grafis yang sesuai.Dalam laporan
ini digunakan bahasa pemrograman C++, karena dalam system operasi
Microsoft Windows maka menggunakan Microsoft Visual C++ dengan library
grafik yang digunakan adalah OpenGL.
2.2 Pegertian OpenGL
OpenGL adalah library yang khusus menyediakan perangkat perangkat
pembuatan grafik. OpenGL bekerja pada bahasa C. Dan berikut adalah cara
menginstall OpenGL pada Microsoft Windows:
1. Ada tiga file yang penting dalam OpenGL yang akan digunakan dalam
operasi MS-Windows, yaitu glut.h, glut32.lib dan glut.dll.
3
2. Letakkan glut.h di direktori include pada Visual C (vc98/include/GL).
3. Letakkan glut32.lib di direktori lib pada Visual C (vc98/lib).
4. Letakkan glut32.dll di direktori windows/system.
Struktur Dasar Program Grafik Dengan OpenGL
#include
void userdraw()
{ static int tick=0;
//program grafik ditulis disini
}
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("Drawing by Nita");
glClearColor(0.0,0.0,0.0,0.0);
gluOrtho2D(0.,640.,-240.,240.);
glutIdleFunc(display);
glutDisplayFunc(display);
glutMainLoop();
return 0;
}
Keterangan :
* #include
4
Statment dasar yang harus ada dalam membuat gambar dengan library OpenGL.
* void userdraw()
{
static int tick=0;
//program grafik ditulis disini
}
Untuk menggambar objek yang akan dibuat dalam komputer grafik.
* void display(void)
{
//clear screen
glClear(GL_COLOR_BUFFER_BIT);
userdraw();
glutSwapBuffers();
}
Untuk menggambarkan gambar di layar computer ketika program dijalankan.
* glutInitWindowPosition(100,100);
glutInitWindowSize(640,480);
Membuat window dengan ukuran(640,480) dengan titik kiri atas jendela
diletakkan pada posisi (100,100) di layar computer.
* glutCreateWindow("Drawing by Nita");
Memberi judul pada window dengan Drawing by Nita
* glClearColor(0.0,0.0,0.0,0.0);
Mendefenisikan warna dari window yang dibuat dengan warna (0,0,0), yaitu
warna hitam.
* gluOrtho2D(0.,640.,-240.,240.);
5
Mendefenisikan besarnya system koordinat dengan range sumbu x adalah [0,640]
dan range sumbu y adalah [-240,240].
Gambar 2.1 Sistem koordinat
2.3 Pengertian Polyline
Polyline adalah sekumpulan garis yang terhubung satu dengan yang
lainnya hingga membentuk sebuah obyek gambar.
2.4 Pengertian Polygon
Polygon adalah sekumpulan garis yang terhubung satu dengan yang
lainnya dan berbentuk kurva tertutup hingga membentuk sebuah obyek gambar.
2.5 Pewarnaan
glColor3f(red,green,blue);
Red,green,blue bervariasi diantara 0. S/d 1.
glColor3f(0.,0.,0.);//black
glColor3f(0.,0.,1.);//blue
glColor3f(0.,1.,0.);//green
glColor3f(0.,1.,1.);//cyan
glColor3f(1.,0.,0.);//red
glColor3f(1.,0.,1.);//magenta
glColor3f(1.,1.,0.);//yellow
glColor3f(1.,1.,1.);//white
6
BAB III
PRIMITIVE DRAWING
3.1 Membuat Titik
a. Struktur dasar:
glVertex2i(x,y)
Untuk membuat titik di posisi (x,y) dimana x dan y didefenisikan sebagai
bilangan bulat (integer).
glVertex2if(x,y)
Untuk membuat titik di posisi (x,y) dimana x dan y didefenisikan sebagai
bilangan pecahan (float/double)
b. Struktur program membuat sebuah titik:
#include
void userdraw()
{
static int tick=0;
void drawDot(int x,int y);
glBegin(GL_POINTS);
glVertex2i(100,50);
glVertex2i(300,50);
glVertex2i(200,100);
glEnd();
}
void display(void)
{
//clear screen
glClear(GL_COLOR_BUFFER_BIT);
userdraw();
glutSwapBuffers();
}
int main(int argc, char **argv)
7
{
glutInit(&argc,argv); //inisialisasi toolkit
glutInitDisplayMode(GLUT_DOUBLE|GLUT_RGB);
glutInitWindowPosition(200,200);
glutInitWindowSize(640,480);
glutCreateWindow("Menampilkan Titik");
glClearColor(0.0,0.0,0.0,0.0);
gluOrtho2D(0.,640.,-240.,240.);
glutIdleFunc(display);
glutDisplayFunc(display);
glutMainLoop();
return 0;
}
Hasilnya adalah sebagai berikut:
Gambar 3.1 Titik
8
3.2 Membuat Garis
Untuk membuat garis diperlukan library GL_LINES dengan menyatakan
titik awal dan titik akhir dari garis.
Struktur programnya adalah sebagai berikut:
#include
void userdraw()
{
static int tick=0;
void drawline(int x1,int y1,int x2,int y2);
glBegin(GL_LINES);
glVertex2i(100,100);
glVertex2i(200,200);
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("Membuat Garis By Mhd Ridwan ");
glClearColor(0.0,0.0,1.0,0.0);
gluOrtho2D(0.,640.,-240.,240.);
glutIdleFunc(display);
glutDisplayFunc(display);
9
glutMainLoop();
return 0;
}
Hasilnya adalah sebagai berikut:
Gambar 3.2 Garis
3.3 Membuat Polyline
Struktur dasar:
glBegin(GL_LINE_LOOP);
glVertex2i(x1,y1);
glVertex2i(x2,y2);
glVertex2i(x3,y3);
glVertex2i(xn,yn);
glEnd();
Struktur program membuat Polyline:
#include
void userdraw()
{
static int tick=0;
void drawDot(int x,int y);
glBegin(GL_LINE_STRIP);
glVertex2i(100,100);
10
glVertex2i(200,150);
glVertex2i(300,50);
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("Membuat Polyline by Mhd Ridwan ");
glClearColor(0.0,0.0,1.0,0.0);
gluOrtho2D(0.,640.,-240.,240.);
glutIdleFunc(display);
glutDisplayFunc(display);
glutMainLoop();
return 0;
}
Hasilnya sebagai berikut:
11
Gambar 3.3 Polyline
3.4 Membuat Polygon
Struktur dasar:
//clear screen
glBegin(GL_LINE_LOOP);
glVertex2i(x1,y1);
glVertex2i(x2,y2);
glVertex2i(x3,y3);
glVertex2i(xn,yn);
glEnd();
Struktur program membuat Polygon:
#include
void userdraw()
{
static int tick=0;
void drawDot(int x,int y);
glBegin(GL_LINE_LOOP);
glVertex2i(100,100);
glVertex2i(200,150);
glVertex2i(300,50);
12
glEnd();
}
void display(void)
{
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("Membuat Polygon By Mhd Ridwan ");
glClearColor(0.0,0.0,1.0,0.0);
gluOrtho2D(0.,640.,-240.,240.);
glutIdleFunc(display);
glutDisplayFunc(display);
glutMainLoop();
return 0;
}
Hasilnya sebagai berikut:
13
Gambar 3.4 Polygon
3.5 Membuat Jajar Genjang
Struktur program membuat Jajar Genjang:
#include
void userdraw()
{
static int tick=0;
void drawDot(int x,int y);
glBegin(GL_LINES);
glVertex2i(50,50);
glVertex2i(100,100);
glVertex2i(50,50);
glVertex2i(200,50);
glVertex2i(200,50);
glVertex2i(250,100);
glVertex2i(250,100);
glVertex2i(100,100);
glEnd();
}
void display(void)
{
//clear screen
14
glClear(GL_COLOR_BUFFER_BIT);
userdraw();
glutSwapBuffers();
}
int main(int argc, char **argv)
{
glutInit(&argc,argv); //inisialisasi toolkit
glutInitDisplayMode(GLUT_DOUBLE|GLUT_RGB);
glutInitWindowPosition(200,200);
glutInitWindowSize(640,480);
glutCreateWindow("Jajar Genjang by MHD RIDWAN");
glClearColor(0.0,0.0,1.0,0.0);
gluOrtho2D(0.,640.,-240.,240.);
glutIdleFunc(display);
glutDisplayFunc(display);
glutMainLoop();
return 0;
}
Hasilnya sebagai berikut:
Gambar 3.5 Jajar Genjang
15
3.6 Membuat Prisma
Struktur program membuat Jajar Genjang:
#include
void userdraw()
{
static int tick=0;
void drawDot(int x,int y);
glBegin(GL_LINES);
glVertex2i(200,50);
glVertex2i(150,250);
glVertex2i(200,50);
glVertex2i(200,200);
glVertex2i(200,50);
glVertex2i(250,250);
glVertex2i(200,200);
glVertex2i(250,250);
glVertex2i(200,200);
glVertex2i(150,250);
glVertex2i(150,250);
glVertex2i(250,250);
glEnd();
}
void display(void)
{
//clear screen
glClear(GL_COLOR_BUFFER_BIT);
userdraw();
glutSwapBuffers();
}
int main(int argc, char **argv)
{
glutInit(&argc,argv); //inisialisasi toolkit
16
glutInitDisplayMode(GLUT_DOUBLE|GLUT_RGB);
glutInitWindowPosition(200,200);
glutInitWindowSize(640,480);
glutCreateWindow("Prisma By MHD RIDWAN");
glClearColor(0.0,0.220,242.256,0.0);
gluOrtho2D(0.,640.,-560.,340.);
glutIdleFunc(display);
glutDisplayFunc(display);
glutMainLoop();
return 0;
}
Hasilnya sebagai berikut:
Gambar 3.6 Prisma
3.7 Ujian Tengah Semester
Membuat Bintang
Struktur program membuat Bintang:
#include
void userdraw()
{
static int tick=0;
17
void drawDot(int x,int y);
glBegin(GL_LINES);
glVertex2i(100,300); //a
glVertex2i(200,400);
glVertex2i(200,400); //b
glVertex2i(300,300);
glVertex2i(300,300); //c
glVertex2i(400,300);
glVertex2i(400,300); //d
glVertex2i(300,200);
glVertex2i(300,200); //e
glVertex2i(400,50);
glVertex2i(400,50); //f
glVertex2i(200,200);
glVertex2i(200,200); //g
glVertex2i(50,50);
glVertex2i(50,50); //h
glVertex2i(100,200);
glVertex2i(100,200); //i
glVertex2i(50,300);
glVertex2i(50,300); //j
glVertex2i(100,300);
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);
18
glutInitWindowPosition(200,200);
glutInitWindowSize(640,480);
glutCreateWindow("Mhd Ridwan 1214370383");
glClearColor(0.0,0.220,242.256,0.0);
gluOrtho2D(0.,640.,-560.,540.);
glutIdleFunc(display);
glutDisplayFunc(display);
glutMainLoop();
return 0;
}
Hasilnya sebagai berikut:
Gambar 3.7 Bintang UTS
19
BAB IV
OBJEK GRAFIK 2D
4.1 Dasar Teori
Struktur data obyek grafik 2D, dalam hal ini digunakan bentuk struktur
(type data record) dan array.
Menggambar obyek grafik 2D dengan struktur data yang sudah ditentukan.
Macam-macam transformasi 2D, seperti Translasi (pindah), Rotasi
(berputar) dan Scaling (berubah ukuran).
Model Matrik Transformasi.
Perubahan Struktur Data Point2D ke Vektor2D dan sebaliknya.
Implementasi tranformasi 2D
4.2 Tujuan Praktikum
1. Mampu Membuat Gambar 2D dan 3D
2. Mengenal dan mulai menulis program untuk membuat gambar
3. Mempelajari dasar-dasar pembuatan grafik dengan OpenGL
4. Mengembangkan beberapa perangkat dasar untuk menggambar line,
polyline dan polygon.
typedef struct {
float x,y;
} point2D_t;
point2D_t P[3];
drawPolygon(P,3);
Definisi struktur : Implementasi :
20
4.3 Grafik 2 Dimensi Membuat Bunga Pot
Struktur program:
#include
#include
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);
}
void drawPolygon(point2D_t pnt[],int n)
{
int i;
glBegin(GL_POLYGON);
for (i=0; i
21
{
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 ={1,1,0};
fillPolygon(batang,4, biru);
drawPolygon(batang,4);
point2D_t
pot[4]={{-60,-190},{60,-190},{30,-240},{-30,-240}};
color_t hitam ={0,1,1};
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,1,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,1,0};
fillPolygon(pot3,4, hitam2);
drawPolygon(pot3,4);
22
static int tick=0;
point2D_t shape[360];
double srad,r;
for(int s=0; s
23
glutCreateWindow("Bunga Bangke :D");
//warna back layar
glClearColor(1.1,1.1,1.0,0.0);
gluOrtho2D(-300.,400.,-300.,300.);
glutIdleFunc(display);
glutDisplayFunc(display);
glutMainLoop();
return 0;
}
Hasilnya sebagai berikut:
Gambar 4.1 Bunga pot
24
4.4 Membuat Monas 2D
Struktur Program:
#include
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);
}
void drawPolygon(point2D_t pnt[],int n)
{
int i;
glBegin(GL_LINE_LOOP);
for (i=0; i
25
}
glEnd();
}
void userdraw(void)
{
point2D_t
petakdasar[4]={{0,0},{0,80},{350,80},{350,0}};
color_t hijau ={0,1,0};
fillpolygon(petakdasar, 4, hijau);
drawPolygon(petakdasar,4);
point2D_t
tangga[4]={{10,10},{50,50},{310,50},{340,10}};
color_t merah ={1,0,0};
fillpolygon(tangga, 4, merah);
drawPolygon(tangga,4);
point2D_t
petaktengah1[4]={{110,50},{100,70},{260,70},{250,50}};
color_t kuning ={1,1,0};
fillpolygon(petaktengah1, 4, kuning);
drawPolygon(petaktengah1,4);
point2D_t
petaktengah2[4]={{100,70},{80,90},{280,90},{260,70}};
color_t kuning2 ={1,1,0};
fillpolygon(petaktengah2, 4, kuning2);
drawPolygon(petaktengah2,4);
point2D_t
petaktengah3[4]={{80,90},{70,110},{290,110},{280,90}};
color_t kuning3 ={1,1,0};
26
fillpolygon(petaktengah3, 4, kuning3);
drawPolygon(petaktengah3,4);
point2D_t
batang2[4]={{160,510},{160,530},{200,530},{200,510}};
color_t hitam4 ={0,0,0};
fillpolygon(batang2, 4, hitam4);
drawPolygon(batang2,4);
point2D_t
batang[4]={{150,120},{170,520},{190,520},{210,120}};
color_t putih2 ={1,1,1};
fillpolygon(batang, 4, putih2);
drawPolygon(batang,4);
point2D_t
petaktengah4[4]={{70,110},{70,120},{290,120},{290,110}};
color_t hitam3 ={0,0,0};
fillpolygon(petaktengah4, 4, hitam3);
drawPolygon(petaktengah4,4);
point2D_t
segitiga[3]={{170,530},{180,580},{190,530}};
color_t kuning4 ={1,1,0};
fillpolygon(segitiga, 3, kuning4);
drawPolygon(segitiga,3);
point2D_t
bayangbatang[4]={{160,530},{160,535},{200,535},{200,530}};
color_t putih3 ={1,1,1};
fillpolygon(bayangbatang, 4, putih3);
drawPolygon(bayangbatang,4);
27
point2D_t
bayangbatang2[4]={{200,510},{200,535},{203,535},{203,510}};
color_t putih4 ={1,1,1};
fillpolygon(bayangbatang2, 4, putih4);
drawPolygon(bayangbatang2,4);
point2D_t
tanggatgh1[4]={{140,10},{140,50},{150,50},{150,10}};
color_t hitam ={0,0,0};
fillpolygon(tanggatgh1, 4, hitam);
drawPolygon(tanggatgh1,4);
point2D_t
tanggatgh2[4]={{210,10},{210,50},{220,50},{220,10}};
color_t hitam2 ={0,0,0};
fillpolygon(tanggatgh2, 4, hitam2);
drawPolygon(tanggatgh2,4);
point2D_t
tangga2[4]={{10,10},{50,50},{310,50},{340,10}};
drawPolygon(tangga2,4);
point2D_t
petaktengah11[4]={{110,50},{100,70},{260,70},{250,50}};
drawPolygon(petaktengah11,4);
point2D_t
petaktengah22[4]={{100,70},{80,90},{280,90},{260,70}};
drawPolygon(petaktengah22,4);
point2D_t
petaktengah33[4]={{80,90},{70,110},{290,110},{280,90}};
28
drawPolygon(petaktengah33,4);
point2D_t
batang3[4]={{150,120},{170,520},{190,520},{210,120}};
drawPolygon(batang3,4);
point2D_t
anaktangga[4]={{150,40},{150,45},{210,45},{210,40}};
drawPolygon(anaktangga,4);
point2D_t
anaktangga2[4]={{150,30},{150,35},{210,35},{210,30}};
drawPolygon(anaktangga2,4);
point2D_t
anaktangga3[4]={{150,20},{150,25},{210,25},{210,20}};
drawPolygon(anaktangga3,4);
point2D_t
anaktangga4[4]={{150,10},{150,15},{210,15},{210,10}};
drawPolygon(anaktangga4,4);
}
void display(void)
{
//clear screen
glClear(GL_COLOR_BUFFER_BIT);
userdraw();
glutSwapBuffers();
}
int main(int argc, char **argv)
{
29
glutInit(&argc,argv);//Inisialisasi Toolkit
glutInitDisplayMode(GLUT_DOUBLE|GLUT_RGB);
glutInitWindowPosition(100,100);
glutInitWindowSize(500,640);
glutCreateWindow("MONUMEN NASIONAL JAKARTA");
glClearColor(0.0,0.0,1.0,0.0);
gluOrtho2D(0.,350.,-5.,600.);
glutIdleFunc(display);
glutDisplayFunc(display);
glutMainLoop();
return 0;
}
Hasinya sebagai berikut:
Gambar 4.2 Monas 2D
30
BAB V
OBJEK GRAFIK 3D
5.1 Dasar Teori
Struktur Data Obyek Grafik 3D
Sistem Koordinat 3D
Struktur data obyek grafik 3D menggunakan struktur (tipe data record) untuk
titik 3D, face (sisi), dan array.
Mengambar obyek grafik 3D sesuai dengan struktur data yang sudah
ditentukan.
5.2 Tujuan Praktikum
1. Mahasiswa dapat membuat program untuk membangun grafik 2D dan 3D
menggunakan bahasa pemrograman C++ dan grafik library OpenGL.
2. Mahasiswa dapat menerapkan prinsip-prinsip dasar grafika komputer
untuk keperluan visualisasi, animasi dan simulasi pada bidang ilmu
lainnya.
5.3 Objek Grafik Simpel Kubus 3D
Struktur program:
#include
#include
#include
#include
#include
#include
void cube()
typedef struct {
float x,y,z;
} point2D_t;
Definisi struktur titik 3D: typedef struct {
int NumberofPoint;
int p[32];
} face_t;
Definisi struktur face :
31
{
//menggambar kubus dan transformasi tarnslasi ke titik 0.5 0.5 0.5 dan skala
1 1 1
glPushMatrix();
glTranslated(0.5,0.5,0.5);//cube
glScaled(1.0,1.0,1.0);
glutSolidCube(1.0);
glPopMatrix();
}
void setMaterial()
{
//set properties of surfaces material
GLfloat mat_ambient[] = {0.7f,0.7f,0.7f,1.0f}; // ada 4 jenis material yang
dipakai, dengan kombinasi warna tertentu
GLfloat mat_diffuse[] = {0.6f,0.6f,0.6f,1.0f};
GLfloat mat_specular[] = {1.0f,1.0f,1.0f,1.0f};
GLfloat mat_shininess[] = {50.0f};
glMaterialfv(GL_FRONT,GL_AMBIENT,mat_ambient);
glMaterialfv(GL_FRONT,GL_DIFFUSE,mat_diffuse);
glMaterialfv(GL_FRONT,GL_SPECULAR,mat_specular);
glMaterialfv(GL_FRONT,GL_SHININESS,mat_shininess);
}
void setLighting()
{
//set light sources
GLfloat lightIntensity[] = {0.7f,0.7f,0.7f,1.0f};//mensetting pencahayaan
GLfloat light_position[] = {2.0f,6.0f,3.0f,0.0f};
glLightfv(GL_LIGHT0,GL_DIFFUSE,lightIntensity);
glLightfv(GL_LIGHT0,GL_POSITION,light_position);
}
32
void setViewport()
{
glMatrixMode(GL_PROJECTION);
glLoadIdentity();
double winHt = 1.0;//half height of the window
glOrtho(-winHt*64/48,winHt*64/48,-winHt,winHt,0.1,100.0);
}
void setCamera()
{
//set the camera
glMatrixMode(GL_MODELVIEW);
glLoadIdentity();
gluLookAt(3.3,3.3,3.0,0,0.25,0,0.0,1.0,0.0);
}
void displayObject()
{
setMaterial();
setLighting();
setViewport();
setCamera();
//startDrawing
glClear(GL_COLOR_BUFFER_BIT|GL_DEPTH_BUFFER_BIT);
cube();//memanggil fungsi menggambar kubus
glFlush();//mengirim smua objek untuk dirender
}
void main(int argc, char **argv)
{
glutInit(&argc,argv);
glutInitDisplayMode(GLUT_SINGLE|GLUT_RGB|GLUT_DEPTH);
glutInitWindowSize(640,480);
glutInitWindowPosition(100,100);
33
glutCreateWindow("simple 3d scene");
glutDisplayFunc(displayObject);//fungsi dari display object yang
menggabungkan kubus lighting material dan kamera
glEnable(GL_LIGHTING);
glEnable(GL_LIGHT0);
glShadeModel(GL_SMOOTH);
glEnable(GL_DEPTH_TEST);
glEnable(GL_NORMALIZE);
glClearColor(1.0f,1.0f,1.0f,0.0f);
glViewport(0,0,640,480);
glutMainLoop();
}
Hasilnya sebagai berikut :
Gambar 5.1 Simpel Kubus 3D
34
5.4 Objek Grafik Kubus 3D Point To Vektor
Struktur Program:
#include
#include
struct point {
float x,y,z;
};
struct vektor {
float v[4];
};
struct matriks {
float m[4][4];
};
struct face {
int jumtitikons;
int indextitik[40];
};
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;
35
}
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
36
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;
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
37
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
38
for(i=0;i
39
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
40
Hasilnya Sebagai Berikut:
Gambar 5.2 Kubus 3D
5.5 Objek Grafik Star 3D
Struktur Program:
#include "GL/glut.h"
#include
struct point {
float x,y,z;
};
struct vektor {
float v[4];
};
struct matriks {
float m[4][4];
};
struct face {
int jumtitikons;
int indextitik[40];
};
struct objek {
int jumtitik;
point titik[40];
int jumsisi;
face sisi[30];
};
41
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
42
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;
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;
43
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
44
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
45
obj.titik[obj.sisi[i].indextitik[j]].y,
obj.titik[obj.sisi[i].indextitik[j]].z);
}
glEnd();
}
}
void gambarbintang() {
int i;
vektor hasil,HslKali;
point HslTitik;
mat = titling;
objek balok =
{12,{{20,60,110},{10,0,70},{30,35,70},{70,20,70},{60,55,70},{70
,100,110},{25,80,80},{5,120,110},{-5,70,80},{-40,54,110},{-
10,30,70},{20,60,40}},
20,{{3,{11,2,1}},{3,{11,2,3}},{3,{11,4,3}},{3,{11,5,4}},{3,
{11,6,5}},{3,{11,7,6}},{3,{11,8,7}},{3,{11,9,8}},{3,{11,10,9}},{3,{11,1,10}},
{3,{0,2,1}},{3,{0,2,3}},{3,{0,4,3}},{3,{0,5,4}},{3,
{0,6,5}},{3,{0,7,6}},{3,{0,8,7}},{3,{0,9,8}},{3,{0,10,9}},{3,{0,1,10}}
}};
for (i=0;i
46
glClear(GL_COLOR_BUFFER_BIT);
glRotatef(0.1f,0.0f,0.1f,0.0f);
gambarbintang();
glutSwapBuffers();
}
void main(int argc,char **argv) {
glutInit(&argc,argv);
glutInitWindowPosition(20,20);
glutInitWindowSize(640,640);
glutInitDisplayMode(GLUT_DOUBLE|GLUT_RGB);
glutCreateWindow("Star 3D");
glOrtho(-200.0f,200.0f,-200.0f,200.0f,-200.0f,200.0f);
glutIdleFunc(UserDraw);
glutDisplayFunc(UserDraw);
glutMainLoop();
}
Hasilnya Sebagai berikut:
Gambar 5.3 Star 3D
47
BAB VI
ANALISA
6.1 Analisa Pengenalan
Dengan mempelajari computer grafik, kita dapat menggambar dengan
menggunakan suatu program dari Microsoft Visual C++ yang dipadikan
dengan menggunakan OpenGL sebagai library untuk grafik computer.
6.2 Analisa Primitive Drawing
Dengan Primitive Drawing merupakan cara mudah untuk menggambar pada
layar monitor menggunakan teori geometri sederhana. Macam-macam
primitive drawing seperti menggambar sebuah titik, garis, atau gabungan
antar keduanya.
6.3 Analisa 2D
Dengan menggunakan aplikasi OpenGL kita dapat menggambar grafik 2D
yang juga di padukan dengan polyline, polygon atau kurva. Sehingga dapat
menggambar animasi dua dimensi.
6.4 Analisa 3D
Dengan menggunakan aplikasi OpenGL kita tidak hanya dapat menggambar
grafik 2D namun juga dapat membuat 3D. Sehingga dapat menggambar lebih
keliatan nyata.
48
BAB VII
PENUTUP
7.1 Kesimpulan
Selama penulis belajar computer grafik, banyak sekali yang penulis
dapatkan, terutama tentang grafika computer. Penulis dapar menyimpulkan
bahwa:
Grafika komputer adalah suatu bidang ilmu yang mempelajari
bagaimana membangun grafik (gambar) baik 2D maupun 3D yang
kelihatan nyata menggunakan komputer.
OpenGL adalah library yang khusus menyediakan perangkat
perangkat pembuatan grafik. OpenGL bekerja pada bahasa C.
Objek grafik 2D adalah sekumpulan titik titik 2D yang
dihubungkan dengan garis lurus, baik berupa polyline, polygon atau kurva.
Struktur data obyek grafik 2D, dalam hal ini digunakan bentuk struktur
(type data record) dan array.
Objek grafik 3D adalah sebuah model struktur data yang menyatakan
suatu gambar 3D dibentuk dan disusun. Struktur data obyek grafik 3D
menggunakan struktur (tipe data record) untuk titik 3D, face (sisi), dan
array.
7.2 Saran
Melihat perkembangan teknologi saat ini, rasanya mata kuliah
computer grafik akan semakin disukai oleh mahasiswa. Sebab dimata kuliah
computer grafik kita dapat belajar bagaimana membuat gambar 2D dan 3D
yang saat ini lagi banyak dibicarakan banyak orang. Oleh sebab itu penting
juga untuk menambah materi yang lebih baru lagi, agar mahasiswa akan
senang belajar computer grafik. Dan kalau bisa system belajar yang ibu
terapkan tetap dipertahankan kami mahasiswa akan terbiasa untuk mencari
dan belajar sendiri.
DAFTAR PUSTAKA
Basuki Ahmad & Ramadijanti Nana., Grafika Komputer: Teori dan
Implementasi, Andi, .Yogyakarta , 2006
Suyoto. Teori dan Pemrograman Grafika Komputer, 2003. Penerbit
Gava Media.
Edward Angel, Interactive Computer Graphics: A Top-Down
Approach with OpenGL 2nd, Addison Wesley, 2005