MODUL PRAKTIKUM - freeya1993.files.wordpress.com · Web viewPada pemrograman Delphi dapat...

BAHAN AJAR

GRAFIKA KOMPUTER

Oleh :

AGUS LIMBANG WARDANI, S.KOM

PROGRAM STUDI TEKNIK INFORMATIKA

FAKULTAS TEKNIK

UNIVERSITAS PGRI YOGYAKARTA

2012

HALAMAN PENGESAHAN

1. a. Judul Bahan Ajar : Grafika Komputer

b. Bidang Ilmu : Teknik Informatika

2. Penyusun

a. Nama Lengkap dan Gelar : Agus Limbang Wardani, S.kom

b. NIS/NIDN : 19830805 200607 1 005/0505088301

c. Jabatan Fungsional : Asisten Ahli

d. Fakultas/Program Studi : Teknik/Teknik Informatika

Yogyakarta, 10 Desember 2012

ii

MengetahuiProdi Fakultas Teknik

Setia Wardani, S.Kom, M.EngNIS. 19840928 201201 2 008

Penyusun,

Agus Limbang Wardani, S.komNIS. 19830805 200607 1 005

Menyetujui

Kepala P3AI - PSB

Dr. Salamah, M.PdNIP. 19612812 198702 2 001

KATA PENGANTAR

Puji syukur kepada Tuhan Yang Maha Esa yang telah memberikan izin

dan ridho-Nya sehingga bahan ajar ini dapat terselesaikan. Selain itu penulis

mengucapkan banyak terima kasih kepada rekan-rekan dosen dan mahasiswa.

Bahan ajar ini mengulas bagaimana grafik baik 2 dimensi dan 3 dimensi

dibentuk, bagaimana grafik tersebut dimanipulasi, ditransformasi dan

diproyeksikan, kemudian mengulas bagaimana membuat program komputer

untuk membentuk grafik tersebut.

Dalam penyusunan bahan ajar ini masih jauh dari kesempurnaan

disebabkan keterbatasan dari penulis, karenanyalah maka penulis mengharapkan

adanya saran dan kritik yang membangun dari berbagai pihak untuk dapat

menyempurnakan bahan ajar ini.

Penulis,

Agus Limbang Wardani, S.Kom

iii

DAFTAR ISI

HALAMAN PENGESAHAN.................................................................................iiKATA PENGANTAR............................................................................................iiiDAFTAR ISI...........................................................................................................ivBAB I Pengenalan Grafika Komputer....................................................................1BAB II Membentuk Gambar Dengan Titik (PIXEL)..............................................5BAB III Membuat Geometri Dasar..........................................................................7BAB IV Membuat Geometri Dasar (2)..................................................................11BAB V Mengkostumisasi Geometri......................................................................17BAB VI Transformasi 2D......................................................................................22BAB VII Windows Dan Viewport.........................................................................28BAB VIII Representasi Objek 2D.........................................................................32BAB X Representasi Objek 3D.............................................................................38BAB XI Transformasi 3D......................................................................................42BAB XII OPENGL................................................................................................47DAFTAR PUSTAKA............................................................................................53

iv

BAB I

PENGENALAN GRAFIKA KOMPUTER

A. Pengantar

Materi ini membahas mengenai ruang lingkup grafika komputer

baik perangkat-perangkat yang digunakan, istilah-istilah yang sering

dipakai serta membahas manfaat grafika komputer di dunia nyata

B. Indikator

1. Mahasiswa dapat memahami konsep grafika komputer

2. Mahasiswa dapat mengetahui istilah-istilah dalam grafika

C. Dasar Teori

1. Pengertian Grafika Komputer

Grafika komputer merupakan studi tentang bagaimana membuat

gambar/grafik dan bagaimana memanipulasinya dengan menggunakan

komputer.

Perbedaan antara Picture/gambar, graphics/grafik dan Image/citra :

Picture/gambar : Paling luas/umum. Mencakup grafik dan citra.

Graphics/grafik : Gambar yang dibuat dengan dengan cara dan aturan

tertentu tanpa alat perekam gambar.

Image/citra : Gambar yang diambil dengan alat pengambil gambar

( kamera, satelit, foto, sidik jari, scan dll)

2. Sistem Grafika Komputer

Sistem komputer baik itu perangkat lunak ataupun keras untuk membuat

gambar/grafik dan memanipulasinya.

Sistem grafika komputer dibedakan menjadi dua yaitu :

Non-interaktif

Grafika non-interaktif dibuat sebagai akhir dari proses dalam bentuk

hardcopy. Contoh : Printer, Plotter dll

Interaktif

1

Grafika interaktif dapat dibuat dan dimanipulasi secara interaktif pada

layar peranti peraga. Peranti-peranti peraga interaktif yang paling umum

digunakan : CRT (Tabung sinar katoda). Lain-lain : Plasma, LCD, laser,

dsb.

3. Istilah-istilah Grafika Komputer

Prinsip CRT

Pemendaran phosfor pada layar (permukaan dalam tabung bagian

depan) setelah ditembak berkas elektron. Untuk mengatur ketajaman

berkas, digunakan suatu focusing system, suatu anoda bercelah sempit.

Berkas elektron yang menyebar disaring oleh celah hingga tersisa lintasan

berkas yang tipis. Kadang-kadang ditambah suatu akselerator elektron,

juga berupa anoda bercelah. Berkas ini lalu diarahkan ke deflektor.

Kerja Deflektor

Deflektor elektrostatis : berupa dua pasang lempeng (deflektor),

satu pasang sebagai pengarah vertikal dan yang lainnya pengarah

horisontal. Arah berkas di atur dengan merubah-rubah voltase lempeng.

Deflektor magnetis mengatur medan magnit (atau medan listrik) di ruang

antara lempeng yang dilalui berkas.

Refresh CRT

Karena pemendaran phosfor hanya terjadi sesaat maka untuk bisa

berpendar terus menerus dilakukan pemendaran berulang, istilahnya

mengalami refresh.

Persistensi

Lamanya partikel phospor yang berpendar (mulai saat menerima

elektron hingga pendarannya masih dianggap nyala oleh mata atau tinggal

10% dari maksimum). Aplikasi animasi memerlukan persistensi yang

2

lebih rendah. Aplikasi peragaan statis memerlukan persistensi yang lebih

tinggi.

Refresh Rate

Berapa kali (frekuensi) refresh dilakukan dalam satu detiknya.

Bila rendah maka akan terjadi kedipan (flickering). Semakin tinggi

semakin baik hingga > kecepatan maksimum dimana mata masih dapat

menangkap kedipan 60 Hz (60 frame/sec)

Resolusi

Jumlah posisi maksimum titik pada layar yang dapat diperagakan

tanpa overlap. Resolusi ditentukan oleh jenis phospor dan sistem fokus

dan defleksinya.

Bandwidth Monitor

Satuan yang sering digunakan sebagai spesifikasi teknis monitor,

yang menyatakan kecepatan elektron gun melakukan satu perioda on-off

(on ketika menembak satu pixel dan off ketika berpindah ke pixel yang

lain) per detik.

Aspect Ratio

Perbandingan jumlah titik vertika dengan horisontal untuk

menghasilkan garis yang sama panjangnya pada masing-masing arah.

-

Scan Line

Satu baris penyapuan (scanning) berkas pada layar, biasanya

dinomori 0,1,2,… interlace vs. non-interlace urutan baris yang disapu bisa

interlace (setiap scanline bernomor genap lalu yang bernomor ganjil) atau

non-interlace (secara berurutan semua scanline).

Monitor LCD

3

Suatu kristal cair akan memiliki polaritas tertentu bila

mendapatkan medan listrik. Jika digabungkan dengan dua lapis polaritas

filter cahaya maka komposisi panel-panel tersebut berfungsi sebagai

“pintu” yang dapat membuka-tutup terkendali oleh medan listrik pixel

yang bersangkutan. Resolusinya ditentukan oleh kerapatan elektrodanya.

Pencahayaannya sederhana (mis. Untuk kalkulator) : menggunakan cahaya

ruangang yang dipantulkan oleh lapisan reflektor dibelakang lapisan-

lapisan tsb.

Piranti-piranti Hardcopy

Dot Matrix Printer, Plotter, Laser Printer, Ink-Jet Printer, foto.

D. Tugas

Carilah peranan grafika komputer dalam kehidupan sehari-hari minimal 10

jenis peranan. Kemudian jelaskan masing-masing peranan tersebut.

4

BAB II

MEMBENTUK GAMBAR DENGAN TITIK (PIXEL)

A. Pengantar

Materi ini mengkaji pixel sebagai komponen terkecil suatu grafik digital

dan dan membentuk grafik dengan pixel.

B. Indikator

1. Mahasiswa dapat memahami objek dasar suatu gambar.

2. Mahasiswa dapat membuat berbagai bentuk geometri dasar menggunakan

titik.

C. Dasar Teori

Semua gambar yang dihasilkan oleh komputer pada dasarnya adalah

rangkaian dari titik-titik (pixel) yang diatur warna dan kecerahannya. Properti

yang digunakan dalam delphi untuk membuat suatu gambar adalah Canvas.

Sintaks :Canvas.Pixels[X,Y];

Ket :

X,Y merupakan koordinat piksel.

D. Latihan

1. Membuat titik-titik di sembarang tempat.

5

Image

Panel

kode program dengan Delphi :

Perintah pada Event-OnMouseDown pada Image :

var w:TColor;

begin

Image1.Canvas.Pixels[x,y] := random(w);

end;

2. Membuat garis dengan menggunakan kumpulan titik.

Kode Program dengan delphi :

Perintah pada Even-OnClick pada tombol Gambar :

var a,b : integer;begin b:= 0; for a := 0 to 100 do begin paintbox1.Canvas.Pixels[a,b] := clred; b:= b+1; end;end;

E. Tugas Praktikum

Dengan menggunakan perintah titik, buatlah objek 2D sebagai berikut :

Bujur Sangkar

Segitiga sama kaki

Segitiga sama sisi

Bintang

Pentagon

6

BAB III

MEMBUAT GEOMETRI DASAR

A. Pengantar

Materi ini membahas bentuk-bentuk geometri dasar dan bagaimana

membuat program komputer untuk membentuk geometri dasar.

B. Indikator

Mahasiswa dapat membuat berbagai bentuk geometri dasar seperti garis,

kotak, lingkaran dengan menggunakan kontrol pada delphi.

C. Dasar Teori

Pada bab sebelumnya telah dijelaskan bagaimana sebuah titik membentuk

suatu bidang tertentu. Pada pemrograman Delphi dapat dibangun bentuk-

bentuk bidang tertentu secara langsung tanpa merangkaikan titik.

Obyek Canvas tetap digunakan untuk menempatkan gambar yang akan

dibuat. Selain menempatkan gambar, obyek canvas juga memiliki properti

untuk merubah warna, ukuran garis, jenis font dll.

Beberapa perintah dalam membuat bentuk geometri dasar :

GarisCanvas.MoveTo(x,y) : menempatkan posisi awal garis

Canvas.LineTo(x,y) : menempatkan posisi akhir garis

Kotak

Canvas.Rectangle(x1,y1,x2,y2);

Ket :

x1,y1 : titik awal kotak

7

x1,y1

x2,y2

x2,y2 : titik akhir kotak

Lingkaran

Canvas.Ellipse(x1,y1,x2,y2);

D. Latihan

1. Membuat garis koordinat pada canvas.



8

x1,y1

begin with paintbox1 do begin// membuat garis horisontal Canvas.MoveTo(0,round(Height/2)); Canvas.lineto(width,round(Height/2));// membuat garis vertikal Canvas.MoveTo(round(Width/2),0); Canvas.lineto(round(Width/2),Height); end;end;

x2,y2

2. Membuat lingkaran/elipse sebesar canvas.



3. Menggambar kotak dimana panjang dan lebarnya adalah setengah dari

canvas.

9

begin with paintbox1 do begin Canvas.Ellipse(0,0,Width,Height); end;end;



E. Tugas

Dengan menggunakan perintah geometri dasar, buatlah gambar seperti di

bawah ini :

10

begin with paintbox1 do begin Canvas.Rectangle(round(Width/3),round(Height/3),+ round(Width*2/3),round(Height*2/3)); end;end;

(X3, Y3)(X1, Y1)

(X4, Y4)

(X2, Y2)

BAB IV

MEMBUAT GEOMETRI DASAR (2)

A. Pengantar

Materi ini membahas bentuk-bentuk geometri dasar dan bagaimana

membuat program komputer untuk membentuk geometri dasar.

B. Indikator

Mahasiswa dapat membuat berbagai bentuk geometri dasar yaitu Busur,

Tembereng, Juring, Kotak tumpul, polygon, polyline dan polybezier.

C. Dasar Teori

Menggambar Busur

Sintaks :

Arc (X1, Y1, X2, Y2, X3, Y3, X4, Y4)

Semua parameter bertipe integer;

Keterangan:

X1, Y1 menyatakan koordinat kiri atas.

X2, Y2 menyatakan koordinat kanan bawah.

X3, Y3 menyatakan koordinat awal penggambaran.

X4, Y4 menyatakan koordinat akhir penggambaran.

11

(X3, Y3)(X1, Y1)

(X4, Y4)

(X2, Y2)

Menggambar Tembereng

Sintaks :

Chord (X1, Y1, X2, Y2, X3, Y3, X4, Y4)


Keterangan:





Menggambar Juring

Sintaks :

Pie (X1, Y1, X2, Y2, X3, Y3, X4, Y4)


Keterangan:





12

(X3, Y3)(X1, Y1)

(X4, Y4)

(X2, Y2)

(X1, Y1)

(X2, Y2)

Y3

X3

Mengambar kotak dengan sudut tumpul

Sintaks :

RoundRect(X1,Y1,X2,Y2,X3,Y3)


Keterangan :



X3, Y3 Menyatakan tinggi dan lebar sudut

13

Menggambar segi banyak

Sintaks :Polygon(Points);

Points bertipe array of Tpoint

Sebagai contoh:

Canvas.Polygon([Point(100, 20), Point(50, 100), Point(150, 100)]);

Menggambar garis yang menghubungkan beberapa titik

Sintaks :

PolyLine(Points);

Points bertipe array of Tpoint

Sebagai contoh: Canvas.Polyline([Point(100,20),Point(50,100),

Point(150, 100)]);

14

Menggambar Kurva Bezier

Sintaks :

PolyBezier(Points)

Points bertipe array of Tpoints

Kurva besier paling tidak ditentukan oleh 4 titik. Titik pertama dan

titik keempat digunakan sebagai titik awal dan titik akhir kurva yang

pertama. Titik kedua dan titik ketiga dipakai sebagai kontrol untuk

membentuk kurva. Pada penggambaran kurva berikutnya, titik akhir

kurva sebelumnya akan dipakai sebagai titik awal. Kedua titik

berikutnya sebagai kontrol kurva.

Contoh:procedure TForm1.FormClick(Sender: TObject);

begin

Canvas.PolyBezier([Point(10,100),

Point(50,20),

Point(70,120),

Point(100,150),

Point(120,120),

Point(160, 90),

Point(250,140)]);

Canvas.PolyBezier([Point(10,100),

Point(50,80),

Point(100,280),

Point(250,140)]);

end;

15

D. Latihan

Dari uji coba yang dilakukan di atas. Lakukan penggabungan dalam satu form

seperti pada gambar di bawah ini.

16

BAB V

MENGKOSTUMISASI GEOMETRI

A. Pengantar

Materi ini membahas bagaimana melakukan berbagai kostumisasi untuk

geometri dasar dan bagaimana membuat program komputer untuk

kostumisasi geometri.

B. Indikator

Mahasiswa dapat mengkostumisasi berbagai bentuk geometri yaitu

pemberian warna, arsiran, bitmap, dan flooding warna.

C. Dasar Teori

1. Mengatur Warna Kurva

Bagian dalam bentuk-bentuk yang dihasilkan oleh metode-metode penggambaran kurva seperti Rectangle, Ellipse, Pie, Chord dan Polygon.

Sintaks :

Brush.Color := warna;

Sebagai contoh :

Canvas.Brush.Color := clLime;Canvas.Rectangle(10, 10, 100, 100);

Akan menghasilkan kotak dengan warna isi (fill) hijau.

2. Mengarsir Kurva

Sintaks :

Brush.Style := Arsiran

Nilai Arsiran berupa konstata, dengan daftar sebagai berikut :

Nilai Kostanta Model Arsiran

17

BsClear Tanpa Arsiran

BsSolid

BsHorisontal

BsVertical

BsFDiagonal

BsBDiagonal

BsCross

BsDiagCross

Sebagai contoh :

Canvas.Brush.Style := bsVertical;Canvas.Rectangle(10, 10, 100, 100);

Menghasilkan kotak dengan model arsiran vertikal.

3. Mengarsir dengan Bitmap.

Pengarsiran dapat dilakukan dengan menggunakan file bitmap. Gambar yang digunakan harus tidak melebih 8 X 8. Gambar anda dapat anda buat menggunakan Paint misalnya sebagai contoh :

Kemudian gambar disimpan dengan nama Arsir.bmp

Contoh Pengkodean :

procedure TForm1.FormClick(Sender: TObject);begin Canvas.Brush.Bitmap := TBitmap.Create; Canvas.Brush.Bitmap.LoadFromFile('Arsir.bmp'); Canvas.Ellipse(50,50,350,150); Canvas.Brush.Bitmap.freeend;

18

4. Mengarsir dengan floodfill

Suatu kurva tertutup dapat diisi warna tentu dengan metode Floodfil.

Sintaks :

Floodfill (X,Y,Color, FillStyle)

Keterangan:

X,Y menyatakan koordinat yang mewakili bagian dalam kurva.

Color menyatakan warna dasar/batas.FillStyle menyatakan cara mengarsir, parameter dapat diisi:

- fsSurface, efeknya area yang diwakil oleh titik (X,Y) dan Sebelah-belahnya yang berwarna Color akan diganti dengan warna Brush.Color.

- fsBorder, efeknya area yang diwakili oleh titik(X,Y) yanng tidak berwarna Color akan diganti Brush.Color.

19

(X,Y)

(X,Y)

D. Tugas Praktikum

1. Dari uji coba yang dilakukan di atas. Lakukan penggabungan dalam

satu form seperti pada gambar di bawah ini.

20

2. Buatlah Gambar Rumah Seperti di bawah dengan warna dan bentuk

arsiran bebas.

21

BAB VI

Transformasi 2D

A. Pengantar

Materi ini membahas mengenai macam-macam transformasi 2D dan

mempelajari bagamana membuat program komputer untuk transformasi

2D.

B. Indikator

1. Mahasiswa dapat mengetahui macam-macam transformasi 2D.

2. Mahasiswa dapat membuat tranformasi geometri 2D (Translasi, skala,

rotasi, pencerminan) baik pada titik (0,0) dan pada pusat objek.

C. Dasar Teori

Ada beberapa macam tipe transformasi 2D yaitu :

Translasi (pergeseran)

Skala

Rotasi

Mirror (pencerminan)

Translasi / Pergeseran

22

Sebuah titik dapat digeser atau ditranslasikan dengan persamaan sebagai

berikut :

X’ = x1 + Tx

Y’ = y1 + Ty

Ket :

x1,y1 : koordinat titik awal

X’,Y’ : koordinat titik hasil

Tx : faktor perpindahan ke arah X (horisontal)

Ty : faktor perpindahan ke arah Y (vertikal)

Skala

pada titik (0,0)

Sebuah objek dapat diperbesar atau diperkecil dengan persamaan sebagai

berikut :

X’ = Sx * x

Y’ = Sy * y

Ket :

Sx : faktor pembesaran horizontal

Sy : faktor pembesaran vertical

Bila faktor pembesaran vertikal dan horizontal sama maka Sx = Sy.

pada pusat objek(poros objek)

Terdapat 4 langkah untuk melakukan skala pada pusat objek:

1. Cari Titik Pusat Objek

a. Xp = X 1+ X 2+ X 3+…+Xn

n

b. Yp = y1+ y 2+ y3+…+ yn

n

Ket :

Xp,Yp : titik pusat objek

X1,Y2,Xn : Koordinat x

23

Y1,Y2,Yn : Koordinat y

n : Jumlah titik

2. Geser titik pusat objek ke titik (0,0)

Dalam hal ini masing-masing titik dikurangi dengan (xp,yp)

X1’ = X1-Xp

Y1’ = Y1-Yp

dst

3. Skalakan dengan persamaan seperti skala pada titik(0,0)

X1” =X1’*Sx

Y1” =Y1’*Sy

dst

4. Kembalikan titik pusat objek ke posisi semula.

X1”’ = X1”+Xp

Y1”’ = Y1”+Yp

Dst

Rotasi

Pada titik (0,0)

Sebuah titik dapat diputar atau dirotasi dengan persamaan sebagai berikut :

X’ = x.cos Θ – y.sin ΘY’ = x.sin Θ + y.cos Θ

Ket :

x,y : koordinat titik asal

X’,Y’ : koordinat hasil perputaran

Θ : sudut putar.

Dinyatakan dalam radian (khusus dalam program komputer),

maka tranformasinya

Θ = (sudut_derajat/180* pi) dengan pi = 22/7

Pada titik pusat objek (poros objek)

Terdapat 4 langkah untuk melakukan rotasi pada pusat objek:

24


a. Xp = X 1+ X 2+ X 3+…+Xn

n

b. Yp = y1+ y 2+ y3+…+ yn

n

Ket :




n : Jumlah titik



X1’ = X1-Xp

Y1’ = Y1-Yp

dst

3. Rotasikan dengan persamaan seperti rotasi pada titik(0,0)

X” = X1’.cos Θ – Y1’.sin ΘY” = X1’.sin Θ + Y1’.cos Θdst


X1”’ = X1”+Xp

Y1”’ = Y1”+Yp

Dst

Mirror(pencerminan pada titik 0,0)

Sebuah titik dapat dicerminkan terhadap sumbu x atau sumbu y.

persamaan untuk percerminan terhadap sumbu x :

X’ = x

Y’ = - y

persamaan untuk percerminan terhadap sumbu y :

X’ = - x

25

Y’ = y

Ket :

x,y : koordinat titik asal

X’,Y’ : koordinat hasil pencerminan

Flip (pencerminan pada sumbu objek)

Terdapat 4 langkah untuk melakukan flip pada sumbu objek:


a. Xp = X 1+ X 2+ X 3+…+Xn

n

b. Yp = y1+ y 2+ y3+…+ yn

n

Ket :




n : Jumlah titik



X1’ = X1-Xp

Y1’ = Y1-Yp

dst

3. Cerminkan dengan persamaan seperti cermin pada titik(0,0)

persamaan untuk percerminan terhadap sumbu x : (flip vertikal)

X1” = X1’

Y1” = - Y1’

dst

persamaan untuk percerminan terhadap sumbu y : (flip horizontal)

X1”’ = - X1”

Y1”’ = Y1”

dst


26

X1”’ = X1”+Xp

Y1”’ = Y1”+Yp

Dst

D. Latihan


Perintah pada Even-OnClick pada tombol Geser X :

procedure TForm1.gsrxClick(Sender: TObject);begin PaintBox1.Refresh; x1 := x1+ strtoint(tx.Text); x2 := x2+ strtoint(tx.Text); PaintBox1.canvas.moveto(X1,Y1); paintbox1.Canvas.LineTo(x2,Y2);end;

27

E. Tugas

Buatlah program untuk trasnformasi seperti pada gambar berikut ini :

BAB VII

WINDOWS DAN VIEWPORT

A. Pengantar

Materi ini membahas mengenai koordinat layar dan menjelaskan

perbedaan dengan koordinat kartesius serta menjelaskan fungsi transformasi

dan mengkaji bagaimana fungsi tersebut dibentuk.

B. Indikator

1. Mahasiswa dapat membedakan koordinat layar dan koordinat alam

2. Mahasiswa dapat mentransformasi objek dari koordinat alam ke

koordinat layar (viewport).

C. Dasar Teori

Sistem koordinat windows :

28

X

Y

0,0

X

Y

0,0

Sistem Koordinat Viewport/layar/NDC (normalized Device Coordinate)

Transformasi Window ke Viewport

Data window : Xwmin, Xwmax

Ywmin, Ywmax

Data Viewport : Xvmin, Xvmax

Yvmin, Yvmax

P(xw, yw) P’ (xv, yv)

P’(xv, yv) P (xw, yw)

Persamaan Transformasi Window ke Viewport

29

XV −XVMINXVMAX−XVMIN

= XW −XWMINXWMAX−XWMIN

YV −YVMINYVMAX−YVMIN

= YW−YWMINYWMAX−YWMIN

D. Latihan


Perintah pada Even-OnClick pada Asli:

var x1,y1,x2,y2,x3,y3: integer;begin x1 := 10; y1:=100; x2 := 50; y2:=50; x3 := 90; y3:=100; with paintbox1.Canvas do begin MoveTo(x1,y1);lineto(x2,y2); moveto(x2,y2);lineto(x3,y3); end;end;

Perintah pada Even-OnClick pada Transformasi:

30

var xwmin,ywmin,xwmax,ywmax,xvmin,yvmin,xvmax,yvmax : integer; x1,y1,x2,y2,x3,y3,x4,y4: integer; x1v,y1v,x2v,y2v,x3v,y3v,x4v,y4v: integer;begin x1 := 10; y1:=100; x2 := 50; y2:=50; x3 := 90; y3:=100;

xvmin :=0;yvmin:=120; xvmax :=120;yvmax:=0; xwmin :=0;ywmin:=0; xwmax :=120;ywmax:=120;

//transformasi x1v:=round(xvmin+(x1-xwmin)*(xvmax-xvmin)/(xwmax-xwmin)); y1v:=round(yvmin+(y1-ywmin)*(yvmax-yvmin)/(ywmax-ywmin)); x2v:=round(xvmin+(x2-xwmin)*(xvmax-xvmin)/(xwmax-xwmin)); y2v:=round(yvmin+(y2-ywmin)*(yvmax-yvmin)/(ywmax-ywmin)); x3v:=round(xvmin+(x3-xwmin)*(xvmax-xvmin)/(xwmax-xwmin)); y3v:=round(yvmin+(y3-ywmin)*(yvmax-yvmin)/(ywmax-ywmin));

with paintbox2.Canvas do begin MoveTo(x1v,y1v);lineto(x2v,y2v); moveto(x2v,y2v);lineto(x3v,y3v); end;end;

E. Tugas

Kembangkan tugas dari modul VI dengan menggunakan transformasi

windows ke viewport.

31

T1

T2T3T6

T7

T4T5

BAB VIII

REPRESENTASI OBJEK 2D

A. Pengantar

Materi ini membahas bagaimana koordinat sebuah objek 2D dapat ditulis

ke dalam file teks. Sehingga program menjadi lebih dinamis.

B. Indikator

1. Mahasiswa dapat merepresentasikan koordinat dalam bentuk file teks.

2. Mahasiswa dapat mentransformasi file teks menjadi objek 2D.

C. Dasar Teori

Objek 2D merupakan objek yang dibentuk dari beberapa koordinat (X,Y)

yang dihubungkan. Koordinat-koordinat untuk merepresentasikan objek 2D

akan lebih dinamis dan muudah dipelajari apabila ditulis dalam sebuah file

teks. File teks ini selain berisi tentang informasi koordinat objek 2D juga

menyimpan informasi jumlah titik, jumlah garis dan garis yang

menghubungkan antar titik.

gambar di atas terdiri atas 7 buah titik dimana tiap-tiap titik dihubungkan

dengan garis dengan jumlah total garis adalah 7 buah garis. Dimana garis 1

menghubungkan T1 dan T2 dst.

32

4 jumlah titik4 jumlah garis60 90 koordinat titik 170 10060 11050 1001 2 garis yang menghubungkan titik 1 ke titik 22 33 44 1

Contoh representasi teks adalah sebagai berikut :

D. Latihan


Deklarasi yang dibutuhkan :

var nfile:string; f : textfile; titik,garis:array[1..20,1..2]of integer; ntitik,ngaris:integer; i,t1,t2:integer; XW1,YW1,XV1,YV1 : REAL; XW2,YW2,XV2,YV2 : REAL;

33

Pembacaan teks:

procedure TFORM1.pilih;begin nfile:=FileListBox1.FileName; AssignFile(F, nfile); Reset(F); readln(f,ntitik); readln(f,ngaris); for i:=1 to ntitik do begin read(f,titik[i,1]); readln(f,titik[i,2]); end; for i:=1 to ngaris do begin read(f,garis[i,1]); readln(f,garis[i,2]); end;end;

Representasi teks :

paintbox2.Refresh;for i:=1 to ngaris dobegin t1:=garis[i,1]; t2:=garis[i,2]; xw1 := titik[t1,1]; yw1 := titik[t1,2]; xw2 := titik[t2,1]; yw2 := titik[t2,2]; PaintBox2.Canvas.MoveTo(XW1,YW1); paintbox2.canvas.lineto(xw2,YW2);end;

E. Tugas

Transformasikan representasi teks di atas dari koordinat alam ke

koordinat layar. Lengkapi juga dengan transformasi 2D (geser, putar,

skala,cermin)

34

BAB IX

PROYEKSI OBJEK 3D KE 2D

A. Pengantar

Materi ini mengkaji mengenai macam-macam proyeksi, mendiskusikan

contoh-contoh proyeksi di kehidupan nyata dan menentukan koordinat

proyeksi pararel grafik 3D.

B. Tujuan

1. Mahasiswa dapat mengetahui macam-macam proyeksi.

2. Mahasiswa dapat memproyeksikan objek 3D ke 2D.

C. Dasar Teori

Layar komputer berbentuk 2 dimensi dimana representasi objek yang

disajikan dalam bentuk koordinat (X,Y). Padahal sebagian besar kasus yang

dapat dipelajari berupa objek alam yang notabene adalah objek 3 dimensi

(X,Y,Z). sehingga terdapat permasalahan bagaimana memproyeksikan objek

3D ke media penampil yang berbentuk 2D.

Terdapat dua jenis proyeksi yaitu :

1. Proyeksi pararel : proyeksi yang menghilangkan salah satu sudut pandang.

biasanya terdapat pada gambar teknik seperti sketsa rumah yang tampak

atas. Istilah lain: proyeksi ortografis. Terdapat sejumlah bidang pandang

proyeksi ortogonal:

– pandang muka (front elevation) menghilangkan koordinat Z

– pandang samping (side elevation) menghilangkan koordinat X

– pandang atas (plan view) menghilangkan koordinat Y

2. Proyeksi perspektif : proyeksi yang menghasilkan proyeksi yang sama

dengan yang tampak oleh mata kita. Disini suatu garis dapat terproyeksi

dalam berbagai panjang yang berbeda tergantung jarak terhadap bidang

proyeksi.

35

Rumus :

Xp=X ( Zprp−ZvpZ−Zprp )=X ( dp

Z−Zprp )Yp=Y ( Zprp−Zvp

Z−Zprp )=Y ( dpZ−Zprp )

D. Latihan

kode program dengan delphi :

36

var zprp,zvp,x1,y1,z1,x2,y2,z2,x3,y3,z3,d: real; xp1,yp1,xp2,yp2,xp3,yp3: real;begin zvp := ScrollBar1.position; zprp := scrollbar2.Position; d := zprp -zvp; x1 := 1;y1:=1;z1:=1; x2 := 5;y2:=1;z2:=1; x3 := 5;y3:=1;z3:=8; xp1 := x1*(d/z1-zprp); yp1 := y1*(d/z1-zprp); xp2 := x2*(d/z2-zprp); yp2 := y2*(d/z2-zprp); xp3 := x3*(d/z3-zprp); yp3 := y3*(d/z3-zprp); with paintbox1.Canvas do begin MoveTo(round(xp1),round(yp1));lineto(round(xp2),round(yp2)); MoveTo(round(xp2),round(yp2));lineto(round(xp3),round(yp3)); end; Label3.Caption := floattostr(xp1)+','+floattostr(yp1); Label4.Caption := floattostr(xp2)+','+floattostr(yp2); Label5.Caption := floattostr(round(xp3))+','+floattostr(round(yp3));end;

E. Tugas

Program latihan di atas belum sesuai dengan keadaan sebenarnya.

Transformasikan dengan formula windows ke viewport sehingga tampilannya

sesuai dengan apa yang diharapkan.

37

T1 T2

T6

T7

T4

T5

T3

T8

BAB X

REPRESENTASI OBJEK 3D

A. Pengantar

Materi ini membahas bagaimana koordinat sebuah objek 3D dapat ditulis

ke dalam file teks. Sehingga program menjadi lebih dinamis.

B. Indikator

1. Mahasiswa dapat merepresentasikan koordinat dalam bentuk file teks.

2. Mahasiswa dapat mentransformasi file teks menjadi objek 3D.

C. Dasar Teori

Objek 3D merupakan objek yang dibentuk dari beberapa koordinat

(X,Y,Z) yang dihubungkan. Koordinat-koordinat untuk merepresentasikan

objek 3D akan lebih dinamis dan muudah dipelajari apabila ditulis dalam

sebuah file teks. File teks ini selain berisi tentang informasi koordinat objek

3D juga menyimpan informasi jumlah titik, jumlah garis dan garis yang

menghubungkan antar titik.

gambar di atas terdiri atas 8 buah titik dimana tiap-tiap titik dihubungkan

dengan garis dengan jumlah total garis adalah 12 buah garis. Dimana garis 1

menghubungkan T1 dan T2 dst hingga semuanya terhubung.

38

8 jumlah titik12 jumlah garis0 0 0 koordinat titik T150 0 050 40 00 40 00 0 8050 0 8050 40 800 40 801 2 garis yang menghubungkan T1 dan T22 33 44 15 66 77 88 51 52 63 74 8

Contoh representasi teks adalah sebagai berikut :

D. Latihan

39

kode program dengan delphi :

deklarasi yang diperlukan :

var Form1: TForm1; nfile:string; f : textfile; titik,titikpry:array[1..20,1..3] of integer; garis:array[1..20,1..2]of integer; ntitik,ngaris:integer; i,t1,t2:integer; xp,yp,dp,zprp,zvp : real; XW1,YW1,XV1,YV1 : REAL; XW2,YW2,XV2,YV2 : REAL; XWMIN,YWMIN,XWMAX,YWMAX : REAL; XVMIN,YVMIN,XVMAX,YVMAX : REAL;

Pembacaan file teks :

40

procedure TForm1.Button1Click(Sender: TObject);begin ListBox1.Clear; ListBox2.clear; nfile:= FileListBox1.FileName; AssignFile(F, nfile); Reset(F); readln(f,ntitik);ListBox1.Items.Add(inttostr(ntitik)); readln(f,ngaris);ListBox1.Items.Add(inttostr(ngaris)); for i:=1 to ntitik do begin read(f,titik[i,1]); read(f,titik[i,2]); readln(f,titik[i,3]); ListBox1.Items.Add(inttostr(titik[i,1])+','+

inttostr(titik[i,2])+','+inttostr(titik[i,2])); end; for i:=1 to ngaris do begin read(f,garis[i,1]); readln(f,garis[i,2]); ListBox1.Items.Add(inttostr(garis[i,1])+','+inttostr(garis[i,2])); end;end;

Penggambaran representasi Objek :

procedure TForm1.Button2Click(Sender: TObject);begin PaintBox1.refresh; ListBox2.Clear; ListBox3.Clear; zprp := ScrollBar9.Position; zvp := ScrollBar10.Position; dp := zprp - zvp; xwmin := ScrollBar1.Position; ywmin := ScrollBar2.position; xwmax := ScrollBar3.Position; ywmax := ScrollBar4.Position; xvmin := ScrollBar5.Position; xvmax := ScrollBar6.Position; yvmin := ScrollBar7.Position; yvmax := ScrollBar8.Position; for i := 1 to ntitik do begin xp := titik[i,1]*(dp/(titik[i,3]-zprp)); yp := titik[i,2]*(dp/(titik[i,3]-zprp)); titikpry[i,1] := round(xp); titikpry[i,2] := round(yp); ListBox2.Items.Add(inttostr(round(xp))+','+inttostr(round(yp))); end; for i:=1 to ngaris do begin t1:=garis[i,1]; t2:=garis[i,2]; xw1 := titikpry[t1,1];//showmessage(inttostr(titikpry[t1,1])); yw1 := titikpry[t1,2]; xw2 := titikpry[t2,1]; yw2 := titikpry[t2,2];ListBox3.Items.Add(inttostr(titikpry[t1,1])+','+

inttostr(titikpry[t1,2])+' KE '+inttostr(titikpry[t2,1])+','+inttostr(titikpry[t2,2]));

if (ywmax <> ywmin) and (xwmax <> xwmin) then begin xv1:=xvmin+(xw1-xwmin)*(xvmax-xvmin)/(xwmax-xwmin); yv1:=yvmin+(yw1-ywmin)*(yvmax-yvmin)/(ywmax-ywmin); xv2:=xvmin+(xw2-xwmin)*(xvmax-xvmin)/(xwmax-xwmin); yv2:=yvmin+(yw2-ywmin)*(yvmax-yvmin)/(ywmax-ywmin); end; PaintBox1.Canvas.MoveTo(round(XV1),round(YV1)); paintbox1.canvas.lineto(round(XV2),round(YV2)); end;end;

E. Tugas

Buatlah representasi objek bangun selain kubus dan balok. Misalnya

trapesium, prisma dll.

41

BAB XI

TRANSFORMASI 3D

A. Pengantar

Materi ini membahas mengenai macam-macam transformasi 3D dan

mempelajari bagamana membuat program komputer untuk transformasi 3D.

B. Indikator

1. Mahasiswa dapat mengetahui macam-macam transformasi 3D.

2. Mahasiswa dapat membuat tranformasi geometri 3D (Translasi, skala,

rotasi) baik pada titik (0,0) dan pada pusat objek.

C. Dasar Teori

Translasi / Pergeseran

Sebuah titik dapat digeser atau ditranslasikan dengan persamaan sebagai

berikut :

X’ = x1 + Tx

Y’ = y1 + Ty

Z’ = z1 + Tz

Ket :

x1,y1,z1 : koordinat titik awal

X’,Y’,Z’: koordinat titik hasil

Tx : faktor perpindahan ke arah X (horisontal)

Ty : faktor perpindahan ke arah Y (vertikal)

Tz : faktor perpindahan ke arah Z (kedalaman)

Skala

Skala pada titik (0,0,0)

Sebuah objek dapat diperbesar atau diperkecil dengan persamaan sebagai

berikut :

X’ = Sx * x

42

Y’ = Sy * y

Z’ = Sz * z

Ket :

Sx : faktor pembesaran horizontal

Sy : faktor pembesaran vertical

Sz : faktor pembesaran kedalam


Terdapat 4 langkah untuk melakukan skala pada pusat objek:


a. Xp = X 1+ X 2+ X 3+…+Xn

n

b. Yp = y1+ y 2+ y3+…+ yn

n

c. Zp = z1+z2+z 3+…+zn

n

Ket :

Xp,Yp,Zp : titik pusat objek



Z1,Z2,Zn : Koordinat z

n : Jumlah titik

2. Geser titik pusat objek ke titik (0,0,0)

Dalam hal ini masing-masing titik dikurangi dengan (xp,yp,zp)

X1’ = X1-Xp

Y1’ = Y1-Yp

Z1’ = Z1- Zp

dst

3. Skalakan dengan persamaan seperti skala pada titik(0,0,0)

X1” =X1’*Sx

Y1” =Y1’*Sy

Z1” =Z1’*Sz

43

dst


X1”’ = X1”+Xp

Y1”’ = Y1”+Yp

Z1”’ = Z1”+Zp

Dst

Rotasi

Pada titik (0,0,0)

Mengelilingi Sumbu Z :

Rotasi 2D sebenarnya adalah rotasi 3D terhadap sumbu Z. Sebuah titik

dapat rotasikan dengan persamaan sebagai berikut :

X’ = x.cos Θ – y.sin ΘY’ = x.sin Θ + y.cos ΘZ’ = Z

Mengelilingi Sumbu X :

X’ = XY’ = y.cos Θ - z.sin ΘZ’ = y.sin Θ + z.cos Θ

Mengelilingi Sumbu Y :

X’ = X.cos Θ + z.sin ΘY’ = YZ’ = -x.sin Θ + z.cos Θ

Ket :

x,y,z : koordinat titik asal

X’,Y’,Z’: koordinat hasil perputaran

Θ : sudut putar.

Dinyatakan dalam radian, maka tranformasinya

Θ = (sudut_derajat/180* Θ) dengan Θ = 22/7

44


Terdapat 4 langkah untuk melakukan rotasi pada pusat objek:


a. Xp = X 1+ X 2+ X 3+…+Xn

n

b. Yp = y1+ y 2+ y3+…+ yn

n

c. Zp = z1+z2+z 3+…+zn

n

Ket :

Xp,Yp,Zp : titik pusat objek



Z1,Z2,Zn : Koordinat z

n : Jumlah titik

2. Geser titik pusat objek ke titik (0,0,0)

Dalam hal ini masing-masing titik dikurangi dengan (xp,yp,zp)

X1’ = X1-Xp

Y1’ = Y1-Yp

Z1’ = Z1- Zp

dst

3. Rotasikan dengan persamaan seperti rotasi pada titik(0,0,0)

Mengelilingi Sumbu Z :

X1” = x1’.cos Θ – y1’.sin Θ Y1” = x1’.sin Θ + y1’.cos Θ Z1” = Z1’

Mengelilingi Sumbu X :

X1” = X1’ Y1” = y1’.cos Θ – z1’.sin Θ

45

Z1” = y1’.sin Θ + z1’.cos Θ

Mengelilingi Sumbu Y :

X1” = X1’.cos Θ + z1’.sin Θ Y1” = Y1’ Z1” = -x1’.sin Θ + z1’.cos Θ dst


X1”’ = X1”+Xp

Y1”’ = Y1”+Yp

Z1”’ = Z1”+Zp

Dst

D. Latihan dan Tugas

Untuk latihan dapat dikembangkan dari transformasi 2D dan sebagai tugas

lakukan transformasi 3D mulai dari translasi, skala dan perputaran untuk

objek yang merupakan representasi objek 3D (pengembangan dari modul

sebelumnya)

46

BAB XII

OPENGL

A. Pengantar

Materi ini membahas mengenai konsep lain dalam pembuatan grafika

komputer yaitu dengan menggunakan OpeGL.

B. Indikator

1. Mahasiswa dapat mengetahui openGL.

2. Mahasiswa dapat membuat objek primitif OpenGL.

C. Dasar Teori

47

ambient.red := 0.2;ambient.green := 0.5;ambient.blue := 0.8;ambient.alpha := 1.0;diffuse.red := 0.8;diffuse.green := 0.5;diffuse.blue := 0.2;diffuse.alpha := 1.0;

OpenGL Function Calls

Primitives

void glBegin (GLenum mode) void glEdgeFlag (GLboolean flag) void glEdgeFlagv (const GLboolean *flag) void glEnd (void) extern void glPolygonOffset (GLfloat factor, GLfloat units) void glRect (TYPE x1, TYPE y1, TYPE x2, TYPE y2) void glRectv (const TYPE *v1, const TYPE *v2) void glVertex2 (TYPE x, TYPE y) void glVertex3 (TYPE x, TYPE y, TYPE z) void glVertex4 (TYPE x, TYPE y, TYPE z, TYPE w)

Coordinate Transformation

void glDepthRange (GLclampd near, GLclampd far)

48

void glFrustum (GLdouble left, GLdouble right, GLdouble bottom, GLdouble top, GLdouble near, GLdouble far) void glLoadIdentity (void) void glLoadMatrix (const TYPE *m) void glMatrixMode (GLenum mode) void glMultMatrix (const TYPE *m) void glOrtho (GLdouble left, GLdouble right, GLdouble bottom, GLdouble top, GLdouble near, GLdouble far) void glPopMatrix (void) void glPushMatrix (void) void glRotate (TYPE angle, TYPE x, TYPE y, TYPE z) void glScale (TYPE x, TYPE y, TYPE z) void glTranslate (TYPE x, TYPE y, TYPE z) void glViewport (GLint x, GLint y, GLsizei width, GLsizei height)

Coloring and Lighting

void glColor3 (TYPE red, TYPE green, TYPE blue) void glColor4 (TYPE red, TYPE green, TYPE blue, TYPE alpha) void glColorMaterial (GLenum face, GLenum mode) void glFrontFace (GLenum dir) void glGetLight (GLenum light, GLenum pname, TYPE *params) void glGetMaterial (GLenum face, GLenum pname, TYPE *params) void glIndex (TYPE index) void glLight (GLenum light, GLenum pname, TYPE param) void glLightModel (GLenum pname, TYPE param) void glMaterial (GLenum face, GLenum pname, TYPE param) void glNormal3 (TYPE nx, TYPE ny, TYPE nz) void glShadeModel (GLenum mode)

D. Latihan

langkah 1

ganti ke code view (F12). tambahkan openGL pada uses clause Quote:uses Windows, Messages,...., ... ,openGL ; langkah 2

tambahkan variabel dan prosedur berikut ini pada deklarasi form bagian private (boleh juga di protected)

49

Quote:{ Private declarations } FDC : HDC; FRC : HGLRC; procedure IdleLoop(Sender : TObject; Var Done : boolean);

tekan Shift+Control+C untuk membuat secara otomatis prosedur IdleLoop di bagian implementation (akan muncul kode berikut setelah implementation) Quote:

procedure TForm1.IdleLoop(Sender:TObject; Var Done: boolean); begin

end;

biarkan prosedur ini kosong, akan kita isi nanti.

langkah 3

tambahkan event Handler OnCreate pada form (klik dua kali pada form atau klik dua kali pada window event OnCreate) Quote:

procedure TForm1.FormCreate(Sender : TObject); var pfd : TPIXELFORMATDESCRIPTOR; pixelformat,pf : integer; begin { TAHAP I : Buat Window OpenGL } FDC := GetDC( Panel1.Handle ); //window openGL akan ditampilkan di panel FillChar(pfd, sizeof(pfd), 0);

pfd.nSize := sizeof(pfd); pfd.nVersion := 1; pfd.dwFlags := PFD_DRAW_TO_WINDOW or PFD_SUPPORT_OPENGL or PFD_DOUBLEBUFFER; pfd.iPixelType := PFD_TYPE_RGBA; pfd.cColorBits := 16;

{$WARNINGS OFF} //biar nggak muncul warning karena penggunaan operator '@' pf := ChoosePixelFormat(FDC, @pfd); SetPixelFormat(FDC, pf, @pfd); {$WARNINGS ON} //kembalikan ke normal

50

FRC := wglCreateContext(FDC); wglMakeCurrent(FDC, FRC);

{ TAHAP II : Inisialisasi variabel openGL } glViewport( 0, 0, Panel1.Width, Panel1.Height ); // glClearColor( 0, 0, 0, 1.0 ); // r:0 g:0 b:0 = hitam

glMatrixMode( GL_PROJECTION ); glLoadIdentity; gluPerspective( 45, Panel1.Width/Panel1.Height, 1, 500);//FoV, Aspect Ratio, Near Clip, Far Clip glMatrixMode( GL_MODELVIEW ); glLoadIdentity; { Set Kamera } gluLookAt( 0, 0, -4, 0, 0, 0, 0, 1, 0 );// posisi.x, posisi.y, posisi.z, lookat.x, lookat.y, lookat.z, up.x, up.y, up.z

Application.OnIdle := IdleLoop; end;

langkah 4

sekarang waktunya mengisi body prosedur IdleLoop Quote:

procedure TForm1.IdleLoop(Sender : TObject; Var Done : Boolean); begin glClear( GL_COLOR_BUFFER_BIT or GL_DEPTH_BUFFER_BIT );

glPushMatrix; glColor( 0, 0.5, 0, 1); //warna ijo glBegin(GL_QUADS); //gambar kotak (warna ijo) glVertex3f( -0.5, -0.5, -0,5 ); glVertex3f( 0.5, -0.5, -0,5 ); glVertex3f( 0.5, 0.5, -0,5 ); glVertex3f( -0.5, 0.5, -0,5 ); glEnd; glPopMatrix;

glFlush;

51

SwapBuffers(DC); //update hasil penggambaran ke layar end;

E. Tugas

Buat objek-objek primitif dengan openGL

52

DAFTAR PUSTAKA

David Rogers (1998). Procedural Elements for Computer Graphics. McGraw-Hill.

Donald Hearn and M. Pauline Baker (1994). Computer Graphics. Prentice-Hall.

Francis S. Hill (2001). Computer Graphics. Prentice Hall.

James D. Foley, Andries Van Dam, Steven K. Feiner and John F. Hughes (1995). Computer Graphics: Principles and Practice. Addison-Wesley

Jeffrey J. McConnell (2006). Computer Graphics: Theory Into Practice. Jones & Bartlett Publishers.

John Lewell (1985). Computer Graphics: A Survey of Current Techniques and Applications. Van Nostrand Reinhold.

M. Slater, A. Steed, Y. Chrysantho (2002). Computer graphics and virtual environments: from realism to real-time. Addison-Wesley

R. D. Parslow, R. W. Prowse, Richard Elliot Green (1969). Computer Graphics: Techniques and Applications.

Peter Shirley and others. (2005). Fundamentals of computer graphics. A.K. Peters, Ltd.

53

MODUL PRAKTIKUM - freeya1993.files.wordpress.com · Web viewPada pemrograman Delphi dapat...

Documents

Transcript of MODUL PRAKTIKUM - freeya1993.files.wordpress.com · Web viewPada pemrograman Delphi dapat...