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 dengan“Drawing 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