Modul Ajar Program D4

Bab 2
Grafik 2 Dimensi

Tujuan:
Mempelajari struktur dasar obyek grafik 2-D
Membangun obyek grafik 2-D

Mengenal macam-macam obyek 2-D yang menarik dan berguna, seperti pembuatan
grafik untuk keperluan visualisasi dan analisa

Materi:

Definisi Obyek Grafik 2-D

PolyLine
Polygon
Mewarnai Area (FillPolygon)
Membangun Obyek Grafik 2D
Membangun Obyek Grafik 2D Dengan Persamaan Matematik
Animasi 2D

3.1. Definisi Obyek Grafik 2-D

Obyek grafik 2-D adalah sekumpulan titik-titik 2-D yang dihubungkan dengan garis
lurus baik berupa polyline, polygon atau kurva. Obyek grafik 2-D didefinisikan sebagai
sekumpulan titik 2-D yang secara komputasi dinyatakan sebagai array 1-D, atau linked-
list sesuai dengan struktur data yang digunakan dalam menyatakan kumpulan titik 2D
ini.

Langkah-Langkah Untuk Mendefinisikan Obyek Grafik 2-D:

Mendefinisikan struktur dari titik 2-D (Point2D_t)
Mendefinisikan struktur warna (Color_t)

Mendefinisikan struktur dari obyek grafik 2-D sebagai array dari titik 2-D (Object2D_t)

3.1.1. Mendefinisikan Titik 2D

Titik 2D mempunyai dua nilai yaitu x dan y yang menyatakan jarak horizontal dan
vertikal dari titik pusat sumbu koordinat (0,0).
Y
P(x,y)

(0,0)x
X

Grafika Komputer 14
Modul Ajar Program D4

Definisi dalam C++

Pengertian

typedef struct {

Definisi ini digunakan bila titik didefinisikan dalam

float x,y;

sistem koordinat yang menggunakan bilangan

} point2D_t;

pecahan (float)
typedef struct {

Definisi ini digunakan bila titik didefinisikan dalam

int x,y;

sistem koordinat yang menggunakan bilangan bulat

} point2D_t;

(integer)

Dengan menggunakan struktur data titik di atas, maka fungsi untuk menggambar titik
(drawDot) dapat dituliskan dengan:

(1) Untuk titik yang didefinisikan dengan integer :

void drawDot(point2D_t P){ glBegin(GL_POINTS); glVertex2i(P.x,P.y); glEnd();

(2) Untuk titik yang didefinisikan dengan float :

void drawDot(point2D_t P){ glBegin(GL_POINTS); glVertex2i(P.x,P.y); glEnd();

3.1.2. Mendefinisikan Warna

Seperti telah dibahas sebelumnya, warna yang digunakan terdiri dari 3 elemen warna dasar
yaitu RGB (red, green dan blue). Sehingga struktur data untuk menyatakan warna ini
adalah sebagai berikut:

typedef struct { float r,g,b;

} color_t;

Warna terdiri dari 3 elemen warna yaitu red (r), green (g) dan blue (b) yang nilainya antara
0 dan 1

Fungsi untuk memberi warna pada obyek grafik:

void setColor(color_t col)

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

3.1.3. Mendefinisikan dan Menggambar 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:
point2D_t shape[1000]

Untuk menyatakan obyek bunga dengan jumlah titik 360 dapat dituliskan: point2D_t
bunga[360]

Grafika Komputer 15
Modul Ajar Program D4

3.2. PolyLine
Polyline adalah suatu fungsi yang digunakan untuk menggambarkan obyek 2-D
yang sudah didefinisikan di depan, dimana setiap titik pada obyek mulai titik ke

0,1,2,3,,n dihubungkan dengan garis lur menggambar obyek 2D dengan menggunakan polyline
dapat dituliskan dengan :
drawPolyline(nama_obyek2D, jumlah_titik)

Implementasi dari fungsi polyline adalah:

void drawPolyline(point2D_t pnt[],int n)

{

int i; glBegin(GL_LINE_STRIP); for (i=0;i<n;i++) {

glVertex2f(pnt[i].x, pnt[i].y);

}
glEnd();

dimana :

pnt[] menyatakan obyek 2D dalam array yang ditentukan n adalah jumlah titik dalam obyek 2D pnt

Contoh implementasi menggambar obyek dengan polyline:

void userdraw(void)
{

point2D_t segitiga[3]={{0,0},{200,0},{100,100}}; setColor(1,0,0);

drawPolyline(segitiga,3);

Hasilnya adalah:
Catatan, dalam program ini, definisi sistem koordinat digunakan xrange=[0,640] dan yrange=[0,480]
yang dituliskan dengan:
gluOrtho2D(0., 640., 0., 480.);

3.3. Polygon

Polygon adalah suatu fungsi yang mirip dengan polyline hanya saja hasilnya adalah kurva tertutup,
sedangkan polyline hasilnya kurva terbuka. Seperti halnya polyline, pada polygon ini juga digunakan
konsep array dalam menyatakan obyek 2D sebagai kumpulan titik 2D.

Grafika Komputer 16
Modul Ajar Program D4

Untuk menggambar obyek 2D dengan menggunakan polyline dapat dituliskan

dengan :
drawPolygon(nama_obyek2D, jumlah_titik)

Implementasi dari fungsi polygon adalah:

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

Contoh implementasi menggambar obyek dengan polygon:

void userdraw(void)
{

point2D_t segitiga[4]={{0,0},{200,0},{100,100}}; setColor(1,0,0);

drawPolygon(segitiga,3);

Hasilnya adalah:

3.3. FillPolygon

Fungsi ini digunakan untuk mewarnai atau memenuhi warna (mengecat) sebuah polygon
dengan warna tertentu. Untuk dapar mewarnai isi polygon dapat dituliskan:
fillPolygon(nama_obyek2D,jumlah_titik,warna);
Implementasi dari fungsi fillpolygon adalah:

void fillPolygon(point2D_t pnt[],int n, color_t color)

{

int i; setColor(color); glBegin(GL_POLYGON); for (i=0;i<n;i++) {

glVertex2f(pnt[i].x, pnt[i].y);

glEnd();

Grafika Komputer 17
Modul Ajar Program D4

Contoh implementasi menggambar obyek dengan fillpolygon:

void userdraw(void)
{

point2D_t segitiga[4]={{0,0},{200,0},{100,100}}; //memblok dengan warna

kuning

color_t kuning={1,1,0}; fillPolygon(segitiga,3,kuning); //warna garis tepi

merah setColor(1,0,0); drawPolygon(segitiga,3);

Hasilnya adalah:

3.4. GradatePolygon

Fungsi ini digunakan untuk mewarnai sebuah polygon dengan warna-warna yang
bergradiasi dari suatu warna ke warna lainnya. Untuk memberikan efek gradiasi warna
pada polygon dapat dituliskan:
GradatePolygon(nama_obyek2D,jumlah_titik,warna);

Implementasi dari fungsi gradatePolygon adalah sebagai berikut:

void GradatePolygon(point2D_t pnt[],int n, color_t color)

{

int i; glBegin(GL_POLYGON);

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

}

glEnd();

}
Contoh implementasi menggambar obyek dengan gradatepolygon:

void userdraw(void)
{

point2D_t segitiga[4]={{0,0},{200,0},{100,100}}; //memblok dengan warna

gradiasi kuning ke merah color_t warna[3]={{1,1,0},{1,0,0},{1,0.5,0}};
fillPolygon(segitiga,3,warna);

//warna garis tepi merah setColor(1,0,0); drawPolygon(segitiga,3);

Grafika Komputer 18
Modul Ajar Program D4

Hasilnya adalah:

3.5. Membangun Obyek Grafik 2-D

Membangun obyek grafik 2-D secara umum menggunakan fungsi-fungsi seperti yang
dijelaskan di depan dapat dilakukan dengan:
Membuat obyek grafik 2-D secara langsung.

Membuat obyek grafik 2-D secara perhitungan matematis.

Membuat 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

Contoh Membuat Bintang

void userdraw()
{ Point2D_t bintang[10]={{80,146},{99,90},

{157,90},{110,55},{128,1},

{80,34},{32,1},{54,55},

{3,90},{63,90}}; color_t merah={1,0,0}; setColor(merah);

drawPolygon(bintang,10);

Hasilnya adalah:

Grafika Komputer 19
Modul Ajar Program D4

3.6. Membuat Obyek Grafik 2-D Dengan Persamaan Matematik

logaritma, atau
Dengan persamaan matematik y=f(x) dapat digambarkan fungsi
bentuk yang menarik seperti sinus, kurva dengan variasi
cosinus, gabungannya. exponential dan
0
yang
Contoh grafik dari dinyatakan
x / 2 dalam
persamaan : y e
sin(x) untuk x=0 s/d 10 radian (0
adalah : s/d 2).
0.6
-0.1 Macam-
macam r sin(2)
r=f() dapat
menghasilk
an gambar Rose 4 daun
yang
-0.2
bervariasi

Beberapa
exp(-x/2)*sin(x)
Contoh
Fungsi
0.5
0 Polar dan
2
4 hasilnya:
6
8
10 Fungsi
polar r sin(3)
0.4
Bentuk
persamaan Hasil Rose 3 daun
matematik
yang menarik
untuk dibuat
0.3 adalah
persamaan
matematik
dengan
menggunakan
sistem
0.2
koordinat
polar. r cos() r
atau r
r=f( sin()
x=r.cos( Spiral
0.1 y=r.sin(
Dimana: Lingkaran

adalah sudut r 1 cos()

yang berjalan
dari 0 s/d 360
Kardioda koordinat Menggunakan Koordinat
polar ini Polar
Masih banyak
variasi fungsi Program
yang lain Code void userdraw()
yang dapat Membangu
{ Point2D_t shape[360];
dibangun n Obyek double srad,r; for(int
dengan Grafik 2-D s=0;s<360;s++)
menggunakan Dengan
Grafika Komputer 20
Modul Ajar Program D4

{ 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 seperti gambar berikut:

3.7. Animasi 2-D

Animasi 2D adalah salah satu bentuk grafik 2D yang bergerak dengan berbagai macam
transformasi yang digunakan. Untuk membuat obyek grafik 2-D menjadi bergerak dapat
digunakan berbagai macam teknik animasi, seperti :
Transformasi posisi

Tweening

Morphing

Marquee

Pada transformasi posisi, Animasi yang dilakukan adalah memindahkan posisi gambar.
Pada sistem koordinat kartesian animasi akan berefek gerakan linier (translasi), pada
sistem koordinat polar akan berefek gerakan berputar (rotasi).

Pembuatan Animasi 2-D

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

Pada awal fungsi userdraw() didefinisikan static int tick

Pada akhir fungsi userdraw() ditambahkan perintah untuk menambah nilai tick secara
terus menerus dengan tick++.

Tambahkan nilai tick ini pada nilai variabel dasar pembuatan grafik.

Program Code Animasi 2-D Menggunakan Koordinat Polar secara lengkap adalah:

#include <glut.h>

typedef struct { float x,y;

Grafika Komputer 21
Modul Ajar Program D4

} point2D_t;

void drawPolygon(point2D_t pnt[],int n)

{

int i; glBegin(GL_POLYGON); for(i=0;i<n;i++)

glVertex2f(pnt[i].x,pnt[i].y);
glEnd();

void userdraw()

{ static int tick=0; Point2D_t shape[360]; double srad,r; for(int

s=0;s<360;s++)

{ srad=(s+tick)*3.14/180; r=100*sin(5*srad); shape[s].x=(float)

(r*cos(srad)); shape[s].y=(float)(r*sin(srad));

drawPolygon(shape,360);
tick++;

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

glutCreateWindow ("Grafik 2D oleh Achmad Basuki"); glClearColor(0.0,

0.0, 0.0, 0.0); gluOrtho2D(-200., 200., -200., 200.);

// Define the dimensions of the Orthographic Viewing Volume

glutIdleFunc(display); // idle event call back
glutDisplayFunc(display);

glutMainLoop(); return 0;

}
Animasi Lebih Lanjut

Animasi lebih lanjut akan dipelajari pada materi Transformasi 2-D, dimana animasi
dapat dilakukan dengan sangat mudah.

Program yang dibangun dengan menggunakan Transformasi 2-D ini akan menjadi lebih
user-friendly karena setiap perintahnya dapat dimengerti dengan mudah

Grafika Komputer 22
Modul Ajar Program
D4

Grafika
Komputer
23