modul praktikum grafis 2006

Modul Praktikum

PEMROGRAMANPEMROGRAMAN GRAFISGRAFIS

Menggunakan Borland Delphi

By:

Arwan, Achmad

Santoso, Agus

i

Sekolah Tinggi Informatika dan Komputer Indonesia

2006

Winner vs. Looser

Winner is always a part of solutions

Looser is always a part of problems

Winner sees answer in every problem

Looser sees problem in every answer

Winner always has a program

Looser always has an excuse

Winner always says, “It’s difficult, but it’s possible.”

Looser always says, “It’s possible, but it’s difficult.”

PETUNJUK

PRAKTIKUM PEMROGRAMAN GRAFIK

1. Setiap praktikan harus mempunyai petunjuk praktikum.

2. Petunjuk praktikum dapat diakses langsung melalui internet atau ke petugas laboratorium.

3. Sebelum praktikum, praktikan HARUS membuat program bagian LATIHAN dari praktikum yang akan dilaksanakan dirumah dengan tulisan tangan pada sebuah buku khusus program yang diberi sampul warna BIRU.

4. Program latihan tersebut akan diperiksa oleh ASSISTEN pada awal praktikum dan DINILAI.

5. Praktikan mengetikkan program yang telah ditulis tangan di komputer dalam laboratorium dibawah bimbingan ASSISTEN. Aktivitas ini juga DINILAI.

6. Setelah selesai praktikum, praktikan WAJIB membuat program bagian TUGAS dengan tulisan tangan yang akan diperiksa oleh ASSISTEN bersama dengan program bagian LATIHAN dari praktikum berikutnya. Bagian ini juga DINILAI.

7. Jika sekiranya waktu praktikum masih tersisa, maka praktikan dapat mencoba mengetikkan program tugas.

8. Selamat praktikum.

DAFTAR ISI

Hal

Praktikum 1 ………………………………………………………………….. 5

Praktikum 2 ………………………………………………………………….. 9

Praktikum 3 ………………………………………………………………….. 14

Praktikum 4 ………………………………………………………………….. 18

Praktikum 5 ………………………………………………………………….. 21

Praktikum 6 ………………………………………………………………….. 24

Praktikum 7 ………………………………………………………………….. 29

Praktikum 8 ………………………………………………………………….. 32

5

ModulModul

1Sistem Sumbu dan Garis Lurus

Tujuan Instruksional Khusus: Praktikan mampu mengubah koordinat pada komputer menjadi koordinat kartesius right-hand

dengan koordinat awal di pusat kanvas atau titik lainnya, serta mengimplementasikan algoritma garis dengan metoda DDA dan Bresenham.

Representasi Grafis pada Delphi

Media pembuatan (penggambaran) grafis pada Borland Delphi adalah canvas. Di setiap komponen yang mendukung penggambaran oleh user selalu menyediakan property Canvas yang bertipe TCanvas.

Canvas merupakan sebuah objek yang sifatnya sebagai dasar penggambaran grafis dalam Windows API, yang memiliki alokasi memori tersendiri, dan objek ini bisa ditampilkan pada Image, Bitmap, ataupun PaintBox (tetapi tidak harus ditampilkan).

Untuk representasi pada Delphi, praktikan tidak perlu membuat program baru secara lengkap mulai dari awal. Praktikan akan diberi sebuah template yang sudah berisi sekumpulan event-handlers yang bisa di-download di masing-masing komputer.

Koordinat

Titik awal (0,0) koordinat layar komputer terletak di pojok kiri atas. Koordinat ini dinamakan koordinat layar/Left Handed Coordinate. Dalam proses pembuatan grafik, sistem koordinat kartesius umum harus dise-suaikan atau dikonversikan ke dalam koordinat layar.

Dalam membentuk suatu koordinat diperlukan garis sumbu agar kita dapat mengetahui secara pasti nilai awal x dan y.

Program untuk membuat titik dan garis sumbu dengan pusat ditengah-tengah layar adalah sbb:

procedure GambarTitik(Bitmap: TBitmap;

6

const X, Y: Integer; const Warna: TColor);var XCenter, YCenter: Integer;begin XCenter := X + Bitmap.Width div 2; YCenter := Bitmap.Height div 2 – Y; Bitmap.Canvas.Pixels[XCenter, YCenter] := Warna;end;

procedure GarisSumbu(Bitmap: TBitmap; const Warna: TColor);var I: Integer;begin for I := -(Bitmap.Width div 2) to Bitmap.Width div 2 do GambarTitik(I, 0, Warna); for I := -(Bitmap.Height div 2) to Bitmap.Height div 2 do GambarTitik(0, I, Warna);end;

Garis Lurus

Dalam objek Canvas, pembuatan garis menggunakan perintah

TCanvas.LineTo(X, Y: Integer);

Yang akan menggambar garis dari posisi terakhir ke posisi (X, Y). Untuk memindahkan posisi penggambaran garis tanp menggambar garis, gunakan perintah:

TCanvas.MoveTo(X, Y: Integer);

Garis yang dihasilkan hanya dapat mempunyai satu warna dan mengikuti kaidah koordinat layar. Dengan metode DDA atau Bresenham kita dapat membuat gambar garis dengan warna yang dikehendaki dan mengikuti kaidah koordinat kartesius umum.

Metode Digital Differensial Algorithm

Metode ini merupakan metode dasar untuk menggambar garis dengan menggunakan bilangan real dan sejumlah operator +, -, /.

Algoritma metode ini adalah sbb.

1. Tentukan titik awal (x1,y1) dan (x2,y2) serta warna

2. dx x2 – x1

3. dy y2 –y1

4. Jika abs(dx) > abs(dy) maka Step abs(dx) selain itu Step abs(dy)

5. IncX dx / Step

6. IncY dy / Step

7. x x1

8. y y1

9. for k 1 to Step do x x + incX y y + incY GambarTitik(x,y, color)end for

10. Selesai.

Metode Bresenham

Metode ini hanya menggunakan bilangan integer dan operator +, - dan *2 saja, sehingga proses pembuatan grafik menjadi lebih cepat. Ide dasar metode ini hanya untuk membuat garis dengan gradien antara 0 dan 1 dan disebut daerah Bre-0 saja. Untuk daerah lainnya. Harus ditransfer terlebih dahulu daerah Bre-0, kemudian diproses dan untuk menggambarkan garis titik-titik tersebut harus dikembalikan ke daerah semula.

Konsep metode Bresenham adalah menentukan faktor Bresenham awal d = 2*dy – dx dan x1 < x2. Jika di >= 0 maka inc (x), inc(y) dan dI+1= di + 2*(dy-dx) dan jika tidak maka inc(x) dan dan dI+1= di + 2*dy.

Berikut ini adalah algoritma Bresenham:

1. Tentukan titik awal (x1,y1) dan (x2,y2) serta warna garis.

2. Jika x1 > x2 maka tukar posisi kedua titik tersebut.

3. dxa x2 - x1dya y2 - y1

4. Jika (abs(dya) > abs(dxa) dan dya > 0) maka tukar(x1,y1) dan tukar (x2,y2) selain itu jika (abs(dya) > abs(dxa) dan dya < 0) maka tukar(-x1,y1) dan tukar (-x2,y2) selain itu jika (abs(dya) < abs(dxa) dan dya < 0) maka x1 -x1 dan x2 -x2.

5. Jika x1 > x2 maka tukar posisi kedua titik tersebut.

6. dx x2 - x1dy y2 - y1

7. d 2 * dy – dx

8. x x1y y1

9. GambarTitik(x,y,color).

10. for k x1 to x2 do if d ≤ 0 then x x + 1 y y + 1 d d + 2*(dy-dx) else x x + 1 d d + 2 * dy end if

Jika (abs(dya) > abs(dxa) dan dya > 0) maka xg = y dan yg = x selain itu jika (abs(dya) > abs(dxa) dan dya < 0) maka xg = -y dan yg = x selain itu jika (abs(dya) < abs(dxa) dan dya < 0) maka xg = x dan yg = -y.

11. GambarTitik(xg,yg, color).

12. Selesai

Tugas

1. Buatlah sebuah unit yang berisi pustaka penggambaran garis dengan metode DDA dan Bresenham.

2. Dengan unit itu, buat project yang bisa menampilkan garis-garis masing-masing dengan metode DDA dan Bresenham. Gambarlah objek-objek yang terdiri dari garis-garis tersebut, semisal bujur sangkar, segitiga, atau yang lainnya.

3. Tambahkan prosedur atau fungsi ke dalam unit pada nomor 1 tadi untuk mengubah posisi pusat koordinat ke kanan bawah kanvas dan bersifat right-handed.

Kesimpulan

Buatlah resume dari kegiatan praktikum 1, dan simpulkan apa yang telah didapatkan dari kegiatan praktikum 1 ini.

ModulModul

2Menggambar Lingkaran dan busurnya

Tujuan : Dapat membuat lingkaran (circle) dengan metode polinom, trigonometri dan Bresenham.

Dapat membuat busur lingkaran.

Dapat membuat aplikasi dengan bentuk lingkaran dan garis.

Lingkaran.

Lingkaran mempunyai 8 simetris putar yang besarnya 45 derajad. Untuk menggambar sebuah lingkaran cukup menscan 1/8 bagian saja. Bagian yang lain dapat diturunkan dari bagian yang dipilih. Tiap bagian dapat diberi warna sendiri-sendiri. Dengan cara ini dapat dibuat lingkaran dengan maksimal 8 warna. Untuk membuat lingkaran diperlukan 4 paramater, yaitu titik pusat (k,l), jari-jari (r) dan warna.

Gambar 2.1:ContohLingkaran.

(-y,x) (y,x)

(-x,y) (x,Y)

(-x,-y) (x,-y)

(-y,-x) (x,-y)

Procedure untuk menggambar titik lingkaran dengan pusat (k,l) adalah:

Procedure GambarTitikLingkaran(Bitmap: TBitmap; const k, l, x, y: Integer;

11

const Warna: TColor);Begin GambarTitik(Bitmap, x+k, y+l, Warna); GambarTitik(Bitmap, x+k, -y+l, Warna); GambarTitik(Bitmap, -x+k, y+l, Warna); GambarTitik(Bitmap, -x+k, -y+l, Warna); GambarTitik(Bitmap, y+k, x+l, Warna); GambarTitik(Bitmap, y+k, -x+l, Warna); GambarTitik(Bitmap, -y+k, x+l, Warna); GambarTitik(Bitmap, -y+k, -x+l, Warna); End;Terdapat 3 metode/algoritma untuk membuat lingkaran

yaitu metode Polinom, metode Trigonometri dan metode Bresenham.

Metode PolinomDasar metode ini adalah persamaan lingkaran (x - k)2 + (y – l)2

= r2

Algoritmanya :

1. Input (k,l), r dan warna.

2. X = 0 dan y = 0.707 *r.

3. Periksa apakah x>y, bila ya maka stop.

4. Y = round(sqrt(sqr(r) –sqr(x)).

5. GambarTitikLingkaran.

6. inc (x).

7. Ulangi langkah 3.

Metode TrigonometriDasar metode ini adalah persamaan lingkaran dalam bentuk x = k + r cos() dan y = l + sin().

Algoritmanya :


2. =0 .

3. Periksa > 45, bila Ya maka stop.

4. 1 = /180 *pi.

5. X = round(r * cos(1)) ; y = round(r * sin ( 2)).


7. = + 0.05.

8. Goto 3.

Metode BresenhamMetode ini hanya menggunakan bilangan integer, operator +, - dan * .

Algoritmanya :


2. x=0, y=r.


4. d = 3 – 2* r.

5. Periksa x>0.707 * r, bila ya maka stop.

6. Jika d < 0 maka inc(x) ; y tetap ; d = d + 4x + 6.

7. Jika d >=0 maka inc(x) ; dec(y) ; d = d + 4(x - y) + 10.


9. Goto 5

Busur

Untuk membuat busur lingkaran kita tidak dapat menggunakan sifat simetris dan sembarang metode. Yang paling mudah adalah menggunakan metode trigonometri dengan menetapkan sudut-sudut batasnya.

Algoritmanya adalah sbb.

1. Input (k,l), r, 1, 2, dan warna.

2. Jika 1 > 2 maka tukar (1 > 2 ).

3. = 1 .

4. Periksa > 2, bila ya maka stop.

5. teta = /180 *pi.

6. X = k + round(r * cos(teta)) ; y = l + round(r * sin(teta)).

7. GambarTitik (x,y, color).

8. = + 0.05.

9. Goto d.

Latihan :

Buatlah program membuat lingkaran yang berisikan procedure inisialisasi, sumbu, GambarTitikLingkaran dan ketiga algoritma lingkaran dengan 8 warna.

Gambar 1.3:Contoh Gambar 8 warna.

Buat Program lingkaran menggunakan ketiga metode diatas dengan 4 warna.

Gambar 1.4:Contoh Gambar 4 warna.

Buat program busur lingkaran dengan sudut batas bebas.

Tugas :

1. Merangkum ketiga metode kedalam satu program lingkaran dan busur.

2. Membuat program ogo/obyek (bebas) yang terdiri dari objek garis dan lingkaran.

3. Kembangkan procedure BusurLing tersebut untuk menggambar sektor lingkaran dan objek lain sebagai berikut:

Gambar 1.3:Contoh Main Window.

ModilModil

3Menggambar Ellips dan busurnya

Tujuan : Dapat membuat gambar ellips dengan metode Polinom dan Trigonometri.

Dapat membuat busur ellips.

Dapat membuat aplikasi dari bentuk-bentuk di atas.

Teori :

Ellips mempunyai 4 simetris putar yang besarnya 90 derajad. Untuk menggambar sebuah ellips cukup menscan ¼ bagian saja. Bagian yang lain dapat diturunkan dari bagian yang dipilih. Tiap bagian dapat diberi warna sendiri-sendiri. Dengan cara ini dapat dibuat ellips dengan maksimal 4 warna. Untuk membuat ellips diperlukan 5 paramater, yaitu titik pusat (k,l), sumbu datar (a), sumbu tegak (b) dan warna.

Gambar 3.1:Contoh Pembuatan Ellips.

Procedure untuk menggambar titik ellips dengan pusat (k,l), sumbu datar a dan sumbu tegak b adalah sbb.

Procedure GambarTitikEllips(Bitmap: TBitmap; const k, l, x, y: Integer; const Warna: TColor);Begin GambarTitik(Bitmap, x+k, y+l, Warna); GambarTitik(Bitmap, x+k, -y+l, Warna);

16

GambarTitik(Bitmap, -x+k, y+l, Warna); GambarTitik(Bitmap, -x+k, -y+l, Warna);End; Untuk membuat ellips ada 2 metode yaitu metode Polinom

dan metode Trigonometri.

Metode Polinom. Dasar metode ini adalah persamaan ellips (x– k)2 /a2 + (y – l)2 / b2 = 1

Algoritmanya :

1. Input (k,l), a, b dan warna.

2. x=a.

3. Periksa x<0, bila ya maka stop.

4. Y = round(b*sqrt(1- sqr(x) / sqr(a)).

5. GambarTitikEllips.

6. Dec (x).

7. Goto 3.

Metode Trigonometri.Dasar metode ini adalah persamaan ellips dalam bentuk:

x = k + a * cos () dan y = l + b sin().

Algoritmanya :

1. Input (k,l), a, b dan warna.

2. = 0.


4. 1 = /180 *pi.

5. x = round (a * cos(1)) ; y = round (b * sin(1)).

6. GambarTitikEllips.

7. = + 0.05.

8. Goto 3.

BusurUntuk membuat busur ellips kita tidak dapat menggunakan sifat simetris dan sembarang metode. Yang paling mudah adalah menggunakan metode trigonometri dengan menetapkan sudut-sudut batasnya.

Algoritmanya adalah sbb.

1. Input (k,l), a, b, 1, 2, dan warna.

2. Jika 1 > 2 maka tukar (1 > 2 ).

3. = 1 .


5. teta = /180 *pi.

6. X = k + round(a * cos(teta)) ; y = l + round(b * sin (teta)).

7. GambarTitik (x,y, color).

8. = + 0.05.

9. Goto 4.

Latihan :

1. Buatlah program yang berisikan procedure inisialisasi, GambarTitikEllips, sumbu dan kedua algoritma ellips.

2. Buat program untuk menggambar sebuah ellips menggunakan salah satu metode di atas dengan 4 warna sebagai berikut:

Gambar 3.2:Contoh Ellips 4 warana.

3. Buat program untuk menggambar sebuah ellips menggunakan salah satu metode di atas dengan 2 warna sebagai berikut:

Gambar 3.3:Contoh Ellpis 2 warna.

4. Buat program busur ellips dengan sudut batas bebas.

Tugas :

1. Merangkum kedua metode kedalam satu program ellips.2. Membuat logo/obyek yang terdiri dari garis, lingkaran dan ellips.3. Membuat sektor (kue pie) dari ellips sebagai berikut.


ModulModul

4Menggambar Fungsi Lain dan Membentuk Benda

Tujuan : Dapat menggambar beberapa fungsi lain yang tidak ada dalam pustaka bahasa

pemrograman.

Dapat mengaplikasikan algoritma tersebut dengan membuat program.

Fungsi PARABOLA

Bentuk umum fungsi parabola adalah y = ax2 + bx + c dengan syarat a ≠ 0. Untuk menggambar parabola ditentukan daerah sekitar sumbu simetri. Karena perubahan nilai y terlalu besar terhadap perubahan nilai x maka inkrementasi nilai x harus kecil.

Gambar 4.1:Contoh Parabola.

Algoritma menggambar Fungsi PARABOLA:

Procedure Parabola(Bitmap: T Bitmap; a, b, c, k, warna : integer); {k = jarak mendatar dari sumbu simetris }Begin

If a=0 then Exit;xs = -b/(2*a);x = xs;step=0;while (step <= k ) dobegin

20

y = a*sqr(x+step)+b*(x+step)+c; GambarTitik(Bitmap, round(x+step), round(y), warna); GambarTitik(Bitmap, round(x-step), round(y), warna); step = step + 0.01;

end;End;

Fungsi HIPERBOLA:

Bentuk fungsi hiperbola secara umum adalah (x-a) 2 _ (x-b) 2 = 1 h2 k2

Untuk menggambar hiperbola harus ditentukan batas nilai x. Hiperbola mempunyai 2 simetris terhadap sumbu y, sehingga penggambaran yang lengkap harus mengambil nilai x di kedua pihak terhadap titik pusat hiperbola.


Algoritma Fungsi HIPERBOLA:

1. Input (k,l), a, b, xb dan warna.

2. x= k.

3. Periksa x > xb, bila ya maka stop.

4. Y = round(b*sqrt(1+ sqr(x) / sqr(a)).

5. GambarTitikEllips. {berlaku juga untuk hiperbola}

6. Inc (x).

7. Goto 3.

Latihan

Buat program untuk menggambar fungsi PARABOLA dan HIPERBOLA.

Tugas

1. Buat program untuk menggambar fungsi trigonometri berikut:


2. Buat program untuk menggambar benda-benda putar seperti silinder, kerucut, bola sepak, bola rugby, paraboloida dengan menggunakan gambar-gambar yang telah dipelajari.

ModulModul

5Pewarnaan Daerah

Tujuan : Dapat mengaplikasikan algoritma pewarnaan daerah dalam program.

Teori

Proses pewarnaan ini adalah pemberian warna pada pixel-pixel tertentu yang ditentukan berdasarkan syarat batas.

Pemberian warna ini mempunyai dua algoritma yaitu :

1. Algoritma Flood Fill, pewarnaan dengan melihat tetangga terdekat.

2. Algoritma Boundary Fill, pewarnaan dengan menggunakan algoritma batas pengisian.

Flood FillAlgoritmanya :

1. Menetapkan syarat batas.

2. Menentukan titik awal (seed).

3. Dari seed dilakukan pengecekan 8 tetangga terdekat :

4. Kiri dan Bawah sampai >= batas.

5. Kanan dan Atas sampai <= batas.

6. Titik yang menjadi tetangga terdekat dari seed akan bertindak sebagai seed baru.

Boundary FillAlgoritmanya :

1. Menetapkan daerah batasnya.

2. Dimulai dari kiri / kanan atau atas / bawah.

3. Jika dimulai dari kiri :

23

Bergerak ke kanan mengecek pixel tetangga apakah sudah sampai batas kanan, jika belum diisi else stop.

Jika dimulai dari kanan :Bergerak kekiri mengecek pixel tetangga apakah sudah

sampai batas kiri, jika belum diisi else stop

Jika dimulai dari bawah :Bergerak ke atas mengecek pixel tetangga apakah sudah

sampai batas atas, jika belum diisi else stop

Jika dimulai dari atas

Bergerak ke bawah mengecek pixel tetangga apakah sudah sampai batas kanan, jika belum diisi else stop

Contoh Procedure:

(*...Procedure Pewarnaan dengan metode Flood Fill...*)Procedure Flood(Bitmap: TBitmap; xmin,ymin,xmax,ymax,warna:integer);Var i,x,y:integer;Begin x:=xmin; y:=ymin; while (x<xmax) do beginwhile (y<ymax) dobeginGambarTitik(Bitmap, x , y ,4);GambarTitik(Bitmap, x-1, y-1 ,warna);GambarTitik(Bitmap, x , y-1 ,warna);GambarTitik(Bitmap, x+1, y-1 ,warna);GambarTitik(Bitmap, x-1, y ,warna);GambarTitik(Bitmap, x , y ,warna);GambarTitik(Bitmap, x+1, y ,warna);GambarTitik(Bitmap, x-1, y+1 ,warna);GambarTitik(Bitmap, x , y+1 ,warna);GambarTitik(Bitmap, x+1, y+1 ,warna);inc(y,3);end; y:=ymin;inc(x,3);end;end;

Latihan :

1. Membuat program pewarnaan dengan metoda Flood Fill dan Boundary Fill.

2. Merangkum kedua program tersebut ke dalam satu program

3. Mengaplikasikan metode pewarnaan untuk membuat bendera suatu negara.

Tugas :

Mengaplikasikan semua yang telah dipelajari sebelumnya untuk membuat wajah. Terdiri dari objek garis, lingkaran, ellips yang berwarna.

ModulModul

6Translasi & Rotasi pada Transformasi 2 Dimensi

Tujuan:

Mampu membuat program translasi dan rotasi untuk menggerakkan obyek 2 dimensi

Teori:

1. Proses translasi adalah proses penggeseran posisi objek terhadap sumbu x dan y.

2. Rotasi adalah suatu proses pemutaran posisi objek berdasarkan sudut yang diinputkan terhadap titik acuan tertentu.

3. Proses dilakukan dengan menggunakan operasi matrik 3 x 3 (lihat teori dalam perkuliahan).

4. Matrik translasi

Gambar 6.1:Matiks Translasi.

Tv =

1 0 a

0 1 b

0 0 1

5. Matrik rotasi terhadap titik origin

Gambar 6.2:Matriks Rotasi.

Ro,Θ=

CosΘ -sinΘ 0

Sin Θ CosΘ 0

0 0 1

6. Titik obyek dinyatakan dengan matrik

Gambar 6.3:Titik Objek.

P =

X1 … Xn

Y1 … Yn

1 1 1

Algoritma masing-masing proses :

Algoritma translasi (pergeseran) :

1. Inputkan faktor translasi a dan b dan bentuk matriknya.

26

2. Inputkan koordinat titik-titik obyek (segitiga, segiempat, dsb) dan bentuk matriknya. Gambar bangun obyek semula.

3. Perkalikan kedua matrik tersebut.

4. Gambarkan kembali bangun yang dihasilkan dengan cara menghubungkan titik-titik hasil.

5. Selesai.

Algoritma rotasi (perputaran) terhadap titik (0,0):

1. Inputkan sudut rotasi dalam derajad.

2. Ubah derajad ke dalam radian dan bentuk matriknya.

3. Inputkan koordinat titik-titik obyek (segitiga, segiempat, dsb) dan bentuk matriknya. Gambarkan bangun obyek semula.

4. Perkalikan kedua matrik tersebut.

5. Gambarkan kembali bangun yang dihasilkan dengan cara menghubungkan titik-titik hasil.

6. Selesai.

Catatan: Jika yang ditranslasikan/dirotasikan adalah bangun kontinyu (lingkaran, ellips, dsb), maka perkalian matrik dilakukan terhadap setiap titik pada bangun tersebut secara berulang.

Contoh Procedure :

Misalnya Objek berbentuk segitiga

Gambar 6.4:Contoh Objek berbentuk segitiga.

Contoh Berikut adalah deklarasi type untuk tiap titik, bangun, dan operasi bangun serta prosedur untuk inisialisasi.

type TTitik = record x, y, i: Integer; end; TBangun = array of TTitik; TOperasiBangun = array [1..3, 1..3] of Single;

function Titik(const x, y: Integer): TTitik;begin Result.x:=x; Result.y:=y; Result.i:=1;end;

function Bangun(const TitikTitik : array of TTitik): TBangun;var I: Integer;begin SetLength(Result, Length(TitikTitik)); for i:=0 to Length(TitikTitik)-1 do Result[i]:=TitikTitik[i];end;

procedure GambarBangun(Bitmap: TBitmap; const Bangun: TBangun; const Warna: TColor);var i: Integer;begin for i:=0 to Length(Bangun)-2 do GambarGaris(Bitmap, Bangun[i].x, Bangun[i].y, Bangun[i+1].x, Bangun[i+1].y, Warna); i:=Length(Bangun)-1; GambarGaris(Bitmap, Bangun[i].x, Bangun[i].y, Bangun[0].x, Bangun[0].y, Warna);end;

function OperasiBangun(var ABangun: TBangun; Operasi: TOperasiBangun): TBangun;var i: Integer;begin SetLength(Result, Length(ABangun)); for i:=0 to Length(ABangun)-1 do begin Result[i].x:=Round( ABangun[i].x * Operasi[1, 1] + ABangun[i].y * Operasi[1, 2] + ABangun[i].i * Operasi[1, 3]); Result[i].y:=Round( ABangun[i].x * Operasi[2, 1] +

ABangun[i].y * Operasi[2, 2] + ABangun[i].i * Operasi[2, 3]); Result[i].i:=1; end;end;

function OprTranslasi(const a, b: Integer): TOperasiBangun;begin Result[1,1]:=1; Result[1,2]:=0; Result[1,3]:=a; Result[2,1]:=0; Result[2,2]:=1; Result[2,3]:=b; Result[3,1]:=0; Result[3,2]:=0; Result[3,3]:=1;end;

{ ------------ Program pada Form Utama -----------------}procedure TForm1.Button1Click(Sender: TObject);var Segi3, Segi3Trans: TBangun;begin Segi3:=Bangun([Titik(20,20), Titik(100, 20), Titik(80, 80)]); //Inisialisasi titik-titik pada segi 4 GambarBangun(Bitmap, Segi3, clGreen); Segi3Trans:= OperasiBangun(Segi3, OprTranslasi(80, 50)); GambarBangun(Bitmap, Segi3Trans, clBlue);end;

Gambar 6.5:Output.

Latihan :

1. Membuat animasi dari objek yang ditranslasikan berulang-ulang

2. Lakukan translasi untuk obyek segi empat, segi lima, dsb.

3. Membuat procedure Rotasi (Perhatikan type data yang harus digunakan !!!). Caranya mirip dengan translasi.

4. Merotasikan objek dengan sudut 60 pada titik acuan (0,0), Output:

Gambar Output:

Gambar 6.6:Contoh Objek dengan sudut 60.

Tugas :

1. Buatlah suatu program untuk menggerakkan sebuah objek yang mula-mula ditranslasikan dan diikuti dengan rotasi.

2. Rotasikan objek (segitiga, dsb) dengan titik acuan (a,b).

Gambar 6.7:Contoh Objek.

ModulModul

7Mirroring & Scalling pada Transform. 2 Dimensi

Tujuan : Dapat mengimplementasikan mirroring & scaling terhadap suatu objek.

Teori :

1. Pencerminan adalah proses pembuatan bayangan atas suatu objek terhadap garis tertentu (kondisi dasar: terhadap sumbu x dan y).

Gambar 7.1:Pencerminan terhadap sumbu x.

Pencerminan terhadap sumbu X: Mx =

1 0 0

0 -1 0

0 0 1

Gambar 7.2:Pencerminan terhadap sumbu y

Pencerminan terhadap sumbu Y: My =

-1 0 0

0 1 0

0 0 1

2. Scalling adalah proses penskalaan (diperbesar/diperkecil) dengan faktor skala x dan faktor skala y terhadap titik acuan tertentu (kondisi dasar: terhadap titik (0,0)).

Gambar 7.3:Scalling.

S o, sx, sy =

sx 0 0

0 sy 0

0 0 1

Bentuk khusus Scalling adalah Shearing (Sh):

Bentuk object akan mengalami perubahan, baik terhadap sumbu x maupun sumbu y, jika dikenai shearing. Matrik shearing adalah:


31

Sh =

1 a 0 Jika b = 0 Shearing terhadap sumbu x

b 1 0 Jika a = 0 Shearing terhadap sumbu y

0 0 1

Contoh matrik :

function OprCerminX: TOperasiBangun;begin Result[1,1]:=1; Result[1,2]:= 0; Result[1,3]:=0; Result[2,1]:=0; Result[2,2]:=-1; Result[2,3]:=0; Result[3,1]:=0; Result[3,2]:= 0; Result[3,3]:=1;end;

function OprCerminY: TOperasiBangun;begin Result[1,1]:=-1; Result[1,2]:=0; Result[1,3]:=0; Result[2,1]:= 0; Result[2,2]:=1; Result[2,3]:=0; Result[3,1]:= 0; Result[3,2]:=0; Result[3,3]:=1;end;

{ Manfaatkan Procedure OperasiBangun dari praktikum sebelumnya untuk menjalankan proses}

{ ------------ Program Utama -----------------}

procedure TForm1.Button1Click(Sender: TObject);var Segi3, Segi3MirX: TBangun;begin Segi3:=Bangun([Titik(20,20), Titik(100, 20), Titik(80, 80)]); //Inisialisasi titik-titik pada segi 4 GambarBangun(Bitmap, Segi3, clGreen); Segi3MirX:= OperasiBangun(Segi3, OprCernibX); GambarBangun(Bitmap, Segi3MirX, clBlue);end;

Latihan :

1. Buatlah program untuk suatu objek ( kotak atau segitiga ) yang dikenai transformasi Mirroring terhadap sumbu X dan sumbu Y.


2. Buat program pencerminan suatu objek terhadap sumbu x = 10 serta terhadap sumbu y = 5

3. Buat program scalling dan terapkan untuk pembesaran atau pengecilan objek dari ukuran sebenarnya, seperti gambar dibawah ini.


4. Buat prosedure/program shearing terhadap sumbu x dan sumbu y seperti gambar dibawah ini.

Gambar 7.7:Contoh gambar shearing.

Tugas :

1. Buatlah suatu program untuk menggerakkan sebuah objek dengan menggunakan procedure Scalling dan Mirroring secara berurutan.

2. Buat program scaling/shearing dengan titik acuan (a,b).

3. Buat program untuk pencerminan terhadap garis y = ax + b.

ModulModul

8Menggambar Obyek 3 Dimensi & Translasi 3D

Tujuan : Dapat membuat sumbu semu untuk 3 dimensi

Dapat membuat objek 3 dimensi.

Dapat melakukan translasi 3 dimensi.

Gambar 3 Dimensi.

Penampilan realita 3 dimensi dari sebuah objek akan ditekankan pada dasar pembentukan sumbu utama (x,y,z)

- Sumbu x dan y digambar dengan titik potong tengah-tengah monitor.

- Sumbu z digambar dengan persamaan y = x dengan arah kiri bawah.

Konsep dasar dari transformasi 3D sama dengan konsep pada transformasi 2D dengan beberapa tambahan.

Program membuat sumbu semu xyz.

Uses CRT, graph;Var I : integer;

Procedure GambarTitik3D(X,Y,Z,Clr : Integer);Var

XD,YD:Integer;Begin

XD:= X-Z;YD:= Y-Z;GambarTitik(XD,YD,Clr);

End;

Begin Buka_grafik; {…Visualisasi sumbu semu….} For i:=1 To 100 Do Begin

34

Modul VIII – Menggambar Obyek 3 Dimensi & Translasi 3D 8-35

GambarTitik3D(i,0,0,7); GambarTitik3D(0,i,0,7); GambarTitik3D(0,0,i,7); End; Readln; CloseGraph;End.

Translasi 3 DimensiMatrik translasi dalam transformasi 3D pada prinsipnya sama dengan matrik pada transformasi 2D, hanya saja diperlukan matrik yang berukuran lebih besar yaitu 4 x 4.

Persamaan untuk Translasi 3 dimensi adalah:

Tv : x’=x+a Y’=y+b Z’=Z+c

Gambar 8.1:Matriks translasi Tv.

Matrik Translasi : Tv = 1 0 0 a

0 1 0 b

0 0 1 c

0 0 0 1

Latihan :

1. Ubah program menggambar sumbu di atas dalam bentuk procedure, beri nama procedure sumbu_XYZ.

2. Buatlah program untuk menggambar garis 3 dimensi dari titik (x1,y1,z1) ke titik (x2,y2,z2) dengan warna tertentu dengan metode DDA atau Bresenham.

Procedure Garis3D(x1,y1,z1,x2,y2,z2:integer; color:byte);3. Membuat program untuk menggambar limas seperti dibawah ini.

Gambar 8.2:Contoh Objek Limas Segutiga.

4. Membuat procedure translasi sehingga outputnya sbb.:

Modul VIII – Menggambar Obyek 3 Dimensi & Translasi 3D 8-36

Gambar 8.3:Contoh Translasi.

Tugas :

1. Membuat berbagai objek 3 dimensi dibawah ini menjadi satu kesatuan program.

Gambar 8.4:ContohObjek 3 dimensi.

Koordinat dari masing-masing objek disimpan dalam bentuk matrix, jumlah kolom sesuai dengan jumlah titik objek, misal untuk objek limas segi 3 dibutuhkan 4 buah titik, maka matrik objek yang terbentuk sbb.

Gambar 8.5:Matriks Objek.

X1 X2 X3 X4

Y1 Y2 Y3 Y4

Z1 Z2 Z3 Z4

1 1 1 1

2. Membuat program translasi untuk obyek lain, seperti kubus, prisma, dsb.

modul praktikum grafis 2006

Documents