prak_komgraf_d3_modul1_130411100006

Upload: yanuar-aliffio

Post on 06-Jul-2018

218 views

Category:

Documents


0 download

TRANSCRIPT

  • 8/17/2019 PRAK_KOMGRAF_D3_MODUL1_130411100006

    1/26

    LAPORAN RESMI 

    PRAKTIKUM KOMPUTER GRAFIK  

    MODUL I “PRIMITIVE DRAWING” 

    DisusunOleh : 

    TGL PRAKTIKUM : 07 April 2016

     NAMA : Yanuar Aliffio

     NRP : 130411100006

    KELOMPOK : D3

    DOSEN : Cucun Very Angkoso, S. T., M. T.

    ASISTEN : Moch. Sodiqin

    LABORATORIUM TEKNOLOGI INFORMASI

    DAN APLIKASI

    JURUSAN TEKNIK INFORMATIKA

    FAKULTAS TEKNIK

    UNIVERSITAS TRUNOJOYO MADURA

    2016

    TELAH DISETUJUI TANGGAL :

    ...........................................

    ASISTEN PRAKTIKUM

    (Moch. Sodiqin)

    130411100029 

  • 8/17/2019 PRAK_KOMGRAF_D3_MODUL1_130411100006

    2/26

    BAB I

    PENDAHULUAN

    1.1 

    Latar Belakang

    Komputer grafik telah mengalami perkembangan yang sangat pesat dari

     berbagai sisi. Algoritma, software dan hardware. Cakupannya juga telah

    meluas ke berbagai bidang. Pada modul ini akan dibahas primitif drawing

    dimana pada hasil citra di komputer grafik menggunakan primitif grafik

    dasar. Primitif ini memudahkan untuk merender (menggambar pada layar

    monitor) sebagaimana penggunaan persamaan geometrik sederhana. Semakin

     banyak pula bahasa pemrograman yang dilengkapi dengan tools/library

     pembuatan grafik. Salah satu tools/library pembuatan aplikasi grafik yang

    digunakan adalah OpenGL (Open Graphics Library). OpenGL (Open

    Graphics Library) adalah suatu spefikasi grafik low-level yang menyediakan

    fungsi untuk pembuatan grafik primitif termasuk titik, garis, segitiga, poligon.

    OpenGL digunakan untuk mendefinisikan suatu obyek, baik obyek 2 dimensi

    maupun obyek 3 dimensi.

    1.2  Tujuan

    Adapun tujuan Mahasiswa mengikuti Praktikum Komputer Grafik

    Modul 1 ini adalah:

    1.  Mahasiswa mampu memahami dan menerapkan aplikasi komputer grafik

    menggunakan bahasa pemrograman OpenGL.

    2.  Mahasiswa mampu membuat dan memanfaatkan output primitif.

  • 8/17/2019 PRAK_KOMGRAF_D3_MODUL1_130411100006

    3/26

    BAB II

    DASAR TEORI

    2.1 

    Pengantar

    Komputer grafik telah menunjukkan kemajuan yang pesat dari berbagai

    sisi: algoritma, software, dan hardware. Cakupannya juga telah meluas ke

     berbagai bidang: kedokteran, sains, engineering, bisnis, industri, seni,

    hiburan, iklan, dan lain-lain.

    Salah satu tools/library pembuatan aplikasi grafik adalah OpenGL

    (Open Graphics Library). OpenGL adalah suatu standar grafik yang

    menyediakan fungsi-fungsi low-level untuk pembuatan berbagai gambar

     pada komputer.

    Sebagai API ( Application Programming Interface), OpenGL bersifat

     platform-independent/tidak tergantung pada piranti dan platform yang

    digunakan. Hal inilah yang membuat OpenGL dapat berjalan pada berbagai

    sistem operasi: Windows, UNIX, Mac, Android, dll. OpenGL pada awalnya

    didesain untuk digunakan oleh bahasa pemrograman C/C++, namun dalam

     perkembangannya OpenGL dapat juga digunakan oleh bahasa pemrograman

    yang lain seperti Java, Tcl, Ada, Visual Basic, Delphi, maupun Fortran.

    Primitif Drawing

    OpenGL memiliki beberapa obyek dasar yang disebut primitif.

    Gambar-gambar kompleks dibuat dari kombinasi obyek-obyek primitif ini.

    Primitif mudah digambar pada layar monitor karena menggunakan

     persamaan geometrik sederhana. Contoh primitif / grafik dasar adalah :  Titik

      Garis

      Segitiga

      Polygon

  • 8/17/2019 PRAK_KOMGRAF_D3_MODUL1_130411100006

    4/26

    Perintah OpenGL

    OpenGL memiliki daftar fungsi yang banyak. Untuk saat ini, praktikan hanya

     perlu fokus pada beberapa perintah dasar yang tertera pada tabel berikut ini:

    2.2  Program

    Berikut ini adalah program yang menggambar obyek primitif.

    void display(void )

    {

    /* bersihkan layar dari titik pixel yang masih ada */

    glClear (GL_COLOR_BUFFER_BIT);

    glColor3f (1.0, 1.0, 0.0);

    /* gambar 5 titik di layar */

    glBegin(GL_POINTS);

    glVertex3f (0.0, 0.0, 0.0);

    glVertex3f (0.0, 0.8, 0.0);

    glVertex3f (0.8, 0.0, 0.0);

    glVertex3f (0.0, -0.8, 0.0);

    glVertex3f (-0.8, 0.0, 0.0);

    glEnd();

    glFlush ();

    }

    void kunci(unsigned char key, int x, int y)

    {

    switch (key)

  • 8/17/2019 PRAK_KOMGRAF_D3_MODUL1_130411100006

    5/26

    {

    /* aplikasi berhenti ketika tombol q ditekan */

    case 27 :

    case 'q':

    exit(0);

     break;

    }

    glutPostRedisplay();

    }

    int main(int argc, char *argv[])

    {

    glutInitWindowSize(400,400);

    glutInitWindowPosition(100,100);glutInitDisplayMode(GLUT_RGB | GLUT_SINGLE);

    glutCreateWindow("Primitif");

    glutDisplayFunc(display);

    glutKeyboardFunc(kunci);

    glutMainLoop();

    return 0;

    Program 1.1 Menggambar 5 titik

    Program diatas jika dijalankan akan menampilkan 5 titik berwarna kuning

     pada latar belakang hitam. Posisi titik didefinisikan pada tiap pemanggilan

    glVertex3f. Ukuran window mengambil nilai default yang disediakan oleh

    OpenGL: (-1,-1) untuk titik kiri bawah dan (1, 1) untuk titik kanan atas.

  • 8/17/2019 PRAK_KOMGRAF_D3_MODUL1_130411100006

    6/26

    BAB III

    TUGAS PENDAHULUAN

    3.1 Soal

    3.1.1 Jelaskan secara singkat sejarah OpenGL!

    3.1.2 Sebutkan beberapa contoh software yang menggunakan OpenGL!

    3.1.3 Apa guna glBegin() dan glEnd()?

    3.1.4 Jelaskan apa itu vertex!

    3.2 Jawaban

    3.2.1 Sejarah OpenGL:

    Pada tahun 1982, salah seorang professor di Stanford University

    mendirikan perusahaan computer grafis yang pertama yaitu Silicon

    Graphics Computer System, kemudian nama ini berubah menjadi SGI.

    Pada saat itu pegawai SGI membutuhkan cara yang standard spesifikasi

    untuk pengoperasian dan transformasi 3D. Oleh sebab itu, mereka

    mmebuat sebuah Application Programming Interface (API) yang

     bernama IrisGL. Namun IrisGL memiliki kelemahan karena tidak

     bersifat open-standard, hanya dapat digunakan pada hardware keluaran

    dari SGI. Pada saat yang bersamaan, vendor lain juga mengeluarkan

     produk 3D yang juga berbasis API (PHIGS). Sehingga kepopuleran dari

    IrisGL menjadi menurun. Untuk meningkatkan penjualan produk

    mereka, SGI mengubah IrisGL menjadi open-standard. Namun karena

    terhambat oleh lisensi dan hak paten, IrisGL gagal diluncurkan sebagai

    aplikasi yang berbasis open-standard. Pada akhirnya merekamemperbaikinya menjadi API yang berbasis IrisGL dan bersifat open-

    standard yang diberi nama OpenGL.

    Pada tanggal 1 juli 1992 OpenGL versi 1.0 diperkenalkan.

    Awalnya, OpenGL hanya didesain untuk pemrograman C/C++, namun

    karena cepatnya perkembangan dunia IT, OpenGL dikembangkan

    untuk digunakan pada berbagai bahasa pemrograman seperti Java,

    Visual Basic, Delphi dan sebagainya. Untuk menggunakan OpenGl

  • 8/17/2019 PRAK_KOMGRAF_D3_MODUL1_130411100006

    7/26

    dalam compiler bahasa pemrograman misalnya C++, dibutuhkan

    instalasi library tertentu. GLUT (OpenGL utility Toolkit) merupakan

    library dari pengembangan OpenGL untuk sistem windows. GLUT

    didesain untuk membuat program OpenGL yang berukuran kecil

    sampai medium. GLUT tidak dapat secara langsung digunakan, karena

    membutuhkan beberapa file tambahan antara lain : glut.h, glut.lib, dan

    glut32.dll yang disimpan pada direktori tertentu.

    3.2.2 Contoh software yang menggunakan OpenGL:

    Code Block, Visual Studio, Adobe After Effect, Adobe Photoshop CS3

    dan CS 4, Blender, dan lain-lain.

    3.2.3 Kegunaan dari glBegin() dan glEnd():

    a.  Kegunaan dari glBegin() adalah sebuah syarat untuk memulai

    membuat vertex(titik).

     b.  Kegunaan dari glEnd() adalah sebuah syarat untuk mengakhiri

     pembuatan vertex(titik).

    3.2.4 Vertex adalah representasi sebuah titik dalam membuat suatu objek

    sebagai acuan dasarnya.

  • 8/17/2019 PRAK_KOMGRAF_D3_MODUL1_130411100006

    8/26

    BAB IV

    IMPLEMENTASI

    4.1 Percobaan

    4.1.1 Gantilah sintak program yang berwarna merah bold untuk membuat

     berbagai macam primitive drawing. Lakukan pengamatan apa yang

    terjadi

    glBegin(GL_POINTS);

    glBegin(GL_LINE_STRIP);

    glBegin(GL_LINE_LOOP);

    glBegin(GL_LINES);

    glBegin(GL_TRIANGLES);

    glBegin(GL_TRIANGLE_FAN);

    glBegin(GL_TRIANGLE_STRIP);

    glBegin(GL_QUADS);

    glBegin(GL_QUAD_STRIP);

    glBegin(GL_POLYGON);

    4.1.2 Lakukan penyisipan glColor3f (X, X, X);  pada tiap vertex,

    kemudian amati lagi apa yang terjadi.

    4.1.3 Lakukan pengaturan ketebalan titik dan garis dengan perintah

    glPointSize(x); dan glLineWidth(x); kemudian amati apa

     pengaruhnya terhadap titik dan garis.

    4.2 Tugas

    4.2.1 Lakukan percobaan sesuai dengan perintah diatas.

    Jawab

    4.2.1.1 Adapun output-output yang terjadi jika sintak program yang

     berwarna merah bold diganti untuk membuat berbagai macam

     primitive drawing.

  • 8/17/2019 PRAK_KOMGRAF_D3_MODUL1_130411100006

    9/26

     glBegin(GL_POINTS);  

     

    glBegin(GL_LINE_STRIP);  

     glBegin(GL_LINE_LOOP);  

  • 8/17/2019 PRAK_KOMGRAF_D3_MODUL1_130411100006

    10/26

     glBegin(GL_LINES);  

     glBegin(GL_TRIANGLES);  

     glBegin(GL_TRIANGLE_FAN);  

  • 8/17/2019 PRAK_KOMGRAF_D3_MODUL1_130411100006

    11/26

     glBegin(GL_TRIANGLE_STRIP);  

     

    glBegin(GL_QUADS)  

     glBegin(GL_QUAD_STRIP);  

  • 8/17/2019 PRAK_KOMGRAF_D3_MODUL1_130411100006

    12/26

     glBegin(GL_POLYGON);  

    4.2.1.2 Adapun output-output yang terjadi jika disisipkan glColor3f

    (X, X, X); pada tiap vertex.

     

    glColor3f (1.0, 0.0, 0.0);

      glColor3f (0.0, 1.0, 0.0);

  • 8/17/2019 PRAK_KOMGRAF_D3_MODUL1_130411100006

    13/26

     

    glColor3f (0.0, 0.0, 1.0);

    4.2.1.3 Adapun pengaruh yang terjadi terhadap titik dan garis jika

    diatur ketebalan titik dan garis dengan perintah

    glPointSize(x); dan glLineWidth(x);

     Tanpa menggunakan perintah glPointSize(x); 

  • 8/17/2019 PRAK_KOMGRAF_D3_MODUL1_130411100006

    14/26

     

    glPointSize(20.0);

     

    Tanpa menggunakan perintah glLineWidth(); 

     

    glLineWidth(10.0);

  • 8/17/2019 PRAK_KOMGRAF_D3_MODUL1_130411100006

    15/26

      4.2.2 Buat Pelangi horisontal yang terdiri dari 7 warna berbeda

    menggunakan 7 rectangle (GL_POLYGON).

    Jawab :

    #include

    #ifdef __APPLE__

    #else

    #include

    #endif

    #include

    void display()

    {

    glClear(GL_COLOR_BUFFER_BIT);

    glBegin(GL_POLYGON);

    glColor3f(0.749,0.0,1.0);

    glVertex2f(9.0,3.0);

    glVertex2f(2.0,3.0);

    glVertex2f(2.0,2.0);

    glVertex2f(9.0,2.0);

    glEnd();

    glBegin(GL_POLYGON);

    glColor3f(0.435,0.0,1.0);

    glVertex2f(9.0,4.0);

    glVertex2f(2.0,4.0);

    glVertex2f(2.0,3.0);

    glVertex2f(9.0,3.0);

    glEnd();

    glBegin(GL_POLYGON);

    glColor3f(0.0,0.0,1.0);

    glVertex2f(9.0,5.0);

    glVertex2f(2.0,5.0);

    glVertex2f(2.0,4.0);

    glVertex2f(9.0,4.0);

    glEnd();

  • 8/17/2019 PRAK_KOMGRAF_D3_MODUL1_130411100006

    16/26

      glBegin(GL_POLYGON);

    glColor3f(0.0,1.0,0.0);

    glVertex2f(9.0,6.0);

    glVertex2f(2.0,6.0);

    glVertex2f(2.0,5.0);

    glVertex2f(9.0,5.0);

    glEnd();

    glBegin(GL_POLYGON);

    glColor3f(1.0,1.0,0.0);

    glVertex2f(9.0,7.0);

    glVertex2f(2.0,7.0);

    glVertex2f(2.0,6.0);glVertex2f(9.0,6.0);

    glEnd();

    glBegin(GL_POLYGON);

    glColor3f(1.0,0.498,0.0);

    glVertex2f(9.0,8.0);

    glVertex2f(2.0,8.0);

    glVertex2f(2.0,7.0);

    glVertex2f(9.0,7.0);

    glEnd();

    glBegin(GL_POLYGON);

    glColor3f(1.0,0.0,0.0);

    glVertex2f(9.0,9.0);

    glVertex2f(2.0,9.0);

    glVertex2f(2.0,8.0);

    glVertex2f(9.0,8.0);

    glEnd();

    glFlush();

    }

    void myinit()

    {

    glMatrixMode(GL_PROJECTION);

    glLoadIdentity();

  • 8/17/2019 PRAK_KOMGRAF_D3_MODUL1_130411100006

    17/26

      gluOrtho2D(0.-3,14.0,0.-3,14.0);

    glMatrixMode(GL_MODELVIEW);

    glClearColor(1.0,1.0,1.0,1.0);

    }

    int main(int argc, char* argv[])

    {

    glutInit(&argc,argv);

    glutInitDisplayMode(GLUT_SINGLE | GLUT_RGB);

    glutInitWindowPosition(100,100);

    glutCreateWindow("Pelangi_Horizontal");

    glutDisplayFunc(display);

     myinit();glutMainLoop();

    return 0;

    Hasil running :

    4.2.3 Buat Pelangi vertikal yang terdiri dari 7 warna berbeda menggunakan

    7 rectangle (GL_POLYGON)

    Jawab

  • 8/17/2019 PRAK_KOMGRAF_D3_MODUL1_130411100006

    18/26

    #include

    #ifdef __APPLE__

    #else

    #include

    #endif

    #include

    void display()

    {

    glClear(GL_COLOR_BUFFER_BIT);

    glBegin(GL_POLYGON);

    glColor3f(0.749,0.0,1.0);glVertex2f(9.0,9.0);

    glVertex2f(8.0,9.0);

    glVertex2f(8.0,2.0);

    glVertex2f(9.0,2.0);

    glEnd();

    glBegin(GL_POLYGON);

    glColor3f(0.435,0.0,1.0);

    glVertex2f(8.0,9.0);

    glVertex2f(7.0,9.0);

    glVertex2f(7.0,2.0);

    glVertex2f(8.0,2.0);

    glEnd();

    glBegin(GL_POLYGON);

    glColor3f(0.0,0.0,1.0);

    glVertex2f(7.0,9.0);

    glVertex2f(6.0,9.0);

    glVertex2f(6.0,2.0);

    glVertex2f(7.0,2.0);

    glEnd();

    glBegin(GL_POLYGON);

    glColor3f(0.0,1.0,0.0);

    glVertex2f(6.0,9.0);

    glVertex2f(5.0,9.0);

  • 8/17/2019 PRAK_KOMGRAF_D3_MODUL1_130411100006

    19/26

      glVertex2f(5.0,2.0);

    glVertex2f(6.0,2.0);

    glEnd();

    glBegin(GL_POLYGON);

    glColor3f(1.0,1.0,0.0);

    glVertex2f(5.0,9.0);

    glVertex2f(4.0,9.0);

    glVertex2f(4.0,2.0);

    glVertex2f(5.0,2.0);

    glEnd();

    glBegin(GL_POLYGON);glColor3f(1.0,0.498,0.0);

    glVertex2f(4.0,9.0);

    glVertex2f(3.0,9.0);

    glVertex2f(3.0,2.0);

    glVertex2f(4.0,2.0);

    glEnd();

    glBegin(GL_POLYGON);

    glColor3f(1.0,0.0,0.0);

    glVertex2f(3.0,9.0);

    glVertex2f(2.0,9.0);

    glVertex2f(2.0,2.0);

    glVertex2f(3.0,2.0);

    glEnd();

    glFlush();

    }

    void myinit()

    {

    glMatrixMode(GL_PROJECTION);

    glLoadIdentity();

    gluOrtho2D(0.0,11.0,0.0,11.0);

    glMatrixMode(GL_MODELVIEW);

    glClearColor(1.0,1.0,1.0,1.0);

    }

  • 8/17/2019 PRAK_KOMGRAF_D3_MODUL1_130411100006

    20/26

     

    int main(int argc, char* argv[])

    {

    glutInit(&argc,argv);

    glutInitDisplayMode(GLUT_SINGLE | GLUT_RGB);

    glutInitWindowPosition(100,100);

    glutCreateWindow("Pelangi_Vertical");

    glutDisplayFunc(display);

     myinit();

    glutMainLoop();

    return 0;

    Hasil running :

    4.2.4 Ulang soal nomor 2 dan 3 menggunakan glRect().

    Jawab

     Pelangi_Horizontal 

    #include

    #ifdef __APPLE__

    #else

    #include

  • 8/17/2019 PRAK_KOMGRAF_D3_MODUL1_130411100006

    21/26

    #endif

    #include

    void display()

    {

    glClear(GL_COLOR_BUFFER_BIT);

    glColor3f(1.0,0.0,0.0);

    glRectf(2.0,8.0,9.0,9.0);

    glutSwapBuffers();

    glColor3f(1.0,0.498,0.0);

    glRectf(2.0,7.0,9.0,8.0);glutSwapBuffers();

    glColor3f(1.0,1.0,0.0);

    glRectf(2.0,6.0,9.0,7.0);

    glutSwapBuffers();

    glColor3f(0.0,1.0,0.0);

    glRectf(2.0,5.0,9.0,6.0);

    glutSwapBuffers();

    glColor3f(0.0,0.0,1.0);

    glRectf(2.0,4.0,9.0,5.0);

    glutSwapBuffers();

    glColor3f(0.435,0.0,1.0);

    glRectf(2.0,3.0,9.0,4.0);

    glutSwapBuffers();

    glColor3f(0.749,0.0,1.0);

    glRectf(2.0,2.0,9.0,3.0);

    glutSwapBuffers();

    glFlush();

    }

    void myinit()

  • 8/17/2019 PRAK_KOMGRAF_D3_MODUL1_130411100006

    22/26

    {

    glMatrixMode(GL_PROJECTION);

    glLoadIdentity();

    gluOrtho2D(0.0,11.0,0.0,11.0);

    glMatrixMode(GL_MODELVIEW);

    glClearColor(1.0,1.0,1.0,1.0);

    glColor3f(0.0,0.0,1.0);

    }

    int main(int argc, char* argv[])

    {

    glutInit(&argc,argv);

    glutInitDisplayMode(GLUT_SINGLE |GLUT_RGB);

    glutInitWindowPosition(100,100);

    glutCreateWindow("Pelangi_Horizontal");

    glutDisplayFunc(display);

     myinit();

    glutMainLoop();

    return 0;

    Hasil running :

  • 8/17/2019 PRAK_KOMGRAF_D3_MODUL1_130411100006

    23/26

     

     Pelangi_Vertical 

    #include

    #ifdef __APPLE__

    #else

    #include

    #endif

    #include

    void display()

    {

    glClear(GL_COLOR_BUFFER_BIT);

    glColor3f(1.0,0.0,0.0);

    glRectf(2.0,9.0,3.0,2.0);

    glutSwapBuffers();

    glColor3f(1.0,0.498,0.0);

    glRectf(3.0,9.0,4.0,2.0);

    glutSwapBuffers();

    glColor3f(1.0,1.0,0.0);

    glRectf(4.0,9.0,5.0,2.0);

    glutSwapBuffers();

    glColor3f(0.0,1.0,0.0);

    glRectf(5.0,9.0,6.0,2.0);

    glutSwapBuffers();

    glColor3f(0.0,0.0,1.0);glRectf(6.0,9.0,7.0,2.0);

    glutSwapBuffers();

    glColor3f(0.435,0.0,1.0);

    glRectf(7.0,9.0,8.0,2.0);

    glutSwapBuffers();

    glColor3f(0.749,0.0,1.0);

    glRectf(8.0,9.0,9.0,2.0);

  • 8/17/2019 PRAK_KOMGRAF_D3_MODUL1_130411100006

    24/26

      glutSwapBuffers();

    glFlush();

    }

    void myinit()

    {

    glMatrixMode(GL_PROJECTION);

    glLoadIdentity();

    gluOrtho2D(0.0,11.0,0.0,11.0);

    glMatrixMode(GL_MODELVIEW);

    glClearColor(1.0,1.0,1.0,1.0);

    glColor3f(0.0,0.0,1.0);}

    int main(int argc, char* argv[])

    {

    glutInit(&argc,argv);

    glutInitDisplayMode(GLUT_SINGLE |

    GLUT_RGB);

    glutInitWindowPosition(100,100);

    glutCreateWindow("Pelangi_Vertical");

    glutDisplayFunc(display);

     myinit();

    glutMainLoop();

    return 0;

  • 8/17/2019 PRAK_KOMGRAF_D3_MODUL1_130411100006

    25/26

    Hasil running :

  • 8/17/2019 PRAK_KOMGRAF_D3_MODUL1_130411100006

    26/26

    BAB V

    PENUTUP

    5.1 

    Kesimpulan

    Salah satu tools/library pembuatan aplikasi grafik adalah OpenGL

    (Open Graphics Library). OpenGL memiliki beberapa obyek dasar yang

    disebut primitif. Primitif drawing memudahkan untuk merender

    (menggambar pada layar monitor) sebagaimana penggunaan persamaan

    geometrik sederhana. Contoh primitif grafik dasar adalah titik, garis, segitiga,

     poligon dan lain sebagainya.

    5.2  Saran

    Mohon pada saat praktikum untuk teori dan pengertian fungsi-

    fungsi harap diperjelas karena kami belum begitu paham. Terimakasih atas

     bimbingannya.