36

Grafika Komputer_pertemuan1 Dan 2

Embed Size (px)

Citation preview

Page 1: Grafika Komputer_pertemuan1 Dan 2
Page 2: Grafika Komputer_pertemuan1 Dan 2

TujuanMahasiswa bisa membuat (create)

gambar menggunakan Open-GL dan bahasa C++.

Mahasiswa bisa membuat gambar 2D dan gambar 3D.

Mahasiswa dapat menerapkan prinsip-prinsip transformasi 2D dan 3D.

Mahasiswa dapat menerapkan shading dan pencahayaan pada obyek gambar

Mahasiswa dapat membuat morphing

Page 3: Grafika Komputer_pertemuan1 Dan 2

TUJUAN PENGAJARANGRAFIKA KOMPUTER

Mempelajari bagaimana membuat grafik (gambar) yang tampak nyata dengan menggunakan program komputer.

Mempelajari berbagai macam bentuk transformasi yang dapat menampilkan perubahan atau gerakan gambar

Mempelajari bagaimana membuat elemen-elemen grafik dengan cara yang “smart”

Page 4: Grafika Komputer_pertemuan1 Dan 2

MATERI GRAFIKA KOMPUTER

Pengenalan Grafika Komputer

Primitive DrawingGrafik 2-DimensiGrafik 3-DimensiMorphingShading dan Optical ViewSpline dan Bezier

Page 5: Grafika Komputer_pertemuan1 Dan 2

Prasyarat Grafika KomputerMatematikaAljabar MatrikTeknik Pemrograman, khususnya yang menggunakan bahasa C++

Struktur Data dan Algoritma

Page 6: Grafika Komputer_pertemuan1 Dan 2

Perangkat Yang DigunakanKomputer PCSistem Operasi Microsoft Windows atau

LinuxBahasa C++: dalam hal ini menggunakan

Microsoft Visual C++ untuk sistem operasi MS-Windows, dan g++ untuk sistem operasi Linux.

Open-GL, sebagai library untuk grafika komputer.

Page 7: Grafika Komputer_pertemuan1 Dan 2

Apa Grafika Komputer ?Grafika komputer adalah gambar atau grafik yang dihasilkan oleh komputer.

Grafika komputer merupakan perangkat (tool) dasar yang digunakan untuk membuat gambar dengan komputer.

Page 8: Grafika Komputer_pertemuan1 Dan 2

Dimana Grafik Yang Dibuat Dengan Komputer ini Digunakan

Seni, Entertainment dan Publishing, seperti produksi film, animasi, special effect, game komputer, web browsing, buku, slide, dan majalah

Image ProcessingMenampilkan proses yang sedang

berjalan (monitoring)Menampilkan simulasiCADVisualisasi analisa sains

Page 9: Grafika Komputer_pertemuan1 Dan 2

Elemen-Elemen Dasar Grafika Komputer

PolylinesTextFilled regionsRaster images

Page 10: Grafika Komputer_pertemuan1 Dan 2

Polyline adalah dereten garis-garis lurus yang berhubungan. Polyline ini adalah dasar dari

setiap pembuatan grafik.

Page 11: Grafika Komputer_pertemuan1 Dan 2

HaettenschweilerHaettenschweiler BoldHaettenschweiler italic

Time New RomanTime New Roman boldTime New Roman italic

CourierCourier boldCourier italic

Page 12: Grafika Komputer_pertemuan1 Dan 2

Filled-Region adalah bagaimana memberi (memblok) warna atau

pattern pada sebuah luasan

Page 13: Grafika Komputer_pertemuan1 Dan 2

Raster image adalah penyajian gambar menggunakan matrik dari setiap sel gambar, dimana sebuah gambar didefinisikan sebagai array

dari besar-besaran numeris.1 1 1 1 11 0 0 0 11 0 2 0 11 2 0 2 12 0 1 0 2

Page 14: Grafika Komputer_pertemuan1 Dan 2

Beberapa Device Dalam Grafika Komputer

Line-Drawing DisplayRaster DisplayIndexed Color dan The Lookup Table

Other Raster Display DevicesHard-Copy Raster Devices

Page 15: Grafika Komputer_pertemuan1 Dan 2
Page 16: Grafika Komputer_pertemuan1 Dan 2

TujuanMengenal dan mulai menulis program untuk

membuat gambarMempelajari dasar-dasar pembuatan grafik

dengan OpenGLMengembangkan beberapa perangkat dasar

untuk menggambar line, polyline dan polygon

Page 17: Grafika Komputer_pertemuan1 Dan 2

OpenGLOpenGL adalah library yang khusus

menyediakan perangkat-perangkat pembuatan grafik.

OpenGL bekerja dalam bahasa COpenGL dapat bekerja pada beberapa

platform, seperti SGI, Unix, dan Windows

Page 18: Grafika Komputer_pertemuan1 Dan 2

Cara Menginstall OpenGL pada Microsoft Windows

Ada 3 file penting dalam OpenGL yang akan digunakan dalam sistem operasi MS-Windows, yaitu glut.h, glut32.lib dan glut32.dll

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

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

Letakkan glut32.dll di direktori windows/system.

Page 19: Grafika Komputer_pertemuan1 Dan 2

#include <glut.h>

void userdraw(){

static int tick=0;//program grafik ditulis disini

}

void display(void){

glClear(GL_COLOR_BUFFER_BIT);userdraw();glutSwapBuffers();

}

Page 20: Grafika Komputer_pertemuan1 Dan 2

int main(int argc, char **argv){glutInit(&argc,argv);glutInitDisplayMode(GLUT_DOUBLE|GLUT_RGB);glutInitWindowPosition(100,100);glutInitWindowSize(640,480);glutCreateWindow(“my first Open GL");glClearColor(1.0,1.0,1.0,0.0);gluOrtho2D(0.,640.,-240.,240.);glutIdleFunc(display);glutDisplayFunc(display);glutMainLoop();return 0;}

Page 21: Grafika Komputer_pertemuan1 Dan 2

glutInitWindowPosition(100,100);glutInitWindowSize(640,480);

Membuat windows dengan ukuran (640,480) dengan titik kiri atas jendela diletakkan pada posisi (100,100) di layar komputer

glutCreateWindow(“my first Open GL");

Memberi judul pada windows dengan “my first Open GL”

Page 22: Grafika Komputer_pertemuan1 Dan 2

glClearColor(1.0,1.0,1.0,0.0);Mendefinisikan warna dari windows yang dibuat dengan warna (1,1,1) yaitu warna putih

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

Mendefinisikan besarnya sistem koordinat dengan range sumbu x adalah [0,640] dan range untuk sumbu y adalah [-240,240]

Page 23: Grafika Komputer_pertemuan1 Dan 2

Drawing Windows

(0,0)x

y (640,480)

(640,0)

(0,480)

Page 24: Grafika Komputer_pertemuan1 Dan 2

glVertex2i(x,y)Untuk menggambar titik di posisi (x,y) dimana x dan y didefinisikan sebagai bilangan bulat (integer)

glVertex2f(x,y)

Untuk menggambar titik di posisi (x,y) dimana x dan y didefinisikan

sebagai bilangan pecahan (float/double)

glVertex2d(x,y)

Page 25: Grafika Komputer_pertemuan1 Dan 2

glBegin(GL_POINTS);glVertex2i(100,50);glVertex2i(100,130);glVertex2i(150,130);

glEnd();

My first Drawing

Page 26: Grafika Komputer_pertemuan1 Dan 2

void drawDot(int x, int y){

glBegin(GL_POINTS);glVertex2i(x,y);glEnd();

}

void drawDot(float x, float y){

glBegin(GL_POINTS);glVertex2f(x,y);glEnd();

}

Fungsi ini digunakan bila x

dan y didefinisikan

sebagai integer

Fungsi ini digunakan bila x

dan y didefinisikan sebagai float

Page 27: Grafika Komputer_pertemuan1 Dan 2
Page 28: Grafika Komputer_pertemuan1 Dan 2
Page 29: Grafika Komputer_pertemuan1 Dan 2

Untuk membuat garis diperlukan library GL_LINES dengan

menyatkan titik awal dan titik akhir dari garis.

glBegin(GL_LINES);glVertex2i(100,100);glVertex2i(200,150);

glEnd();

My first drawing

(100,100)

(200,150)

Page 30: Grafika Komputer_pertemuan1 Dan 2

void drawLine(int x1,int y1,int x2,int y2){

glBegin(GL_LINES);glVertex2i(x1,y1);glVertex2i(x2,y2);

glEnd();}

void drawLine(float x1,float y1,float x2,float y2){

glBegin(GL_LINES);glVertex2f(x1,y1);glVertex2f(x2,y2);

glEnd();}

Page 31: Grafika Komputer_pertemuan1 Dan 2

Polyline adalah sekumpulan garis yang terhubung satu dengan yang lainnya

hingga membentuk sebuah obyek gambar.

glBegin(GL_LINE_STRIP);glVertex2i(x1,y1);glVertex2i(x2,y2);glVertex2i(x3,y3);……………………………………………glVertex2i(xn,yn);

glEnd();

Page 32: Grafika Komputer_pertemuan1 Dan 2

glBegin(GL_LINE_STRIP);glVertex2i(100,100);glVertex2i(200,150);glVertex2i(300,50);

glEnd();

My first drawing

(100,100)

(200,150)

(300,50)

Page 33: Grafika Komputer_pertemuan1 Dan 2

Polyline adalah sekumpulan garis yang terhubung satu dengan yang lainnya dan berbentuk kurva tertutup hingga membentuk sebuah obyek gambar.

glBegin(GL_LINE_LOOP);glVertex2i(x1,y1);glVertex2i(x2,y2);glVertex2i(x3,y3);……………………………………………glVertex2i(xn,yn);

glEnd();

Page 34: Grafika Komputer_pertemuan1 Dan 2

glBegin(GL_LINE_LOOP);glVertex2i(100,100);glVertex2i(200,150);glVertex2i(300,50);

glEnd();

My first drawing

(100,100)

(200,150)

(300,50)

Page 35: Grafika Komputer_pertemuan1 Dan 2

Membuat gambar rumah seperti gambar berikut:

My House

Page 36: Grafika Komputer_pertemuan1 Dan 2

Membuat gambar TV seperti gambar berikut:

My TV