grafika1

GrafikaGrafika KomputerKomputer

Achmad BasukiGroup Riset Computer Vision dan Pattern Recognition

Politeknik Elektronika Negeri Surabaya

Laboratorium Computer Vision, Jurusan Teknologi InformasiPoliteknik Elektronika Negeri Surabaya PENS-ITS

Tujuan Perkuliahan

Mahasiswa dapat membuat program untuk membangun grafik 2D dan 3D menggunakan bahasa pemrogramanC++ dan grafik library OpenGL.

Mahasiswa dapat menerapkan prinsip-prinsip dasar grafika komputer untukkeperluan visualisasi, animasi dansimulasi pada bidang ilmu lainnya.


Ide Dasar Grafika Komputer

Grafika komputer adalah suatu bidang ilmuyang mempelajari bagaimanamembangun grafik (gambar) baik 2D maupun 3D yang kelihatan nyatamenggunakan komputer.

Salah satu bidang grafika komputer yang sangat terkenal adalah Desain Grafis.


Apa Grafika Komputer?

Grafika komputer adalah caramembuat gambar atau grafikyang menggunakan komputer.

Aplikasi Grafika komputermerupakan perangkat (tool) dasaryang digunakan untuk membuatgambar dengan komputer.


Beberapa Penerapan Grafika Komputer

Entertainment, misalnya dalam pembuatan film animasi. Terminator II dan Titanic merupakan contohfilm non animasi yang memanfaatkan efek-efekgrafika komputer yang sangat canggih.

Visualisasi Proses dan hasil penelitian, misalnyamenggambarkan layout kinerja proses pabrik, proses-proses yang dalam modul ajar, grafik performance, grafik perubahan bahkan grafik model hasil simulasidan implementasi program.

Bersama-sama dengan image processing digunakansebagai algoritma identifikasi, seperti yang dilakukanpada kepolisian untuk menggambarkan wajahseseorang secara 3D dan identifikasi seseorang.

GIS (Geographic Information System) Masil banyak yang lainnya.


Apakah Beda Gambar Dan Photo ?Ini adalah pertanyaan dasar dalam membangun gambar secara nyata

PHOTOGAMBAR


Beda Gambar Dan Photo ?

Photo merupakan gambar yang dihasilkandengan proses capture dari kegiatan nyata. Hasilnya setiap detail akan muncul, misalnyajumlah kumis pada kucing sama.

Gambar adalah proses pembentukangambar yang dilakukan dengan menirukegiatan nyata. Hasilnya ada beberapadetail yang tidak dapat ditampilkan. Siapayang peduli pada jumlah kumis pada kucingpada saat menggambar?


Macam-Macam gambar Komputer

Raster Image, adalah gambar yang strukturnyaberupa matrik. Dimana setiap titik (x,y) mempunyainilai berupa warna sesuai dengan model warnayang digunakan seperti RGB atau CYMK. File dengan ekstensi BMP, GIF, TIFF, JPG dan PNG merupakan contoh dari Raster Image. Model gambar semacam ini digunakan dalam Image Processing.

Vector Image, adalah gambar yang strukturnyaberupa vektor. Gambar yang dibuat menggunakanAutoCAD, 3D studio Max atau Maya, atau gambar-gambar pada GIS merupakan contoh dari Vector Image. Model gambar semacam ini digunakandalam Grafika Komputer dan GIS.


Materi Dasar Grafika Komputer

Primitive Drawing Obyek Grafik 2D Transformasi 2D Obyek Grafik 3D Transformasi 3D Shading dan Optical View Z-order dan Z-buffer Morphing


Primitive Drawing Menggambar obyek-obyek dasar grafik yang

berupa: titik, garis, polyline, polygon. Memberikan warna pada obyek grafik

misalkan dengan setcolor, fillpolygon, gradatepolygon.

Polyline

Polygon

FillPolygon

GradatePolygon


Obyek Grafik 2D

Struktur data obyek grafik 2D, dalamhal ini digunakan bentuk struktur (type data record) dan array.

Menggambar obyek grafik 2D denganstruktur data yang sudah ditentukan.

Bab ini membahas bagaimana membangun obyek grafik 2D

typedef struct {float x,y;

} point2D_t;

point2D_t P[3];drawPolygon(P,3);

Implementasi :Definisi struktur :


Transformasi 2D 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

translasi

rotasi

scaling


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 denganstruktur data yang sudah ditentukan.

Bab ini membahas bagaimana membangun obyek grafik 3D


Struktur Data Obyek Grafik 3D

typedef struct {float x,y,z;

} point2D_t;

Definisi struktur titik 3D:

titik3D

Face

typedef struct {int NumberofPoint;int p[32];

} face_t;

Definisi struktur face :


Transformasi 3D Macam-macam transformasi 3D, seperti

Translasi (pindah), Rotasi (berputar), Scaling (berubah ukuran) dan Perspektif.

Model Matrik Transformasi 3D. Perubahan Struktur Data Point3D ke Vektor3D

dan sebaliknya. Implementasi tranformasi 3D

RotasiTranslasi


Shading dan Optical View

Wire-Frame Pewarnaan Pada Face Dasar-dasar Optival View Flat Shading Garoud Shading

Flat Shading Garoud Shading

View vector

Light vector


Z-order dan Z-buffer

Obyek 1 Obyek 2

Bila obyek 1 digambarkan terlebihdahulu baru obyek 2 maka hasilnyaadalah sebagai berikut:

Jika obyek 2 ternyata lebih jauhdari titik mata, apa yang terjadi?

Pada Z-order atau Z-buffer, obyek yang posisinya lebih jauh

harus digambarkan terlebihdahulu dengan mengurutkan

obyek berdasarkan posisi z-nya.

Salah satu teknik dalam melukisadalah menggambar obyek yang

posisinya jauh dilanjutkan smapaiobyek yang posisinya paling dekat

agar pada saat pewarnaan tidak adawarna yang hilang (Afandi)


MorphingVisualisasi perubahan obyek gambar menjadi obyek gambaryang lain yang dilakukan secara perlahan sehinggamenimbulkan efek yang dinamakan dengan morphing.

Workshop 1

Pemrograman Grafis Dengan OpenGL


Perangkat Yang Dibutuhkan

Komputer PC Sistem Operasi Microsoft Windows, Unix,

Mac OS atau Linux Bahasa C++: menggunakan Microsoft

Visual C++ untuk sistem operasi MS-Windows, CodeX untuk Mac OS dang++ untuk sistem operasi Linux.

Open-GL, sebagai library untuk grafikakomputer.


OpenGL

OpenGL adalah library yang khususmenyediakan perangkat-perangkatpembuatan grafik.

OpenGL bekerja dalam bahasa C OpenGL dapat bekerja pada

beberapa platform, seperti SGI, Unix, dan Windows


Instalasi OpenGL for Windows

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

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

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

Letakkan glut32.dll di direktoriwindows/system untuk windows 98, windows/system32 untuk windows 2000 danwindows XP


Struktur Dasar Program OpenGL#include void userdraw(){static int tick=0;//program grafik ditulis disini}void display(void){glClear(GL_COLOR_BUFFER_BIT);userdraw();glutSwapBuffers();}int main(int argc, char **argv){glutInit(&argc,argv);glutInitDisplayMode(GLUT_DOUBLE|GLUT_RGB);glutInitWindowPosition(100,100);glutInitWindowSize(640,480);glutCreateWindow(Drawing By Achmad Basuki");glClearColor(1.0,1.0,1.0,0.0);gluOrtho2D(0.,640.,-240.,240.);glutIdleFunc(display);glutDisplayFunc(display);glutMainLoop();return 0;}

Header glut.h dari OpenGL

Tempat program untukmenggambar

Fungsi manipulasi layar

Program utama yang digunakanuntuk mendefinisikan sistemgrafis yang dipakai


Statement Manipulasi Grafis

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

Membuat windows dengan ukuran(640,480) dengan titik kiri atas jendeladiletakkan pada posisi (100,100) di layarkomputer

glutCreateWindow(Drawing By Achmad Basuki");Memberi judul pada windows denganDrawing By Achmad Basuki


Statement Manipulasi Grafis

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

gluOrtho2D(0.,640., 0.,480.);Mendefinisikan besarnya sistem koordinatdengan range sumbu x adalah [0,640] dan range untuk sumbu y adalah [-0,480]


Sistem Koordinat

Drawing Windows

(0,0)x

y (640,480)

(640,0)

(0,480)

Workshop 2

Primitive Drawing


Polyline

Polyline adalah dereten garis-garis lurusyang berhubungan. Polyline ini adalah dasardari setiap pembuatan grafik.


Filled Region

Filled-Region adalah bagaimana memberi(memblok) warna atau pattern pada sebuahluasan


Raster Image

Raster image adalah penyajian gambarmenggunakan matrik dari setiap sel gambar, dimana sebuah gambar didefinisikan sebagaiarray 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


Menggambar Titik

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

glVertex2i(x,y) Untuk menggambar titik di posisi (x,y) dimana

x dan y didefinisikan sebagai bilanganpecahan (float/double) digunakan

glVertex2f(x,y)glVertex2d(x,y)


Contoh 1: Menggambar TitikglBegin(GL_POINTS);

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

glEnd();My first Drawing


Contoh 2: Menggambar Galaksiint n;float x,y;glBegin(GL_POINTS);for(n=0;n


Menggambar Garis

Untuk membuat garis diperlukan library GL_LINES dengan menyatakan titik awaldan titik akhir dari garis.

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

glEnd();

My first drawing

(100,100)

(200,150)


Membuat Gridfloat x,y;for(x=0;x


Membuat Polyline

Polyline adalah sekumpulan garis yang terhubung satu dengan yang lainnyahingga membentuk sebuah obyekgambar. Pembuatannya menggunakanlibrary GL_LINE_STRIP

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

glEnd();


Contoh: Membuat Polyline

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

glEnd();

My first drawing

(100,100)

(200,150)

(300,50)


Membuat Polygon

Polygon adalah sekumpulan garis yang terhubung satu dengan yang lainnya danberbentuk kurva tertutup hingga membentuksebuah obyek gambar. Pembuatannyamenggunakan library GL_LINE_LOOP

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

glEnd();


Contoh: Membuat Polygon

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

glEnd();

My first drawing

(100,100)

(200,150)

(300,50)


Pewarnaan

glColor3f(red,green,blue);

Red,green,blue bervariasi diantara 0. S/d 1.glColor3f(0.,0.,0.);//blackglColor3f(0.,0.,1.);//blue glColor3f(0.,1.,0.);//greenglColor3f(0.,1.,1.);//cyan glColor3f(1.,0.,0.);//red glColor3f(1.,0.,1.);//magenta glColor3f(1.,1.,0.);//yellowglColor3f(1.,1.,1.);//white


Tugas 1Membuat Rumah Dari Primitive Drawing

My House


Tugas 2Membuat TV Dari Primitive Drawing

My TV

Workshop 3

Obyek Grafik 2D


Struktur Data Titik 2D Titik didefinisikan dalam sistem koordinat yang menggunakan

bilangan pecahan (float)

Titik didefinisikan dalam sistem koordinat yang menggunakanbilangan bulat (integer)

Obyek 2D adalah array dari titik-titik 2D

typedef struct {float x;float y;

} point2D_t;

typedef struct {int x;int y;

} point2D_t;


Struktur Data Warna

Warna terdiri dari 3 elemen warna yaitured (r), green (g) dan blue (b) yang nilainya antara 0 dan 1

typedef struct {float r;float g;float b;

} color_t;


Fungsi Mengubah Warna

Tanpa struktur data warna

Dengan struktur data warnavoid setColor(color_t col){

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

void setColor(float r, float g, float b){

glColor3f(r, g, b);}


Fungsi Membuat Titik

void drawDot(float x, float y){

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

}

Tanpa struktur data

void drawDot(point2D_t p){

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

}

Dengan struktur data


Fungsi Membuat Garis

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

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

glEnd();}

Tanpa Struktur Data

void drawLine(point2D_t p1,point2D_t p2){

glBegin(GL_LINES);glVertex2f(p1.x,p1.y);glVertex2f(p2.x,p2.y);

glEnd();}

Dengan Struktur Data


Contoh: Grid Berwarnafloat x,y;for(x=0;x


Fungsi Membuat Polyline

void drawPolyline(point2D_t pnt[],int n){

int i;glBegin(GL_LINE_STRIP);

for (i=0;i


Fungsi Membuat Polygon

void drawPolyline(point2D_t pnt[],int n){

int i;glBegin(GL_LINE_LOOP);

for (i=0;i


Fungsi Membuat fillPolygon

void fillPolyline(point2D_t pnt[],int n, color_t col){

int i;setColor(col);glBegin(GL_POLYGON);

for (i=0;i


Fungsi Membuat gradatePolygon

void gradatePolyline(point2D_t pnt[],int n, color_t col[]){

int i;glBegin(GL_POLYGON);

for (i=0;i


Contoh: Membuat Kotak 1

void userdraw(){ point2D_t kotak[4]={{100,100},{300,100},

{300,200},{100,200}};setColor(1,1,0);drawPolygon(kotak,4);

}Program ini menghasilkan kotak yang garisnya berwarnakuning.




{300,200},{100,200}};color_t magenta={0,1,1};fillPolygon(kotak,4,magenta);

}Program ini menghasilkan kotak yang isinya berwarna magenta.


Contoh: Membuat Bintang

void userdraw(){ Point2D_t bintang[10]={{80,146},{99,90},

{157,90},{110,55},{128,1},{80,34},{32,1},{54,55},{3,90},{63,90}};

Polygon(bintang,10);}

My Star




{300,200},{100,200}};color_t magenta={0,1,1};fillPolygon(kotak,4,magenta);setColor(1,1,0);drawPolygon(kotak,4);

}Program ini menghasilkan kotak yang isinya berwarna magenta dan garis tepinya berwarna kuning.


Grafik Koordinat Polar

Dengan persamaan matematik y=f(x) dapatdigambarkan kurva dengan variasi bentuk yang menarik seperti sinus, cosinus, exponential danlogaritma, atau fungsi gabungannya. Bentukpersamaan matematik yang menarik untuk dibuatadalah persamaan matematik denganmenggunakan sistem koordinat polar.

)sin(.)cos(.

)(

ryrxfr

=== adalah sudut yang berjalan dari 0 s/d

360 yang dinyatakan dalam radian (0 s/d 2p). Macam-macam r=f() dapatmenghasilkan gambar yang bervariasi.


Konsep Koordinat Polar

0 360

r r

0 360


Beberapa Fungsi Polar

r=sin() Lingkaranr=sin(2) Rose 4 daunr=sin(3) Rose 3 daunr=sin(n) Rose n daun bila n bilangan primar= Spiral


Contoh: Membuat Lingkaranvoid userdraw(){ point2D_t kotak[90];

int i; float s;for(i=0;i


Animasi

Membuat obyek grafik 2-D menjadibergerak.

Animasi yang dilakukan adalahmemindahkan posisi gambar.

Pada sistem koordinat kartesian animasiakan berefek gerakan linier (translasi), pada sistem koordinat polar akanberefek gerakan berputar (rotasi)


Pembuatan Animasi

Pada main() ditambahkan fungsiglutIdleFunc(display) sebelum fungsiglutDisplayFunc(display).

Pada awal fungsi userdraw() didefinisikanstatic int tick

Pada akhir fungsi userdraw() ditambahkanperintah untuk menambah nilai tick secaraterus menerus dengan tick++.

Tambahkan nilai tick ini pada nilai variabeldasar pembuatan grafik


Tugas 1Membuat Rumah Dari Primitive Drawing

My House


Tugas 2Membuat TV Dari Primitive Drawing

My TV


Tugas 3Membuat gambar roda dari Logo ITS dengan fungsi koordinat polar

Workshop 4

Transformasi 2D


Struktur Data Titik Dan Vektor

Struktur data dari titik 2D

typedef struct {float x,y;

} point2D_t;

typedef struct {float v[3];

} vector2D_t;Struktur data dari vektor 2D


Konversi Titik vs Vektor

v[0] xv[1] yv[2] 1

vektor 2D

titik 2D

Point2Vector Vector2Point


Point2VectorFungsi ini digunakan untuk konversi struktur data titik menjadi struktur data vektor

vector2D_t point2vector(point2D_t pnt){

vector2D_t vec;vec.v[0]=pnt.x;vec.v[1]=pnt.y;vec.v[2]=1.;

}


Vector2PointFungsi ini digunakan untuk konversi struktur data vektor menjadi struktur data titik

point2D_t vector2point(vector2D_t vec){

point2D_t pnt;pnt.x=vec.v[1];pnt.y=vec.v[2];

}


Tranformasi

Transformasi adalah proses untuk memindah, memutar dan mengubah skala dari obyekgambar

Transformasi dari obyek gambar X denganperubahan T yang hasilnya Y ditulis dengan:

Y = T . X T adalah matrik transformasi yang berukuran

3x3. Y adalah vektor hasil transformasi dan X adalah vektor dari obyek gambar.


Membuat Matrik Identitas

=

100010001

I

matrix2D_t createIdentity(void) {matrix2D_t u;int i,j;for (i=0;i


Translasi

P(x,y)

P(x,y)

dx

dy

Matrik transformasi:

Proses transformasi:

=

3

2

1

3

2

1

1001001

vvv

dd

vvv

y

x

=

1001001

y

x

dd

T


Membuat Matrik Translasi

matrix2D_t translationMTX(float dx,float dy){

matrix2D_t trans=createIdentity();trans.m[0][2]=dx;trans.m[1][2]=dy;return trans;

}

=

1001001

y

x

dd

T


Scaling

x

y

P(x,y)

P(x,y)

mx.x

my.y



=

3

2

1

3

2

1

1000000

vvv

mm

vvv

y

x

=

1000000

y

x

mm

T


Membuat Matrik Scaling

=

1000000

y

x

mm

T

matrix2D_t scalingMTX(float mx,float my){

matrix2D_t scale=createIdentity();scale.m[0][0]=mx;scale.m[1][1]=my;return scale;

}


Rotasi

x

y

P(x,y)

P(x,y)



=

3

2

1

3

2

1

1000)cos()sin(0)sin()cos(

vvv

vvv

=


T


Membuat Matrik Rotasi

=


T

matrix2D_t rotationMTX(float theta){

matrix2D_t rotate=createIdentity();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][1]=cs;return rotate;

}


Perkalian Matrik

Perkalian matrik dengan matrik menghasilkanmatrik, digunakan untuk proses komposisitransformasi (transformasi yang lebih dari satuperubahan)

Perkalian matrik dengan vektor menghasilkanvektor, digunakan untuk menghitung prosestransformasi sehingga diperoleh titik baru hasiltransformasi


Perkalian Matrik vs Matrik

=

=2

0kkjikij bac

matrix2D_t operator * (matrix2D_t a, matrix2D_t b){

matrix2D_t c;//c=a*bint i,j,k;for (i=0;i


Perkalian Matrik vs Vektor

=

=2

0kkiki bac

vector2D_t operator * (matrix2D_t a, vector2D_t b){

vector2D_t c;//c=a*bint i,j;for (i=0;i


Komposisi Transformasi

Kompisisi transformasi adalah menggabungkanbeberapa tranformasi, sehingga dapatmenghasilkan bentuk transformasi yang lebihkompleks

Komposisi tranformasi dapat dilakukan denganmengalikan matrik-matrik transformasi

Translasi(d,0)

Rotasi()

Translasi(d,0)

Rotasi()

T=Translasi(d,0). Rotasi(q) T= Rotasi(q) .Translasi(d,0)


Tugas 1: Orbit Bumi dan Bulan

Grafika Komputer Tujuan PerkuliahanIde Dasar Grafika Komputer Apa Grafika Komputer?Beberapa Penerapan Grafika KomputerApakah Beda Gambar Dan Photo ?Beda Gambar Dan Photo ?Macam-Macam gambar KomputerMateri Dasar Grafika KomputerPrimitive Drawing Obyek Grafik 2DTransformasi 2DObyek Grafik 3DStruktur Data Obyek Grafik 3DTransformasi 3DShading dan Optical ViewZ-order dan Z-bufferMorphingWorkshop 1Perangkat Yang DibutuhkanOpenGLInstalasi OpenGL for WindowsStruktur Dasar Program OpenGLStatement Manipulasi GrafisStatement Manipulasi GrafisSistem KoordinatWorkshop 2PolylineFilled RegionRaster ImageMenggambar TitikContoh 1: Menggambar TitikContoh 2: Menggambar GalaksiMenggambar GarisMembuat GridMembuat PolylineContoh: Membuat PolylineMembuat PolygonContoh: Membuat PolygonPewarnaanTugas 1Tugas 2Workshop 3Struktur Data Titik 2DStruktur Data WarnaFungsi Mengubah WarnaFungsi Membuat TitikFungsi Membuat GarisContoh: Grid BerwarnaFungsi Membuat PolylineFungsi Membuat PolygonFungsi Membuat fillPolygonFungsi Membuat gradatePolygonContoh: Membuat Kotak 1Contoh: Membuat Kotak 2Contoh: Membuat BintangContoh: Membuat Kotak 3Grafik Koordinat PolarKonsep Koordinat PolarBeberapa Fungsi PolarContoh: Membuat LingkaranAnimasiPembuatan AnimasiTugas 1Tugas 2Tugas 3Workshop 4Struktur Data Titik Dan VektorKonversi Titik vs VektorPoint2VectorVector2PointTranformasiMembuat Matrik IdentitasTranslasiMembuat Matrik TranslasiScalingMembuat Matrik ScalingRotasiMembuat Matrik RotasiPerkalian MatrikPerkalian Matrik vs MatrikPerkalian Matrik vs VektorKomposisi TransformasiTugas 1: Orbit Bumi dan Bulan

grafika1

Documents

Transcript of grafika1