Page |1

BAB I

PENDAHULUAN

1.1 Sekilas tentang Grafika Komputer

1.1.1 Tujuan Pengajaran :

1. Mahasiswa dapat membuat gambar menggunakan OpenGL dan bahasa C++
2. Mahasiswa dapat membuat gambar 2D dan gambar 3D
3. Mahasiswa dapat menerapkan prinsip-prinsip trasformasi 2D dan 3D

1.1.2 Materi Grafika Komputer

1. Pengenalan mengenai konsep-konsep dasar dari grafika computer beserta peralatan
yang digunakan untuk keperluan grafika computer.
2. Pengenalan mengenai teknik mengambar dengan menggunakan cara primitif yang
merupakan dasar dari setiap gambar, seperti titik, garis, dll

1.1.3 Perangkat yang digunakan

1. Komputer
2. Sistem Operasi Windows
3. Microsoft Visual C++
4. OpenGL sebagai library untuk grafika computer

1.2 Apa itu grafika Komputer

Grafika computer adalah gambar atau grafik yang dihasilkan oleh komputer. Teknik-
teknik yang dipelajari dalam grafika computer adalah teknik-teknik bagaimana membuat

Modul OpenGL– STMIK NH

 Page |2

atau menciptakan gambar dengan menggunakan komputer. Ada perbedaan antara photo
dan gambar, dimana pada photo semua detail objek terlihat sedangkan gambar tidak dapat
memperlihatkan semua detail yang ada tetapi hanya detail yang dianggap penting dalam
menunjukkan pola suatu gambar.
Adapun beberapa program sederhana sampai program yang sangat kompleks guna
membuat gambar computer seperti Paint, Microsoft Photo Editor, Adobe Photoshop, Maya,
Autocad, 3D Studio max, dan lain-lain.
Untuk membuat program-program diatas dapat digunakan berbagai macam bahasa
pemrograman dengan library grafis yang sesuai. Dalam modul ini digunakan bahasa
pemrograman C++. Bila menggunakan system operasi windows maka menggunakan bahasa
pemrograman C++ dan bila menggunakan system operasi Linux maka menggunakan gcc
atau g++. Sedangkan library grafik yang digunakan dalam modul ini adalah OpenGL.

1.3 Bidang Yang berhubungan dengan Grafika Komputer

Bidang –bidang yang berhubungan dengan grafika computer diperlukan untuk :

1. Seni, entertainment, dan publishing, seperti produksi film, animasi, special effect, game
computer, web browsing, dll
2. Image processing atau pengolahan citra digital, yang dalam hal ini grafika computer
dapat digunakan didalam coding untuk pemindahan data citra menjadi data vector yang
banyak digunakan dalam keperluan GIS.
3. Menampilkan simulasi, yang dihasilkan berupa grafik data atau grafik visualisasi proses,
seperti dalam visualisasi proses pengaturan lampu lalu lintas.
4. CAD ( Computer Aided Design ). Satu program CAD yang paling banyak digunakan adalah
AUTOCAD, yang digunakan untuk desain pola atau desain layout.

1.4 Elemen Dasar Grafika Komputer

Beberapa elemen dasar dari grafika computer adalah ;

Modul OpenGL– STMIK NH

 Page |3

1. Polylines
Adalah deretan garis lurus yang berhubungan. Polyline ini merupakan dasar dari
pembuatan grafik.
2. Text
Menunjukkan pola-pola huruf pada computer yang menyebabkan layout dari hasil
editing dapat menghasilkan banyak variasi tulisan.
3. Filled Region
Adalah bagaimana member warna atau pattern pada sebuah luasan.
4. Raster Image
Adalah penyajian gambar menggunakan matriks dari setiap sel gambar, dimana sebuah
gambar didefinisikan sebagai array dari besar-besaran numeric. Model data ini banyak
digunakan untuk keperluan pengolahan citra.

Modul OpenGL– STMIK NH

 Page |4

BAB II

PRIMITIVE DRAWING

2.1 Materi

Program Dasar dengan OpenGL

• Menggambar Titik ( GL_POINTS )
• Menggambar Garis ( GL_LINES )
• Menggambar Polyline ( GL_LINE_STRIP )
• Menggambar Polygon ( GL_LINE_LOOP )
• Pewarnaan ( glColor )

2.2 Struktur Dasar Program Grafik dengan OpenGL

Pada pemrograman Open GL dibutuhkan sebuah kerangka utama yang dibutuhkan untuk
membuat tampilan grafis yang ingin kita buat yang biasa disebut dengan program utama.
Program utama yang diperlukan bisa anda lihat seperti dibawah ini :
#include <glut.h>
void userdraw()
{
static int tick=0;
/*program grafik ditulis disini*/
void display(void)
{
glClear(GL_COLOR_BUFFER_BIT);
userdraw();
glutSwapBuffers();
}
int main(int argc, char **argv)
{
glutInit(&argc,argv);
glutInitDisplayMode(GLUT_DOUBLE|GLUT_RGB);
glutInitWindowPosition(100,100);
glutInitWindowSize(640,480);
glutCreateWindow("Program Grafikku");
glClearColor(1.0,1.0,1.0,0.0);

Modul OpenGL– STMIK NH

 Page |5

gluOrtho2D(0.,640.,-240.,500.);
glutIdleFunc(display);
glutDisplayFunc(display);
glutMainLoop();
return 0;
}

Pada program utama diatas dapat dijelaskan fungsi dari perintah – perintah yang
ada dengan penjelasan sebagai berikut :

Membuat windows dengan ukuran (640,480) dengan titik kiri atas jendela diletakkan
pada posisi (100,100) di layar komputer. Penentuan ukuran layar tidak harus sama
dengan di atas tetapi bisa disesuaikan dengan ukuran resolusi monitor anda masing–
masing.

Mendefinisikan warna dari windows yang dibuat dengan warna (1,1,1) yaitu warna
putih. ( Penkodean warna dapat anda lihat pada halaman tentang warna)

Mendefinisikan besarnya sistem koordinat dengan range sumbu x adalah [0,640]

dan range untuk sumbu y adalah [-240,240]. Pada perintah diatas adalah untuk
ukuran layar untuk memposisikan objek di layar yang telah kita buat.

2.2.1 Memulai Program Open GL

Berikut Langkah –langkah yang harus dilakukan sebelum memulai program Open GL :
1. Software yang digunakan adalah Visual Studio 6.0 dengan pemrograman Visual C++
dan boleh menggunakan program dengan versi terbaru.
2. Pastikan file –file yang dibutuhkan oleh openGL seperti glut.h , glut32.lib, dan
glut32.dll telah ditambahkan pada directori yang telah ditentukan, berikut
penjelasannya :
a. Copykan file glut.h ke direktori C:\Program Files\Microsoft Visual
Studio\VC98\Include

Modul OpenGL– STMIK NH

 Page |6

Direktori
tempat
mengcopy
file glut.h

GAMBAR 2.1 Direktori tempat mengcopykan file glut.h

b. Copykan file glut32.lib ke direktori C:\Program Files\Microsoft Visual

Studio\VC98\lib

Direktori
tempat
mengcopy
file
glut32.lib

GAMBAR 2.2 Direktori tempat mengcopykan file glut32.lib

Modul OpenGL– STMIK NH

 Page |7

c. Copykan file glut32.dll ke direktori C:\WINDOWS\system32

Direktori
tempat
mengcopy
file
glut32.dll

GAMBAR 2.3 Direktori tempat mengcopykan file glut32.dll

3. Setelah ketiga file di atas dicopykan maka silahkan membuka program Visual C++

GAMBAR 2.4 Memulai Program C++

Modul OpenGL– STMIK NH

 Page |8

4. Setelah terbuka pilih Menu file -> New

GAMBAR 2.5 Pilih File Menu New

5. Pilih tab file --> pilih C++ Source File

GAMBAR 2.6 Pilih Tab File dan Pilih C++ Source File

Modul OpenGL– STMIK NH

 Page |9

2.3 Sistem Koordinat

2.4 Menggambar Titik

Prosedur untuk membuat titik, namun pada pembuatan objek primitive prosedur ini
tidak perlu diikutsertakan.

Untuk menggambar titik diposisi (x,y) dimanax dan y didefinisikan sebagai bilangan
bulat (integer).

Untuk menggambar titik diposisi (x,y) dimanax dan y didefinisikan sebagai bilangan
pecahan (float/double).

Modul OpenGL– STMIK NH

 P a g e | 10

Berikut program untuk menggambar titik :

Fungsi untuk membuat titik :

Modul OpenGL– STMIK NH

 P a g e | 11

Untuk mengubah ukuran titik dapat menggunakan perintah GLPOINTSIZE(UKURANTITIK);

Bila ditulis glPointSize(4) maka besar titiknya adalah 4X4 PIXEL. Bila tidak digunakan maka
ukuran titiknya adalah 1 PIXEL.

Contoh titik dengan ukuran dan warna yang berbeda :

void userdraw()
{
static int tick=0;
glColor3f(0.,0.,0.);
glPointSize(3);
glBegin(GL_POINTS);
glVertex2f(125,150);
glEnd();

glColor3f(0.,1.,0.);
glPointSize(10);
glBegin(GL_POINTS);
glVertex2f(160,150);
glEnd();

glColor3f(0.,0.,1.);
glPointSize(20);
glBegin(GL_POINTS);
glVertex2f(195,150);
glEnd();

glColor3f(1.,0.,1.);
glPointSize(30);
glBegin(GL_POINTS);
glVertex2f(245,150);
glEnd();
}

Hasilnya :

Modul OpenGL– STMIK NH

 P a g e | 12

2.5 Menggambar Garis

Untuk membuat garis diperlukan library GL_LINES dengan menyatukan titik awal dan titik
akhir dari garis. Untuk mengubah ukuran garis dapat menggunakan perintah
glLineWidth(TEBALGARIS); Bila ditulis glLineWidth(4) maka tebalnya garis adalah 4X4
PIXEL. Bila tidak digunakan maka ukuran titiknya adalah 1 PIXEL.

Fungsi untuk menggambar garis :

Modul OpenGL– STMIK NH

 P a g e | 13

Menggambar efek hujan, sama seperti menggambar bintang dengan titik acak,
tetapi yang obyeknya berupa garis diagonal. Program untuk menggambar efek hujan
ini adalah:

void userdraw(void)
{
float xp,yp;
for(int i=0;i<300;i++)
{
xp=640*(float)rand()/RAND_MAX;
yp=480*(float)rand()/RAND_MAX;
glColor3f(1,1,1);
glBegin(GL_LINES);
glVertex2f(xp,yp);
glVertex2f(xp+8,yp-8);
glEnd();
}
}

Atau bisa menggunakan Program lain seperti di bawah ini :

static point2D_f hujan[300];

static int tick=0, toc=0;
int i;

if(tick==0){
for(i=0;i<300;i++){
hujan[i].x=rand()%140-0;//pengaruhi daerah yg hujan
hujan[i].y=rand()%100-0;
}
}

if(toc==0){
for(i=0;i<700;i++){
hujan[i].x-=1;
hujan[i].y-=1;

if (((hujan[i].x<640)||(hujan[i].y<300)))
{
hujan[i].x=rand()%335-0;//pengaruhi t4 keluar air hujan

Modul OpenGL– STMIK NH

 P a g e | 14

hujan[i].y=rand()%276-0;
}
}
}

glColor3f(1,1,1);

for(i=0;i<200;i++){
gambarGaris(hujan[i].x,hujan[i].y,hujan[i].x-3,hujan[i].y-3);
}
tick++;
toc=tick%100;

Derasnya hujan dapat diatur dengan memperbanyak jumlah garis yang digambar
atau membuat garisnya lebih panjang. Sedangkan arah gerakan air hujan dapat
diatur dengan operasi penjumlahan atau pengurangan dari masing-masing nilai x
dan nilai y pada setiap garis. Permainan sudut akan menjadi lebih baik karena bisa
mengubah arah hujan menjadi lebih realistik dengan memberikan afek angin.

Contoh membuat garis dengan berbagai ukuran dan warna :

void userdraw()
{
static int tick=0;
glColor3f(0.,0.,0.);
glLineWidth(1);
glBegin(GL_LINES);
glVertex2f(125,150);
glVertex2f(125,450);
glEnd();

glColor3f(0.,1.,0.);
glLineWidth(3);
glBegin(GL_LINES);
glVertex2f(160,150);
glVertex2f(160,450);
glEnd();

glColor3f(0.,0.,1.);
glLineWidth(8);
glBegin(GL_LINES);
glVertex2f(195,150);
glVertex2f(195,450);
glEnd();

glColor3f(1.,0.,1.);
glLineWidth(100);
glBegin(GL_LINES);
glVertex2f(245,150);

Modul OpenGL– STMIK NH

 P a g e | 15

glVertex2f(245,450);
glEnd();
}

2.6 Membuat Polyline

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

Contoh input :

Output Program :

Modul OpenGL– STMIK NH

 P a g e | 16

2.7 Membuat Polygon

Polygon adalah sekumpulan garis yang terhubung satu dengan yang lainnya dan
berbentuk kurva tertutup hingga membentuk sebuah obyek gambar.

Contoh input :

Output program :

Modul OpenGL– STMIK NH

 P a g e | 17

Pemberian warna :

Red,green,blue bervariasi diantara 0. S/d 1.

Modul OpenGL– STMIK NH

 P a g e | 18

Contoh program : ( Membuat Grid )

Modul OpenGL– STMIK NH

 P a g e | 19

BAB III

MEMBUAT GRAFIK 2 DIMENSI

3.1 Materi
a. Definisi Obyek Grafik 2-D
b. Polyline
c. Mewarnai Area ( Fill Polygon )
d. Membangun obyek Grafik 2-D
e. Animasi 2-D

3.2 Definisi Obyek Grafik 2-D

Adalah sekumpulan titik-titik 2-D yang dihubungkan dengan garis lurus baik berupa
polyline, polygon, atau kurva, yang secara komputasi dinyatakan sebagai array 1-D atau
linked-list.

3.2.1 Mendefinisikan Titik 2-D

1. Mendefinisikan struktur dari titik 2-D ( Point2D_t )
2. Mendefinisikan struktur warna ( Color_t )
3. Mendefinisikan struktur dari obyek grafik 2-D sebagai array dari titik 2-D
(Object2D_t).

Modul OpenGL– STMIK NH

 P a g e | 20

3.2.2 Mendefinisikan Warna

3.2.3 Mendefinisikan Obyek Grafik 2-D

Modul OpenGL– STMIK NH

 P a g e | 21

3.2.4 Polyline

3.2.5 Polygon

Modul OpenGL– STMIK NH

 P a g e | 22

3.2.6 Fill Polygon

3.2.7 Gradate Polygon

Modul OpenGL– STMIK NH

 P a g e | 23

3.3 Membangun Objek Grafik 2-D

3.3.1 Membangun Objek grafik 2-D secara langsung

Modul OpenGL– STMIK NH

 P a g e | 24

Modul OpenGL– STMIK NH

 P a g e | 25

Berikut prosedur untuk lingkaran :

void drawCircle(double r, int pos_x, int pos_y, color col)
{
point2D_t circle[360];
double srad;

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

{
srad = i * 3.14/180;
circle[i].x = (float)(r * cos (srad)) + pos_x;
circle[i].y = (float)(r * sin (srad)) + pos_y;
}
fillPolygon(circle,360,col);
}

Dan dibawah ini untuk membuat lingkarannya :

void userdraw()
{

point2D_t lingkaran[360]; // diperlukan 360 titik

double srad, r;
color warnaLink={1,1,0};
for (int i =0; i<360; i++)
{
srad = i * 3.14/180;
r = sin(srad) * 120; // untuk menentukan ukuran lingkaran
lingkaran[i].x = (float)(r * cos (srad)*1.3) + 713; // koordinat x
lingkaran[i].y = (float)(r * sin (srad)) + 400; // koordinat y
}
fillPolygon(lingkaran,360,warnaLink);
setColor(1,0,0);
drawPolygon(lingkaran,360);
}

Modul OpenGL– STMIK NH

 P a g e | 26

3.3.2 Membangun Objek 2-D Dengan Persamaan Matematik

Contoh Fungsi Polar :

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

Modul OpenGL– STMIK NH

 P a g e | 27

Berikut kode program untuk membangun obyek grafik 2-D dengan menggunakan
koordinat polar.

Contoh Obyek 2 Dimensi (DrawCircle[])

Secara definisi, lingkaran adalah segi banyak. Jadi persoalannya disini adalah bagaimana
membuat sebuah bangun segi banyak, dimana setiap segi mempunyai sudut yang sama
besar. Konversi sistem koordinat sudut menjadi sistem koordinat Cartesian adalah berikut :

Modul OpenGL– STMIK NH

 P a g e | 28

Contoh Obyek 2 Dimensi (DrawEllipse[])

Contoh Obyek 2 Dimensi (CenterPolygon[])

Pewarnaan obyek yang memiliki titik pusat, misalnya obyek lingkaran atau obyek polar
lainya (rose, spiral, dll) dapat dilakukan dengan pewarnaan pergaris ( dari titik pusat :
warna putih, ketitik ke obyek lingkaran/polar : warna sembarang ) hasilnya akan
didapatkan degradasi warna putih dan warna sembarang yang cantik, prosedurnya sebagai
berikut :

Modul OpenGL– STMIK NH

 P a g e | 29

3.4 Animasi 2 Dimensi

Yang dilakukan dalam animasi 2 dimensi :
1. Membuat objek grafik 2-D menjadi bergerak
2. Animasi yang dilakukan adalah memindahkan posisi gambar
3. Pada sistem koordinat kartesian animasi akan berefek gerakan linier (translasi), pada
sistem koordinat polar akan berefek gerakan berputar (rotasi).

Pembuatan animasi 2 dimensi memiliki langkah sebagai berikut :

1. Pada main() ditambahkan fungsi glutIdleFunc(display) sebelum fungsi

glutDisplayFunc(display)
2. Pada awal fungsi userdraw() ditambahkan perintah untuk menambah nilai tick secara
terus menerus dengan perintah tick++
3. Tambahkan nilai tick ini pada nilai variabel dasar pembuatan grafik.

Berikut code program Animasi 2-D menggunakan koordinat polar :

Modul OpenGL– STMIK NH

 P a g e | 30

BAB IV

TRANSFORMASI 2 DIMENSI

4.1 Materi
1. Struktur titik dan vektor
2. Perubahan struktur titik ke vektor
3. Perubahan struktur vektor ke titik
4. Tranformasi 2-D
5. Perkalian Matriks
6. Komposisi Transformasi

4.2 Struktur Titik dan Vektor

Modul OpenGL– STMIK NH

 P a g e | 31

4.3 Perubahan struktur titik ke vektor

Fungsi ini digunakan untuk memindahkan tipe data titik menjadi tipe data
vektor. Hal ini sangat berguna untuk operasional matrik yang digunakan dalam
melakukan transformasi dan pengolahan matrik pada grafika komputer.

4.4 Perubahan struktur vektor ke titik

Fungsi ini digunakan untuk memindahkan tipe data vektor menjadi tipe data
titik. Hal ini sangat berguna untuk penyajian grafis setelah proses pengolahan matrik
yang dikenakan pada obyek 2-D.

4.5 Transformasi 2-D

Matrik transformasi 2-D adalah matrik yang membuat sebuah obyek mengalami
perubahan baik berupa perubahan posisi, maupun perubahan ukuran. Matrik 2-D
dinyatakan dalam ukuran 3x3, dimana kolom ke-3 digunakan untuk menyediakan
tempat untuk proses translasi.

Modul OpenGL– STMIK NH

 P a g e | 32

Berikut bentuk matrik 3 x 3 :

4.5.1 Translasi

Translasi adalah perpindahan obyek dari titik P ke titik P’ secara linier.

Proses translasi dengan menggunakan definisis vektor 2-D

Implementasi Matrik Transformasi untuk translasi

Modul OpenGL– STMIK NH

 P a g e | 33

Matrik Identitas
Adalah matrik yang nilai diagonal utamanya adalah 1 dan yang lain bernilai nol.

Code programnya adalah sebagai berikut :

Modul OpenGL– STMIK NH

 P a g e | 34

4.5.2 Scalling

Scaling m adalah perpindahan obyek dari titik P ke titik P’, dimana jarak titik P’ adalah m kali
titik p.

Proses scalling dengan menggunakan definisis vektor 2-D

Code programnya adalah sebagai berikut :

Modul OpenGL– STMIK NH

 P a g e | 35

4.5.3 Rotasi
Adalah perpindahan obyek dari titik P ke P’ yang berupa pemindahan berputar
sebesar sudut θ.

Proses rotasi dengan menggunakan definisis vektor 2-D

Code programnya adalah sebagai berikut :

Modul OpenGL– STMIK NH

 P a g e | 36

4.6 Perkalian Matrik

Catatan :
1. Perkalian matrik dengan matrik menghasilkan matrik
2. Perkalian matrik denga vektor menghasilkan vektor
3. Perkalian matrik ini digunakan untuk operasional transformasi dari obyek 2D dan untuk
komposisi (menggabungkan) transformasi.

Perumusan perkalian matrik dengan matrik, dimana untuk nilai i dan j bernilai 0 s/d 2

Code program perkalian matrik

Perumusan perkalian matrik dengan vektor, dimana untuk nilai i dan j bernilai 0 s/d 2

Modul OpenGL– STMIK NH

 P a g e | 37

Code program perkalian matrik dengan vektor

4.7 Komposisi Transformasi

Adalah penggabungan beberapa transformasi sehingga didapat hasil transformasi yang

lebih kompleks. Komposisi transformasi dapat dilakukan dengan mengalikan matrik-matrik
transformasi.

Contoh komposisi transformasi :

Modul OpenGL– STMIK NH

 P a g e | 38

Modul OpenGL– STMIK NH

 P a g e | 39

BAB V
GRAFIK 3 DIMENSI

5.1 Materi
1. Sistem Koordinat 3 Dimensi
2. Definisi obyek 3 Dimensi
3. Cara menggambar Obyek 3 Dimensi
4. Konversi vektor 3D menjadi titik 2D
5. Konversi titik 2D menjadi vektor 3D
6. Visible dan Invisible

Sistem Koordinat 3 Dimensi

Titik 3 Dimensi dinyatakan dengan P (x, y, z) dan dituliskan dalam bentuk :

Modul OpenGL– STMIK NH

 P a g e | 40

5.2 Definisi Obyek 3 Dimensi

Adalah sekumpulan titik 3-D (x,y,z) yang membentuk luasan – luasan (face) yang
digabungkan menjadi satu kesatuan. Face adalah gabungan titik – titik yang
membentuk luasan tertentu atau sering dinamakan dengan sisi.

Implementasi definisi dari struktur face :

NumberofVertices menyatakan jumlah titik pada sebuah face.

Pnt[32] menyatakan nomor – nomor titik yang digunakan untuk membentuk face,
dengan maksimum 32 titik.

Implementasi definisi dari Struktur Obyek 3-D :

Modul OpenGL– STMIK NH

 P a g e | 41

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.

Contoh pernyataan obyek limas segi empat :

Implementasi Pernyataan Obyek 3 Dimensi

Ditulis pada userdraw sebagai nilai dari obyek 3-D yang akan digambarkan.

Modul OpenGL– STMIK NH

 P a g e | 42

5.3 Cara Mengambar Obyek 3 Dimensi

1. Obyek 3D terdiri dari titik – titik dan face – face

2. Penggambaran dilakukan pada setiap face menggunakan polygon
3. Polygon terdiri dari titik – titik yang terdapat pada sebuah face
4. Titik – titik dinyatakan dalam struktur 3D, sedangkan layar komputer dalam
struktur 2D. Sehingga diperlukan konversi dari titik 3D ke 2D.

5.4 Koversi Vektor 3D menjadi 2D

1. Untuk mengambar obyek 3D, untuk setiap face perlu dilakukan pengubahan titik
3D menjadi vektor 3D.
2. Setelah proses pengolahan vektor, maka bentuk vektor 3D menjadi 2D.
3. Sumbu Z adalah sumbu yang searah dengan garis mata, sehingga perlu
transformasi untuk menampilkan sumbu ini. Untuk hal ini perlu dilakukan rotasi
sumbu.
4. Dalam konversi arah Z tidak diambil.

Vektor 3 D :

Modul OpenGL– STMIK NH

 P a g e | 43

Implementasi Konversi vektor 3D menjadi titik 2D

Implementasi konversi titik 3D menjadi vektor 3D

Kode Program Menggambar Obyek 3D

Modul OpenGL– STMIK NH

 P a g e | 44

Deklarasi mat sebagai matrik tilting menyatakan bahwa obyek yang digambar mengikuti
pergerakan sumbu koordinat ( tilting ).
Setiap titik diubah menjadi vektor dengan memperhatikan matrik transformasi yang
dinyatakan dalam mat.

Implementasi Tilting
Tilting adalah matrik rotasi dari sumbu koordinat dan semua obyek yang
digambar didalamnya.

Dalam deklarasi ini, matrik tilting adalah rotasi terhadap sumbu y sebesar -0.5 rad dan
rotasi terhadap sumbu x sebesar 0.5 rad.

Untuk setiap face pada obyek 3D :

1. Ambil vektor dari setiap titik pada face tersebut
2. Konversikan setiap vektor 3D menjadi titik 2D
3. Dari hasil konversi digambarkan polygon

Modul OpenGL– STMIK NH

 P a g e | 45

5.5 Visible dan Invisible

1. Visible dan Invisible menyatakan apakah suatu face terlihat (visible) atau tidak
terlihat (invisible).
2. Pada obyek 3D tidak semua face terlihat, karena terdapat face-face yang berada
di bagian belakang dan terhalang oleh face yang lain.
3. Untuk menyatakan face visible dan invisible digunakan vektor normal pada face
tersebut.
4. Suatu face visible bila arah z pada vektor normal positif, dan invisible bila arah z
pada vektor normalnya negatif.

Implementasi Visible dan Invisible

1. Untuk mengimplementasikan face visible dan invisible maka dilakukan
penggambaran dua kali.
2. Pertama digambar dulu face-face yang invisible (NormalVektor.v<0)
3. Kedua digambar face-face yang visible (NormalVektor.v[2]>0)

Contoh visible dan Invisible

Modul OpenGL– STMIK NH

 P a g e | 46

Modul OpenGL– STMIK NH

 P a g e | 47

5.6 Contoh contoh grafik

MENGGAMBAR PRISMA

#include <glut.h>
#include <math.h>

struct point
{
float x,y,z;
};

struct face
{
int jumtitikons;
int indextitik[40];
};

struct o3d
{
int jumtitik;
point titik[100];
int jumsisi;
face sisi[100];
};

void DrawLineLoop(o3d obj)

{
int i,j;

for(i=0;i<obj.jumsisi;i++)
{
glBegin(GL_LINE_LOOP);
glColor3f(1.0f,0.0f,0.0f);
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 Prisma()
{
o3d
prisma6={12,{{5,10,30},{15,20,30},{25,20,30},{35,10,30},{25,0,30},{15,0,30},{5,10,10},{15,20,10},{25,20,1
0},{35,10,10},{25,0,10},{15,0,10}},8,{{6,{0,1,2,3,4,5}},

Modul OpenGL– STMIK NH

 P a g e | 48

{6,{6,7,8,9,10,11}},{4,{0,6,7,1}},{4,{1,7,8,2}},{4,{2,8,9,3}},{4,{3,9,10,4}},{4,{4,10,11,5}},{4,{5,11,6,0}
}}};

DrawLineLoop(prisma6);
}

void UserDraw()
{
glClearColor(1.0f,1.0f,1.0f,0.0f);
glClear(GL_COLOR_BUFFER_BIT);
glRotatef(30.1f,1.0f,1.0f,1.0f);
Prisma();
glutSwapBuffers();
}

void main(int argc,char **argv)

{
glutInit(&argc,argv);
glutInitWindowPosition(20,20);
glutInitWindowSize(640,640);
glutInitDisplayMode(GLUT_DOUBLE|GLUT_RGB);
glutCreateWindow("Prisma Segi 6 Tiga Dimensi");
glOrtho(-30.0f,50.0f,-30.0f,50.0f,-30.0f,50.0f);
//glutIdleFunc(UserDraw);
glutDisplayFunc(UserDraw);
glutMainLoop();
}

PROGRAM BUAT LIMAS

#include <glut.h>
#include <math.h>

struct point
{
float x,y,z;
};
struct face
{
int jumtitikons;
int indextitik[40];
};

struct o3d
{
int jumtitik;
point titik[100];

Modul OpenGL– STMIK NH

 P a g e | 49

int jumsisi;
face sisi[100];
};

void DrawLineLoop(o3d obj)

{
int i,j;
for(i=0;i<obj.jumsisi;i++)
{
glBegin(GL_LINE_LOOP);
glColor3f(1.0f,0.0f,0.0f);
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 Limas4()
{
o3d limas4a={5,{{10,15,20},{20,15,20},{20,15,10},{10,10,25},{15,25,15}},5,{{3,{0,1,4}},
{3,{3,2,4}},{3,{0,4,3}},{3,{1,2,4}},{4,{0,1,2,3}}}};
DrawLineLoop(limas4a);
}

void UserDraw()
{
glClearColor(1.0f,1.0f,1.0f,0.0f);
glClear(GL_COLOR_BUFFER_BIT);
Limas4();
glutSwapBuffers();
}

void main(int argc,char **argv)

{
glutInit(&argc,argv);
glutInitWindowPosition(20,20);
glutInitWindowSize(640,640);
glutInitDisplayMode(GLUT_DOUBLE|GLUT_RGB);
glutCreateWindow("3 Dimensi - Klp 3");
glOrtho(-30.0f,50.0f,-30.0f,50.0f,-30.0f,50.0f);
glutIdleFunc(UserDraw);
glutDisplayFunc(UserDraw);
glutMainLoop();
}

Modul OpenGL– STMIK NH

 P a g e | 50

MENGGAMBAR OBJEK KOTAK DENGAN WARNA GRADASI

#include <glut.h>

typedef struct {
float x,y;
} point2D_t;

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

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

void setColor(color col)

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

void setColor(float r, float g, float b)

{
glColor3f(r, g, b);
}

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

Modul OpenGL– STMIK NH

 P a g e | 51

}
glEnd();
}

void gradatePolygon(point2D_t line[], int n, color col[])

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

void userdraw()
{
static int tick=0;
point2D_t kotak1[4]={{100,100},{300,100},{300,200},{100,200}}; // input penggambaran objek
color AREA[2]={{0.5,0,1},{0.5,0.5,0.2}}; //Input 2 warna untuk pewarnaan gradasi
gradatePolygon(kotak1,4,AREA); //Pemanggilan objek yang akan ditampilkan
setColor(1,1,1); //Pemberian warna garis tepi
drawPolygon(kotak1,4); //Pemanggilan objek untuk garis tepi
}

void display(void)
{
glClear(GL_COLOR_BUFFER_BIT);
userdraw();
glutSwapBuffers();
}
int main(int argc, char **argv)
{
glutInit(&argc,argv);
glutInitDisplayMode(GLUT_DOUBLE|GLUT_RGB);
glutInitWindowPosition(100,100);//meletakkan pada posisi (100,100) di layar komputer
glutInitWindowSize(640,480);//membuat ukuran window (640,480)
glutCreateWindow("Tampilan Windows Open GL");//pemberian judul pada window
glClearColor(0.0,0.0,0.0,0.0);//pemberian warna pada window dengan format RGB
gluOrtho2D(-50.,840.,-140.,840.);
glutIdleFunc(display);
glutDisplayFunc(display);
glutMainLoop();
return 0;
}

Modul OpenGL– STMIK NH

 P a g e | 52

MEMBUAT EFEK BINTANG

#include <math.h>
#include <glut.h>

typedef struct
{
float x, y;
}point2D_t;

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

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

void setColor(color col)

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

void setColor(float r, float g, float b)

{
glColor3f(r, g, b);
}

void fillPolygon(point2D_t line[], int n, color col)

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

void gradatePolygon(point2D_t line[], int n, color col[])

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

Modul OpenGL– STMIK NH

 P a g e | 53

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

static void createStar(point2D_t p[],float a,point2D_t p1)

{
float teta=36,sudut,r=10;

for(int i=0;i<10;i++)
{
sudut=(float)i*teta/57.3;
if (r==2)r=10;else r=2;
p[i].x=p1.x+r*cos(sudut+a);
p[i].y=p1.y+r*sin(sudut+a);
}
}

void userdraw()
{
point2D_t batas[4] = {{36,20},{988,20},{988,583},{36,583}};
color wlangit[4]={{0.3,0.0,0.3},{0.3,0.0,0.3},{0.9,1,0.5},{0.9,0.8,0.5}};
gradatePolygon(batas,4,wlangit);
static float a=0;
color warna={1,1,0};
point2D_t c10[10],p10={530,121};
createStar(c10,a,p10);
point2D_t c1[10],p1={500,321};
createStar(c1,a,p1);
point2D_t c2[10],p2={433,247};
createStar(c2,a,p2);
point2D_t c3[10],p3={286,125};
createStar(c3,a,p3);
point2D_t c4[10],p4={553,150};
createStar(c4,a,p4);
point2D_t c5[10],p5={232,350};
createStar(c5,a,p5);
point2D_t c6[10],p6={643,123};
createStar(c6,a,p6);
point2D_t c7[10],p7={200,250};

Modul OpenGL– STMIK NH

 P a g e | 54

createStar(c7,a,p7);
point2D_t c8[10],p8={433,247};
createStar(c8,a,p8);
point2D_t c9[10],p9={334,350};
createStar(c9,a,p9);

fillPolygon(c1,10,warna);
fillPolygon(c2,10,warna);
fillPolygon(c3,10,warna);
fillPolygon(c4,10,warna);
fillPolygon(c5,10,warna);
fillPolygon(c6,10,warna);
fillPolygon(c7,10,warna);
fillPolygon(c8,10,warna);
fillPolygon(c9,10,warna);
fillPolygon(c10,10,warna);
a+=0.005; // Mengatur efek bintang berputar
}

void display(void)
{
glClear(GL_COLOR_BUFFER_BIT);
userdraw();
glutSwapBuffers();
}

int main (int argc, char **argv)

{
glutInit(&argc, argv);
glutInitDisplayMode(GLUT_DOUBLE | GLUT_RGB);
glutInitWindowPosition (0,0);
glutInitWindowSize(1020,760);
glutCreateWindow("Fighting");
glClearColor(1,1,1,0);
gluOrtho2D(0,1024,768,0);
glutIdleFunc(display);
glutDisplayFunc(display);
glutMainLoop();
return 0;

Modul OpenGL– STMIK NH