Anda di halaman 1dari 4

PERANCANGAN ANIMASI KERETA INTERAKTIF 2D

Chandra Eko Saputra1, Kemala Dewi2, Sri Wulan Dari3, Aprizal Ardi4
Jurusan Sistem Komputer
Fakultas Ilmu Komputer Universitas Sriwijaya
Email :
eigernick13@gmail.com, kemaladewi09@gmail.com, wulansriwulandari88@yahoo.co.id, aprizal.ardi@yahoo.com

Abstrak
Grafika komputer telah menunjukkan kemajuan yang pesat, semakin banyak bahasa
pemrograman yang dilengkapi dengan tools/library pembuatan grafik. Salah satu tools/library
pembuatan aplikasi grafik adalah OpenGL (Open Graphics Library). OpenGL(Open Graphics
Library) adalah suatu spefikasi grafik yang low-level yang menyediakan fungsi untuk pembuatan
grafik primitif termasuk titik, garis, dan lingkaran. Pada jurnal ini akan dibahas perancangan
animasi kereta 2D yang akan terus berjalan ke kiri keluar dari jendela aplikasi sebelum kemudian
kembali ke kanan begitu terus sebaliknya.
Keyword: grafika, animasi, 2D, kereta
1. PENDAHULUAN
2.
Grafika
komputer
telah
menunjukkan kemajuan yang pesat dalam
pengembangan berbagai aplikasi untuk
menghasilkan gambar. Grafika komputer
digunakan untuk menunjang berbagai bidang
dengan teknologi grafika berbasis komputer.
Pada saat ini grafika komputer sudah
digunakan pada bidang sains, engineering,
kedokteran, bisnis, industri, pemerintahan,
seni, hiburan, iklan, pendidikan, dan lain-lain.
Oleh karena itu, sudah semakin banyak pula
bahasa pemrograman yang dilengkapi dengan
tools/library pembuatan grafik Salah satu
tools/library pembuat
3.
an aplikasi grafik adalah
OpenGL (Open Graphics Library). OpenGL
(Open Graphics Library) adalah suatu
spefikasi grafik yang low-level yang
menyediakan fungsi untuk pembuatan grafik
primitif termasuk titik, garis, dan lingkaran.
OpenGL digunakan untuk mendefinisikan
suatu objek, baik objek 2 dimensi maupun
objek 3 dimensi.
4.
Selama ini telah banyak animasianimasi baik 2D maupun 3D yang telah dibuat
menggunakan teknologi digital. Animasi yang
penulis buat ini tentunya ada sebuah kereta
yang akan terus berjalan ke kiri keluar dari
jendela aplikasi sebelum kemudian kembali
ke kanan begitu terus sebaliknya.
5.
2. TINJAUAN PUSTAKA
6.
Grafika
komputer
(Inggris:
Computer graphics) adalah bagian dari ilmu
komputer yang berkaitan dengan pembuatan

dan manipulasi gambar (visual) secara digital.


Bentuk sederhana dari grafika komputer
adalah grafika komputer 2D yang kemudian
berkembang menjadi grafika komputer 3D,
pemrosesan citra (image processing), dan
pengenalan pola (pattern recognition). Grafika
komputer sering dikenal juga dengan istilah
visualisasi data.
7.
2.1. Primitive Object
8.
Primitives merupakan geometri
sederhana (basic) : titik (points), garis
(lines), segiempat (quads), dan segitiga
(triangles).
9.
Primitif objek terdiri atas[1] :
Titik, yaitu Vertex, dimana vertex
merupakan acuan dasar.
Garis, yaitu Line/Edge
Bangun 2D (Face)
10.
Fungsi Dasar Menggambar Titik
glVertex2i(x,y), yaitu suatu fungsi
untuk menggambar titik pada koordinat
x dan y, dengan nilai satuan berupa
integer. Contoh glVertex2i(10,10);

glVertex2f(x,y), yaitu suatu fungsi


untuk menggambar titik pada koordinat
x dan y, dengan nilai satuan berupa
float. Contoh glVertex2f(10.0,10.0);
glVertex2d(x,y),yaitu suatu fungsi
untuk menggambar titik pada koordinat
x dan y, dengan nilai satuan berupa
double. Contoh glVertex2d(10.0,10.0);
11.
Berikut adalah primitive objek
yang
akan
dipergunakan
didalam
pembuatan suatu objek [1] :

# define GL_POINTS
12. Primitif objek ini dipergunakan
untuk menciptakan suatu titik.
# define GL_LINES
13. Primitif objek ini adalah suatu
primitive objek guna menciptakan suatu
garis.
# define GL_LINE_LOOP
# define GL_LINE_STRIP
# define GL_TRIANGLES
14. Triangle atau segitiga adalah tiga
buah titik yang terhubung menjadi
suatu segitiga dengan blok di
tengahnya. Pada penggunaan primitive
objek ini kita harus menggunakan
minimal 3 buah vertex guna
membentuk suatu objek.
# define GL_TRIANGLES_STRIP,
15. Pada triangles strip jumlah
vertex yang dipergunakan adalah 4
buah vertex.
# define GL_TRIANGLE_FAN
16. Triangles fan adalah pembuatan
suatu objek dengan menggunakan
segitiga dimana hanya menggunakan 1
titik pusat saja.
# define GL_QUADS
17. Quad atau segiempat adalah
empat buah titik yang terhubung
menjadi suatu segempat dengan blok di
tengahnya.
# define GL_QUADS_STRIP
18. Pada quads strip 4 buah vertex
merupakan
1
kelompok.Langkah
rendering pada quads strip :
a. Nomor yang berhadap (membentuk
2 garis yang sejajar)
b. Nomor ganjil dengan nomor ganjil
dipertemukan
c. Nomor genap dengan nomor genap
dipertemukan
d. Garis
yang
tersisa
akan
dipertemukan
# define GL_POLYGON
19. Polygon merupakan suatu fungsi
yang mirip dengan polyline, tetapi
menghasilkan kurva tertutup dengan
blok warna (fill). Rendering yang
dimiliki oleh GL_POLYGON sama
dengan GL_TRIANGLE_FAN

20.
21. Menggambar
perancangan
ini
trigonometri dimana :

lingkaran
digunakan

pada
metode

22.
23.
Lingkaran dengan pusat (a,b) dan
Radius r, dengan persamaan :
24.
x = a + r cos dan y = b + r sin

25.
Persamaan diperoleh dengan
menggeser titik pusat (0,0) ke titik (a,b)
diikuti dengan pergeseran titik yang
lainnya [1].
26.
2.2. Transformasi
27. Transformasi merupakan suatu
metode untuk mengubah lokasi suatu titik
pembentuk objek, sehingga objek tersebut
mengalami perubahan. Perubahan objek
dengan mengubah koordinat dan ukuran
suatu objek disebut dengan transformasi
geometri. Dalam Transformasi dasar yang
akan dibahas meliputi translasi, skala, dan
rotasi.
2.2.1 Translasi
28.
Translasi
berarti
memindahkan objek sepanjang garis
lurus dari suatu lokasi koordinat
tertentu kelokasi yang lain tanpa
mengubah bentuk objek. Bila suatu
objek terbentuk dari beberapa titik
maka bila melakukan translasi akan
dikenakan
terhadap
setiap
titik
pembentuk objek tersebut.
29.
Tv
->
Perpindahan
obyek dengan vektor arah v = a i + b j.
30.
Dengan:
31.
a
=
besarnya
perpindahan ke x
32.
b
=
besarnya
perpindahan ke y
33.
y

34.
35.
Translasi
dilakukan
dengan penambahan translasi pada
suatu titik koordinat dengan translasi
vector yaitu (trx,try), dimana trx adalah

translation vector menurut sumbu x


sedangkan try adalah translasi vector
terhadap sumbu y.
36.
37.

38.
2.3. Blending
39. Blending
merupakan
menggabung kan nilai intensitas warna
dari sumber (source) dan tujuan
(destination/object)
atau
mengkombinasikan warna output fragment
dengan warna output fragment yang
dirender sebelumnya ke frame buffer.
40.
Source and Destination Factor :
RGBA (Red, Green, Blue, Alpha)
41. Alpha digunakan untuk mengatur
tingkat opacity objek.
a = 1 Perfectly opaque (objek
terlihat jelas),
a = 0 Perfectly transparent
(objek hilang),
0 < a < 1 Different levels of
translucency (objek terlihat
transparan)
Blending colors
Source color : (Rs, Gs, Bs, As)
Destination color
: (Rd, Gd, Bd,
Ad)
Source factor : (Sr, Sg, Sb, Sa)
Destination factor
: (Dr, Dg, Db,
Da)
42.
Blended RGBA = (RsSr+RdDr,
GsSg+GdDg, BsSb+BdDb, AsSa+AdDa)
3.2 Fungsi Dasar Pembentuk Objek
54.

Void

56. int i;

43.
44.
45.
46.
2.4. Camera dan Viewing
47. Camera and viewing adalah Cara
mengatur pandangan objek 2D maupun 3D
dan mengontrol pergerakan kamera.
48. Parallel Projection Syntax
gluOrtho2D(-100,100,-200,200);
49. Mendefinisikan besarnya
sistem koordinat 2D : dengan range
sumbu x adalah [-100,100] dan range
untuk sumbu y adalah [-200,200]
glOrtho(-15.0, 20.0, -10.0, 15.0, -50.0,
70.0);
50. Mendefinisikan besarnya
sistem koordinat 3D : dengan range
sumbu x adalah [-15,20], range untuk
sumbu y adalah [-10,15], range untuk
sumbu z adalah [-50,70]
51.
3. PEMBAHASAN
3.1 Komponen Pembangun Objek
52. Komponen pada pembangunan
animasi
Kereta
ini
kebanyakan
menggunakan
GL_QUADS
dan
GL_POLYGON untuk menggambar badan
kereta. Namun fungsi-fungsi OpenGL
lainnya
seperti
GL_LINES
dan
GL_TRIANGLES juga tak kalah penting
sehingga fungsi-fungsi tersebut juga sering
digunakan.
53.
55.
Keterangan
68. Prosedur lingkaran untuk

57. const double PI = 3.14;

membuat lingkaran yang

58. void lingkaran(int jari2, int

nantinya akan di panggil pada

jumlah_titik, int x_tengah, int

sebuah titik dengan masukan

y_tengah) {

jari-jari

59.

glBegin(GL_POLYGON);

60.

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

61.

float sudut=i*(2*PI/jumlah_titik);

62.

float
x=x_tengah+jari2*cos(sudut);

67.

63.

float y=y_tengah+jari2*sin(sudut);

64.

glVertex2f(x,y);

65.

66.

glEnd();

}
69. int r=1;
70. int ujung=1;

90. Prosedur fungsiKeyboard untuk


mengatur pergerakan kereta

104.
4

kiri dan
ke kanan
dengan
d. ke
kereta
menghilang
keluar
window lagi
tapi
pada
sisi
kanan
window
menekan tombol kiri dan
117.kanan pada keyboard. Dengan

71. void fungsiKeyboard(void)

105. 72. {
HASIL
ANALISA
73.DAN
if(GetAsyncKeyState(VK_LEFT))
a. Saat program dijalankan.
74.
{
106.
75.

ujung==1 && r>-1200;

76.

r--;

77.

r==-1200;

78.

ujung=0;

79.

2.

Jika tombol kiri ditekan maka


(translasi) dari kanan ke kiri.
Jika tombol kanan ditekan
maka kereta akan bergerak

(translasi) dari kiri ke kanan.


91.

81.

if(GetAsyncKeyState(VK_RIGHT))

82.

107. 83.
r<600 && ujung==0;
b. Saat
kereta
keluar
84.
r++; menghilang
window
85. r==600;
108.
86.
88.

1.

kereta akan bergerak

80.

87.

logika :

118.
e. Kereta muncul dan bergerak kearah
kiri window lagi dengan menekan
tombol kiri pada keyboard.
119.

ujung = 1;

}
glutPostRedisplay();

89. }
92. void display(){

103.

93. fungsiKeyboard ();

tampilan objek yang telah dibuat

94.

glClear(GL_COLOR_BUFFER_BIT);

95.

glPushMatrix();

latar();
109. 96.
97. mulai
glTranslatef(r,0,0);
c. Kereta
bergerak mundur kearah
kanan
window
98.
kereta();dengan menekan
tombol kanan pada keyboard
99.
glPopMatrix();
110.
100.

stopan();

101.
102.

111.
112.
113.
114.
115.
116.

glFlush();
}

Void untuk mengatur urutan

120.
121.
5 KESIMPULAN
122.
Dengan menggunakan
OpenGL ini dalam pembuatan animasi
Kereta dapat disimpulkan:
1. OpenGL dapat merepresentasikan
gambar 2D pada animasi Kereta
yang telah dibuat.
2. Prosedur
untuk
menampilkan
lingkaran dibuat dengan persamaan
dasar dari lingkaran adalah x = a +
r cos dan y = b + r sin .
123.
124.
125.
126.
Daftar Pustaka
127. [1] Hearn, Donald and Pauline Baker,
M. 2004. Computer Graphics with
OpenGL. Pearson Prentice Hall :
Amerika.

128.