PENGANTAR GRAFIKA KOMPUTER

BABI
PENGANTAR
GRAFIKA
KOMPUTER, 2D &
3D
MATERI
Pengenalan grafika komputer
Manfaat grafika komputer
Materi dalam grafika komputer
Mengenal library grafis OpenGL
Instalasi GLUT OpenGL
Mengenal Pemrograman Grafis
Struktur dasar Pemrograman Grafika menggunakan OpenGL

1. Pengenalan grafika komputer

- Grafika komputer adalah suatu bidang yang mempelajari
bagaimana menghasilkan suatu gambar menggunakan
komputer. Sehingga didalam grafika komputer akan
dibahas teknik-teknik menggambar.
 - Grafika komputer menghasilkan software-software disain
grafis yang saat ini sudah sangat canggih.
- Grafika komputer menghasilkan software dengan GUI
(graphics User Interface)yang memudahkan dan
menyenangkan.

1.1 Pengenalan grafika komputer (GRAFIKA VS

IMAGE PROCESSING)
a. GRAFIKA
- Grafika komputer menghasilkan suatu gambar
- Materinya berisi teknik-teknik menggambar
- Hasilnya gambar

b. IMAGE PROCESSING
- Image processing mengolah suatu gambar
- Materinya berisi teknik memperbaiki dan menyajikan
informasi dari gambar
- Hasilnya bisa gambar atau informasi

1.2 Pengenalan grafika komputer (PHOTO VS

GAMBAR)
a. PHOTO
- Photo dihasilkan dari capture (mengambil) gambar yang
ada
- Detail dari setiap obyek lengkap. Misalnya jumlah kumis
pada kucing tertangkap apa adanya.

b. GAMBAR
- Gambar dihasilkan dari proses pembuatan atau peniruan
 - Detail tidak lengkap, Misalnya siapa yang maumenghitung
jumlah kumis kucing baru digambarkan sesuai dengan
jumlahnya

1.3 Pengenalan grafika komputer (ELEMEN

ELEMEN GRAFIS)
A. POLYLINES

B. TEXT
C. REGION

D. Raster Image

2. Manfaat grafika komputer

- Entertainment dan Games
- Graphic Design
- Grafik Monitoring dan Visualisasi
- CAD (Computer Aided Design)
- GUI (Graphics User Interface)
- Image Processing

3. Materi dalam grafika komputer

3.1 GRAFIKA 1
- Primitive Drawing
- ObyekGrafik2 Dimensi
- Tranformasi2 Dimensi
 - ObyekGrafik3 Dimensi
- Tranformasi3 Dimensi
- Visible danInvisible
- Shading
- Z-Order

3.2 GRAFIKA 2
- Z-Order danZ-buffer
- Morphing
- Color Map
- Texture Map
- Curve
- Camera View
- TranformasiGeometri

4. Mengenal library grafis OpenGL

- OpenGL adalah suatu library grafis standard yang
digunakan untuk keperluan-keperluan pemrograman grafis,
Selain OpenGL, library grafis yang banyak digunakan
adalah DirectX.
- OpenGL bersifat Open-Source, multi-platform dan multi-
language. Saat ini semua bahasa pemrograman mendukung
OpenGL. Dan OpenGL bisa bekerja dalam lingkungan
Windows, Unix, SGI, Linux, free BSD dll.

4.1 LIBRARY OpenGL-GLUT

- Library dasar dari OpenGL adalah GLUT, dengan fasilitas
yang bisa dikembangkan.
- Untuk sistem operasi Windows, library ini terdiri dari 3
files yaitu:
a. glut.h
b. glut32.lib
c. glut32.dll

5. Instalasi GLUT OpenGL

- Copykanfile glut.h didalam folder c:\Program
Files\Microsoft Visual Studio\VC98\Include\GL
- Copykanfile glut32.lib didalamfolder c:\Program
Files\Microsoft Visual Studio\VC98\lib
- Copykanfile glut32.dll didalam folder
c:\Windows\System32
6. Mengenal Pemrograman Grafis
- Pemrograman grafis adalah pemrograman yang digunakan
untuk menghasilkan gambar pada komputer menggunakan
library yang ada.
- Teknik-teknik pemrograman grafis ini didasari oleh
teknik-teknik menggambar dengan pemakaian geometri
sebagai dasar struktur datanya
- Hasil pemrograman grafis adalah visualisasi grafis.

7. Struktur dasar Pemrograman Grafika

menggunakan OpenGL
#include <GL/glut.h>
void userdraw(void)
{// Disinitempatuntukmenggambar}
void display(void) {
glClear(GL_COLOR_BUFFER_BIT);
userdraw();
glutSwapBuffers();
}
intmain(intargc,char**argv){
glutInit(&argc,argv);
glutInitDisplayMode(GLUT_DOUBLE|GLUT_RGB);
glutInitWindowPosition(100,100);
glutInitWindowSize(640,480);
 glutCreateWindow(Drawing by AchmadBasuki");
glClearColor(0.0,0.0,0.0,0.0);
gluOrtho2D(-320.,320.,-240.0,240.0);
glutIdleFunc(display); glutDisplayFunc(display);
glutMainLoop();
return 0;
}

7.1 #INCLUDE <GL/glut.h>

a. Pemrograman grafis menggunakan OpenGL-GLUT membutuhkan
header glut.h yang ada di folder
c:\Program Files\Microsoft Visual Studio\VC98\bin\GL

7.2 GLvoid userdraw(void) {// Disini tempat

untuk menggambar}
a. Fungsi userdraw adalah suatu fungsi untuk membuat kode
program untuk menghasilkan suatu gambar #include
<GL/glut.h>void userdraw(void) {//
Disinitempatuntukmenggambar}

7.3 Glut InitWindowPosition(100,100); glut

InitWindowSize(640,480);
a. Membuat windows dengan ukuran(640,480) dengan titik
kiri atas jendela diletakkan pada posisi(100,100)
dilayar komputer

7.4 Glut CreateWindow(DrawingBy Rizky keyvin

andrey");
a. Memberi judul pada windows denganDrawing By Rizky
keyvin andrey

7.5 glClearColor(1.0,1.0,1.0,0.0);
 a. Mendefinisikan warna dari windows yang dibuat dengan
warna(1,1,1) yaitu warna putih

7.6 gluOrtho2D(-320.,320.,-240.,240.);
a. Mendefinisikan besarnya sistem koordinat dengan range
sumbux adalah[-320,320] dan range untuk sumbuy adalah[-
240,240]

BAB II
PRIMITIVE
DRAWING
MATERI
Sistem Koordinat 2D
Menggambar Titik
Menggambar Garis
Menggambar Polyline
Menggambar Polygon
Mengubah Warna

1. SIMTEM KOORDINAT 2D

1.1 CONTOH SISTEM KOORDINAT DALAM OpenGL

glutInitWindowPosition(100,100);
glutInitWindowSize(640,480);
 gluOrtho2D(-320.,320.,-240.,240.);

2. MENGGAMBAR TITIK
a. glVertex2i(x,y)
Untuk menggambar titik diposisi(x,y) dimana x dan y
didefinisikan sebagai bilangan bulat(integer)

b. glVertex2f(x,y)
glVertex2d(x,y)
Untuk menggambar titik diposisi(x,y) dimana x dan y
didefinisikan sebagai bilangan pecahan(float/double)
Menggunakan library glBegin(GL_POINTS)

2.1 CONTOH MENGGAMBAR TITIK

a. glBegin(GL_POINTS);
glVertex2i(100,50);
glVertex2i(100,130);
glVertex2i(150,130);
glEnd();
b. drawDot(100,50);
drawDot(100,130);
drawDot(150,130);

2.2 FUNGSI UNTUK MENGGAMBAR TITIK

a. void drawDot(intx, inty)
{ glBegin(GL_POINTS);
glVertex2i(x,y);
glEnd();
}
Fungsi ini digunakan bila x dan y didefinisikan sebagai
integer

b. void drawDot(floatx, float y)

{ glBegin(GL_POINTS);
glVertex2f(x,y);
glEnd();
}
Fungsi ini digunakan bila x dan y didefinisikan sebagai
float

2.3 MENGUBAH UKURAN TITK

a. drawDot(100,50);
drawDot(100,130);
glPointSize(4);
drawDot(150,130);

3. MENGGAMBAR GARIS
Untuk membuat garis diperlukan library GL_LINES
dengan menyatakan titik awal dan titik akhir dari
garis.
a. glBegin(GL_LINES);
glVertex2f(100,100);
glVertex2f(200,150);
glEnd();

3.1 FUNGSI UNTUK MENGGAMBAR GARIS

a. void drawLine(intx1,int y1,int x2,int y2)
 { glBegin(GL_LINES);
glVertex2i(x1,y1);
glVertex2i(x2,y2);
glEnd();
}

b. void drawLine(floatx1,float y1,float x2,float y2)

{ glBegin(GL_LINES);
glVertex2f(x1,y1);
glVertex2f(x2,y2);
glEnd();
}

3.2 CONTOH MENGGAMBAR GARIS

a. drawLine(100,100,200,150);

4. MENGGAMBAR POLYLINE
Polyline adalah sekumpulan garis yang terhubung
satu dengan yang lainnya hingga membentuk sebuah obyek
gambar

a. glBegin(GL_LINE_STRIP);
glVertex2f(x1,y1);
glVertex2f(x2,y2);
glVertex2f(x3,y3);

glVertex2f(xn,yn);
glEnd();

4.1 CONTOH MENGGAMBAR POLYLINE

a. glBegin(GL_LINE_STRIP);
glVertex2f(100,100);
glVertex2f(200,150);

glVertex2f(300,50);
glEnd();
 5. MENGGAMBAR POLYGON
Polygon adalah sekumpulan garis yang terhubung satu
dengan yang lainnya dan berbentuk kurva tertutup hingga
membentuk sebuah obyek gambar.

a. glBegin(GL_LINE_LOOP);
glVertex2f(x1,y1);
glVertex2f(x2,y2);
glVertex2f(x3,y3);

glVertex2f(xn,yn);
glEnd();

5.1 CONTOH MENGGAMBAR POLYGON

a. glBegin(GL_LINE_LOOP);
glVertex2f(100,100);
glVertex2f(200,150);
glVertex2f(300,50);
glEnd();

6. MENGUBAH WARNA
a. glColor3f(red,green,blue);

red, green, blue nilainya antara 0 sampai dengan 1,

letaknya sebelum obyek digambar

b. 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.1 CONTOH MENGUBAH WARNA

a. glColor3f(0,0,0);
 drawDot(100,50);
glColor3f(1,0,0);
drawDot(100,130);
glColor3f(0,0,1);
drawDot(150,130);

6.2 CONTOH GAMBAR

Buatlah latar belakang windows menjadi hitam dengan
mengubah afungsi glClearColor menjadi
glClearColor(0.0,0.0,0.0,0.0); pada main()
Isikanprogram berikutpadauserdraw()

a. float x,y;
for(inti=0;i<1000;i++){ x=640*(float)rand()/RAND_MAX-
320;
y=480*(float)rand()/RAND_MAX-240;
drawDot(x,y);
}
 BAB III
OBYEK GRAFIK 2D
MATERI
Definisi Obyek Grafik2-D
PolyLine
Mewarnai Area (FillPolygon)
Membangun Obyek Grafik2-D
Animasi 2-D

1. DEFINISI OBYEK GRAFIK 2-D

a. Obyek grafik 2-D adalah sekumpulan titik-titik 2-D yang
dihubungkan dengan garis lurus baik berupa polyline,
polygon atau kurva
b. Obyek grafik 2-D didefinisikan sebagai sekumpulan titik
2-D yang secara komputasi dinyatakan sebagai array 1-D,
atau linked-list.

1.1 LANGKAH-LANGKAH UNTUK MENDEFINISIKAN OBYEK

GRAFIK 2-D
a. Mendefinisikan struktur dari titik2-D (Point2D_t)
b. Mendefinisikan struktur warna(Color_t)
c. Mendefinisikan struktur dari obyek grafik 2-D sebagai
array dari titik 2-D (Object2D_t)

1.2 MENDEFINISIKAN TITIK 2-D

a. Typedef struct{
float x;
float y;
 } point2D_t;

Definisi ini digunakan bila titik didefinisikan

dalam sistem koordinat yang menggunakan bilangan
pecahan (float)

b. Typedef struct{
intx;
inty;
} point2D_t;

Definisi ini digunakan bila titik didefinisikan

dalam sistem koordinat yang menggunakan bilangan bulat
(integer)

1.3 MENDEFINISIKAN WARNA

a. Typedef struct{
float r;
float g;
float b;
} color_t;

Warna terdiri dari 3 elemen warna yaitu red (r),

green (g) dan blue (b) yang nilainya antara 0 dan 1

b. void setColor(color_tcol){
glColor3f(col.r, col.g, col.b);
}

Fungsi untuk memberi warna pada obyek grafik

1.4 MENDEFINISIKAN OBYEK GRAFIK 2-D

Definisi obyek ini dapat dituliskan pada function
userdraw secara langsung dengan menyatakannya sebagai
 array dari titik 2-D. Sebagai contoh untuk menyatakan
obyek shape dapat dituliskan:

a. Point2D_t shape[1000]

Untuk menyatakan obyek bunga dapat dituliskan:

b. Point2D_t bunga[360]

2. POLYLINE
Polyline adalah suatu fungsi yang digunakan untuk
menggambarkan obyek 2-D yang sudah didefinisikan
didepan.

a. void drawPolyline(point2D_t pnt[],intn){

inti;
glBegin(GL_LINE_STRIP);
for (i=0;i<n;i++) {
glVertex2f(pnt[i].x, pnt[i].y);}
glEnd();
}

3. POLYGON
Polygon adalah suatu fungsi yang mirip dengan
polyline hanya saja hasilnya adalah kurva tertutup,
sedangkan polyline hasilnya terbuka kurva

a. void drawPolygon(point2D_t pnt[],intn){

inti;
glBegin(GL_LINE_LOOP);
for (i=0;i<n;i++) {
glVertex2f(pnt[i].x, pnt[i].y);}
glEnd();
}

3.1 FILLPOLYGON
Fungsi ini digunakan untuk mewarnai sebuah polygon
dengan warna tertentu
 a. void fillPolygon(point2D_t pnt[],intn, color_t color){
inti;
setColor(color);
glBegin(GL_POLYGON);
for (i=0;i<n;i++) {
glVertex2f(pnt[i].x, pnt[i].y);}
glEnd();}

3.2 GRADATE POLYGON

Fungsi ini digunakan untuk mewarnai sebuah polygon
dengan warna-warna yang bergradiasi dari suatu warna
kewarna lainnya

a. void GradatePolygon(point2D_t pnt[],intn, color_t

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

4. MEMBANGUN OBYEK GRAFIK 2-D

a. Membuat obyek grafik 2-D secara langsung.
b. Membuat obyek grafik 2-D secara perhitungan matematis.

4.1 MEMBANGUN OBYEK GRAFIK 2-D SECARA LANGSUNG

Membuat obyek grafik 2-D secara langsung bisa
dilakukan pada function userdraw() dengan menyatakan
secara langsung koordinat titik-titiknya

a. void userdraw()
 { Point2D_t kotak[4]={{100,100},{300,100},
{300,200},{100,200}};
Polygon(kotak,4);
}
Program ini digunakan untuk membuat kotak

4.2 CONTOH MEMBUAT BINTANG

a. void userdraw()
{ Point2D_tbintang[10]={{80,146},{99,90},
{157,90},{110,55},{128,1},{80,34},{32,1},
{54,55},{3,90},{63,90}};
Polygon(bintang,10);
}

4.3 MEMBANGUN OBYEK GRAFIK 2-D DENGAN PERSAMAAN

MATEMATIK
Dengan persamaan matematik y=f(x) dapat digambarkan
kurva dengan variasi bentuk yang menarik seperti sinus,
cosinus, exponential dan logaritma, atau fungsi
gabungannya. Bentuk persamaan matematik yang menarik
untuk dibuat adalah dengan menggunakan sistem koordinat
polar.persamaan atematik

() adalah sudut yang berjalan dari 0 s/d 360 yang

dinyatakan dalam radian (0 s/d 2). Macam-macamr=f()
dapat menghasilkan gambar yang bervariasi.

4.4 CONTOH FUNGSI POLAR

 Masih banyak variasi fungsi yang lain yang dapat
dibangun dengan menggunakan koordinat polar ini

4.5 PROGRAM MEMBANGUN OBYEK GRAFIK 2-D DENGAN

MENGGUNAKAN KOORDINAT POLAR
a. voiduserdraw()
{ Point2D_t shape[360];
doublesrad,r;
for(ints=0;s<360;s++)
{ srad=s*3.14/180;
r=sin(5*srad);
shape[s].x=(float)(r*cos(srad));
shape[s].y=(float)(r*sin(srad));
} Polygon(shape,360);}
Fungsi sin(5) yang menghasilkan rose 5 daun

5. ANIMASI 2D
a. Membuat obyek grafik 2-D menjadi bergerak.
b. Animasiyang dilakukan adalah memindahkan posisi gambar.
c. Pada sistem koordinat kartesian animasi akan berefek
gerakan linier (translasi), pada sistem koordinat polar
akan berefek gerakan berputar(rotasi).

5.1 PEMBUATAN ANIMASI 2D

a. Pada main()ditambahkan fungsi glutIdleFunc(display)
sebelum fungsi glutDisplayFunc(display).
b. Pada awal fungsi userdraw() didefinisikan static
inttick
c. Pada akhir fungsi userdraw() ditambahkan perintah untuk
menambah nilai tick secara terus menerus dengan tick++.
d. Tambahkan nilai tick ini pada nilai variabel dasar
pembuatan grafik

5.2 PROGRAM ANIMASI 2D DENGAN MENGGUNAKAN

KOORDINAT POLAR
a. voiduserdraw()
{ static inttick=0;
Point2D_t shape[360];
doublesrad,r;
for(ints=0;s<360;s++)
{ srad=(s+tick)*3.14/180;
r=sin(5*srad);
shape[s].x=(float)(r*cos(srad));
shape[s].y=(float)(r*sin(srad));
} Polygon(shape,360);
tick++;
}

BAB IV
GRAFIKA 3
DIMENSI
MATERI
Sistem Koordinat
Titik 3 Dimensi
Definisi Obyek 3 Dimensi
Implementasi Definisi Dari Struktur Face
 Implementasi Definisi Dari Struktur Obyek 3D
Contoh Pernyataan Obyek Limas Segiempat
Implementasi Pernyataan Obyek 3 Dimensi
Implementasi Konversi Vektor 3D Menjadi Titik 2D
Implementasi Konversi Titik 3D Menjadi Vektor 3D
Implementasi Cara Menggambar Obyek 3D
Implementasi Tilting

1. SISTEM KOORDINAT 3 DIMENSI

2. TITIK 3 DIMENSI
a. Titik 3D dinyatakan dengan P(x,y,z)

Typedef struct
{
float x,y,z;
} point3D_t

3. DEFINISI OBYEK 3 DIMENSI

a. Obyek face yang digabungkan

b. Face adalah

4. IMPLEMENTASI DEFINISI DARI STRUKTUR

FACE
a. Typedef struct
{ int NumberofVertices;
short intpnt[32];
} face_t;
NumberofVertices menyatakan jumlah titik pada sebuah face

pnt[32] menyatakan nomor-nomor titik yang digunakan

untuk membentuk face, dengan maksimum 32 titik
5. IMPLEMENTASI DEFINISI DARI STRUKTUR
OBYEK 3D
a. Typedef struct
{ int NumberofVertices;
point3D_t pnt[100];
int NumberofFaces;
face_t fc[32];
} object3D_t;

NumberofVertices menyatakan jumlah titik yang membentuk

obyek.
pnt[100] menyatakan titik-titik yang membentuk face,
dengan maksimum 100 titik
NumberofFaces menyatakan jumlah face yang membentuk
obyek
Fc[32]menyatakan face-face yang membentuk obyek

6. CONTOH PERNYATAAN OBYEK LIMAS SEGIEMPAT

a. Titik-titikyang membentukobyek:
Titik0 (0,150,0)
Titik1 (100,0,0)
Titik2 (0,0,100)
Titik3 (-100,0,0)
Titik4 (0,0,-100)

b. Face yang membentuk obyek:

Face 0 0,2,1
Face 1 0,3,2
Face 2 0,4,3
Face 3 0,1,4
Face 4 1,2,3,4
 7. IMPLEMENTASI PERNYATAAN OBYEK 3 DIMENSI
a. object3D_t prisma={5,
{{0,100,0},{100,0,0},{0,0,100},
{-100,0,0},{0,0,-100}},5,{{3,{0,1,2}},
{3,{0,2,3}},{3,{0,3,4}},{3,{0,4,1}},
{4,{1,4,3,2}}}};

Pernyataan ini ditulis pada fungsi userdraw sebagai

nilai dari obyek 3D yang akan digambarkan

8. IMPLEMENTASI KONVERSI VEKTOR 3D MENJADI

TITIK 2D
a. point2D_t Vector2Point2D(vector3D_t vec)
{ point2D_t pnt;
pnt.x=vec.v[0];
pnt.y=vec.v[1];
return pnt;
}

9. IMPLEMENTASI KONVERSI TITIK 3D MENJADI

VEKTOR 3D
a. vector3D_t Point2Vector(point3D_t pnt)
{ vector3D_t vec;
vec.v[0]=pnt.x;
vec.v[1]=pnt.y;
vec.v[2]=pnt.z;
vec.v[3]=1.;
return vec;
}

10. IMPLEMENTASI CARA MENGGAMBAR OBYEK 3D

a. mat=tilting;
 for(i=0;i<prisma.NumberofVertices;i++)
{ vec[i]=Point2Vector(prisma.pnt[i]);
vec[i]=mat*vec[i];
} for(i=0;i<prisma.NumberofFaces;i++)

{ for(j=0;j<prisma.fc[i].NumberofVertices;j++)
vecbuff[j]=vec[prisma.fc[i].pnt[j]];
for(j=0;j<prisma.fc[i].NumberofVertices;j++)
titik2D[j]=Vector2Point2D(vec[prisma.fc[i].pnt[j]]);
drawPolygon(titik2D,prisma.fc[i].NumberofVertices);
}
mat=tilting;
for(i=0;i<prisma.NumberofVertices;i++)
{ vec[i]=Point2Vector(prisma.pnt[i]);
vec[i]=mat*vec[i];
}

Deklarasimat sebagai matrik tilting menyatakan bahwa obyek

yang digambar mengikuti pergerakan sumbu
koordinat(tilting).
Setiap titik diubah menjadi vektor dengan
memperhatikan matrik transformasi yang dinyatakan dala
mat.

11. IMPLEMENTASI TILTING

Tilting adalah matrik rotasi dari sumbu koordinat
dan semua obyek yang digambar didalamnya.
a. float theta=0.5;
matrix3D_t tilting=rotationXMTX(theta)*rotationYMTX(-
theta);
 Dalam deklarasi ini, matrik tilting adalah rotasi
terhadap sumbu Y sebesar-0.5 rad dan rotasi terhadap
sumbu X sebesar0.5 rad.
b. for(i=0;i<prisma.NumberofFaces;i++)
{ for(j=0;j<prisma.fc[i].NumberofVertices;j++)
vecbuff[j]=vec[prisma.fc[i].pnt[j]];
for(j=0;j<prisma.fc[i].NumberofVertices;j++)
titik2D[j]=Vector2Point2D(vec[prisma.fc[i].pnt[j]]);
drawPolygon(titik2D,prisma.fc[i].NumberofVertices);
}

Untuk setiap face pada obyek 3D:

(1)Ambilvektordarisetiaptitikpadaface tersebut
(2)Konversikansetiapvektor3D menjadititik2D
(3)Dari hasilkonversidigambarkanpolygon