Modul Grafika Komputer

Modul Praktikum Grafika Komputer

Tito Sugiharto, M.Eng - Universitas Kuningan 2015 Page 1

MODUL I

MENGENAL DELPHI DAN PENGANTAR GRAFIKA

I. TUJUAN

1. Mahasiswa dapat mengenal Elemen IDE Delphi

2. Mahasiswa dapat mengenal grafika komputer

3. Mahasiswa mampu membuat aplikasi sederhana

4. Mahasiswa mampu menambahkan komponen kedalam form

II. TEORI

Delphi adalah suatu program berbasis bahasa Pascal yang berjalan dalam lingkungan

Windows. Delphi juga merupakan sebuah perangkat lunak pengembangan program yang

terintegrasi, yang meliputi fungsi untuk penulisan program, kompilasi sampai dengan

pelacakan kesalahan (debugging). Delphi adalah suatu bahasa pemrograman yang telah

memanfaatkan metode pemrograman Object Oriented Programming (OOP).

Secara default elemen IDE (Integrated Development Environment) terdiri atas

beberapa bagian sebagaimana terlihat pada gambar 1.1, yaitu Menu Bar, Tool Bar,

Component Palette, Object Treeview, Object Inspector, Form Designer, dan Code Editor.

Gambar 1.1 IDE Delphi

1. Menu Bar digunakan untuk memilih perintah (Command) yang diberikan kepada

Delphi untuk melakukan suatu pekerjaan tertentu, misalnya menyimpan

file,menampilkan elemen tertentu, menginstal komponen baru dan lain-lain.

Tool Bar

Object

TreeView

Object

Inspector

Form

Designer

Code

Explorer

Component

Palette

Menu bar



2. Tool Bar berisi icon (gambar kecil) yang mengilustrasikan perintah yang diberikan,

misalnya icon disket untuk perintah menyimpan file, icon buku untuk perintah

bantuan(Help).

3. Component Palette berisi icon yang menunjukan komponen yang dapat ditambahkan

ke dalam form yang kita buat, baik komponent visual seperti button (tombol), text

box, combo box dan lain-lain.

4. Form Designer merupakan jendela untuk mendesain tampilan aplikasi yang kita buat.

Bentuk dasar dari tampilan program yang dibuat menggunakan Delphi ini adalah

berbentuk form. Didalam form ini dapat ditempatkan komponen-komponen visual dan

non visual.

5. Code Explorer digunakan untuk menambahkan dan mengedit program yang kita buat.

Dalam Delphi, beberapa bagian program akan dibuat secara otomatis ketika kita

memulai membuat sebuah proyek. Ada juga bagian program yang akan dibuat

otomatis ketika kita buat suatu event pada komponent yang ditambahkan ke form.

6. Object TreeView berisi daftar komponen (disebut juga objek) yang kita tambahkan

dalam form yang dibuat di Form Editor.

7. Object Inspector Berisi daftar property dan event dari komponen yang sedang dipilih

di form editor. Object Inspector mempunyai 2 buah tab yaitu tab Properties dan

Events. Property komponen dapat diubah dengan mengetikan pada bagian kanan dari

object inspector. Setiap komponen dapat memiliki event untuk menentukan

perilakunya apabila dilakukan hal tertentu pada komponen tersebut.

Komponen pada Delphi terdiri atas komponen visual dan komponen non visual.

Komponen visual akan ditampilkan apa adanya dalam form yang dibuat, sedangkan

komponen visual tidak terlihat pada waktu dieksukusi.

Beberapa komponen yang sering digunakan adalah:

Tabel 1.1. Tabel Komponen

Komponen Icon Palet Keterangan

Label

Standar Menambahkan tulisan dalam form

Button

Standar Berupa tombol tekan dengan tulisan

diatasnya

Edit

Standar Kotak isian untuk mengisikan teks atau

angka biasanya untuk input program



Image

Additional Untuk menampilkan gambar yang dimuat

dari file

Timer

System Untuk membuat event yang berulang

setiap rentang waktu tertentu.

OpenPictureDialog

Dialogs Untuk menampilkan kotak dialog untuk

memilih file citra yang akan dimuat

Grafika komputer merupakan suatu cabang bidang ilmu yang mempelajari bagaimana

membuat gambar/grafik dan bagaimana memanipulasinya menggunakan komputer. Grafika

komputer merupakan bagian yang paling menarik di bidang ilmu komputer, karena selain

harus mengerti bahasa dan logika pemrograman juga dibutuhkan kemampuan analisis serta

pemahaman matematis.

Gafika komputer bertujuan menghasilkan citra (lebih tepat disebut grafik/picture)

dengan primitif-primitif geometri seperti garis, lingkaran, persegi, dan lain sebagainya.

Primitif-primitif geometri tersebut memerlukan data deskriptif untuk melukis elemen-elemen

gambar. Contoh data deskriptif adalah koordinat titik, panjang garis, jari-jari lingkaran, tebal

garis, dan warna.

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 warna, ukuran garis, dan jenis font.

Kode program canvas adalah:

Canvas.Moveto(x,y) : digunakan untuk menempatkan posisi awal garis

Canvas.Lineto(x,y) : digunakan untuk menempatkan posisi akhir garis

Praktikum 1

1. Buka Program Aplikasi Delphi

2. Untuk memulai Proyek baru pilih Menu File New Application

3. Rancanglah Form seperti gambar dibawah ini, dengan menambahkan objek Buton

4. Pada objek Button1 atur properti caption ganti dengan Garis.



5. Klik 2x pada Button1(Garis), setelah muncul halaman CodeEditor, maka tuliskan

kode progam berikut:

procedure TForm1.Button1Click(Sender: TObject);

begin

canvas.moveto(10,10);

canvas.lineto(100,100);

end;

end.

6. Eksekusi program di atas dengan menekan tombol F9.

Praktikum 2




4. Pada objek Button1 atur properti caption ganti dengan Garis Horizontal.

5. Klik 2x pada Button1(Garis Horizontal), setelah muncul halaman CodeEditor, maka

tuliskan kode progam berikut:




begin



end;

end.


7. Perhatikan hasil bentuk garisnya.

Praktikum 3




4. Pada objek Button1 atur properti caption ganti dengan Garis Vertikal.

5. Klik 2x pada Button1(Garis Vertikal), setelah muncul halaman CodeEditor, maka





begin



end;

end.


Praktikum 4




4. Pada objek Button1 atur properti caption ganti dengan Rectangle.

5. Klik 2x pada Button1(Rectangle), setelah muncul halaman CodeEditor, maka tuliskan



begin

canvas.Rectangle(10,30,300,150);

end;

end.


Praktikum 5






4. Pada objek Button1 atur properti caption ganti dengan Lingkaran.

5. Klik 2x pada Button1(Lingkaran), setelah muncul halaman CodeEditor, maka tuliskan



begin

canvas.Ellipse(310,310,250,250);

end;

end.


Tugas

1. Buat dan rancanglah kode program untuk menampilkan gambar seperti berikut:

a. Rumah

b. Mobil



MODUL II

MENGGAMBAR GARIS DENGAN METODE DDA, BRESENHAM

DAN POLINOM

I. TUJUAN

1. Mahasiswa dapat membuat garis menggunakan metode DDA

2. Mahasiswa dapat membuat garis menggunakan metode Bresenham

3. Mahasiswa dapat membuat garis dengan metode polinom

II. TEORI

Algoritma DDA adalah algoritma pembentukan garis berdasarkan perhitungan x dan

y, menggunakan rumus y = m. x. Garis dibuat dengan menentukan dua endpoint yaitu titik

awal dan titik akhir. Setiap koordinat titik yang membentuk garis diperoleh dari perhitungan,

kemudian dikonversikan menjadi nilai integer.

Digital Diferensial Analyser (DDA) adalah algoritma pembentukan garis berdasarkan

perhitungan dx maupun dy, menggunakan rumus

dy = m . dx

Garis dibuat menggunakan dua endpoint, yaitu titik awal dan titik akhir. Setiap koordinat titik

yang membentuk garis diperoleh dari perhitungan, kemudian dikonversikan menjadi nilai

integer. Langkah Pembentukan Garis DDA:

a) Tentukan dua titik yang akan dihubungkan dalam pembentukan garis

b) Tentukan titik awal (x0,y0) dan titik akhir (x1,y1).

c) Hitung dx = x1- x0dan dy = y1 y0

d) Tentukan step = max( |dx| , |dy| )

e) Hitung penambahan koordinat pixel XInc = dx / step dan YInc = dy / step

f) Koordinat selanjutnya (x+XInc, y+yInc)

g) Posisi pada layar ditentukan dengan pembulatan nilai koordinat tersebut

h) Ulangi langkah f dan g untuk menentukan posisi pixel berikutnya. sampai x=x1 dan

y=y1.

Algoritma Bressenham mengembangkan algoritma klasik yang lebih menarik, karena

hanya menggunakan perhitungan matematika dengan bilangan integer. Dengan demikian

tidak perlu membulatkan nilai posisi setiap pixel setiap waktu. Algoritma garis Bressenhem



disebut juga midpoint line algorithm adalah algoritma konversi penambahan nilai integer

yang juga dapat diadaptasi untuk menggambar sebuah lingkaran.

Langkah-Langkah membentuk garis menggunakan algoritma Bressenhem:

a. Tentukan dua titik yang akan dihubungkan.

b. Tentukan titik awal (X0, Y0) dan titik akhir (X1,Y1).

c. Hitung dx, dy, 2dy, dan 2dy-2dx.

d. Hitung parameter p0 = 2dy-dx

e. Untuk setiap xk sepanjang jalur garis, dimulai dengan k = 0

- bila pk



Bresenham, dan Polinom

Label2 Caption X1

Label3 Caption Y1

Label4 Caption X2

Label5 Caption Y2

Label6 Caption Xawal

Label7 Caption Xakhir

Label8 Caption Nilai A =

Label9 Caption Nilai B =

Edit1 Name edX1

Text Kosongkan

Edit2 Name edY1

Text Kosongkan

Edit3 Name edX2

Text Kosongkan

Edit4 Name edY2

Text Kosongkan

Edit5 Name edXAwal

Text Kosongkan

Edit6 Name edXAkhir

Text Kosongkan

Edit7 Name edA

Text Kosongkan

Edit8 Name edB

Text Kosongkan

Button1 Name DDA

Caption DDA

Button2 Name Bresenham

Caption Bresenham

Button3 Name Polinom

Caption Polinom

Button4 Name Ulang

Caption Ulang

Button5 Name Keluar

Caption Keluar



5. Kemudian pilih Objek Form1, pada event OnPaint klik 2x disebelah kanannya,

kemudian ketikan kode program berikut:

procedure TForm1.FormPaint(Sender: TObject);

var

x,y:integer;

begin

// sumbu x

for x := 0 to ClientWidth do

Canvas.Pixels[x,ClientHeight div 2]:= clRed;

// sumbu y

for y := 0 to ClientHeight do

Canvas.Pixels[ClientWidth div 2,y]:= clBlue;

end;

6. Klik 2x pada Button1(DDA), setelah muncul halaman CodeEditor, maka tuliskan


procedure TForm1.DDAClick(Sender: TObject);

var

k,delta,x0,y0,x1,y1,x2,y2: Integer;

xNaik,yNaik,x,y:real;

begin

// lebar dan tinggi layar maks (1)

x0 := ClientWidth div 2; y0 := ClientHeight div 2;

//inputan awal (2)

x1 := StrToInt(edX1.Text); x2 := StrToInt(edX2.Text);

y1 := StrToInt(edY1.Text); y2 := StrToInt(edY2.Text);

for k := 0 to ClientWidth do //sumbu x dan y (3)

Canvas.Pixels[k,y0]:= clGreen;

for k := 0 to ClientHeight do

Canvas.Pixels[x0,k]:= clRed;

delta := ABS(x2-x1); //persamaan metode DDA (4)

if abs(y2-y1) > delta then

delta := abs(y2-y1);

xNaik := (x2-x1)/delta;

yNaik := (y2-y1)/delta;

x := x1; y := y1;

for k := 1 to delta do

begin //menggambar garis (5)

Canvas.Pixels[Trunc(x0 + x), Trunc(y0 -y)]:=clBlue;

x := x + xNaik;

y := y + yNaik;

end;end;

7. Klik 2x pada Button2(Bresenham), setelah muncul halaman CodeEditor, maka


procedure TForm1.BresenhamClick(Sender: TObject);

var

x,y,k,e,deltay,deltax,x0,y0,x1,x2,y1,y2 : Integer;



begin


x1 := StrToInt(edX1.Text); x2 := StrToInt(edX2.Text);

y1 := StrToInt(edY1.Text); y2 := StrToInt(edY2.Text);

deltax :=abs(x2-x1); deltay :=abs(y2-y1);

e := (2 * deltay)-deltax; x := x1; y := y1;

for k := 1 to deltax do

begin

canvas.Pixels[x0+x,y0-y]:=clBlue;

if e > 0 then

begin

y := y + 1; e := e + 2 * (deltay-deltax);

end

else e := e + (2 * deltay); x := x + 1;

end;

end;

8. Klik 2x pada Button3(Polinom), setelah muncul halaman CodeEditor, maka tuliskan


procedure TForm1.PolinomClick(Sender: TObject);

var

x,xAwal,xAkhir,a,b,x0,y0,y: Integer;

begin


a := StrToInt(edA.Text); b := StrToInt(edB.Text);

xAwal := StrToInt(edXAwal.Text); xAkhir := StrToInt(edXAkhir.Text);

for x := xAwal to xAkhir do

begin

y := (a * x) + b;

Canvas.Pixels[x0+x, Trunc(y0-y)]:= clGreen;

end;

end;

9. Klik 2x pada Button4(Ulang), setelah muncul halaman CodeEditor, maka tuliskan


procedure TForm1.UlangClick(Sender: TObject);

begin

edX1.Text:='';

edY1.Text:='';

edX2.Text:='';

edY2.Text:='';

edXAwal.Text:='';

edXAkhir.Text:='';

edA.Text:='';

edB.Text:='';

edX1.SetFocus;

end;



10. Klik 2x pada Button5(Keluar), setelah muncul halaman CodeEditor, maka tuliskan


procedure TForm1.KeluarClick(Sender: TObject);

begin

CLOSE;

end;


Praktikum 2



3. Rancanglah Form seperti gambar dibawah ini

4. Isi Properti setiap komponen adalah:

Komponen Properti Nilai

Form Name Form1



Caption Lingkaran Polinom

Width 340

Height 135

Label1 Caption Menggambar Lingkaran

Polinom Dengan Titik Pusat

(0,0)

Label2 Caption Radius

Edit1 Name eR

Caption Dikosongan

Button1 Name Button1

Caption 8 Warna


Caption Ulang


Caption Keluar

5. Kemudian pilih Objek Form1, klik 2x pada form yang kosong, kemudian ketikan

kode program berikut:

procedure TForm1.FormCreate(Sender: TObject);

var

x0,y0:integer;

begin

x0 := ClientWidth div 2;

y0 := ClientHeight div 2;

end;

6. Kemudian pilih Objek Form1, pada event OnPaint klik 2x disebelah kanannya,

kemudian ketikan kode program berikut:


var

k,x0,y0:integer;

begin



for k := 0 to ClientWidth do // sumbu x

Canvas.Pixels[k,y0]:= clBlue;

for k := 0 to ClientHeight do // sumbu y


end;

7. Kemudian pilih Objek Button1(8 Warna), klik 2x kemudian ketikan kode program

berikut:


var



r,x0,y0:integer;

x,y:real;

begin



r := StrToInt(eR.Text); // inputan melalui komponen edit

x := 0;

Repeat

y := sqrt((sqr(r))-(sqr(x))); // persamaan polinom

Canvas.Pixels[trunc(x0+x),trunc(y0 -y)]:= clRed;

Canvas.Pixels[trunc(x0+x) ,trunc(y0+y)]:= clBlue;

Canvas.Pixels[trunc(x0-x),trunc(y0-y)]:= clPurple;

Canvas.Pixels[trunc(x0-x),trunc(y0+y)]:= clNavy;

Canvas.Pixels[trunc(x0+y),trunc(y0 -x)]:= clBlack;

Canvas.Pixels[trunc(x0+y),trunc(y0+x)]:= clGreen;

Canvas.Pixels[trunc(x0-y),trunc(y0-x)]:= clYellow;

Canvas.Pixels[trunc(x0-y),trunc(y0+x)]:= clTeal;

x := x + 0.5;

until x >= 0.707 * r; // batas scan

end;

8. Kemudian pilih Objek Button2(Ulang), klik 2x kemudian ketikan kode program

berikut:


begin

eR.Text := '';

eR.SetFocus;

end;

9. Kemudian pilih Objek Button3(Keluar), klik 2x kemudian ketikan kode program

berikut:


begin

close;

end;




MODUL III

MENGGAMBAR TRANSLASI DAN ROTASI OBJEK 2D

I. TUJUAN

1. Mahasiswa dapat menggambar objek 2D

2. Mahasiswa dapat melakukan proses translasi 2D

3. Mahasiswa dapat melakukan proses Rotasi objek 2D

II. TEORI

Grafika komputer merupakan bidang yang menarik minat banyak orang. Salah sub

bagian dari grafika komputer adalah pemodelan objek (object modelling). Dalam pemodelan

objek dua dimensi (2D), didapati berbagai objek dapat dimodelkan menurut kondisi tertentu,

objek yang dimodelkan itu perlu dimodifikasi.

Pemodifikasian objek ini dapat dilakukan dengan melakukan berbagai operasi fungsi

atau operasi transformasi geometri. Contoh transformasi geometri adalah translasi,

penskalaan, putaran (rotasi), balikan, shearing dan gabungan

Transformasi translasi merupakan suatu operasi yang menyebabkan perpindahan

objek 2D dari satu tempat ke tempat yang lain. Perubahan ini berlaku dalam arah yang sejajar

dengan sumbu X dan sumbu Y. Translasi dilakukan dengan penambahan translasi pada suatu

titik koordinat dengan translation vector, yaitu (tx,ty), dimana tx adalah translasi menurut

sumbu x dan ty adalah translasi menurut sumbu y. Koordinat baru titik yang ditranslasi dapat

diperoleh dengan menggunakan rumus :

x = x + tx

y = y + ty

(x,y) = titik asal sebelum translasi

(x,y) = titik baru hasil translasi

Translasi adalah transformasi dengan bentuk yang tetap, memindahkan objek apa adanya.

Setiap titik dari objek akan ditranslasikan dengan besaran yang sama.

Penskalaan adalah suatu operasi yang membuat suatu objek berubah ukurannya baik

menjadi mengecil ataupun membesar secara seragam atau tidak seragam tergantung pada

faktor penskalaan (scalling factor) yaitu (sx,sy) yang diberikan. sx adalah faktor penskalaan

menurut sumbu x dan sy faktor penskalaan menurut sumbu y. Koordinat baru diperoleh

dengan rumus:



x = x * sx

y = y * sy

(x,y) = titik awal sebelum diskala

(x,y) = titik setelah diskala

Nilai lebih dari 1 menyebabkan objek diperbesar, sebaliknya bila nilai lebih kecil dari

1, maka objek akan diperkecil. Bila (sx,sy) mempunyai nilai yang sama, maka skala disebut

dengan uniform scalling.

Putaran adalah suatu operasi yang menyebabkan objek bergerak berputar pada titik

pusat atau pada sumbu putar yang dipilih berdasarkan sudut putaran tertentu. Untu

melakukan rotasi diperlukan sudut rotasi dan pivot point (xp,yp) dimana objek akan

dirotasi.Putaran biasa dilakukan pada satu titik terhadap sesuatu sumbu tertentu misalnya

sumbu x, sumbu y atau garis tertentu yang sejajar dengan sembarang sumbu tersebut. Titik

acuan putaran dapat sembarang baik di titik pusat atau pada titik yang lain.

Aturan dalam geometri, jika putaran dilakukan searah jarum jam, maka nilai sudutnya

adalah negatif. Sebaliknya, jika dilakukan berlawanan arah dengan arah jarum jam nilai

sudutnya adalah positif.

Rotasi dapat dinyatakan dengan:

Praktikum 1








Form Name Form1

Caption Translasi Segitiga

Width 340

Height 135

Label1 Caption Menggambara TRANSLASI

Dasar

Label2 Caption Nilai A

Label3 Caption Nilai B

Edit1 Name eNilaiA

Edit2 Name eNilaiB


Caption Segitiga


Caption Translasi

Button3 Name Ulang

Caption Ulang

Button4 Name Keluar

Caption Keluar

StringGrid1 Name StringGrid1

FixedCol 1

Fixed Row 0

RowCount 2

ColCount 4

Options goEditing True

Catatan:

Komponen StringGrid1 bisa diakses pada Tab Control Additional

pada komponen Pallete

5. Selanjutnya tekan F12 untuk berpindah ke jendela code editor dan buatlah deklarasi

konstanta dan matrik dibawah uses, sebagai berikut:

uses

Windows, Messages, SysUtils, Variants, Classes, Graphics, Controls, Forms,

Dialogs, Grids, StdCtrls;



//deklarasi konstanta

Const N = 3;

//deklarasi matriks

Type

Matrik33 = array[1..3,1..3] of Real;

Matrik3N = array[1..3,1..N] of Real;




begin

// lebar layar dan tinggi layar maksimum



end;

7. Kemudian tambahkan juga kode pada objek Form1, Klik Form1, Kemudian pilih

Objek Form1, pada event OnPaint klik 2x disebelah kanannya, kemudian ketikan



var

k:integer;

begin





end;

Perintah di atas akan menampilkan sumbu koordinat x yang berwarna biru dan

sumbu koordinat y yang berwarna biru secara otomatis saat form dijalankan.

Sebaiknya k berupa variable lokal.


Objek Form1, pada event OnShow klik 2x disebelah kanannya, kemudian ketikan


procedure TForm1.FormShow(Sender: TObject);

begin

with StringGrid1 do

begin

Cells[0,0]:='X';

Cells[0,1]:='Y';

end;

end;

9. Kemudian ketiklah kode program berikut dibawah kode program FormShow:

procedure TForm1.Obyek2D(Sender: TObject; var Obyek:Matrik3N);

var



i,j : Integer;

begin

for i := 1 to 2 do

for j := 1 to N do

Obyek[i,j]:=StrToFloat(StringGrid1.Cells[j,i-1]);

for j := 1 to N do

Obyek[3,j]:=1;

end;

procedure TForm1.MatrikTranlasi2D(Sender: TObject; var Tv : Matrik33; a, b

: real);

begin

a := StrToFloat(eNilaiA.Text);

b := StrToFloat(eNilaiB.Text);

Tv[1,1]:=1; Tv[1,2]:=0; Tv[1,3]:=a;

Tv[2,1]:=0; Tv[2,2]:=1; Tv[2,3]:=b;

Tv[3,1]:=0; Tv[3,2]:=0; Tv[3,3]:=1;

end;

procedure MatrikKaliTransformasiObyek2D(var Obyek: Matrik3N; Tr :

Matrik33);

var

i,j,k : Integer; Hasil : Matrik3N;

begin

for i := 1 to 3 do

for k := 1 to N do

begin

Hasil[i,k]:=0;

for j := 1 to 3 do

Hasil[i,k]:= Hasil[i,k] + Tr[i,j] * Obyek[j,k];

end;

Obyek := Hasil;

end;

10. Kemudian tambahkan kode program berikut dibawah type

procedure Obyek2D(Sender: TObject; var Obyek:Matrik3N);

procedure MatrikTranlasi2D(Sender: TObject; var Tv : Matrik33; a, b

: real);

11. Kemudian tambahkan juga kode progam berikut dibawah var

var

Form1: TForm1;

x0,y0:integer;

Obyek: Matrik3N;

Tv : Matrik33;

a, b: real;

12. Kemudian pilih Objek Button1(Segitiga), klik 2x kemudian ketikan kode program

berikut:


begin



Obyek2D(Sender,Obyek);

Canvas.MoveTo(trunc(X0 + Obyek[1,1]),trunc(Y0 - Obyek[2,1]));

Canvas.LineTo(trunc(X0 + Obyek[1,2]),trunc(Y0 - Obyek[2,2]));





end;

13. Kemudian pilih Objek Button2(Translasi), klik 2x kemudian ketikan kode program

berikut:


begin


MatrikTranlasi2D(Sender,Tv,a,b);

MatrikKaliTransformasiObyek2D(Obyek,Tv);







end;

14. Kemudian pilih Objek ButtonUlang(Ulang), klik 2x kemudian ketikan kode program

berikut:

procedure TForm1.UlangClick(Sender: TObject);

var i,j : Integer;

begin

Form1.Refresh;

eNilaiA.Text :='';

eNilaiB.Text :='';

for i := 1 to 2 do

for j := 1 to 3 do

StringGrid1.Cells[j,i-1]:='';

end;

15. Kemudian pilih Objek ButtonKeluar(Keluar), klik 2x kemudian ketikan kode

program berikut:


begin

Application.Terminate;

end;


17. Coba masukan angka pada X (10,50,10) dan pada Y (10,10,50) pada tranlasi A dan B

(100,100), kemudian klik tombol segitiga dan klik tombol tranlasi.



Praktikum 2






Form Name Form1

Caption Rotasi Segitiga

Width 340

Height 135

Label1 Caption Menggambar ROTASI pada

Titik (0,0)



Label2 Caption Sudut

Edit1 Name eSudut

Button1 Name ButtonSegitiga

Caption Segitiga

Button2 Name ButtonRotasi

Caption Rotasi

Button3 Name ButtonKeluar

Caption Keluar


FixedCol 1

Fixed Row 0

RowCount 2

ColCount 4


Catatan:





uses




Const N = 3;

//deklarasi matriks

Type






begin




end;







var

k:integer;

begin





end;








begin

with StringGrid1 do

begin

Cells[0,0]:='X';

Cells[0,1]:='Y';

end;

end;



var

i,j : Integer;

begin

for i := 1 to 2 do

for j := 1 to N do


for j := 1 to N do

Obyek[3,j]:=1;

end;

procedure TForm1.MatrikRotasi2D(Sender: TObject; var R : Matrik33; sudut

: real);

var

Radian : Real;

begin

sudut := StrToFloat(eSudut.Text);

Radian := sudut / 180 * 3.14;

R[1,1]:=cos(Radian); R[1,2]:=sin(Radian); R[1,3]:=0;

R[2,1]:=sin(Radian); R[2,2]:=cos(Radian); R[2,3]:=0;

R[3,1]:=0; R[3,2]:=0; R[3,3]:=1;

end;



procedure MatrikKaliTransformasiObyek2D(var Obyek: Matrik3N; R:

Matrik33);

var


begin

for i := 1 to 3 do

for k := 1 to N do

begin

Hasil[i,k]:=0;

for j := 1 to 3 do

Hasil[i,k]:= Hasil[i,k] + R[i,j] * Obyek[j,k];

end;

Obyek := Hasil;

end;



procedure MatrikRotasi2D(Sender: TObject; var R : Matrik33; sudut: real);


var

Form1: TForm1;

x0,y0:integer;

Obyek: Matrik3N;

R : Matrik33;

a, b,sudut: real;

12. Kemudian pilih Objek ButtonSegitiga(Segitiga), klik 2x kemudian ketikan kode

program berikut:


begin








end;

13. Kemudian pilih Objek ButtonRotasi(Rotasi), klik 2x kemudian ketikan kode program

berikut:

procedure TForm1.ButtonRotasiClick(Sender: TObject);

begin


MatrikRotasi2D(Sender,R,sudut);

MatrikKaliTransformasiObyek2D(Obyek,R);









end;


program berikut:


begin


end;


16. Coba masukan angka pada X (10,100,10) dan pada Y (10,10,100) pada sudut(180),

kemudian klik tombol segitiga dan klik tombol Rotasi.



MODUL IV

MENGGAMBAR SCALING DAN FLIPPING OBJEK 2D

I. TUJUAN


2. Mahasiswa dapat melakukan proses penskalaan 2D

3. Mahasiswa dapat melakukan proses Pencerminan objek 2D

II. TEORI

Penskalaan adalah suatu operasi yang membuat suatu objek berubah ukurannya baik

menjadi mengecil ataupun membesar secara seragam atau tidak seragam tergantung pada

faktor penskalaan (scalling factor) yaitu (sx,sy) yang diberikan. sx adalah faktor penskalaan

menurut sumbu x dan sy faktor penskalaan menurut sumbu y. Koordinat baru diperoleh

dengan rumus:

x = x * sx

y = y * sy

(x,y) = titik awal sebelum diskala

(x,y) = titik setelah diskala

Nilai lebih dari 1 menyebabkan objek diperbesar, sebaliknya bila nilai lebih kecil dari

1, maka objek akan diperkecil. Bila (sx,sy) mempunyai nilai yang sama, maka skala disebut

dengan uniform scalling.

Operasi pencerminan merupakan operasi geometri yang tidak mengalami perubahan

ukuran citra.Operasi ini hanya mengakibatkan adanya perubahan orientasi citra, baik secara

horizontal, vertikal maupun keduanya.

Praktikum 1








Form Name Form1

Caption Scalling Segitiga

Width 340

Height 135

Label1 Caption Menggambar SCALLING pada

Titik (0,0)

Label2 Caption X

Label3 Caption Y

Edit1 Name eX

Edit2 Name eY


Caption Segitiga

Button2 Name ButtonScalling

Caption Scalling


Caption Keluar


FixedCol 1

Fixed Row 0

RowCount 2

ColCount 4


Catatan:







uses




Const N = 3;

//deklarasi matriks

Type






begin




end;





var

k:integer;

begin





end;








begin

with StringGrid1 do

begin



Cells[0,0]:='X';

Cells[0,1]:='Y';

end;

end;



var

i,j : Integer;

begin

for i := 1 to 2 do

for j := 1 to N do


for j := 1 to N do

Obyek[3,j]:=1;

end;

procedure TForm1.MatrikScaling2D(Sender: TObject; var S : Matrik33; sx,sy

: real);

begin

sx := StrToFloat(eX.Text);

sy := StrToFloat(eY.Text);

S[1,1]:=sx; S[1,2]:=0; S[1,3]:=0;

S[2,1]:=0; S[2,2]:=sy; S[2,3]:=0;

S[3,1]:=0; S[3,2]:=0; S[3,3]:=1;

end;

procedure MatrikKaliTransformasiObyek2D(var Obyek: Matrik3N; S :

Matrik33);

var


begin

for i := 1 to 3 do

for k := 1 to N do

begin

Hasil[i,k]:=0;

for j := 1 to 3 do

Hasil[i,k]:= Hasil[i,k] + S[i,j] * Obyek[j,k];

end;

Obyek := Hasil;

end;



procedure MatrikScaling2D(Sender: TObject; var S : Matrik33; sx,sy: real);


var

Form1: TForm1;

x0,y0:integer;



Obyek: Matrik3N;

S : Matrik33;

a, b,sx,sy: real;


program berikut:

procedure TForm1.ButtonSegitigaClick(Sender: TObject);

begin








end;

13. Kemudian pilih Objek ButtonScalling(Scalling), klik 2x kemudian ketikan kode

program berikut:

procedure TForm1.ButtonScallingClick(Sender: TObject);

begin


MatrikScaling2D(Sender,S,sx,sy);

MatrikKaliTransformasiObyek2D(Obyek,S);







end;


program berikut:


begin


end;




Praktikum 2






Form Name Form1

Caption Pencerminan Segitiga

Width 340

Height 135

Label1 Caption Menggambar Pencerminan

Sumbu X dan Sumbu Y


Caption Segitiga

Button2 Name ButtonCerminX



Caption Cermin X

Button3 Name ButtonCerminY

Caption Cermin Y


Caption Keluar


FixedCol 1

Fixed Row 0

RowCount 2

ColCount 4


Catatan:





uses




Const N = 3;

//deklarasi matriks

Type






begin




end;





var

k:integer;

begin







end;








begin

with StringGrid1 do

begin

Cells[0,0]:='X';

Cells[0,1]:='Y';

end;

end;



var

i,j : Integer;

begin

for i := 1 to 2 do

for j := 1 to N do


for j := 1 to N do

Obyek[3,j]:=1;

end;

procedure MatrikPencerminanSumbuX(var Mx : Matrik33);

begin

Mx[1,1]:=1; Mx[1,2]:=0; Mx[1,3]:=0;

Mx[2,1]:=0; Mx[2,2]:=-1; Mx[2,3]:=0;

Mx[3,1]:=0; Mx[3,2]:=0; Mx[3,3]:=1;

end;

procedure MatrikPencerminanSumbuY(var My : Matrik33);

begin

My[1,1]:=-1; My[1,2]:=0; My[1,3]:=0;

My[2,1]:=0; My[2,2]:=1; My[2,3]:=0;

My[3,1]:=0; My[3,2]:=0; My[3,3]:=1;

end;

procedure MatrikKaliTransformasiObyek2D(var Obyek: Matrik3N; Mx :

Matrik33);

var




begin

for i := 1 to 3 do

for k := 1 to N do

begin

Hasil[i,k]:=0;

for j := 1 to 3 do

Hasil[i,k]:= Hasil[i,k] + Mx[i,j] * Obyek[j,k];

end;

Obyek := Hasil;

end;




var

Form1: TForm1;

x0,y0:integer;

Obyek: Matrik3N;

Mx,My : Matrik33;


program berikut:

procedure TForm1.ButtonSegitigaClick(Sender: TObject);

begin








end;

13. Kemudian pilih Objek ButtonCerminX(Cermin X), klik 2x kemudian ketikan kode

program berikut:

procedure TForm1.ButtonCerminXClick(Sender: TObject);

begin


MatrikPencerminanSumbuX(Mx);

MatrikKaliTransformasiObyek2D(Obyek,Mx);









end;

14. Kemudian pilih Objek ButtonCerminY(Cermin Y), klik 2x kemudian ketikan kode

program berikut:

procedure TForm1.ButtonCerminYClick(Sender: TObject);

begin


MatrikPencerminanSumbuY(My);

MatrikKaliTransformasiObyek2D(Obyek,My);







end;


program berikut:


begin


end;


Praktikum 3








Form Name Form1

Caption Shearing

Width 340

Height 135

Label1 Caption Menggambar Shearing

Label2 Caption Nilai A =

Label3 Caption Nilai B =

Button1 Name ButtonSegiempat

Caption Segi Empat

Button2 Name ButtonShearing

Caption Shearing

Button3 Name ButtonUlang

Caption Ulang


Caption Keluar


FixedCol 1

Fixed Row 0

RowCount 2

ColCount 5


Catatan:







uses




Const N = 4; {Segi empat}

//deklarasi matriks

Type






begin




end;





var

k:integer;

begin





end;








begin



with StringGrid1 do

begin

Cells[0,0]:='X';

Cells[0,1]:='Y';

end;

end;



var

i,j : Integer;

begin

for i := 1 to 2 do

for j := 1 to N do


for j := 1 to N do

Obyek[3,j]:=1;

end;

procedure TForm1.MatrikShearing(Sender: TObject; var Sh : Matrik33; a,b :

real);

begin

a := StrToFloat(eNilaiA.Text);

b := StrToFloat(eNilaiB.Text);

Sh[1,1]:=1; Sh[1,2]:=a; Sh[1,3]:=0;

Sh[2,1]:=b; Sh[2,2]:=1; Sh[2,3]:=0;

Sh[3,1]:=0; Sh[3,2]:=0; Sh[3,3]:=1;

end;

procedure MatrikKaliTransformasiObyek2D(var Obyek: Matrik3N; Sh :

Matrik33);

var


begin

for i := 1 to 3 do

for k := 1 to N do

begin

Hasil[i,k]:=0;

for j := 1 to 3 do

Hasil[i,k]:= Hasil[i,k] + Sh[i,j] * Obyek[j,k];

end;

Obyek := Hasil;

end;



procedure MatrikShearing(Sender: TObject; var Sh : Matrik33; a,b :

real);




var

Form1: TForm1;

x0,y0:integer;

Obyek: Matrik3N;

Sh: Matrik33;

a,b :real;

12. Kemudian pilih Objek ButtonSegiempat(Segi Empat), klik 2x kemudian ketikan kode

program berikut:

procedure TForm1.ButtonSegiempatClick(Sender: TObject);

begin










end;

13. Kemudian pilih Objek ButtonShearing(Shearing), klik 2x kemudian ketikan kode

program berikut:

procedure TForm1.ButtonShearingClick(Sender: TObject);

begin


MatrikShearing(Sender,Sh,a,b);

MatrikKaliTransformasiObyek2D(Obyek,Sh);









end;


berikut:

procedure TForm1.ButtonUlangClick(Sender: TObject);

var i,j : Integer;

begin

Form1.Refresh;

eNilaiA.Text :='';



eNilaiB.Text :='';

for i := 1 to 2 do

for j := 1 to 4 do

StringGrid1.Cells[j,i-1]:='';

end;


program berikut:


begin


end;




MODUL V

MENGGAMBAR KUBUS 3D DAN TRANSLASI 3D

I. TUJUAN


2. Mahasiswa dapat membuat gambar kubus 3D

3. Mahasiswa dapat melakukan proses translasi 3D

II. TEORI

Perbedaan 2 dimensi dan 3 dimensi adalah kedalaman. Kedalaman didefinisikan

sebagai jarak antara viewer terhadap benda yang di lihat.Ini berarti berbeda dengan 2 dimensi

yang hanya menggunakan 2 ukuran, yaitu panjang dan lebar, maka 3 dimensi menggunakan 3

ukuran, yaitu panjang, lebar dan kedalaman. Secara geometri ketiga ukuran tersebut

disimbolkan dengan sumbu x, y, dan z.

Benda tiga dimensi disusun dari sekumpulan surface. Gambar di bawah memberikan

contoh bagaimana surface digunakan untuk menyusun benda tiga dimensi. Surface dapat

dibuat dari rangkaian Polygon.

Polygon adalah bentuk yang disusun dari serangkaian garis yang terhubung satu

dengan yang lain dan berbentuk kurva tertutup sehingga membentuk sebuah objek gambar.

Titik sudut dari Polygon disebut vertex sedangkan garis penyusun Polygon disebut edge.

Titik hasil transformasi dapat diperoleh melalui rumus dibawah ini disebut sebagai

Affine Transformation.



Q = P * M +tr

Dimana :

Q = (Qx,Qy,Qz) menyatakan matriks 1x3 yang berisi titik hasil transformasi.

P = (Px, Py, Pz) menyatakan matrik 1x3 yang berisi titik yang akan ditransformasi.

Tr = (trx, try, trz) menyatakan matrik 1x3 yang berisi banyaknya pergeseran pada sumbu x, y

dan z.

M = Matriks mentransformasi berukuran 3x3.

Transformasi translasi merupakan operasi yang menyebabkan perpindahan objek tiga

dimensi dari satu tempat ke tempat yang lainnya. Perubahan ini berlaku dalam arah yang

sejajar dengan sumbu x, y, z. dalam operasi translasi, setiap titik pada suatu entitas yang

ditranslasi bergerak dalam jarak yang sama. Pergerakan tersebut dapat berlaku dalam arah

sumbu x, y, z. Untuk mentranslasikan suatu titik (x,y,z) dengan pergeseran sebesar (tx, ty, tz)

menjadi titik (x,y,z) digunakan matriks :

Untuk invers dari translasi dapat dilakuan dengan mengubah nilai vektor translasi menjadi

negatif .

Praktikum 1








Form Name Form1

Caption Kubus 3D

Width 340

Height 135

Label1 Caption Menggambar Kubus 3D

Label2 Caption Koordinat Awal

Label3 Caption Panjang Sisi

Edit1 Name eX

Edit2 Name eY

Edit3 Name eZ

Edit4 Name eSisi

Button1 Name ButtonKubus

Caption Kubus


Caption Ulang


Caption Keluar




begin




end;





var k : Integer;

begin

for k := 1 to X0 do // sumbu x

begin

X3D := X0 + k; Y3D := Y0;

Canvas.Pixels[X3D,Y3D]:= clBlue;

end;

for k := 1 to Y0 do // sumbu y

begin

X3D := X0; Y3D := Y0-k;



Canvas.Pixels[X3D,Y3D]:= clRed;

end;

for k := 1 to X0 do // sumbu z

begin

X3D := X0 - k; Y3D := Y0+k div 2;

Canvas.Pixels[X3D,Y3D]:= clGreen;

end;

end;




7. Kemudian tambahkan juga kode kemudian ketikan kode program berikut:

procedure UbahKoordinat3D(var X3D,Y3D:Integer; X,Y,Z:Integer);

begin

X3D := X0 + X - Z;

Y3D := Y0 - Y + Z div 2;

end;

procedure TForm1.Garis3D(Sender: TObject; x1,y1,z1,x2,y2,z2:integer);

begin

UbahKoordinat3D(X3D1,Y3D1,x1,y1,z1);


Canvas.MoveTo(X3D1,Y3D1);

Canvas.LineTo(X3D2,Y3D2);

end;


procedure Garis3D(Sender: TObject; x1,y1,z1,x2,y2,z2:integer);


var

Form1: TForm1;

x0,y0:integer;

X3D, Y3D, X, Y, Z:integer;

X3D1, Y3D1, X3D2, Y3D2:integer;

10. Kemudian pilih Objek ButtonKubus(Kubus), klik 2x kemudian ketikan kode program

berikut:

procedure TForm1.ButtonKubusClick(Sender: TObject);

var

X,Y,Z,S :integer;

begin

X := StrToInt(eX.Text);

Y := StrToInt(eY.Text);

Z := StrToInt(eZ.Text);

S := StrToInt(eSisi.Text);

Garis3D(Sender,X,Y,Z,X+S,Y,Z); // garis AB

Garis3D(Sender,X,Y,Z,X,Y+S,Z); // garis AD



Garis3D(Sender,X,Y,Z,X,Y,Z+S div 2); // garis AE

Garis3D(Sender,X+S,Y,Z,X+S,Y,Z+S div 2); // garis BF

Garis3D(Sender,X+S,Y,Z,X+S,Y+S,Z); // garis BC

Garis3D(Sender,X+S,Y,Z+S div 2,X,Y,Z+S div 2); // garis FE

Garis3D(Sender,X+S,Y,Z+S div 2,X+S,Y+S,Z+S div 2); // garis FG

Garis3D(Sender,X,Y+S,Z,X,Y+S,Z+S div 2); // garis DH

Garis3D(Sender,X,Y+S,Z,X+S,Y+S,Z); // garis DC

Garis3D(Sender,X,Y+S,Z+S div 2,X,Y,Z+S div 2); // garis HE

Garis3D(Sender,X,Y+S,Z+S div 2,X+S,Y+S,Z+S div 2); // garis HG

Garis3D(Sender,X+S,Y+S,Z,X+S,Y+S,Z+S div 2); // garis CG

end;


berikut:


begin

Form1.Refresh;

eX.Text:='';

eY.Text:='';

eZ.Text:='';

eSisi.Text:='';

end;


program berikut:


begin


end;


Praktikum 2








Form Name Form1

Caption Garis 3D

Width 340

Height 135

Label1 Caption Menggambar Garis 3D

Label2 Caption Titik Awal

Label3 Caption Titik Akhir

Edit1 Name eX1

Edit2 Name eY1

Edit3 Name eZ1

Edit4 Name eX2

Edit5 Name eY2

Edit6 Name eZ2

Button1 Name ButtonGaris

Caption Garis


Caption Ulang


Caption Keluar




begin






end;





var k : Integer;

begin


begin

X3D := X0 + k; Y3D := Y0;


end;


begin

X3D := X0; Y3D := Y0-k;


end;


begin

X3D := X0 - k; Y3D := Y0+k div 2;


end;

end;





procedure UbahKoordinat3D(var X3D,Y3D:Integer; X,Y,Z:Integer);

begin

X3D := X0 + X - Z;

Y3D := Y0 - Y + Z div 2;

end;

procedure TForm1.Garis3D(Sender: TObject; x1,y1,z1,x2,y2,z2:integer);

begin





end;


procedure Garis3D(Sender: TObject; x1,y1,z1,x2,y2,z2:integer);




var

Form1: TForm1;

x0,y0:integer;



10. Kemudian pilih Objek ButtonGaris(Garis), klik 2x kemudian ketikan kode program

berikut:

procedure TForm1.ButtonGarisClick(Sender: TObject);

var x1,y1,z1,x2,y2,z2 : Integer;

begin

x1:=StrToInt(eX1.Text); x2:=StrToInt(eX2.Text);

y1:=StrToInt(eY1.Text); y2:=StrToInt(eY2.Text);

z1:=StrToInt(eZ1.Text); z2:=StrToInt(eZ2.Text);

UbahKoordinat3D(X3D1,Y3D1,x1,y1,z1); //titik awal

UbahKoordinat3D(X3D2,Y3D2,x2,y2,z2); //titik akhir



end;


berikut:


begin

Form1.Refresh;

eX1.Text:=''; eY1.Text:=''; eZ1.Text:='';

eX2.Text:=''; eY2.Text:=''; eZ2.Text:='';

end;


program berikut:


begin


end;




Praktikum 3






Form Name Form1

Caption Translasi 3D

Width 340

Height 135

Label1 Caption Translasi 3D

Label2 Caption Banyak Segi

Label3 Caption Nilai A

Label4 Caption Nilai b

Label5 Caption Nilai c

Edit1 Name eSegi



Edit2 Name eA

Edit3 Name eB

Edit4 Name eC

Button1 Name ButtonObyek

Caption Obyek

Button2 Name ButtonTranslasi

Caption Translasi


Caption Keluar


FixedCol 1

Fixed Row 0

RowCount 2

ColCount 2


Catatan:

Komponen StringGrid1 bisa

diakses pada Tab Control

Additional pada komponen

Pallete

5. Kemudian tekan F12, masuk ke dalam code editor, kemudian ketikan kode program

berikut dibawah uses:

Type


Matrik4N = array[1..4,1..20] of Real; {N = 20 untuk antisipasi segi banyak}




begin

x0 := ClientWidth div 2; // lebar layar maksimum

y0 := ClientHeight div 2; // tinggi layar maksimum

with StringGrid1 do

begin

Cells[0,0]:='X';

Cells[0,1]:='Y';

Cells[0,2]:='Z';

end;

end;







begin

var k : Integer;

begin


begin

X3D := X0 + k; Y3D := Y0;


end;


begin

X3D := X0; Y3D := Y0-k;


end;


begin

X3D := X0 - k; Y3D := Y0+k div 2;


end;

end;




procedure UbahKoordinatObyek3D(var Obyek2D : Matrik44; Obyek3D :

Matrik4N);

var i : integer;

begin

for i := 1 to N do

begin

Obyek2D[1,i] := X0 + Obyek3D[1,i] - Obyek3D[3,i]; // koordinat 3D

Obyek2D[2,i] := Y0 - Obyek3D[2,i] + Obyek3D[3,i] / 2; // jadi obyek 2D

end;

end;

procedure TForm1.MatrikObyek3D(Sender: TObject; var Obyek3D :

Matrik4N);

var

i,j : integer;

begin

N := StrToInt(eSegi.Text);

for i := 1 to 3 do



for j := 1 to N do

Obyek3D[i,j] := StrToInt(StringGrid1.Cells[j,i-1]);

for j := 1 to N do Obyek3D[4,j] :=1;

end;

procedure TForm1.GambarObyek3D(Sender : TObject; Obyek3D :

Matrik4N);

var i : integer;

begin

UbahKoordinatObyek3D(Obyek2D,Obyek3D);

for i := 1 to N-1 do

begin

Canvas.MoveTo(trunc(Obyek2D[1,i]), trunc(Obyek2D[2,i]));

Canvas.LineTo(trunc(Obyek2D[1,i+1]), trunc(Obyek2D[2,i+1]));

end;

Canvas.MoveTo(trunc(Obyek2D[1,N]), trunc(Obyek2D[2,N]));

Canvas.LineTo(trunc(Obyek2D[1,1]), trunc(Obyek2D[2,1]));

end;

procedure MatrikTranslasi3D(var Tv3 : Matrik44; a,b,c: real);

begin

Tv3[1,1] := 1 ; Tv3[1,2] := 0 ; Tv3[1,3] := 0 ; Tv3[1,4] := a ;

Tv3[2,1] := 0 ; Tv3[2,2] := 1 ; Tv3[2,3] := 0 ; Tv3[2,4] := b ;

Tv3[3,1] := 0 ; Tv3[3,2] := 0 ; Tv3[3,3] := 1 ; Tv3[3,4] := c ;

Tv3[4,1] := 0 ; Tv3[4,2] := 0 ; Tv3[4,3] := 0 ; Tv3[4,4] := 1 ;

end;

procedure MatrikKaliTransformasiObyek3D(var Obyek : Matrik4N; Tr :

Matrik44);

var i, j,k : integer; Hasil : matrik4N;

begin

for i := 1 to 4 do

for k := 1 to N do

begin Hasil [i,k] := 0;

for j := 1 to 4 do

Hasil[i,k] := Hasil[i,k] + Tr[i,j] * Obyek[j,k];

end;

Obyek := Hasil;

end;


procedure MatrikObyek3D(Sender: TObject; var Obyek3D :Matrik4N);

procedure GambarObyek3D(Sender : TObject; Obyek3D :Matrik4N);


var

Form1: TForm1;

Obyek2D: Matrik44;

Obyek3D :Matrik4N;



Tv3 :Matrik44;



a,b,c:real;

x0,y0,N:Integer;

11. Kemudian pilih Objek ButtonObyek(Obyek), klik 2x kemudian ketikan kode

program berikut:

procedure TForm1.ButtonObyekClick(Sender: TObject);

begin

MatrikObyek3D(Sender,Obyek3D);

GambarObyek3D(Sender,Obyek3D);

end;

12. Kemudian pilih eSegi(), klik 2x kemudian ketikan kode program berikut:

procedure TForm1.eSegiChange(Sender: TObject);

begin

if eSegi.Text='' then

begin

eSegi.SetFocus;

StringGrid1.ColCount:=2;

StringGrid1.RowCount:=3;

end

else

begin

n:=StrToInt(eSegi.Text);

StringGrid1.ColCount:=N+1;


end;

end;

13. Kemudian pilih Objek ButtonTranslasi(Translasi), klik 2x kemudian ketikan kode

program berikut:

procedure TForm1.ButtonTranslasiClick(Sender: TObject);

begin

a := StrToFloat(eA.Text);

b := StrToFloat(eB.Text);

c := StrToFloat(eC.Text);


MatrikTranslasi3D(Tv3,a,b,c);

MatrikKaliTransformasiObyek3D(Obyek3D,Tv3);


end;


program berikut:


begin




end;




MODUL VI

MENGGAMBAR ROTASI 3D DAN SCALLING 3D

I. TUJUAN


2. Mahasiswa dapat membuat rotasi obyek 3D

3. Mahasiswa dapat melakukan proses scalling 3D

II. TEORI

Berbeda dengan rotasi 2 dimensi yang menggunakan titik pusat (0,0)sebagai pusat

perputaran, rotasi 3 dimensi menggunakan sumbu koordinat sebagai pusat perputaran.

Dengan demikian ada 3 macam rotasi yang dapat dilakukan, yaitu:

Rotasi sumbu x

Rotasi sumbu y

Rotasi sumbu z

Mengingat ada 3 buah sumbu rotasi maka matriks transformasi yang digunakan juga

bergantung kepada sumbu putar. Adapun isi matriks transformasi sesuai dengan sumbu putar

didefinisikan sebagai berikut :



Praktikum 1






Form Name Form1

Caption Rotasi 3D

Width 340

Height 135

Label1 Caption Rotasi 3D

Label2 Caption Banyak Segi



Label3 Caption Sudut

Edit1 Name eSegi

Edit2 Name eSudut

Button1 Name ButtonRotasi

Caption Rotasi

Button2 Name ButtonObyek

Caption Obyek


Caption Keluar


FixedCol 1

Fixed Row 0

RowCount 2

ColCount 2


Catatan:

Komponen StringGrid1 bisa

diakses pada Tab Control

Additional pada komponen

Pallete

5. Kemudian tekan F12, masuk ke dalam code editor, kemudian ketikan kode program

berikut dibawah uses:

Type


Matrik4N = array[1..4,1..20] of Real; {N = 20 untuk antisipasi segi banyak}




begin

x0 := ClientWidth div 2; // lebar layar maksimum

y0 := ClientHeight div 2; // tinggi layar maksimum

with StringGrid1 do

begin

Cells[0,0]:='X';

Cells[0,1]:='Y';

Cells[0,2]:='Z';

end;

end;







begin

var k : Integer;

begin


begin

X3D := X0 + k; Y3D := Y0;


end;


begin

X3D := X0; Y3D := Y0-k;


end;


begin

X3D := X0 - k; Y3D := Y0+k div 2;


end;

end;




procedure UbahKoordinatObyek3D(var Obyek2D : Matrik44; Obyek3D :

Matrik4N);

var i : integer;

begin

for i := 1 to N do

begin

Obyek2D[1,i] := X0 + Obyek3D[1,i] - Obyek3D[3,i]; // koordinat 3D

Obyek2D[2,i] := Y0 - Obyek3D[2,i] + Obyek3D[3,i] / 2; // jadi obyek 2D

end;

end;

procedure TForm1.MatrikObyek3D(Sender: TObject; var Obyek3D :

Matrik4N);

var

i,j : integer;

begin

N := StrToInt(eSegi.Text);

for i := 1 to 3 do



for j := 1 to N do

Obyek3D[i,j] := StrToInt(StringGrid1.Cells[j,i-1]);

for j := 1 to N do Obyek3D[4,j] :=1;

end;

procedure TForm1.GambarObyek3D(Sender : TObject; Obyek3D :

Matrik4N);

var i : integer;

begin

UbahKoordinatObyek3D(Obyek2D,Obyek3D);

for i := 1 to N-1 do

begin

Canvas.MoveTo(trunc(Obyek2D[1,i]), trunc(Obyek2D[2,i]));

Canvas.LineTo(trunc(Obyek2D[1,i+1]), trunc(Obyek2D[2,i+1]));

end;

Canvas.MoveTo(trunc(Obyek2D[1,N]), trunc(Obyek2D[2,N]));

Canvas.LineTo(trunc(Obyek2D[1,1]), trunc(Obyek2D[2,1]));

end;

procedure MatrikRotasiSumbuZ(var R : Matrik44; sudut: real);

Var radian : real;

Begin

radian := sudut / 180 * 3.14;

R[1,1] := cos(radian); R[1,2] := -sin(radian); R[1,3] := 0 ; R[1,4] := 0;

R[2,1] := sin(radian); R[2,2] := cos(radian); R[2,3] := 0 ; R[2,4] := 0;

R[3,1] := 0 ; R[3,2] := 0 ; R[3,3] := 1 ; R[3,4] := 0;

R[4,1] := 0 ; R[4,2] := 0 ; R[4,3] := 0 ; R[4,4] := 1;

end;

procedure MatrikKaliTransformasiObyek3D(var Obyek : Matrik4N; Tr :

Matrik44);

var i, j,k : integer; Hasil : matrik4N;

begin

for i := 1 to 4 do

for k := 1 to N do

begin Hasil [i,k] := 0;

for j := 1 to 4 do

Hasil[i,k] := Hasil[i,k] + Tr[i,j] * Obyek[j,k];

end;

Obyek := Hasil;

end;


procedure MatrikObyek3D(Sender: TObject; var Obyek3D :Matrik4N);

procedure GambarObyek3D(Sender : TObject; Obyek3D :Matrik4N);


var

Form1: TForm1;

Obyek2D,R3:Matrik44;

Obyek3D :Matrik4N;

N: Integer;

sudut:real;





Tv3 :Matrik44;

a,b,c:real;

x0,y0:Integer;

11. Kemudian pilih Objek ButtonObyek(Obyek), klik 2x kemudian ketikan kode

program berikut:

procedure TForm1.ButtonObyekClick(Sender: TObject);

begin



end;

12. Kemudian pilih eSegi(), klik 2x kemudian ketikan kode program berikut:

procedure TForm1.eSegiChange(Sender: TObject);

begin

if eSegi.Text='' then

begin

eSegi.SetFocus;

StringGrid1.ColCount:=2;


end

else

begin

n:=StrToInt(eSegi.Text);

StringGrid1.ColCount:=N+1;


end;

end;

13. Kemudian pilih Objek ButtonRotasi(Rotasi), klik 2x kemudian ketikan kode program

berikut:

procedure TForm1.ButtonRotasiClick(Sender: TObject);

begin

sudut:=StrToFloat(eSudut.Text);


MatrikRotasiSumbuZ(R3,sudut);

MatrikKaliTransformasiObyek3D(Obyek3D,R3);

Canvas.Pen.Color := clGreen;


end;


program berikut:




begin


end;




MODUL VII

MENGGAMBAR CHART

I. TUJUAN

1. Mahasiswa dapat menggambar objek CHART

2. Mahasiswa dapat memilih CHART

II. TEORI

Chart adalah bagan grafik yang digunakan unuk mempresentasikan suatu data ke

dalam suatu bentuk yang lebih menarik. Tujuan dibuatnya Chart adalah untuk mempermudah

membaca sekumpulan data.

Perancangan program untuk penggambaran Chart Animasi dapat dilakukan dengan

langkah-langkah seperti di bawah ini.

Praktikum 01

1. Jalankan Delphi


3. Setelah muncul Form baru pada halaman Delphi, maka tambahkan icon Button1,

Button2, DBCHart, dan Timer pada halaman Form1.



Form Name Form1

Caption Chart


Caption &About




Caption &Close

Timer Interval 100

5. Klik 2x Pada DBChart, maka akan muncul tampilan berikut:

6. Perhatikan pada bagian Form Editing DBChart1, klik 1x pada button Add, sehingga

muncul tampilan.

7. Klik pada icon Line dan kemudian klik OK, sehingga akan muncul tampilan.

8. Beri nama series dengan mengklik Button Title, misalkan Jakarta



9. Ulangi kembali langkah no 5 dan tambahkan kota Yogyakarta, Bandung, Semarang

10. Kemudian klik pada PageControl Axis, sehingga muncul tampilan

11. Lalu pada Axis klik PageControl Title, sehingga muncul tampilan

12. Atur bottom



13. Kemudian klik pada Pagecontrol Title

14. Klik button close maka akan muncul

15. Kemudian klik 2x pada timer, masukan kode berikut

procedure TForm1.Timer1Timer(Sender: TObject);

Var i: longint;

tmp: double;

begin

with DBChart1 do

begin



for i := 0 to seriescount-1 do

with Series[i] do

begin

tmp := xvalues[1] - xvalues[0];

delete(0);

addxy(xvalues.Last+tmp,YValues.Last+random(100)-50,'',clteecolor);

end;

repaint

end;

end;

16. Kemudian klik 1x pada halaman form, lalu kilk sekalipada PageControl Event,

kemudian klik 2x padaOnActive, masukan kode program berikut

procedure TForm1.FormActivate(Sender: TObject);

var i,j : integer;

begin

with DBChart1 do

for i := 0 to SeriesCount-1 do

for j := 1 to 15 do

series[i].AddXY(j,random(5),'',clteecolor);

end;

17. Tambahkan kode program berikut


begin

MessageDlg('1231313131',mtInformation,[MBOK],0);

end;


begin

close;

end;

18. Jalankan F9



MODUL VIII

MEMBUAT GRAFIK ANIMASI

I. TUJUAN

1. Mahasiswa dapat menggambar objek Animasi

2. Mahasiswa dapat membuat program sederhana

II. TEORI

Animasi yang akan dibuat pada bab ini adalah sebuah animasi pergerakan bola yang

memantul dari atas sampai ke bawah. Perancangan program untuk animasi bola pantul dapat

dilakukan dengan langkah seperti di bawah ini:

Praktikum 01

1. Jalankan Delphi

Modul Grafika Komputer

Documents

Transcript of Modul Grafika Komputer