laporan praktikum komputer grafik.pdf

Upload: ninjlegend

Post on 14-Oct-2015

568 views

Category:

Documents


1 download

DESCRIPTION

By Muhammad RidwanUniversitas Pembangunan Pancabudi Medan

TRANSCRIPT

  • LAPORAN

    KOMPUTER GRAFIK

    Nama Praktikan Nomor

    Mahasiswa

    Tanggal

    Kumpul

    Tanda tangan

    Pratikan

    Muhammad Ridwan 1214370383

    Nama Penilai Tanggal

    Koreksi Nilai

    Tanda tangan

    Dosen

    Indri Sulistianingsih, S.Kom

    UNIVERSITAS PEMBANGUNAN PANCABUDI MEDAN

    FAKULTAS TEKNIK

    SISTEM KOMPUTER

    2014

    KELAS TI

    4 SORE B

  • i

    Daftar Isi Daftar Isi........................................................................................................... i

    Kata Pengantar ................................................................................................. iii

    Bab 1 Pendahuluan

    1.1 Latar Belakang .................................................................................... 1

    1.2 Tujuan ................................................................................................... 1

    Bab 2 Dasar Teori

    2.1 Pengertian Grafika Komputer .............................................................. 2

    2.2 Pengertian OpenGL .............................................................................. 2

    2.3 Pengertian Polyline .............................................................................. 5

    2.4 Pengertian Polygon .............................................................................. 5

    2.5 Pewarnaan ............................................................................................ 5

    Bab 3 Primitive Drawing

    3.1 Membuat Titik ...................................................................................... 6

    3.2 Membuat Garis ..................................................................................... 8

    3.3 Membuat Polyline ................................................................................ 9

    3.4 Membuat Polygon ................................................................................ 11

    3.5 Membuat Jajar Genjang ....................................................................... 13

    3.6 Membuat Prisma .................................................................................. 15

    3.7 Ujian Tengah Semester ........................................................................ 16

    Bab 4 Object 2 Dimensi

    4.1 Dasar Teori .......................................................................................... 19

    4.2 Tujuan Praktikum ................................................................................. 19

    4.3 Membuat Bunga Pot ............................................................................ 20

    4.4 Membuat Monas ................................................................................. 24

    Bab 5 Object 3 Dimensi

    5.1 Dasar Teori .......................................................................................... 30

    5.2 Tujuan Praktikum ................................................................................ 30

    5.3 Simpel Kubus 3D ................................................................................ 30

    5.4 Kubus 3D Point To Vektor .................................................................. 34

    5.5 Star 3D .................................................................................................. 40

  • ii

    Bab 6 Analisa

    6.1 Analisa Pengenalan .............................................................................. 47

    6.2 Analisa Primitive Drawing ................................................................... 47

    6.3 Analisa 2D ............................................................................................ 47

    6.4 Analisa 3D ............................................................................................ 47

    Bab 7 Kesimpulan

    7.1 Kesimpulan .......................................................................................... 48

    7.2 Saran .................................................................................................... 48

  • iii

    KATA PENGANTAR

    Puji dan syukur saya panjatkan kehadirat Tuhan Yang Maha Esa. Karena

    atas berkat rahmatNya saya dapat menyelesaikan praktikum serta laporan akhir

    Komputer Grafik.

    Adapun isi dari laporan akhir ini adalah kumpulan dari setiap laporan

    mingguan selama praktikum berlangsung. Laporan ini merupakan syarat untuk

    dapat mengikuti ujian dan merupakan syarat dalam mengontrak mata kuliah

    Komputer Grafik.

    Laporan ini masih sangat jauh dari kesempurnaan oleh karena itu kritik

    serta saran yang membangun masih saya harapkan untuk penyempurnaan Laporan

    praktikum ini.

    Sebagai manusia biasa saya merasa memiliki banyak kesalahan, oleh

    karena itu saya mohon maaf sebesar besarnya untuk kelancaran penyelesaian

    laporan ini.

    Atas perhatian dari semua pihak yang membantu penulisan ini saya

    ucapkan terimakasih. Semoga Laporan ini dapat dipergunakan seperlunya.

    Binjai, 11 Juni 2014

    Muhammad Ridwan

    1214370383

  • 1

    BAB 1

    PENDAHULUAN

    1.1 Latar Belakang

    Grafika komputer akhir akhir ini mulai dirasa sangat penting dan

    mencakup hampir semua bidang kehidupan seiring dengan semakin

    pentingnya sistem komputer dalam berbagai kegiatan. Seperti halnya lukisan,

    animasi atau kartun dan sketsa gambar manusia lainnya, grafika komputer

    sudah mulai dan banyak digunakan untuk keperluan keperluan:

    1. Seni, entertainment dan publishing seperti produksi film, animasi, special

    efek, game komputer, web browsing, buku, slide dan majalah.

    2. Image processing atau pengolahan citra digital, yang dalam hal ini grafika

    komputer dapat digunakan misalnya seperti dalam coding (pemindahan

    data citra menjadi data vector) yang banyak digunakan untuk keperluan

    GIS.

    3. Menampilkan simulasi, yang dalam hal ini grafik yang dihasilakan berupa

    grafik data atau grafik visual proses. Seperti dalam simulasi perempatan

    jalan, grafika komputer digunakan untuk melakukan visualisasi secara

    detail bagaimana kedatangan mobil, pengaturan lampu lalu lintas, dan

    semua item didalamnya.

    4. CAD (Computer Aidet Desaign). Satu program CAD yang paling banyak

    dalam dunia teknik, yaitu AUTOCAD, dimana grafik komputer dapat

    menunjukkan rancangan atau desain pola atau desain layout.

    5. Visualisasi analisis sains, yang dalam hal ini grafik komputer dapat

    digunakan sebagai sarana untuk menunjukkan proses ilmiah.

    1.2 Tujuan

    a) Mengenal dan mulai menulis program untuk membuat gambar

    b) Mampu Membuat Gambar 2D dan 3D

    c) Mempelajari dasar-dasar pembuatan grafik dengan OpenGL

    d) Mengembangkan beberapa perangkat dasar untuk menggambar

    line, polyline dan polygon.

  • 2

    BAB II

    DASAR TEORI

    2.1 Pengertian Grafika Komputer

    Grafika komputer adalah suatu bidang ilmu yang mempelajari

    bagaimana membangun grafik (gambar) baik 2D maupun 3D yang kelihatan

    nyata menggunakan komputer.

    Salah satu bidang grafika komputer yang sangat terkenal adalah

    Desain Grafis.Teknik teknik yang dipelajari dalam grafika computer adalah

    teknik teknik bagaimana membuat atau menciptakan gambar dengan

    menggunakan computer.Ada perbedaan yang sangat mendasar antara photo

    dan gambar, dimana pada photo semua detail objek terlihat sedangkan gambar

    (baik itu gambar manusia atau gambar computer) tidak dapat memperlihatkan

    semua detail yang ada tetapi hanya detail yang dianggap penting dalam

    menunjukkan pola suatu gambar.

    Grafika computer merupakan perangkat (tool) dasar yang digunakan

    untuk membuat gambar dengan computer.Dengan menggunakan perangkat

    ini, penciptaan gambar dapat dilakukan, bahkan dimudahkan, dengan

    menggunakan computer. Ada beberapa program yang sangat kompleks guna

    membuat gambar computer, antara lain Microsoft Photo Editor, Adobe

    Photoshop, Maya, Autocad, 3D space Max, dan lain lain.

    Untuk membuat program program diatas dapat digunakan berbagai

    macam bahasa pemrograman dengan library grafis yang sesuai.Dalam laporan

    ini digunakan bahasa pemrograman C++, karena dalam system operasi

    Microsoft Windows maka menggunakan Microsoft Visual C++ dengan library

    grafik yang digunakan adalah OpenGL.

    2.2 Pegertian OpenGL

    OpenGL adalah library yang khusus menyediakan perangkat perangkat

    pembuatan grafik. OpenGL bekerja pada bahasa C. Dan berikut adalah cara

    menginstall OpenGL pada Microsoft Windows:

    1. Ada tiga file yang penting dalam OpenGL yang akan digunakan dalam

    operasi MS-Windows, yaitu glut.h, glut32.lib dan glut.dll.

  • 3

    2. Letakkan glut.h di direktori include pada Visual C (vc98/include/GL).

    3. Letakkan glut32.lib di direktori lib pada Visual C (vc98/lib).

    4. Letakkan glut32.dll di direktori windows/system.

    Struktur Dasar Program Grafik Dengan OpenGL

    #include

    void userdraw()

    { static int tick=0;

    //program grafik ditulis disini

    }

    void display(void)

    { //clear screen

    glClear(GL_COLOR_BUFFER_BIT);

    userdraw();

    glutSwapBuffers();

    }

    int main(int argc, char**argv)

    { glutInit(&argc,argv);//Inisialisasi Toolkit

    glutInitDisplayMode(GLUT_DOUBLE|GLUT_RGB);

    glutInitWindowPosition(100,100);

    glutInitWindowSize(640,480);

    glutCreateWindow("Drawing by Nita");

    glClearColor(0.0,0.0,0.0,0.0);

    gluOrtho2D(0.,640.,-240.,240.);

    glutIdleFunc(display);

    glutDisplayFunc(display);

    glutMainLoop();

    return 0;

    }

    Keterangan :

    * #include

  • 4

    Statment dasar yang harus ada dalam membuat gambar dengan library OpenGL.

    * void userdraw()

    {

    static int tick=0;

    //program grafik ditulis disini

    }

    Untuk menggambar objek yang akan dibuat dalam komputer grafik.

    * void display(void)

    {

    //clear screen

    glClear(GL_COLOR_BUFFER_BIT);

    userdraw();

    glutSwapBuffers();

    }

    Untuk menggambarkan gambar di layar computer ketika program dijalankan.

    * glutInitWindowPosition(100,100);

    glutInitWindowSize(640,480);

    Membuat window dengan ukuran(640,480) dengan titik kiri atas jendela

    diletakkan pada posisi (100,100) di layar computer.

    * glutCreateWindow("Drawing by Nita");

    Memberi judul pada window dengan Drawing by Nita

    * glClearColor(0.0,0.0,0.0,0.0);

    Mendefenisikan warna dari window yang dibuat dengan warna (0,0,0), yaitu

    warna hitam.

    * gluOrtho2D(0.,640.,-240.,240.);

  • 5

    Mendefenisikan besarnya system koordinat dengan range sumbu x adalah [0,640]

    dan range sumbu y adalah [-240,240].

    Gambar 2.1 Sistem koordinat

    2.3 Pengertian Polyline

    Polyline adalah sekumpulan garis yang terhubung satu dengan yang

    lainnya hingga membentuk sebuah obyek gambar.

    2.4 Pengertian Polygon

    Polygon adalah sekumpulan garis yang terhubung satu dengan yang

    lainnya dan berbentuk kurva tertutup hingga membentuk sebuah obyek gambar.

    2.5 Pewarnaan

    glColor3f(red,green,blue);

    Red,green,blue bervariasi diantara 0. S/d 1.

    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

    BAB III

    PRIMITIVE DRAWING

    3.1 Membuat Titik

    a. Struktur dasar:

    glVertex2i(x,y)

    Untuk membuat titik di posisi (x,y) dimana x dan y didefenisikan sebagai

    bilangan bulat (integer).

    glVertex2if(x,y)

    Untuk membuat titik di posisi (x,y) dimana x dan y didefenisikan sebagai

    bilangan pecahan (float/double)

    b. Struktur program membuat sebuah titik:

    #include

    void userdraw()

    {

    static int tick=0;

    void drawDot(int x,int y);

    glBegin(GL_POINTS);

    glVertex2i(100,50);

    glVertex2i(300,50);

    glVertex2i(200,100);

    glEnd();

    }

    void display(void)

    {

    //clear screen

    glClear(GL_COLOR_BUFFER_BIT);

    userdraw();

    glutSwapBuffers();

    }

    int main(int argc, char **argv)

  • 7

    {

    glutInit(&argc,argv); //inisialisasi toolkit

    glutInitDisplayMode(GLUT_DOUBLE|GLUT_RGB);

    glutInitWindowPosition(200,200);

    glutInitWindowSize(640,480);

    glutCreateWindow("Menampilkan Titik");

    glClearColor(0.0,0.0,0.0,0.0);

    gluOrtho2D(0.,640.,-240.,240.);

    glutIdleFunc(display);

    glutDisplayFunc(display);

    glutMainLoop();

    return 0;

    }

    Hasilnya adalah sebagai berikut:

    Gambar 3.1 Titik

  • 8

    3.2 Membuat Garis

    Untuk membuat garis diperlukan library GL_LINES dengan menyatakan

    titik awal dan titik akhir dari garis.

    Struktur programnya adalah sebagai berikut:

    #include

    void userdraw()

    {

    static int tick=0;

    void drawline(int x1,int y1,int x2,int y2);

    glBegin(GL_LINES);

    glVertex2i(100,100);

    glVertex2i(200,200);

    glEnd();

    }

    void display(void)

    {

    //clear screen

    glClear(GL_COLOR_BUFFER_BIT);

    userdraw();

    glutSwapBuffers();

    }

    int main(int argc, char**argv)

    {

    glutInit(&argc,argv);//Inisialisasi Toolkit

    glutInitDisplayMode(GLUT_DOUBLE|GLUT_RGB);

    glutInitWindowPosition(100,100);

    glutInitWindowSize(640,480);

    glutCreateWindow("Membuat Garis By Mhd Ridwan ");

    glClearColor(0.0,0.0,1.0,0.0);

    gluOrtho2D(0.,640.,-240.,240.);

    glutIdleFunc(display);

    glutDisplayFunc(display);

  • 9

    glutMainLoop();

    return 0;

    }

    Hasilnya adalah sebagai berikut:

    Gambar 3.2 Garis

    3.3 Membuat Polyline

    Struktur dasar:

    glBegin(GL_LINE_LOOP);

    glVertex2i(x1,y1);

    glVertex2i(x2,y2);

    glVertex2i(x3,y3);

    glVertex2i(xn,yn);

    glEnd();

    Struktur program membuat Polyline:

    #include

    void userdraw()

    {

    static int tick=0;

    void drawDot(int x,int y);

    glBegin(GL_LINE_STRIP);

    glVertex2i(100,100);

  • 10

    glVertex2i(200,150);

    glVertex2i(300,50);

    glEnd();

    }

    void display(void)

    {

    //clear screen

    glClear(GL_COLOR_BUFFER_BIT);

    userdraw();

    glutSwapBuffers(); }

    int main(int argc, char**argv)

    {

    glutInit(&argc,argv);//Inisialisasi Toolkit

    glutInitDisplayMode(GLUT_DOUBLE|GLUT_RGB);

    glutInitWindowPosition(100,100);

    glutInitWindowSize(640,480);

    glutCreateWindow("Membuat Polyline by Mhd Ridwan ");

    glClearColor(0.0,0.0,1.0,0.0);

    gluOrtho2D(0.,640.,-240.,240.);

    glutIdleFunc(display);

    glutDisplayFunc(display);

    glutMainLoop();

    return 0;

    }

    Hasilnya sebagai berikut:

  • 11

    Gambar 3.3 Polyline

    3.4 Membuat Polygon

    Struktur dasar:

    //clear screen

    glBegin(GL_LINE_LOOP);

    glVertex2i(x1,y1);

    glVertex2i(x2,y2);

    glVertex2i(x3,y3);

    glVertex2i(xn,yn);

    glEnd();

    Struktur program membuat Polygon:

    #include

    void userdraw()

    {

    static int tick=0;

    void drawDot(int x,int y);

    glBegin(GL_LINE_LOOP);

    glVertex2i(100,100);

    glVertex2i(200,150);

    glVertex2i(300,50);

  • 12

    glEnd();

    }

    void display(void)

    {

    glClear(GL_COLOR_BUFFER_BIT);

    userdraw();

    glutSwapBuffers();

    }

    int main(int argc, char**argv)

    {

    glutInit(&argc,argv);//Inisialisasi Toolkit

    glutInitDisplayMode(GLUT_DOUBLE|GLUT_RGB);

    glutInitWindowPosition(100,100);

    glutInitWindowSize(640,480);

    glutCreateWindow("Membuat Polygon By Mhd Ridwan ");

    glClearColor(0.0,0.0,1.0,0.0);

    gluOrtho2D(0.,640.,-240.,240.);

    glutIdleFunc(display);

    glutDisplayFunc(display);

    glutMainLoop();

    return 0;

    }

    Hasilnya sebagai berikut:

  • 13

    Gambar 3.4 Polygon

    3.5 Membuat Jajar Genjang

    Struktur program membuat Jajar Genjang:

    #include

    void userdraw()

    {

    static int tick=0;

    void drawDot(int x,int y);

    glBegin(GL_LINES);

    glVertex2i(50,50);

    glVertex2i(100,100);

    glVertex2i(50,50);

    glVertex2i(200,50);

    glVertex2i(200,50);

    glVertex2i(250,100);

    glVertex2i(250,100);

    glVertex2i(100,100);

    glEnd();

    }

    void display(void)

    {

    //clear screen

  • 14

    glClear(GL_COLOR_BUFFER_BIT);

    userdraw();

    glutSwapBuffers();

    }

    int main(int argc, char **argv)

    {

    glutInit(&argc,argv); //inisialisasi toolkit

    glutInitDisplayMode(GLUT_DOUBLE|GLUT_RGB);

    glutInitWindowPosition(200,200);

    glutInitWindowSize(640,480);

    glutCreateWindow("Jajar Genjang by MHD RIDWAN");

    glClearColor(0.0,0.0,1.0,0.0);

    gluOrtho2D(0.,640.,-240.,240.);

    glutIdleFunc(display);

    glutDisplayFunc(display);

    glutMainLoop();

    return 0;

    }

    Hasilnya sebagai berikut:

    Gambar 3.5 Jajar Genjang

  • 15

    3.6 Membuat Prisma

    Struktur program membuat Jajar Genjang:

    #include

    void userdraw()

    {

    static int tick=0;

    void drawDot(int x,int y);

    glBegin(GL_LINES);

    glVertex2i(200,50);

    glVertex2i(150,250);

    glVertex2i(200,50);

    glVertex2i(200,200);

    glVertex2i(200,50);

    glVertex2i(250,250);

    glVertex2i(200,200);

    glVertex2i(250,250);

    glVertex2i(200,200);

    glVertex2i(150,250);

    glVertex2i(150,250);

    glVertex2i(250,250);

    glEnd();

    }

    void display(void)

    {

    //clear screen

    glClear(GL_COLOR_BUFFER_BIT);

    userdraw();

    glutSwapBuffers();

    }

    int main(int argc, char **argv)

    {

    glutInit(&argc,argv); //inisialisasi toolkit

  • 16

    glutInitDisplayMode(GLUT_DOUBLE|GLUT_RGB);

    glutInitWindowPosition(200,200);

    glutInitWindowSize(640,480);

    glutCreateWindow("Prisma By MHD RIDWAN");

    glClearColor(0.0,0.220,242.256,0.0);

    gluOrtho2D(0.,640.,-560.,340.);

    glutIdleFunc(display);

    glutDisplayFunc(display);

    glutMainLoop();

    return 0;

    }

    Hasilnya sebagai berikut:

    Gambar 3.6 Prisma

    3.7 Ujian Tengah Semester

    Membuat Bintang

    Struktur program membuat Bintang:

    #include

    void userdraw()

    {

    static int tick=0;

  • 17

    void drawDot(int x,int y);

    glBegin(GL_LINES);

    glVertex2i(100,300); //a

    glVertex2i(200,400);

    glVertex2i(200,400); //b

    glVertex2i(300,300);

    glVertex2i(300,300); //c

    glVertex2i(400,300);

    glVertex2i(400,300); //d

    glVertex2i(300,200);

    glVertex2i(300,200); //e

    glVertex2i(400,50);

    glVertex2i(400,50); //f

    glVertex2i(200,200);

    glVertex2i(200,200); //g

    glVertex2i(50,50);

    glVertex2i(50,50); //h

    glVertex2i(100,200);

    glVertex2i(100,200); //i

    glVertex2i(50,300);

    glVertex2i(50,300); //j

    glVertex2i(100,300);

    glEnd();

    }

    void display(void)

    {

    //clear screen

    glClear(GL_COLOR_BUFFER_BIT);

    userdraw();

    glutSwapBuffers();

    }

    int main(int argc, char **argv)

    {

    glutInit(&argc,argv); //inisialisasi toolkit

    glutInitDisplayMode(GLUT_DOUBLE|GLUT_RGB);

  • 18

    glutInitWindowPosition(200,200);

    glutInitWindowSize(640,480);

    glutCreateWindow("Mhd Ridwan 1214370383");

    glClearColor(0.0,0.220,242.256,0.0);

    gluOrtho2D(0.,640.,-560.,540.);

    glutIdleFunc(display);

    glutDisplayFunc(display);

    glutMainLoop();

    return 0;

    }

    Hasilnya sebagai berikut:

    Gambar 3.7 Bintang UTS

  • 19

    BAB IV

    OBJEK GRAFIK 2D

    4.1 Dasar Teori

    Struktur data obyek grafik 2D, dalam hal ini digunakan bentuk struktur

    (type data record) dan array.

    Menggambar obyek grafik 2D dengan struktur data yang sudah ditentukan.

    Macam-macam transformasi 2D, seperti Translasi (pindah), Rotasi

    (berputar) dan Scaling (berubah ukuran).

    Model Matrik Transformasi.

    Perubahan Struktur Data Point2D ke Vektor2D dan sebaliknya.

    Implementasi tranformasi 2D

    4.2 Tujuan Praktikum

    1. Mampu Membuat Gambar 2D dan 3D

    2. Mengenal dan mulai menulis program untuk membuat gambar

    3. Mempelajari dasar-dasar pembuatan grafik dengan OpenGL

    4. Mengembangkan beberapa perangkat dasar untuk menggambar line,

    polyline dan polygon.

    typedef struct {

    float x,y;

    } point2D_t;

    point2D_t P[3];

    drawPolygon(P,3);

    Definisi struktur : Implementasi :

  • 20

    4.3 Grafik 2 Dimensi Membuat Bunga Pot

    Struktur program:

    #include

    #include

    typedef struct

    {

    int x,y;

    }point2D_t;

    typedef struct

    {

    float r,g,b;

    }color_t;

    void setColor (color_t col)

    {

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

    }

    void drawPolygon(point2D_t pnt[],int n)

    {

    int i;

    glBegin(GL_POLYGON);

    for (i=0; i

  • 21

    {

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

    }

    glEnd();

    }

    void userdraw()

    {

    point2D_t

    batang[4]={{-5,-190},{-5,0},{5,0},{5,-190}};

    color_t biru ={1,1,0};

    fillPolygon(batang,4, biru);

    drawPolygon(batang,4);

    point2D_t

    pot[4]={{-60,-190},{60,-190},{30,-240},{-30,-240}};

    color_t hitam ={0,1,1};

    fillPolygon(pot,4, hitam);

    drawPolygon(pot,4);

    point2D_t

    pot2[6]={{-80,-160},{-50,-160},{-50,-190},{-60,-190},{-60,-170},{-80,-

    170}};

    color_t hitam3 ={0,1,0};

    fillPolygon(pot2,4, hitam3);

    drawPolygon(pot2,4);

    point2D_t

    pot3[6]={{80,-160},{50,-160},{50,-190},{60,-190},{60,-170},{80,-170}};

    color_t hitam2 ={0,1,0};

    fillPolygon(pot3,4, hitam2);

    drawPolygon(pot3,4);

  • 22

    static int tick=0;

    point2D_t shape[360];

    double srad,r;

    for(int s=0; s

  • 23

    glutCreateWindow("Bunga Bangke :D");

    //warna back layar

    glClearColor(1.1,1.1,1.0,0.0);

    gluOrtho2D(-300.,400.,-300.,300.);

    glutIdleFunc(display);

    glutDisplayFunc(display);

    glutMainLoop();

    return 0;

    }

    Hasilnya sebagai berikut:

    Gambar 4.1 Bunga pot

  • 24

    4.4 Membuat Monas 2D

    Struktur Program:

    #include

    typedef struct

    {

    int x,y;

    }point2D_t;

    typedef struct

    {

    float r,g,b;

    }color_t;

    void setColor(color_t col)

    {

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

    }

    void drawPolygon(point2D_t pnt[],int n)

    {

    int i;

    glBegin(GL_LINE_LOOP);

    for (i=0; i

  • 25

    }

    glEnd();

    }

    void userdraw(void)

    {

    point2D_t

    petakdasar[4]={{0,0},{0,80},{350,80},{350,0}};

    color_t hijau ={0,1,0};

    fillpolygon(petakdasar, 4, hijau);

    drawPolygon(petakdasar,4);

    point2D_t

    tangga[4]={{10,10},{50,50},{310,50},{340,10}};

    color_t merah ={1,0,0};

    fillpolygon(tangga, 4, merah);

    drawPolygon(tangga,4);

    point2D_t

    petaktengah1[4]={{110,50},{100,70},{260,70},{250,50}};

    color_t kuning ={1,1,0};

    fillpolygon(petaktengah1, 4, kuning);

    drawPolygon(petaktengah1,4);

    point2D_t

    petaktengah2[4]={{100,70},{80,90},{280,90},{260,70}};

    color_t kuning2 ={1,1,0};

    fillpolygon(petaktengah2, 4, kuning2);

    drawPolygon(petaktengah2,4);

    point2D_t

    petaktengah3[4]={{80,90},{70,110},{290,110},{280,90}};

    color_t kuning3 ={1,1,0};

  • 26

    fillpolygon(petaktengah3, 4, kuning3);

    drawPolygon(petaktengah3,4);

    point2D_t

    batang2[4]={{160,510},{160,530},{200,530},{200,510}};

    color_t hitam4 ={0,0,0};

    fillpolygon(batang2, 4, hitam4);

    drawPolygon(batang2,4);

    point2D_t

    batang[4]={{150,120},{170,520},{190,520},{210,120}};

    color_t putih2 ={1,1,1};

    fillpolygon(batang, 4, putih2);

    drawPolygon(batang,4);

    point2D_t

    petaktengah4[4]={{70,110},{70,120},{290,120},{290,110}};

    color_t hitam3 ={0,0,0};

    fillpolygon(petaktengah4, 4, hitam3);

    drawPolygon(petaktengah4,4);

    point2D_t

    segitiga[3]={{170,530},{180,580},{190,530}};

    color_t kuning4 ={1,1,0};

    fillpolygon(segitiga, 3, kuning4);

    drawPolygon(segitiga,3);

    point2D_t

    bayangbatang[4]={{160,530},{160,535},{200,535},{200,530}};

    color_t putih3 ={1,1,1};

    fillpolygon(bayangbatang, 4, putih3);

    drawPolygon(bayangbatang,4);

  • 27

    point2D_t

    bayangbatang2[4]={{200,510},{200,535},{203,535},{203,510}};

    color_t putih4 ={1,1,1};

    fillpolygon(bayangbatang2, 4, putih4);

    drawPolygon(bayangbatang2,4);

    point2D_t

    tanggatgh1[4]={{140,10},{140,50},{150,50},{150,10}};

    color_t hitam ={0,0,0};

    fillpolygon(tanggatgh1, 4, hitam);

    drawPolygon(tanggatgh1,4);

    point2D_t

    tanggatgh2[4]={{210,10},{210,50},{220,50},{220,10}};

    color_t hitam2 ={0,0,0};

    fillpolygon(tanggatgh2, 4, hitam2);

    drawPolygon(tanggatgh2,4);

    point2D_t

    tangga2[4]={{10,10},{50,50},{310,50},{340,10}};

    drawPolygon(tangga2,4);

    point2D_t

    petaktengah11[4]={{110,50},{100,70},{260,70},{250,50}};

    drawPolygon(petaktengah11,4);

    point2D_t

    petaktengah22[4]={{100,70},{80,90},{280,90},{260,70}};

    drawPolygon(petaktengah22,4);

    point2D_t

    petaktengah33[4]={{80,90},{70,110},{290,110},{280,90}};

  • 28

    drawPolygon(petaktengah33,4);

    point2D_t

    batang3[4]={{150,120},{170,520},{190,520},{210,120}};

    drawPolygon(batang3,4);

    point2D_t

    anaktangga[4]={{150,40},{150,45},{210,45},{210,40}};

    drawPolygon(anaktangga,4);

    point2D_t

    anaktangga2[4]={{150,30},{150,35},{210,35},{210,30}};

    drawPolygon(anaktangga2,4);

    point2D_t

    anaktangga3[4]={{150,20},{150,25},{210,25},{210,20}};

    drawPolygon(anaktangga3,4);

    point2D_t

    anaktangga4[4]={{150,10},{150,15},{210,15},{210,10}};

    drawPolygon(anaktangga4,4);

    }

    void display(void)

    {

    //clear screen

    glClear(GL_COLOR_BUFFER_BIT);

    userdraw();

    glutSwapBuffers();

    }

    int main(int argc, char **argv)

    {

  • 29

    glutInit(&argc,argv);//Inisialisasi Toolkit

    glutInitDisplayMode(GLUT_DOUBLE|GLUT_RGB);

    glutInitWindowPosition(100,100);

    glutInitWindowSize(500,640);

    glutCreateWindow("MONUMEN NASIONAL JAKARTA");

    glClearColor(0.0,0.0,1.0,0.0);

    gluOrtho2D(0.,350.,-5.,600.);

    glutIdleFunc(display);

    glutDisplayFunc(display);

    glutMainLoop();

    return 0;

    }

    Hasinya sebagai berikut:

    Gambar 4.2 Monas 2D

  • 30

    BAB V

    OBJEK GRAFIK 3D

    5.1 Dasar Teori

    Struktur Data Obyek Grafik 3D

    Sistem Koordinat 3D

    Struktur data obyek grafik 3D menggunakan struktur (tipe data record) untuk

    titik 3D, face (sisi), dan array.

    Mengambar obyek grafik 3D sesuai dengan struktur data yang sudah

    ditentukan.

    5.2 Tujuan Praktikum

    1. Mahasiswa dapat membuat program untuk membangun grafik 2D dan 3D

    menggunakan bahasa pemrograman C++ dan grafik library OpenGL.

    2. Mahasiswa dapat menerapkan prinsip-prinsip dasar grafika komputer

    untuk keperluan visualisasi, animasi dan simulasi pada bidang ilmu

    lainnya.

    5.3 Objek Grafik Simpel Kubus 3D

    Struktur program:

    #include

    #include

    #include

    #include

    #include

    #include

    void cube()

    typedef struct {

    float x,y,z;

    } point2D_t;

    Definisi struktur titik 3D: typedef struct {

    int NumberofPoint;

    int p[32];

    } face_t;

    Definisi struktur face :

  • 31

    {

    //menggambar kubus dan transformasi tarnslasi ke titik 0.5 0.5 0.5 dan skala

    1 1 1

    glPushMatrix();

    glTranslated(0.5,0.5,0.5);//cube

    glScaled(1.0,1.0,1.0);

    glutSolidCube(1.0);

    glPopMatrix();

    }

    void setMaterial()

    {

    //set properties of surfaces material

    GLfloat mat_ambient[] = {0.7f,0.7f,0.7f,1.0f}; // ada 4 jenis material yang

    dipakai, dengan kombinasi warna tertentu

    GLfloat mat_diffuse[] = {0.6f,0.6f,0.6f,1.0f};

    GLfloat mat_specular[] = {1.0f,1.0f,1.0f,1.0f};

    GLfloat mat_shininess[] = {50.0f};

    glMaterialfv(GL_FRONT,GL_AMBIENT,mat_ambient);

    glMaterialfv(GL_FRONT,GL_DIFFUSE,mat_diffuse);

    glMaterialfv(GL_FRONT,GL_SPECULAR,mat_specular);

    glMaterialfv(GL_FRONT,GL_SHININESS,mat_shininess);

    }

    void setLighting()

    {

    //set light sources

    GLfloat lightIntensity[] = {0.7f,0.7f,0.7f,1.0f};//mensetting pencahayaan

    GLfloat light_position[] = {2.0f,6.0f,3.0f,0.0f};

    glLightfv(GL_LIGHT0,GL_DIFFUSE,lightIntensity);

    glLightfv(GL_LIGHT0,GL_POSITION,light_position);

    }

  • 32

    void setViewport()

    {

    glMatrixMode(GL_PROJECTION);

    glLoadIdentity();

    double winHt = 1.0;//half height of the window

    glOrtho(-winHt*64/48,winHt*64/48,-winHt,winHt,0.1,100.0);

    }

    void setCamera()

    {

    //set the camera

    glMatrixMode(GL_MODELVIEW);

    glLoadIdentity();

    gluLookAt(3.3,3.3,3.0,0,0.25,0,0.0,1.0,0.0);

    }

    void displayObject()

    {

    setMaterial();

    setLighting();

    setViewport();

    setCamera();

    //startDrawing

    glClear(GL_COLOR_BUFFER_BIT|GL_DEPTH_BUFFER_BIT);

    cube();//memanggil fungsi menggambar kubus

    glFlush();//mengirim smua objek untuk dirender

    }

    void main(int argc, char **argv)

    {

    glutInit(&argc,argv);

    glutInitDisplayMode(GLUT_SINGLE|GLUT_RGB|GLUT_DEPTH);

    glutInitWindowSize(640,480);

    glutInitWindowPosition(100,100);

  • 33

    glutCreateWindow("simple 3d scene");

    glutDisplayFunc(displayObject);//fungsi dari display object yang

    menggabungkan kubus lighting material dan kamera

    glEnable(GL_LIGHTING);

    glEnable(GL_LIGHT0);

    glShadeModel(GL_SMOOTH);

    glEnable(GL_DEPTH_TEST);

    glEnable(GL_NORMALIZE);

    glClearColor(1.0f,1.0f,1.0f,0.0f);

    glViewport(0,0,640,480);

    glutMainLoop();

    }

    Hasilnya sebagai berikut :

    Gambar 5.1 Simpel Kubus 3D

  • 34

    5.4 Objek Grafik Kubus 3D Point To Vektor

    Struktur Program:

    #include

    #include

    struct point {

    float x,y,z;

    };

    struct vektor {

    float v[4];

    };

    struct matriks {

    float m[4][4];

    };

    struct face {

    int jumtitikons;

    int indextitik[40];

    };

    struct objek {

    int jumtitik;

    point titik[40];

    int jumsisi;

    face sisi[30];

    };

    matriks mat;

    float theta=0.5;

    vektor point2vektor(objek balok, int i) {

    vektor vec;

    vec.v[0] = balok.titik[i].x;

    vec.v[1] = balok.titik[i].y;

    vec.v[2] = balok.titik[i].z;

    vec.v[3] = 1;

    return vec;

  • 35

    }

    point vektor2point(vektor vec) {

    point pnt;

    pnt.x = vec.v[0];

    pnt.y = vec.v[1];

    pnt.z = vec.v[2];

    return pnt;

    }

    matriks identitas(void) {

    int i,j;

    matriks mat;

    for (i=0;i

  • 36

    rotate.m[1][1] = cs;

    rotate.m[1][2] = -sn;

    rotate.m[2][1] = sn;

    rotate.m[2][2] = cs;

    return rotate;

    }

    matriks rotasiY(float theta) {

    matriks rotate = identitas();

    float cs = cos(theta);

    float sn = sin(theta);

    rotate.m[0][0] = cs;

    rotate.m[0][2] = sn;

    rotate.m[2][0] = -sn;

    rotate.m[2][2] = cs;

    return rotate;

    }

    matriks rotasiZ(float theta) {

    matriks rotate = identitas();

    float cs = cos(theta);

    float sn = sin(theta);

    rotate.m[0][0] = cs;

    rotate.m[0][1] = -sn;

    rotate.m[1][0] = sn;

    rotate.m[1][2] = cs;

    return rotate;

    }

    vektor kali (matriks mat, vektor b) {

    int i,j;

    vektor c;

    for (i=0;i

  • 37

    c.v[i]+= mat.m[i][j] * b.v[j];

    }

    }

    return c;

    }

    matriks kalim (matriks a, matriks b) {

    int i,j,k;

    matriks c;

    for (i=0;i

  • 38

    for(i=0;i

  • 39

    6,{{4,{0,1,5,4}},{4,{3,2,6,7}},{4,{0,3,7,4}},{4,{1,2,6,5}},{4,{0,1,2,3}},{4,{4,5,6,7}}

    }};

    for (i=0;i

  • 40

    Hasilnya Sebagai Berikut:

    Gambar 5.2 Kubus 3D

    5.5 Objek Grafik Star 3D

    Struktur Program:

    #include "GL/glut.h"

    #include

    struct point {

    float x,y,z;

    };

    struct vektor {

    float v[4];

    };

    struct matriks {

    float m[4][4];

    };

    struct face {

    int jumtitikons;

    int indextitik[40];

    };

    struct objek {

    int jumtitik;

    point titik[40];

    int jumsisi;

    face sisi[30];

    };

  • 41

    matriks mat;

    float theta=0.5;

    vektor point2vektor(objek balok, int i) {

    vektor vec;

    vec.v[0] = balok.titik[i].x;

    vec.v[1] = balok.titik[i].y;

    vec.v[2] = balok.titik[i].z;

    vec.v[3] = 1;

    return vec;

    }

    point vektor2point(vektor vec) {

    point pnt;

    pnt.x = vec.v[0];

    pnt.y = vec.v[1];

    pnt.z = vec.v[2];

    return pnt;

    }

    matriks identitas(void) {

    int i,j;

    matriks mat;

    for (i=0;i

  • 42

    matriks trans = identitas();

    trans.m[0][3] = dx;

    trans.m[1][3] = dx;

    trans.m[2][3] = dx;

    return trans;

    }

    matriks rotasiX(float theta) {

    matriks rotate = identitas();

    float cs = cos(theta);

    float sn = sin(theta);

    rotate.m[1][1] = cs;

    rotate.m[1][2] = -sn;

    rotate.m[2][1] = sn;

    rotate.m[2][2] = cs;

    return rotate;

    }

    matriks rotasiY(float theta) {

    matriks rotate = identitas();

    float cs = cos(theta);

    float sn = sin(theta);

    rotate.m[0][0] = cs;

    rotate.m[0][2] = sn;

    rotate.m[2][0] = -sn;

    rotate.m[2][2] = cs;

    return rotate;

    }

    matriks rotasiZ(float theta) {

    matriks rotate = identitas();

    float cs = cos(theta);

    float sn = sin(theta);

    rotate.m[0][0] = cs;

  • 43

    rotate.m[0][1] = -sn;

    rotate.m[1][0] = sn;

    rotate.m[1][2] = cs;

    return rotate;

    }

    vektor kali (matriks mat, vektor b) {

    int i,j;

    vektor c;

    for (i=0;i

  • 44

    c.v[0] = a.v[1]*b.v[2]-a.v[2]*b.v[1];

    c.v[1] = a.v[2]*b.v[0]-a.v[0]*b.v[2];

    c.v[2] = a.v[0]*b.v[1]-a.v[1]*b.v[0];

    c.v[3] = 1;

    return c;

    }

    void DrawPolygon(objek obj)

    {

    int i,j;

    float r,g,b;

    for(i=0;i

  • 45

    obj.titik[obj.sisi[i].indextitik[j]].y,

    obj.titik[obj.sisi[i].indextitik[j]].z);

    }

    glEnd();

    }

    }

    void gambarbintang() {

    int i;

    vektor hasil,HslKali;

    point HslTitik;

    mat = titling;

    objek balok =

    {12,{{20,60,110},{10,0,70},{30,35,70},{70,20,70},{60,55,70},{70

    ,100,110},{25,80,80},{5,120,110},{-5,70,80},{-40,54,110},{-

    10,30,70},{20,60,40}},

    20,{{3,{11,2,1}},{3,{11,2,3}},{3,{11,4,3}},{3,{11,5,4}},{3,

    {11,6,5}},{3,{11,7,6}},{3,{11,8,7}},{3,{11,9,8}},{3,{11,10,9}},{3,{11,1,10}},

    {3,{0,2,1}},{3,{0,2,3}},{3,{0,4,3}},{3,{0,5,4}},{3,

    {0,6,5}},{3,{0,7,6}},{3,{0,8,7}},{3,{0,9,8}},{3,{0,10,9}},{3,{0,1,10}}

    }};

    for (i=0;i

  • 46

    glClear(GL_COLOR_BUFFER_BIT);

    glRotatef(0.1f,0.0f,0.1f,0.0f);

    gambarbintang();

    glutSwapBuffers();

    }

    void main(int argc,char **argv) {

    glutInit(&argc,argv);

    glutInitWindowPosition(20,20);

    glutInitWindowSize(640,640);

    glutInitDisplayMode(GLUT_DOUBLE|GLUT_RGB);

    glutCreateWindow("Star 3D");

    glOrtho(-200.0f,200.0f,-200.0f,200.0f,-200.0f,200.0f);

    glutIdleFunc(UserDraw);

    glutDisplayFunc(UserDraw);

    glutMainLoop();

    }

    Hasilnya Sebagai berikut:

    Gambar 5.3 Star 3D

  • 47

    BAB VI

    ANALISA

    6.1 Analisa Pengenalan

    Dengan mempelajari computer grafik, kita dapat menggambar dengan

    menggunakan suatu program dari Microsoft Visual C++ yang dipadikan

    dengan menggunakan OpenGL sebagai library untuk grafik computer.

    6.2 Analisa Primitive Drawing

    Dengan Primitive Drawing merupakan cara mudah untuk menggambar pada

    layar monitor menggunakan teori geometri sederhana. Macam-macam

    primitive drawing seperti menggambar sebuah titik, garis, atau gabungan

    antar keduanya.

    6.3 Analisa 2D

    Dengan menggunakan aplikasi OpenGL kita dapat menggambar grafik 2D

    yang juga di padukan dengan polyline, polygon atau kurva. Sehingga dapat

    menggambar animasi dua dimensi.

    6.4 Analisa 3D

    Dengan menggunakan aplikasi OpenGL kita tidak hanya dapat menggambar

    grafik 2D namun juga dapat membuat 3D. Sehingga dapat menggambar lebih

    keliatan nyata.

  • 48

    BAB VII

    PENUTUP

    7.1 Kesimpulan

    Selama penulis belajar computer grafik, banyak sekali yang penulis

    dapatkan, terutama tentang grafika computer. Penulis dapar menyimpulkan

    bahwa:

    Grafika komputer adalah suatu bidang ilmu yang mempelajari

    bagaimana membangun grafik (gambar) baik 2D maupun 3D yang

    kelihatan nyata menggunakan komputer.

    OpenGL adalah library yang khusus menyediakan perangkat

    perangkat pembuatan grafik. OpenGL bekerja pada bahasa C.

    Objek grafik 2D adalah sekumpulan titik titik 2D yang

    dihubungkan dengan garis lurus, baik berupa polyline, polygon atau kurva.

    Struktur data obyek grafik 2D, dalam hal ini digunakan bentuk struktur

    (type data record) dan array.

    Objek grafik 3D adalah sebuah model struktur data yang menyatakan

    suatu gambar 3D dibentuk dan disusun. Struktur data obyek grafik 3D

    menggunakan struktur (tipe data record) untuk titik 3D, face (sisi), dan

    array.

    7.2 Saran

    Melihat perkembangan teknologi saat ini, rasanya mata kuliah

    computer grafik akan semakin disukai oleh mahasiswa. Sebab dimata kuliah

    computer grafik kita dapat belajar bagaimana membuat gambar 2D dan 3D

    yang saat ini lagi banyak dibicarakan banyak orang. Oleh sebab itu penting

    juga untuk menambah materi yang lebih baru lagi, agar mahasiswa akan

    senang belajar computer grafik. Dan kalau bisa system belajar yang ibu

    terapkan tetap dipertahankan kami mahasiswa akan terbiasa untuk mencari

    dan belajar sendiri.

  • DAFTAR PUSTAKA

    Basuki Ahmad & Ramadijanti Nana., Grafika Komputer: Teori dan

    Implementasi, Andi, .Yogyakarta , 2006

    Suyoto. Teori dan Pemrograman Grafika Komputer, 2003. Penerbit

    Gava Media.

    Edward Angel, Interactive Computer Graphics: A Top-Down

    Approach with OpenGL 2nd, Addison Wesley, 2005