LAPORAN TUGAS KOMPUTER GRAFIK MEMBUAT ANIMASI 2 DIMENSI "SUASANA PANTAI"

BAB I

PENDAHULUAN

1.1         Latar Belakang Masalah

Komputer merupakan salah satu teknologi yang paling pesat perkembangannya. Pada saat pertama kali ditemukan, komputer digunakan terutama sebagai alat bantu untuk mempercepat proses hitung menghitung. Komputer dari generasi  ke generasi mengalami perkembangan dalam hal pengolahan data baik kapasitas maupun kecepatannya. Data yang diolah tidak hanya berupa teks atau angka, tapi kini komputer dapat mengolah gambar/grafik. Komputer yang memiliki piranti grafik untuk mengolah gambar atau grafik disebut grafik komputer.

Dewasa ini pengolahan grafis  cenderung memakai teknologi digital. Dalam teknologi ini image analog yang ditangkap kamera digital dibagi-bagi menjadi unsur-unsur gambar paling kecil lalu diubah menjadi bit dan disimpan dalam perangkat digital.

Komputer grafik pada dasarnya adalah suatu bidang komputer yang mempelajari cara-cara untuk meningkatkan dan memudahkan komunikasi antara manusia dengan mesin (komputer) dengan jalan membangkitkan, menyimpan dan memanipulasi gambar model suatu objek menggunakan komputer. Komputer grafik memungkinkan kita untuk berkomunikasi lewat gambar-gambar, bagan-bagan dan diagram.

Istilah komputer grafik mencakup hampir semua yang ada di komputer yang bukan hanya teks atau suara. Komputer grafik dan gambar yang dihasilkan komputer menyentuh semua aspek. Grafik komputer yang dibangun dengan baik dapat menyajikan grafik statistik kompleks dalam bentuk yang lebih mudah untuk memahami dan menafsirkannya. Berbagai alat dan fasilitas yang tersedia pada komputer grafis memungkinkan pengguna dapat  memvisualisasikan data mereka dan juga komputer grafis banyak  digunakan dalam banyak disiplin ilmu.  

1.2         Rumusan Masalah

Perumusan masalah pada tugas Komputer Grafik ini yaitu:

1.        Bagaimana mensimulasikan grafis OpenGL yang didukung pemrograman Bahasa C++.

2.        Bagaimana membuat animasi Pemandangan Laut dalam bentuk 2 dimensi.

1.3         Maksud dan Tujuan

Berdasarkan permasalahan yang diteliti, maka tujuan yang akan dicapai dalam penelitian ini adalah :

1.        Dapat mensimulasikan grafis OpenGL yang didukung pemrograman Bahasa C++.

2.        Dapat menunjukkan bagaimana pemandangan laut dalam bentuk grafik 2 dimensi.

1.4         Batasan Masalah

Pembatasan masalah dilakukan agar penulisan tugas ini dapat memberikan pemahaman yang terarah dan sesuai dengan yang diharapkan. Agar pembahasan tidak menyimpang dari pokok perumusan masalah yang ada, maka penulis membatasi permasalahan pada :

1.      Pemrograman hanya menggunakan bahasa C++

2.      Menunjukan situasi di laut, seperti adanya kapal, pantai.

3.      Selain itu ada juga pergerakan rumput laut dan efek air dari air laut

1.5         Metodologi Penelitian

Metodologi yang digunakan dalam penulisan tugas ini:

Tahap pembuatan perangkat lunak dengan SDLC (Systems Development Life Cycle)

Metode penelitian dalam tugas ini menggunakan SDLC (System Development Life Cycle) yaitu proses logis yang digunakan oleh analis sistem untuk menggambarkan sebuah sistem informasi, termasuk di dalamnya persyaratan, validasi, pelatihan dan kepemilikan. SDLC merupakan siklus pengembangan sistem. Pengembangan sistem teknik (engineering system development).

1.6         Sistematika Penelitian

Sistematika penulisan proposal penelitian ini disusun untuk memberikan gambaran umum tentang penelitian yang dijalankan. Sistematika secara umum adalah sebagai berikut :

BAB I  PENDAHULUAN

Menguraikan tentang dasar-dasar pemikiran yang berisi tentang latar belakang masalah, perumusan masalah, maksud dan tujuan, batasan masalah, metode penelitian, serta sistematika penulisan.

BAB II  TINJAUAN PUSTAKA

Bab ini memaparkan tentang teori-teori yang berkaitan dengan topik dan menunjang dalam perancangan sistem yang digunakan sebagai acuan dalam pembuatan perangkat lunak.

BAB III  PEMBAHASAN

Pada bab ini dijelaskan langkah-langkah perancangan dan pembuatan animasi yang dibuat

BAB IV  KESIMPULAN DAN SARAN

Berisi kesimpulan dan saran yang sudah diperoleh dari hasil penulisan tugas.

BAB II

TINJAUAN PUSTAKA

2.1.       Pengertian Komputer Grafik

Komputer Grafik adalah bagian dari ilmu komputer yang berkaitan dengan pembuatan dan manipulasi gambar (visual) secara digital. Bentuk sederhana dari komputer grafik adalah komputer grafik 2D yang kemudian berkembang menjadi 3D, pemrosesan citra (image processing), dan pengenalan pola (pattern recognition). Komputer grafik sering dikenal juga dengan istilah visualisasi data.

Bagian dari komputer grafik meliputi :

·      Geometri       : mempelajari cara menggambarkan permukaan bidang

·      Animasi         : mempelajari cara menggambarkan dan memanipulasi gerakan

·      Rendering     : mempelajari algoritma untuk menampilkan efek cahaya

·      Citra (Imaging): mempelajari cara pengambilan dan penyuntingan gambar.

Dasar Matematika yang Diperlukandalam Grafik Komputer

·      Geometry (2D, 3D) : Trigonometry, Vector spaces

·      Points, vectors, dan koordinat : Dot dan cross products

2.2.       Primitive Object

Primitives merupakan geometri sederhana (basic) : titik (points), garis (lines), segi empat (quads), dan segitiga (triangles).

Primitif objek terdiri atas :

·      Titik, yaitu Vertex, dimana vertex merupakan acuan dasar.

·      Garis, yaitu Line/Edge

·      Bangun 2D (Face)

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

Berikut adalah primitive objek yang akan dipergunakan didalam pembuatan suatu objek :

·      # define GL_POINTS

Primitif objek ini dipergunakan untuk menciptakan suatu titik.

·      # define GL_LINES

Primitif objek ini adalah suatu primitive objek guna menciptakan suatu garis.

·      # define GL_LINE_LOOP

Menghubungkan garis pertama dengan garis selanjutnya dan garis terakhir terhubung dengan garis pertama

·      # define GL_LINE_STRIP

Membuat garis-garis dengan menghubungkan ujung garis sebagai titik pertama untuk garis selanjutnya.

·      # define GL_TRIANGLES

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,

Pada triangles strip jumlah vertex yang dipergunakan adalah 4 buah vertex.

·      # define GL_QUADS

Quad atau segempat adalah empat buah titik yang terhubung menjadi suatu segempat dengan blok di tengahnya.

·      # define GL_QUADS_STRIP

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

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

2.3.       Transformasi

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.3.1  Translasi

Translasi berarti memindahkan objek sepanjang garis lurus dari suatu lokasi koordinat tertentu kelokasi yang lain tanpa mengubah bentuk objek. Bila suatu objek terbentuk daribeberapa titik maka bila melakukan translasi akan dikenakan terhadap setiap titikpembentuk objek tersebut.

2.3.2  Skala

Skala digunakan untuk mengubah ukuran suatu objek, bila pada translasi operasi yangdigunakan adalah penjumlahan sedangkan pada skala operasi yang digunakan adalah perkalian.

2.3.3  Rotasi

Rotasi merupakan pemutaran terhadap suatu objek, rotasi dapat dinyatakan dalam bentukmatriks. Nilai matriks untuk melakukan rotasi adalah Rotasi suatu titik terhadap pivot point (xp, yp) menggunakan bentuk trigonometri,

2.4.       Blending

Blending merupakan menggabungkan 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.

Source and Destination Factor :

•     RGBA (Red, Green, Blue, Alpha)

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)

Blended RGBA = (RsSr+RdDr, GsSg+GdDg, BsSb+BdDb, AsSa+AdDa)

2.5.       Camera dan Viewing

Camera and viewing adalah Cara mengatur pandangan objek 2D maupun 3D dan mengontrol pergerakan kamera.

Parallel Projection Syntax

·      gluOrtho2D (0,400,0,300);

Mendefinisikan besarnya sistem koordinat 2D : dengan range sumbu x adalah [0,400] dan range untuk sumbu y adalah 0,300]

BAB III

PEMBAHASAN

3.1.       Fungsi Dasar Pembentuk Objek

3.1.1     Membuat langit

           point2D_t langit[4]={{0,0},{400,0},{400,300},{0,300}};

           color_t wLangit[4]={{0,1,1},{0,1,1},{0,1,0},{0,1,1}};

           gradatePolygon(langit,wLangit,4);

3.1.2     Program ini untuk membuat objek lingkaran

int i;

const double PI = 3.14;

void lingkaran(int jari2, int jumlah_titik, int x_tengah, int y_tengah) {

    glBegin(GL_POLYGON);

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

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

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

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

    glVertex2f(x,y);

    }

    glEnd();

 }

3.1.3     Membuat matahari

           glColor3f(1,1,0);

           lingkaran(35,200,320,240);

3.1.4     Membuat awan

glColor3f(1,1,1);

           lingkaran(20, 200, 40, 218);

           glColor3f(1,1,1);

           lingkaran(25, 200, 82, 234);

           glColor3f(1,1,1);

           lingkaran(19, 200, 120, 220);

           glColor3f(1,1,1);

           lingkaran(20, 200, 82, 209);

           glColor3f(1,1,1);

           lingkaran(15,200, 60, 233);

           glColor3f(1,1,1);

           lingkaran(13, 200, 55, 209);

           glColor3f(1,1,1);

           lingkaran(14, 200, 107, 228);

           glColor3f(1,1,1);

           lingkaran(14, 200, 107, 210);

3.1.5     Membuat laut dan pantai

           point2D_t laut[5]={{0,0},{400,0},{400,55},{300,45},{0,50}};

           color_t wLaut[5]={{0.1,0.5,0.7},{0.5,0.2,0},{0.5,0.2,0},{0,0,1},{0.1,0.5,0.7}};

           gradatePolygon(laut,wLaut,5);

3.1.6     Membuat perahu

//Membuat perahu

             point2D_t perahu[4]={{43,45},{110,45},{123,80},{28,80}};

             color_t wPerahu[4]={{0,0,0},{0,0,0},{0.5,0.2,0},{0.5,0.2,0}};

             gradatePolygon(perahu,wPerahu,4);

//membuat tiang

             point2D_t tiang[4]={{65,80},{67,80},{67,120},{65,120}};

             color_t wTiang[4]={{0,0,0},{0,0,0},{0,0,0},{0,0,0}};

             gradatePolygon(tiang,wTiang,4);

//membuat bendera merah

           point2D_t merah[4]={{67,115},{80,115},{80,120},{67,120}};

           color_t wMerah [4]={{1,0,0},{1,0,0},{1,0,0},{1,0,0}};

           gradatePolygon(merah,wMerah,4);

//membuat bendera putih

            point2D_t putih[4]={{67,110},{80,110},{80,115},{67,115}};

           color_t wPutih [4]={{1,1,1},{1,1,1},{1,1,1},{1,1,1}};

           gradatePolygon(putih,wPutih,4);

3.1.7     Membuat objek rumput laut bergerak

Sebelum menampilakan source code dari rumput, kita harus memasukan struktur datanya terlebuh dahulu

typedef struct {

point2D_t p,p0;

float d,s;

float xa, xb;

} obyek_t;

// Mengacak Posisi awal rumput

    static obyek_t rumput[200];{

    static int tick=0;

    int i;

    if(tick==0){

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

    rumput[i].p.x=rand()%100;

    rumput[i].p.y=10+rand()%6;

    rumput[i].d=rand()%8+2;

    rumput[i].s=float(rand()%100+1)/500;

    rumput[i].p0=rumput[i].p;

    }

    }

    tick++;

    // Menggoyangkan rumput

    float xa,xb;

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

    rumput[i].p.x+=rumput[i].s;

    xa=rumput[i].p0.x-5*rumput[i].d;

    xb=rumput[i].p0.x+5*rumput[i].d;

    if((rumput[i].p.x<xa) || (rumput[i].p.x>xb))

    rumput[i].s=-rumput[i].s;

    }

    // Menggambar rumput

    point2D_t p[3];

    color_t cp[3]={{0.1,1,0.3},{0,0.2,0},{0,0.2,0}};

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

    p[0].x=rumput[i].p.x;

    p[0].y=rumput[i].p.y;

    p[1].x=rumput[i].p0.x-rumput[i].d;

    p[1].y=0;

    p[2].x=rumput[i].p0.x+rumput[i].d;

    p[2].y=0;

    gradatePolygon(p,cp,3);

    }

    }

3.1.8     Membuat efek air

           float xp,yp,dx;

           setColor(1,1,1);

           for(int i=1;i<20;i++){

           xp=250*(float)rand()/RAND_MAX-10;

        yp=55*(float)rand()/RAND_MAX-10;

        dx=10+20*(float)rand()/RAND_MAX;

        drawLine(xp,yp,xp+dx,yp); 

 }

3.2.       Tampilan Objek

3.2.1. Tampilan 2 dimensi suasana pantai

BAB IV

KESIMPULAN DAN SARAN

4.1.       Kesimpulan

Berdasarkan pembahasan pembuatan animasi Suasana Laut diatas menggunakan OpenGL ini dalam dapat disimpulkan :

1.        Merepresentasikan gambar 2D pada animasi Suasana Laut yang telah dibuat.

2.        Dengan menggunakan OpenGL ini terlihat jelas seperti apa tekstur-tekstur yang dihasilkan.

3.    Mengembangkan komputer grafik mempunyai arti yang lebih dan mampu meningkatkan kemampuan dalam menentukan titik.

4.2.       Saran

1.   Sebelum memulai coding, buatlah dulu sketsa gambar apa yang akan dibuat, karena itu akan memudahkan dalam proses pembuatan.

2.     Telitilah dalam menentukan titik.