Modul Grafika Komputer

Modul Praktikum Grafika Komputer
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.
Tool Bar
Menu bar
Component
Palette
Object
TreeView
Code
Explorer
Form
Designer
Object
Inspector
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.

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

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
Page 2

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.
Page 3
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:
Page 4

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

Page 5

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
Page 6

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
Page 7
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
Page 8

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<0 maka titik selanjutnya (xk+1, yk) dan
pk+1 = pk +2dy
bila tidak maka titik selanjutnya adalah (xk +1, yk +1) dan pk+1 = pk +2dy2dx.
f. Ulangi langkah nomor e untuk menentukan posisi piksel selanjutnya, sampai x = x1

dan y = y1
Praktikum 1
3. Rancanglah Form seperti gambar dibawah ini
4. Isi Properti setiap komponen adalah:

Komponen
Form
Label1
Properti
Nilai
Name
Form1
Caption
Algoritma Garis
Width
340
Height
135
Caption
Menggambar
Garis
Menggunakan Algoritma DDA,

Page 9

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
Name
edY1
Text
Kosongkan
Name
edX2
Text
Kosongkan
Name
edY2
Text
Kosongkan
Name
edXAwal
Text
Kosongkan
Name
edXAkhir
Text
Kosongkan
Name
edA
Text
Kosongkan
Name
edB
Text
Kosongkan
Name
DDA
Caption
DDA
Name
Bresenham
Caption
Bresenham
Name
Polinom
Caption
Polinom
Name
Ulang
Caption
Ulang
Name
Keluar
Caption
Keluar
Edit2
Edit3
Edit4
Edit5
Edit6
Edit7
Edit8
Button1
Button2
Button3
Button4
Button5
Page 10

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;
Page 11

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;
Page 12

10. Klik 2x pada Button5(Keluar), setelah muncul halaman CodeEditor, maka tuliskan
procedure TForm1.KeluarClick(Sender: TObject);
begin
CLOSE;
end;
Praktikum 2

Komponen
Form
Properti
Name
Nilai
Form1
Page 13
Label1
Caption
Lingkaran Polinom
Width
340
Height
135
Caption
Menggambar
Lingkaran
Polinom Dengan Titik Pusat

(0,0)
Label2
Caption
Radius
Edit1
Name
eR
Caption
Dikosongan
Name
Button1
Caption
8 Warna
Name
Button2
Caption
Ulang
Name
Button3
Caption
Keluar
Button1
Button2
Button3
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
Page 14

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;
Page 15
Page 16
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:
Page 17

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
Page 18

Komponen
Form
Label1
Properti
Nilai
Name
Form1
Caption
Translasi Segitiga
Width
340
Height
135
Caption
Menggambara
TRANSLASI
Dasar
Label2
Caption
Nilai A
Label3
Caption
Nilai B
Edit1
Name
eNilaiA
Edit2
Name
eNilaiB
Button1
Name
Button1
Caption
Segitiga
Name
Button2
Caption
Translasi
Name
Ulang
Caption
Ulang
Name
Keluar
Caption
Keluar
Name
StringGrid1
FixedCol
Fixed Row
RowCount
ColCount
Options goEditing
True
Button2
Button3
Button4
StringGrid1
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;
Page 19

//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
Page 20

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
Page 21

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.
Page 22
Praktikum 2

Komponen
Form
Label1
Properti
Nilai
Name
Form1
Caption
Rotasi Segitiga
Width
340
Height
135
Caption
Menggambar
ROTASI
pada
Titik (0,0)
Page 23

Label2
Caption
Sudut
Edit1
Name
eSudut
Button1
Name
ButtonSegitiga
Caption
Segitiga
Name
ButtonRotasi
Caption
Rotasi
Name
ButtonKeluar
Caption
Keluar
Name
StringGrid1
FixedCol
Fixed Row
RowCount
ColCount
Options goEditing
True
Button2
Button3
StringGrid1
Catatan:
uses
Const N = 3;
//deklarasi matriks
Type
begin
end;
Page 24

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;
Page 25

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
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);
Page 26

end;
14. Kemudian pilih Objek ButtonKeluar(Keluar), klik 2x kemudian ketikan kode
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.
Page 27
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
Page 28

Komponen
Form
Label1
Properti
Nilai
Name
Form1
Caption
Scalling Segitiga
Width
340
Height
135
Caption
Menggambar SCALLING pada

Titik (0,0)
Label2
Caption
Label3
Caption
Edit1
Name
eX
Edit2
Name
eY
Button1
Name
ButtonSegitiga
Caption
Segitiga
Name
ButtonScalling
Caption
Scalling
Name
ButtonKeluar
Caption
Keluar
Name
StringGrid1
FixedCol
Fixed Row
RowCount
ColCount
Options goEditing
True
Button2
Button3
StringGrid1
Catatan:
Page 29
uses
Const N = 3;
//deklarasi matriks
Type
begin
end;
var
k:integer;
begin
end;
begin
with StringGrid1 do
begin
Page 30

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;
Page 31

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;
14. Kemudian pilih Objek ButtonKeluar(Keluar), klik 2x kemudian ketikan kode
program berikut:
begin
end;
Page 32
Praktikum 2

Komponen
Form
Label1
Properti
Nilai
Name
Form1
Caption
Pencerminan Segitiga
Width
340
Height
135
Caption
Menggambar
Pencerminan
Sumbu X dan Sumbu Y

Button1
Button2
Name
ButtonSegitiga
Caption
Segitiga
Name
ButtonCerminX
Page 33
Button3
Button4
StringGrid1
Caption
Cermin X
Name
ButtonCerminY
Caption
Cermin Y
Name
ButtonKeluar
Caption
Keluar
Name
StringGrid1
FixedCol
Fixed Row
RowCount
ColCount
Options goEditing
True
Catatan:
uses
Const N = 3;
//deklarasi matriks
Type
begin
end;
var
k:integer;
begin
Page 34

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
Page 35

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);
Page 36

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
Page 37


Komponen
Form
Properti
Nilai
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
Name
ButtonShearing
Caption
Shearing
Name
ButtonUlang
Caption
Ulang
Name
ButtonKeluar
Caption
Keluar
Name
StringGrid1
FixedCol
Fixed Row
RowCount
ColCount
Options goEditing
True
Button2
Button3
Button4
StringGrid1
Catatan:
Page 38

uses
Const N = 4; {Segi empat}
//deklarasi matriks
Type
begin
end;
var
k:integer;
begin
end;
begin
Page 39

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);
Page 40

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 :='';
Page 41

eNilaiB.Text :='';
for i := 1 to 2 do
for j := 1 to 4 do
StringGrid1.Cells[j,i-1]:='';
end;
program berikut:
begin
end;
Page 42
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.
Page 43

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
Page 44

Komponen
Form
Properti
Nilai
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
Name
ButtonUlang
Caption
Ulang
Name
ButtonKeluar
Caption
Keluar
Button2
Button3
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;
Page 45

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
Page 46

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
Page 47


Komponen
Form
Properti
Nilai
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
Name
ButtonUlang
Caption
Ulang
Name
ButtonKeluar
Caption
Keluar
Button2
Button3
begin
Page 48

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);

Page 49

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;
Page 50
Praktikum 3

Komponen
Form
Properti
Nilai
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
Page 51

Edit2
Name
eA
Edit3
Name
eB
Edit4
Name
eC
Button1
Name
ButtonObyek
Caption
Obyek
Name
ButtonTranslasi
Caption
Translasi
Name
ButtonKeluar
Caption
Keluar
Name
StringGrid1
FixedCol
Fixed Row
RowCount
ColCount
Options goEditing
True
Button2
Button3
StringGrid1
Catatan:
Komponen
diakses
StringGrid1
pada
Additional
Tab
pada
bisa
Control
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;
Page 52

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
Page 53

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;
Page 54

a,b,c:real;
x0,y0,N:Integer;
11. Kemudian pilih Objek ButtonObyek(Obyek), klik 2x
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
Page 55

end;
Page 56
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 :
Page 57
Praktikum 1

Komponen
Form
Properti
Nilai
Name
Form1
Caption
Rotasi 3D
Width
340
Height
135
Label1
Caption
Rotasi 3D
Label2
Caption
Banyak Segi
Page 58

Label3
Caption
Sudut
Edit1
Name
eSegi
Edit2
Name
eSudut
Button1
Name
ButtonRotasi
Caption
Rotasi
Name
ButtonObyek
Caption
Obyek
Name
ButtonKeluar
Caption
Keluar
Name
StringGrid1
FixedCol
Fixed Row
RowCount
ColCount
Options goEditing
True
Button2
Button3
StringGrid1
Catatan:
Komponen
diakses
StringGrid1
pada
Additional
Tab
pada
bisa
Control
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;
Page 59

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
Page 60

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;
Page 61

Tv3 :Matrik44;
a,b,c:real;
x0,y0:Integer;
11. Kemudian pilih Objek ButtonObyek(Obyek), klik 2x
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:
Page 62

begin
end;
Page 63
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.

Komponen
Form
Button1
Properti
Nilai
Name
Form1
Caption
Chart
Name
Button1
Caption
&About
Page 64

Button2
Timer
Name
Button2
Caption
&Close
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

Page 65
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

Page 66
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
Page 67

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
Page 68
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
3. Setelah muncul Form baru pada halaman Delphi, maka tambahkan icon Button1,
Button2, Button3, ScrollBar1, ScrollBar2, Label1, Label2, Panel, dan Timer
4. Atur properti komponen
Page 69
5. Pada panel1 tambahkan Shape1 (dari tab Additional)

6. Atur properti shape pada object Inspector sebagai berikut:
Page 70

7. Klik 2x pada Button1 (Mulai), lalu masukan kode:
Timer1.Enabled :=TRUE;
8. Klik 2x pada Button2 (Berhenti) lalu masukan kode:
Timer1.Enabled :=FALSE;
9. Klik 2x pada Button3 (Selesai) lalu masukan kode:
Close;
10. Klik 2x pada ScrollBar1(Sb_Ukur) lalu masukan kode:
Bola.Width:=Sb_Ukur.Position;
Bola.Height :=Sb_Ukur.Position;
11. Klik 2x pada ScrollBar2 (Sb_Cepat) lalu masukan kode:
Timer1.Interval := 101 Sb_Cepat.Position;
12. Klik sekali pada halaman Form, lalu klik sekali pada PageControl Events di dalam
halaman Object Inspector. Klik 2x pada sel yang sejajar dengan item OnActive,
setelah itu muncul halaman editor, tuliskan kode berikut :
Randomize;
Bola.Left :=Random(panel1.ClientWidth-Bola.Width);
Bola.Top :=random(panel1.ClientHeight-bola.Height);
Kanan :=Boolean(random(2));
Bawah :=Boolean(random(2));
Klik 2x pada Timer1
setelah muncul halaman editor, tuliskan kode berikut:
if Kanan then
begin
Bola.Left := Bola.Left+1;
if Bola.Left + Bola.Width >= Panel1.ClientWidth then
begin
Kanan := False;
Bola.Brush.Color :=clblue;
end
end
else
Begin
Bola.Left :=Bola.left -1;
if Bola.Left <= 0 then
Begin
Kanan := True;
Bola.Brush.Color:=clgreen;
end
end;
Page 71

if Bawah then
begin
Bola.Top :=Bola.Top +1;
if Bola.top +Bola.Width >= Panel1.ClientHeight then Bawah := False;
end
else
Begin
Bola.Top :=Bola.Top - 1;
if Bola.Top <= 0 then Bawah :=True;
end;
13. Tambahkan kode program di bagian atas Var:

var
Form1: TForm1;
Kanan: Boolean;
Bawah : Boolean;
14. Jalankan
Page 72
MODUL IX
MEMBUAT GRAFIK ANIMASI
I. TUJUAN
II. TEORI
Animasi yang akan dibuat pada bab ini adalah sebuah animasi pergerakan objek mobil
yang bergerak dari atas kiri ke kanan. Perancangan program untuk animasi mobil dapat
dilakukan dengan langkah seperti di bawah ini:
Praktikum 01
1. Jalankan Delphi
3. Buatlah sebuah gambar jalan.Bmp dengan paint.
4. Buatlah sebuah objek mobil, simpan dengan nama Mobil.Bmp
Page 73

5. Rancang tampilan form seperti di bawah ini, masukan sebuah timer set interval timer
menjadi 100.
6. Masukan kode program berikut

unit Unit1;
interface
uses
Dialogs, ExtCtrls;
type
TForm1 = class(TForm)
Timer1: TTimer;
procedure FormCreate(Sender: TObject);
procedure FormDestroy(Sender: TObject);
procedure Timer1Timer(Sender: TObject);
private
{ Private declarations }
public
{ Public declarations }
end;
var
Form1: TForm1;
bmpgerak,bmplatar,bmplatar1:tbitmap;
posisi:integer;
implementation
{$R *.dfm}
begin
bmplatar:=tbitmap.create;
bmplatar.loadfromfile('jalan.bmp');
bmplatar1:=tbitmap.create;
Page 74

bmplatar1.assign(bmplatar);
bmpgerak:=tbitmap.Create;
bmpgerak.loadfromfile('mobil.bmp');
posisi:=0;
end;
procedure TForm1.FormDestroy(Sender: TObject);
begin
bmpgerak.Free;
bmplatar.Free;
bmplatar1.Free;
end;
var
recttujuan,rectasal:trect;
begin
bmplatar1.Assign(bmplatar);
rectasal:=rect(0,0,bmpgerak.width,bmpgerak.Height);
recttujuan:=rect(posisi,105,posisi+bmpgerak.Width, 105+bmpgerak.Height);
bmplatar1.canvas.CopyRect(recttujuan,bmpgerak.Canvas,rectasal);
Canvas.Draw(0,0,bmplatar1);
posisi:=posisi+1;
if posisi >= clientWidth then
begin
posisi :=0; close;
form1.Free;
end;
end;
end.
7. Jalankan
Page 75
MODUL X
MEMBUAT GRAFIK ANIMASI SOLAR SYSTEM
I. TUJUAN
II. TEORI
Animasi yang akan dibuat pada bab ini adalah sebuah animasi pergerakan objek
planer berputar. Perancangan program untuk animasi planet berputar dapat dilakukan dengan
langkah seperti di bawah ini:
Praktikum 01
1. Jalankan Delphi
3. Rancanglah tampilan Form seperti gambar di bawah ini
4. Masukan kode program di bawah ini

unit Unit1;
interface
uses
Dialogs, ExtCtrls, StdCtrls;
type
TForm1 = class(TForm)
Page 76

Panel1: TPanel;
Button1: TButton;
Shape1: TShape;
orbit1: TShape;
merah: TShape;
Timer1: TTimer;
procedure Button1Click(Sender: TObject);
procedure Timer1Timer(Sender: TObject);
private
{ Private declarations }
public
{ Public declarations }
end;
var
Form1: TForm1;
theta,d,c:real;
constanta:integer;
implementation
{$R *.dfm}
begin
constanta:=5;
merah.Visible:=true;
Timer1.Enabled:=TRUE;
theta:=0.0; c:=1/100;
d:=2*PI;
end;
var x1,y1:real;
begin
if (theta<=(2*d)) then
begin
x1:=((orbit1.width)/2)+(orbit1.Left)+((orbit1.width)/2)*cos(6*theta);
y1:=((orbit1.height/2)+(orbit1.top))-(orbit1.height/2)*sin(6*theta);
merah.left:=trunc(x1)-constanta; merah.Top:=trunc(y1)-constanta;
theta:=theta+c; end; if (theta>=2*d) then theta:=0.0; end;
end.
5. Jalankan
Page 77

Modul Grafika Komputer

Diunggah oleh

Informasi Dokumen

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Modul Grafika Komputer

Diunggah oleh

Hak Cipta:

Format Tersedia

Modul Praktikum Grafika Komputer

1. Mahasiswa dapat mengenal Elemen IDE Delphi

Gambar 1.1 IDE Delphi

tertentu, misalnya menyimpan

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

Modul Praktikum Grafika Komputer

Menambahkan tulisan dalam form

Berupa tombol tekan dengan tulisan

Kotak isian untuk mengisikan teks atau

Tito Sugiharto, M.Eng - Universitas Kuningan 2015

Modul Praktikum Grafika Komputer

Untuk menampilkan gambar yang dimuat

Untuk membuat event yang berulang

Untuk menampilkan kotak dialog untuk

: digunakan untuk menempatkan posisi akhir garis

Tito Sugiharto, M.Eng - Universitas Kuningan 2015

Modul Praktikum Grafika Komputer

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

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

Modul Praktikum Grafika Komputer

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

Tito Sugiharto, M.Eng - Universitas Kuningan 2015

Modul Praktikum Grafika Komputer

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

Modul Praktikum Grafika Komputer

Tito Sugiharto, M.Eng - Universitas Kuningan 2015

Modul Praktikum Grafika Komputer

Modul Praktikum Grafika Komputer

bila pk<0 maka titik selanjutnya (xk+1, yk) dan

f. Ulangi langkah nomor e untuk menentukan posisi piksel selanjutnya, sampai x = x1

4. Isi Properti setiap komponen adalah:

Menggunakan Algoritma DDA,

Modul Praktikum Grafika Komputer

Tito Sugiharto, M.Eng - Universitas Kuningan 2015

Modul Praktikum Grafika Komputer

Modul Praktikum Grafika Komputer

Tito Sugiharto, M.Eng - Universitas Kuningan 2015

Modul Praktikum Grafika Komputer

4. Isi Properti setiap komponen adalah:

Tito Sugiharto, M.Eng - Universitas Kuningan 2015

Modul Praktikum Grafika Komputer

Polinom Dengan Titik Pusat

Modul Praktikum Grafika Komputer

Tito Sugiharto, M.Eng - Universitas Kuningan 2015

Modul Praktikum Grafika Komputer

Tito Sugiharto, M.Eng - Universitas Kuningan 2015

Modul Praktikum Grafika Komputer

Tito Sugiharto, M.Eng - Universitas Kuningan 2015

Modul Praktikum Grafika Komputer

dan pivot point (xp,yp) dimana objek akan

Tito Sugiharto, M.Eng - Universitas Kuningan 2015

Modul Praktikum Grafika Komputer

Modul Praktikum Grafika Komputer

Modul Praktikum Grafika Komputer

Modul Praktikum Grafika Komputer

kemudian ketikan kode

Tito Sugiharto, M.Eng - Universitas Kuningan 2015

Modul Praktikum Grafika Komputer

4. Isi Properti setiap komponen adalah:

Modul Praktikum Grafika Komputer

Modul Praktikum Grafika Komputer

Modul Praktikum Grafika Komputer

kemudian ketikan kode

procedure TForm1.ButtonRotasiClick(Sender: TObject);