STMIK Kharisma Karawang - Modul Praktikum Grafika

Komputer

MODUL PRAKTIKUM
GRAFIKA KOMPUTER

STMIK KHARISMA KARAWANG

Disusun oleh

WAWAN KUSDIAWAN, M.Kom.

1 Wawan Kusdiawan, M.Kom

 STMIK Kharisma Karawang - Modul Praktikum Grafika
Komputer

PERTEMUAN I
PENGENALAN LAZARUS

I. PENDAHULUAN
Lazarus adalah sebuah IDE (Integrated Development Environment), lingkungan
pengembangan perangkat lunak yang terintegrasi sehingga pembuatan software
menjadi RAPID, dapat diselesai dalam waktu singkat. Lazarus bersifat open
source, tersedia untuk banyak platform terutama Linux, Windows dan Macintosh.

Bahasa pamrograman yang dijadikan landasan dalam Lazarus adalah Pascal.

Karena itu, saat pengembangan aplikasi, apa yang disediakan oleh Lazarus
terasa sebagaimana yang terdapat di Delphi, IDE Pascal visual yang terkenal di
lingkungan Windows.

Tampilan awal dari Lazarus diperlihatkan pada gambar berikut.

Berikut adalah penjelasan mengenai bagian-bagian yang terdapat dalam Lazarus

dan akan sering digunakan dalam pengembangan perangkat lunak:

1. Menu utama dan daftar komponen

Menu-menu penting dalam pemanfaatan Lazarus ditampilkan pada bagian paling

atas dari jendela Lazarus. Seperti pada software lain, menu File, Edit, Search, View,
Window dan Help terdapat pada Lazarus dan dengan mudah dipahami kegunaan
dan cara menggunakannya. Menu lain yang akan sering digunakan adalah Project
dan Run. Menu Project digunakan untuk membuka jendela tertentu untuk mengatur
proyek pengembangan software yang sedang dilakukan. Dalam Lazarus, setiap
program komputer yang dikembangkan dinamakan project. Menu Run digunakan

2 Wawan Kusdiawan, M.Kom

 STMIK Kharisma Karawang - Modul Praktikum Grafika
Komputer

untuk menjalankan, mentrace atau menghentikan eksekusi program atau proyek.

Bagian di sebelah kanan toolbar tadi, di bawah menu utama adalah daftar
komponen yang dapat digunakan untuk membangun aplikasi visual.

Komponen-komponen ini dikelompokkan berdasarkan fungsinya. Pada tab Standard

terdapat komponen- komponen untuk membuat tampilan standard dari jendela
aplikasi seperti tombol dan teks. Tab Data Controls berisi komponen-komponen
untuk mengendalikan akses ke suatu database. Sedangkan akses ke database
tersebut dilakukan melalui komponen yang terdapat pada tab Data Accsess.

Di bawah daftar menu, di sebelah kiri, terdapat beberapa toolbar. Letakkan kursor
mouse di atasnya, dan anda akan langsung mengetahui kegunaannya. Toolbar ini
digunakan untuk membuka proyek, menyimpan proyek, mengeksekusi proyek dan
beberapa hal lain terkait pengerjaan proyek.

2. Form

Di bawah menu utama dan daftar komponen terdapat sebuah jendela, biasanya
berjudul Form1. Jendela ini adalah bagian utama dari sebuah aplikasi visual. Form
menurupakan komponen paling penting dalam pemrograman visual. Di atas form
inilah diletakkan komponen-komponen lain.

Pada sisi kiri terdapat sebuah kotak dengan judul Object Inspector. Jendela ini
digunakan untuk mengatur perilaku dari suatu kontrol atau komponen yang telah
diletakkan di atas suatu Form atau jendela aplikasi yang sedang kita kembangkan.

Setiap jenis komponen akan mempunyai properti yang berbeda. Properti-properti ini
dapat diubah pada saat pengembangan memanfaatkan object Inspector atau saat
eksekusi program dengan menuliskan perintah-perintah dalam kode program.
3. Properties Window

3 Wawan Kusdiawan, M.Kom

 STMIK Kharisma Karawang - Modul Praktikum Grafika
Komputer

Properties window terdiri dari dua bagian yaitu Properties dan events. Tab
Properties berisi daftar properti dari komponen sekaligus digunakan untuk
mengatur/seting nilai properti komponen dan tab events berfungsi untuk
memanggil method / event dari komponen yang akan diisi codingnya.

4. Code Editor

Bagian lain yang sangat penting adalah Source Editor. Di sinilah programmer
menuliskan baris-baris kode program untuk mengatur apa yang harus dilakukan oleh
Aplikasi. Kode program ditulis mengikuti aturan dalam bahasa Pascal.

5. Message

4 Wawan Kusdiawan, M.Kom

 STMIK Kharisma Karawang - Modul Praktikum Grafika
Komputer

Pada bagian paling bawah terdapat sebuah jendela Messages. Pada jendela ini
akan muncul pesanpesan tertentu saat eksekusi program terutama jika terjadi
kesalahan atau error.

6. Project Inspector

Berisi daftar file dan unit dalam project yang sedang dikerjakan.

II. PRAKTEK
2.1 Mengenal Program Aplikasi Console
Pembuatan program Pascal sederhana berbasis console dimulai dengan memilih
menu File | New... pada jendela New, pilih Program (di bawah bagian Project).
Klik OK. Masukkan contoh kode program berikut:

var x, y: integer;
begin
x := 10;
y := 7;
writeln('Nilai X = ', x);
writeln('Nilai Y = ', x);
writeln('Hasil kali XY = ' , x * y);
end.

Dimana meletakkan kode tersebut? Pada Lazarus telah terdapat sebagian kode
yang dibuat otomatis. Tugas kita adalah melengkapinya. Jelasnya perhatikan
tampikan Source Editor berikut:

5 Wawan Kusdiawan, M.Kom

 STMIK Kharisma Karawang - Modul Praktikum Grafika
Komputer

Simpan program tersebut, misalnya dengan nama testpascal. Pastikan anda tidak
lupa di direktori mana meletakkan file program tersebut.

Compile program tersebut dengan memilih menu Run | Build atau tekan Ctrl + F9.

Berikutnya silakan bukan Console Linux (atau Windows). Pindahkan ke direktori

dimana file testpascal di atas disimpan. Jalankan program yang telah dibuat tadi
dengan menuliskan “./testpascal”, tanpa tanda pentik. Hasilnya diperlihatkan pada
gambar berikut:

2.2 Pemrograman Visual

Pemrograman Pascal secara visual dimula dengan memilih menu File | New … dan
pada jendela New pilih Application (di bawah bagian Project), Akhiri dengan klik
OK.

Sebagaimana dijelaskan di awal, akan diperoleh sebuah form bernama Form1. Di

atas form inilah diletakkan beberapa komponen lain yang akan digunakan dalam
aplikasi. Form1 adalah form pertama, form berikutnya akan bernama Form2 dan
seterusnya atau nama lain jika kita mengubahnya.

Sekarang akan kita letakkan 1 buah komponen Button ke atas form dan atur
beberapa properti. Caranya adalah:
1. Pada tab Standard, klik komponen TButton. Pastikan komponen tersebut
dalam kondisi terpilih. Klik Form1 pada posisi dimana obyek Button tersebut
akan diletakkan. Hasilnyaseperti gambar berikut:

6 Wawan Kusdiawan, M.Kom

 STMIK Kharisma Karawang - Modul Praktikum Grafika
Komputer

2. Pastikan obyek Button1 terpilih. Pada Object Inspector, ubah properti Caption
dari Button1 menjadi Keluar.

3. Ubah properti Name menjadi TombolKeluar.

4. Masih pada Object Inspector. Pilih obyek Form1:TForm1. Ubah properti Name
menjadi FormUtama. Ubah properti Caption menjadi “Program Pertama
dengan Lazarus”. Ubah properti Height menjadi 200 dan Width menjadi 400.
5. Drag n drop (klik, geser dan letakkan di suatu tempat) obyek TombolKeluar di
atas FormUtama sesuai dengan kebutuhan. Tampilan dari FormUtama dapat
menjadi:

7 Wawan Kusdiawan, M.Kom

 STMIK Kharisma Karawang - Modul Praktikum Grafika
Komputer

Penanganan tampilan dari aplikasi ini dianggap selesai. Berikutnya adalah penulisan
kode program untuk TombolKeluar. Saat aplikasi dijalankan, ketika pengguna men-
klik TombolKeluar maka aplikasi akan tertutup. Caranya adalah:
1. Klik dua kali (double click) TombolKeluar sehingga tampil Source Editor.
Kursor mouse langsung pada diletakkan dimana kita harus menuliskan kode
program yang diinginkan.
2. Tulis kode “close;” (tanpa tanda petik), lengkapnya adalah:

procedure TFormUtama.TombolKeluarClick(Sender: TObject);

begin
close;
end;

Simpan proyek ini, beri nama ProjectPertama untuk projectnya dan UnitPertama
untuk kode program. Eksekusi dengan menekan F9 atau melalui menu Run | Run
atau klik Toobar Run.

Coba klik tombol Keluar. Harusnya aplikasi tertutup dan selesai...

2.3 Operasi Input dan Output teks

a. Buatlah rancangan form seperti berikut, atur properti masing-masing komponen :

b. Masukan kode programnya seperti berikut :

8 Wawan Kusdiawan, M.Kom

 STMIK Kharisma Karawang - Modul Praktikum Grafika
Komputer

procedure TFormTeks.ButtonTampikanClick(Sender: TObject);

begin
editTamplan.text := 'Selamat belajar Lazarus';
end;

c. Simpan dengan nama projectLatihan1 dan unitLatihan1 Lalu coba jalankan,

dan amati hasilnya
d. Selanjutnya tambahkan form baru dengan cara klik menu File | New Form, lalu
desain tampilanya seperti berikut, atur properti masing-masing komponen

e. Simpan dengan nama unitLatihan2, lalu masukan kode program pada masing-
masing button.

III. TUGAS

Buatlah aplikasi sederhana untuk menampilkan data mahasiswa terdiri dari NIM,
Nama, program Studi, Jenjang yang diinput di komponen edit dan ditmapilkan
hasilnya di label. Tambahkan tombol tampil, hapus dan keluar sperti berikut :

9 Wawan Kusdiawan, M.Kom

 STMIK Kharisma Karawang - Modul Praktikum Grafika
Komputer

PERTEMUAN II
VISUAL COMPONENT LIBRARY (VCL)

I. PENDAHULUAN

Visual Component Library (VCL) adalah hierarki dari class (object) yang ditulis
dengan object Pascal. Pada Modul sebelumnya kita telah mencoba memakai
beberapa komponen atau kontrol dalam aplikasi seperti Button, Label, Edit dan
lain-lain, pada modul ini kita akan mengenal beberapa VCL yang lain khususnya
untuk komponen pilihan, serta cara mengaksesnya.

Komponen Delphi terdiri dari dua jenis yaitu Visual dan Non Visual. Komponen
yang bersifat Visual dipakai untuk membangun antarmuka dengan pemakai.
Sedangkan komponen non visual biasanya digunakan untuk mengakses sebuah
fungsi atau system. Pada saat pembuatan aplikasi, kedua tipe komponen
tersebut dapat dilihat, tetapi komponen non visual tidak terlihat pada saat aplikasi
dijalankan. Komponen non visual dapat dengan mudah diidentifikasi, karena
tidak dapat diubah ukurannya dan terlihat sama seperti pada saat memilih dan
meletakkannya didalam form.

Untuk memasukan data yang bersifat pilihan atau option terdapat perbedaan
prinsip pada pemrograman konvensional (berbasis dos) dengan pada
pemrograman visual, pada pemrograman berbasis DOS (konvensional) pilihan
biasanya diinput dengan mengetik nilai pilihan, sedangakna pada pemrograman
visual pilihan diinput dengan mengklik (memilih) opsi yang tersedia. Berikut
beberapa komponen yang dapat digunakan untuk pilihan dalam pemrograman
visual :

RadioButton, RadioGroup, GroupBox dan CheckBox.

RadioButton
 RadioButton digunakan untuk menyajikan suatu tampilan pilihan

 Sedangkan nilai hasil pilihan adalah Boolean yang berarti True bila dipilih dan
False jika tidak dipilih. Untuk perintah ini penerapannya dengan
menggunakan pencabangan bersyarat If …. Then … Else.
 Terdapat pada Tab Standard, dengan icon pada control palette adalah :

CheckBox

 Komponen CheckBox untuk memilih atau membatalkan pilihan, caranya

dengan mengklik pada checkbox.
 CheckBox memberikan dua pilihan atau lebih kepada pemakai. Contohnya
dalam memilih hobi seseorang.
 Terdapat pada Tab Standard, dengan icon pada control palette adalah :

10 Wawan Kusdiawan, M.Kom

 STMIK Kharisma Karawang - Modul Praktikum Grafika
Komputer

GroupBox

 Kompoen GroupBox adalah sebuah container yang dipakai untuk

mengelompokkan kontrol-kontrol dan container (Radio Button, CheckBox dan
lain-lain) yang berhubungan.
 Terdapat pada Tab Standard, dengan icon pada control palette adalah :

RadioGroup

 RadioGroup hampir sama dengan RadioButton, bedanya mempunyai nilai

pilihan dari (0 ... n) jumlah pilihan. Untuk memasukan pilihan menggunakan
properti itms. Untuk perintah ini penerapannya menggunakan pencabangan
bersyarat Case … Of.
 Terdapat pada Tab Standard, dengan icon pada control palette adalah :

ComboBox, ListBox dan Memo

ComboBox

 ComboBox mengkombinasikan kotak edit dengan listbox, anda hanya dapat

memilih salah satu pilihan yang telah tersedia. Dengan ComboBox, selain
dari pilihan yang tersedia kita juga dapat mengetikkan teks. Item data pada
combobox dapat berasal dari properties atau dari field yang ada di table
 Terdapat pada Tab Standard, dengan icon pada control palette adalah :

ListBox

 ListBox menampilkan daftar dan anda dapat memilih item – itemnya.

 Terdapat pada Tab Standard, dengan icon pada control palette adalah :

Memo

 Memo dipakai untuk memasukkan data yang lebih dari satu baris

 Terdapat pada Tab Standard, dengan icon pada control palette adalah :

II. PRAKTEK

Buatlah rancangan form seperti berikut :

11 Wawan Kusdiawan, M.Kom

 STMIK Kharisma Karawang - Modul Praktikum Grafika
Komputer

GroupBox GroupBox
dan dan
RadioButton CheckBox

Settinglah properti dari masing-masing komponen seperti pada table berikut :

Kontrol Properti Setting

Name FormSeleksi
Form
Caption Form Seleksi
GroupBox Caption [ Jenjang ]
Name RadioButtonD3
RadioButton
Caption D3
Name RadioButtonS1
RadioButton
Caption S1
Name RadioGroupJurusan
Caption Jurusan
RadioGroup MI
Items TI
TK
GroupBox Caption .:Font:.
Name CheckMerah
CheckBox
Caption Merah
Name CheckGB
CheckBox
Caption Garis Bawah
Name ButtonTampil
Button
Caption Tampilkan
Name MemoHasil
Memo
Lines Kosongkan
Selanjutnya masukan kode program berikut pada komponen button.

 Kode program Form Activate

procedure TFormSeleksi.FormActivate(Sender: TObject);
begin
RadioButtonD3.Checked := True;
RadioGroupJurusan.ItemIndex := 0;
end;

12 Wawan Kusdiawan, M.Kom

 STMIK Kharisma Karawang - Modul Praktikum Grafika
Komputer

procedure TFormSeleksi.ButtonTampilClick(Sender: TObject);

begin
if RadioButtonD3.Checked = True then
MemoHasil.Text := 'Diploma'
else if RadioButtonS1.Checked = True then
MemoHasil.Text := 'Sarjana';

Case RadioGroupJurusan.ItemIndex of
0 : MemoHasil.Text := MemoHasil.Text + ' Manajemen Informatika';
1 : MemoHasil.Text := MemoHasil.Text + ' Teknik Informatika';
2 : MemoHasil.Text := MemoHasil.Text + ' Teknik Komputer';
End;

if CheckBoxMerah.Checked = True then

MemoHasil.Font.color := clred
else
MemoHasil.Font.color := clblack;

if CheckBoxGB.Checked = true then

MemoHasil.Font.Style := [fsUnderline]
else
MemoHasil.Font.Style := [];
end;

Setelah itu simpan project, dan coba Copilasi atau running, maka hasilnya akan
tampak seperti berikut

Lengkapi program diatas dengan NIM dan Nama mahasiswa, Agama dan jenis
Kelamin. Untuk pengisian data Agama dan jenis kelamin gunakan komponen
Groupbox dan Radiogroup dengan perintah seleksi IF atau Case lalu tampilkan
hasilnya dalam Memo.

13 Wawan Kusdiawan, M.Kom

 STMIK Kharisma Karawang - Modul Praktikum Grafika
Komputer

III. TUGAS

Buatlah apliaksi seperti berikut :

14 Wawan Kusdiawan, M.Kom

 STMIK Kharisma Karawang - Modul Praktikum Grafika
Komputer

PERTEMUAN III
MENGELOLA IMAGE

I. PENDAHULUAN
Delphi tidak menyediakan secara khusus rutin-rutin untuk pengolahan citra, oleh karena
itu perlu dibuat sendiri program untuk mengolah citra. Namun Delphi telah menyediakan
sarana untuk menampilkan citra, yaitu melalui komponen TImage yang terdapat pada
palet komponen Additional.

Komponen ini memiliki properti Picture yang digunakan untuk menyimpan data citra.
Citra yang akan ditampilkan diambil dari file gambar yang dapat ditentukan pada saat
mendesain dengan cara mengisi nilai properti ini, atau pada saat program dijalankan
dengan menggunakan prosedur LoadFromFile

Subproperti yang penting pada Picture antara lain adalah:

 Height, berisi nilai tinggi citra
 Width, berisi nilai lebar citra
 Bitmap, berisi data format dan piksel citra.

Komponen image adalah komponenn untuk menampilkakn objek grafis. Komponen ini
berada pada tab additional dalam component pallete. Hampir semua format file grafis
dapat diambil dengan komponen image. Seperti .bmp, .jpg, .gif. Cara pemanggilan
gambar dengan komponen image, cukup mudah. Yaitu dengan menggunakan property
picture yang ada pada object inspector.

Grafis image yang ada dalam aplikasi hanya berlaku untuk durasi sekali jalan untuk
aplikasi. Seringkali kita ingin menggunakan gambar yang sama untuk setiap saat. Juga
sering kita ingin menyimpan gambar dalam file yang berbeda. Komponen image
memberikan kemudahan untuk mengambil gambar, dan menyimpannya kembali dalam
file baik file yang sama maupun berbedai. Kompenen image ini dapat digunakan untuk
load, save dan replace, mendukung banyak format file.

Pada saat objek grafis ingin ditampilkan dalam form, terkadang ukurannya berbeda.
Ada yang kecil dan ada juga yang besar. Dengan menambah kontrol scroll box, maka
kita dapat menampilkan onjek grafis yang ukurannya lebih besar dari ukuran form.

II. PRAKTEK

Buatlah rancangan form seperti berikut :

15 Wawan Kusdiawan, M.Kom

 STMIK Kharisma Karawang - Modul Praktikum Grafika
Komputer

selanjutnya masukan kode program seperti berikut :

procedure TFormImage.ButtonBrowseClick(Sender: TObject);
begin
OpenPictureDialog1.Execute;
Image1.Picture.LoadFromFile(OpenPictureDialog1.FileName);
end;

procedure TFormImage.Button1Click(Sender: TObject);

begin
Memo1.Clear;
Memo1.Lines.Add('Nama file gambar : ' + OpenPictureDialog1.FileName);
Memo1.Lines.Add('Gambar : ' + Edit1.Text);
end;

procedure TFormImage.FormActivate(Sender: TObject);

begin
Image2.Visible := false;
Image3.Visible := False;
end;

procedure TFormImage.Label1MouseMove(Sender: TObject; Shift:

TShiftState;
X, Y: Integer);
begin
Memo1.Clear;
Image2.Visible := true;
Memo1.Lines.Add ('Bahasa Indonesia : Bola Dunia');
Memo1.Lines.Add ('Bahasa Inggris : Globe');
Memo1.Lines.Add ('Bahasa Arab : Ardi');
Edit1.Text := 'Globe';
end;

procedure TFormImage.Image1MouseMove(Sender: TObject; Shift:

TShiftState;
X, Y: Integer);
begin

16 Wawan Kusdiawan, M.Kom

 STMIK Kharisma Karawang - Modul Praktikum Grafika
Komputer

Image2.Visible := False;
Image3.Visible := False;
Edit1.Text := '';
end;

procedure TFormImage.Label2MouseMove(Sender: TObject; Shift:

TShiftState;
X, Y: Integer);
begin
Memo1.Clear;
Image3.Visible := True;
Memo1.Lines.Add ('Bahasa Indonesia : Tas');
Memo1.Lines.Add ('Bahasa Inggris : Bag');
Memo1.Lines.Add ('Bahasa Arab : xxxx');
Edit1.Text := 'Tas';
end;

Simpan file project dan unit, coba jalankan dan amati hasilnya,

III. TUGAS

Buatlah sebuah aplikasi yang memanfaatkan pengolahan image.

17 Wawan Kusdiawan, M.Kom

 STMIK Kharisma Karawang - Modul Praktikum Grafika
Komputer

PERTEMUAN IV
GEOMETRI DASAR

I. PENDAHULUAN

Grafika komputer merupakan studi tentang bagaimana membuat gambar/grafik

dan bagaimana memanipulasinya dengan menggunakan komputer. Perbedaan
antara Picture/gambar, graphics/grafik dan Image/citra :
• Picture/gambar : Paling luas/umum. Mencakup grafik dan citra.
• Graphics/grafik : Gambar yang dibuat dengan dengan cara dan aturan
tertentu tanpa alat perekam gambar.
• Image/citra : Gambar yang diambil dengan alat pengambil gambar ( kamera,
satelit, foto, sidik jari, scan dll)

Berikut beberapa perintah dasar membuat object geometri dasar :

• Garis
Canvas.MoveTo(x,y) : menempatkan posisi awal garis
Canvas.LineTo(x,y) : menempatkan posisi akhir garis

• Kotak
Canvas.Rectangle(x1,y1,x2,y2);
Ket :
- x1,y1 : titik awal kotak
- x2,y2 : titik akhir kotak

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

 Kotak Sudut Tumpul

Canvas.RoundRect (x1,y1,x2,y2,sx,sy);
Ket :
- x1,y1 : titik awal kotak
- x2,y2 : titik akhir kotak
- sx,sy : ketumpulan sudut

II. PRAKTEK

Buatlah sebuah apliaksi dan rancanglah tampilan formnya seperti berikut:

18 Wawan Kusdiawan, M.Kom

 STMIK Kharisma Karawang - Modul Praktikum Grafika
Komputer

Masukan kode program seperti berikut:

procedure TFormKoordinat.FormMouseMove(Sender: TObject; Shift: TShiftState;
X, Y: Integer);
begin
LabelKoordinat.Caption := 'X : ' + IntToSTR(X) + ' Y : ' + IntToStr(Y);
end;

procedure TFormKoordinat.ButtonTitikClick(Sender: TObject);

begin
Canvas.Pixels[150,170] := clRed;
end;

procedure TFormKoordinat.ButtonGarisClick(Sender: TObject);

begin
Canvas.MoveTo(150,170);
Canvas.LineTo(350,170);
end;

procedure TFormKoordinat.ButtonKotakClick(Sender: TObject);

begin
Canvas.Rectangle(185,115,350,180);
end;

procedure TFormKoordinat.ButtonLingkaranClick(Sender: TObject);

begin
Canvas.Ellipse(180,180,80,80);
end;

19 Wawan Kusdiawan, M.Kom

 STMIK Kharisma Karawang - Modul Praktikum Grafika
Komputer

procedure TFormKoordinat.ButtonHapusClick(Sender: TObject);

begin
Invalidate;
end;

procedure TFormKoordinat.ButtonSegitiga1Click(Sender: TObject);

begin
canvas.MoveTo(88,95);
Canvas.LineTo(88,235);

canvas.MoveTo(88,235);
Canvas.LineTo(213,235);

canvas.MoveTo(88,95);
Canvas.LineTo(213,235);
end;

procedure TFormKoordinat.ButtonSegiLimaClick(Sender: TObject);

begin
Canvas.Pen.Color := clBlue;
Canvas.Polyline([Point(40,10), Point(20,60), Point(70,30), Point(10,30),
Point(60,60), Point(40,10)]);
end;

procedure TFormKoordinat.ButtonSegi3duaClick(Sender: TObject);

var x, y : word;
begin
for x := 15 to 200 do
for y := 200 downto x do
Canvas.Pixels[x,y] := clRed;
end;

III. TUGAS

Berdasarkan penjelasan diatas, buatlah sebuah apliaksi yang berasal dari kombinasi
beberapa bentuk geometri dasar sehingga menghasilkan sebauh object baru.

20 Wawan Kusdiawan, M.Kom

 STMIK Kharisma Karawang - Modul Praktikum Grafika
Komputer

PERTEMUAN V
KUSTOMISASI OBJECT

I. PENDAHULUAN

Sebuah objek geometri dapat dimanipulasi warna objeknya untuk garis (line)
maupun isinya (fill) dan diatur ketebalan garisnya.
* Memberi warna garis/line
canvas.pen.color := clwarna;
* Memberi warna isi/fill
canvas.brush.color := clwarna;
* Mengatur Ketebalan Garis
canvas.Pen.Width := integer;

Gambar rangka (wired frame) yang dihasilkan dari bentuk geometri tertentu
misalnya segi empat atau lingkaran dapat diberikan corak (style) terhadap objek
tersebut baik dari bingkai (pen/line) maupun isi (brush/fill). Berikut syntax untuk
memberikan pen style :
canvas.pen.style := psstyle;

Bagian dalam bentuk-bentuk yang dihasilkan oleh metode-metode

penggambaran kurva seperti Rectangle, Ellipse, Pie, Chord dan Polygon.

Sintaks :
Brush.Color := warna;

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

Akan menghasilkan kotak dengan warna isi (fill) hijau.

Mengarsir kurva, Sintaks :

Brush.Style := Arsiran

Nilai Arsiran berupa konstata, dengan daftar sebagai berikut :

II. PRAKTEK

Buatlah sebauh aplikasi dan rancanglah form seperti berikut:

21 Wawan Kusdiawan, M.Kom

 STMIK Kharisma Karawang - Modul Praktikum Grafika
Komputer

Lalu masukan kode programnya seperti berikut:

procedure TFormGeomteriDasar.FormMouseMove(Sender: TObject;
Shift: TShiftState; X, Y: Integer);
var w : TColor;
begin
LabelKoordinat.Caption := 'x = ' + IntToStr(x) + ' y = ' +
IntToStr(y);
w := 5478;
Canvas.Pixels[x,y] := Random(w);
end;

procedure TFormGeomteriDasar.ButtonTitikClick(Sender: TObject);

begin
Canvas.Pixels[50,70] := clRed;
end;

procedure TFormGeomteriDasar.ButtonGaris1Click(Sender: TObject);

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

procedure TFormGeomteriDasar.ButtonGaris2Click(Sender: TObject);

begin
Canvas.MoveTo(130,120);
Canvas.LineTo(130,240);
end;

22 Wawan Kusdiawan, M.Kom

 STMIK Kharisma Karawang - Modul Praktikum Grafika
Komputer

procedure TFormGeomteriDasar.ButtonRectangleClick(Sender:
TObject);
begin
Canvas.Pen.Color := clMaroon;
Canvas.pen.Width := 3;
Canvas.Brush.Color := clYellow;
Canvas.Brush.Style := bsVertical;
Canvas.Rectangle(120,150,340,260);
end;

procedure TFormGeomteriDasar.ButtonRoundRectClick(Sender:
TObject);
begin
Canvas.RoundRect(120,150,340,260,55,55);
end;

procedure TFormGeomteriDasar.ButtonEllipseClick(Sender: TObject);

begin
Canvas.Ellipse(145,150,255,268);
end;

procedure TFormGeomteriDasar.ButtonHapusClick(Sender: TObject);

begin
Invalidate;
end;

procedure TFormGeomteriDasar.ButtonEllipse2Click(Sender:
TObject);
begin
with PaintBox1 do
begin
Canvas.Ellipse(0,0,Width,Height);
end;
end;

procedure TFormGeomteriDasar.ButtonKotakClick(Sender: TObject);

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

end;

III. TUGAS

Dengan konsep kustomisasi diatas buatlah aplikasi yang mengkombinasikan

antara bentuk geometrid an kustomisasi sehingga menghasilkan sebuah aplikasi
yang interaktif.

23 Wawan Kusdiawan, M.Kom

 STMIK Kharisma Karawang - Modul Praktikum Grafika
Komputer

PERTEMUAN VI
TRANSFORMASI TRANSLASI

I. PENDAHULUAN

Sejumlah objek seringkali mempunyai sifat simetri. Sehingga untuk menggambar

keseluruhan objek, cukup dilakukan dengan menggambar separuh bagian. Untuk
menggambar separuh yang lain bisa dilakukan dengan melakukan manipulasi
terhadap objek yang sudah ada. Misalnya dengan pencerminan, penggeseran,
atau pemutaran objek yang sudah digambar terlebih dahulu.

Ada beberapa macam tipe transformasi 2D yaitu :

– Translasi (pergeseran)
– Skala
– Rotasi
– Mirror (pencerminan)

Transformasi translasi terjadi apabila :

• Sembarang titik pada bidang x y dapat digeser ke sembarang tempat dengan
menambahkan besaran pada absis x dan ordinat y.
• Sembarang titik bisa digeser ke posisinya yang baru dengan persamaan
matematis, pada setiap titik dari objek tersebut.
• Karena setiap garis dari objek tersebut terdiri dari titik-titik yang jumlahnya tak
terbatas, maka proses pergeseran bisa berlangsung sangat lama.
• Tetapi pada kenyataanya kita cukup menggeser dua titik ujungnya saja, dan
kemudian menggandeng dua titik tersebut untuk membentuk garis hasil
pergeseran.

Sebuah titik dapat digeser atau ditranslasikan dengan persamaan sebagai

berikut :
X’ = x1 + Tx
Y’ = y1 + Ty
Ket :
 x1,y1 : koordinat titik asal
 X’,Y’ : koordinat titik hasil
 Tx : faktor perpindahan ke arah X (horisontal)
 Ty : faktor perpindahan ke arah Y (vertikal)

Jenis Translasi :
Horizontal : X>0 dan Y=0
Vertikal : X=0 dan Y>0
Diagonal : X>0 dan Y>0

Dengan demikian sebuah gambar dari bentuk geometri dasar dapat digeser ke
tempat lain dengan cara mentransformasi kan setiap titik tersebut dan kemudian
digambar ulang dengan menghubungkan titik-titik tersebut dengan geometri
seperti gambar aslinya. Bila perpindahan ini berulang maka akan terjadi animasi.
Animasi ini akan lebih nyata bila pada saat gambar hasil dibuat, gambar asal
dihapus.

24 Wawan Kusdiawan, M.Kom

 STMIK Kharisma Karawang - Modul Praktikum Grafika
Komputer

II. PRAKTEK

Buatlah rancangan form seperti berikut :

lalu masukan kode programnya, seperti berikut:

procedure TFormTranslasi.FormPaint(Sender: TObject);
begin
x1 := 10;
y1 := 10;
x2 := 100;
y2 := 50;
Canvas.Rectangle(x1, y1, x1+x2, y1+y2);
end;

procedure TFormTranslasi.ButtonHorizontalClick(Sender: TObject);

const ges = 0;
begin
geserX := strToInt(EditX.Text);
GeserY := ges;
x1 := x1 + geserX;
y1 := y1 + gesery;
Canvas.Rectangle(x1 + y1, y1, x1 + x2, y1 + y2);
end;

procedure TFormTranslasi.ButtonVertikalClick(Sender: TObject);

const x = 0;
begin
geserX := X;
GeserY := StrToInt(EditY.Text);
x1 := x1 + geserX;
y1 := y1 + gesery;
Canvas.Rectangle(x1, y1, x1 + x2, y1 + y2);

25 Wawan Kusdiawan, M.Kom

 STMIK Kharisma Karawang - Modul Praktikum Grafika
Komputer

end;

procedure TFormTranslasi.ButtonDiagonalClick(Sender: TObject);

var i : integer;
begin
for i := 1 to 5 do
begin
cascade;
geserX := strToInt(EditX.Text);
gesery := StrToInt(EditY.Text);
X1 := X1 + geserX;
Y1 := Y1 + geserY;
Canvas.Rectangle(X1, y1, x1+x2, y1+y2);
Canvas.Font.size := 20;
Canvas.Font.Name := 'Arial';
Canvas.Font.Style := [fsBold];
Canvas.TextOut(x1+43, y1+13, IntToStr(i));
Sleep(1000);
end;
end;

procedure TFormTranslasi.ButtonHapusClick(Sender: TObject);

begin
Invalidate;
EditX.Text := '0';
EditY.Text := '0';
end;

III. TUGAS

Dengan konsep translasi buatlah aplikasi yang dikombinasikan dengan materi

sebelumnya baik geometri dasar, maupun kustomisasi object sehingga
menghasilkan aplikasi yang bermanfaat dan interaktif.

26 Wawan Kusdiawan, M.Kom

 STMIK Kharisma Karawang - Modul Praktikum Grafika
Komputer

PERTEMUAN VII
TRANSFORMASI SCALING

I. PENDAHULUAN

Penskalaan adalah proses untuk memperbesar atau mengubah ukuran suatu

gambar. Dengan faktor skala yang mempunyai nilai absolut lebih besar 1, akan
diperoleh gambar yang lebih besar dan semakin menjauh dari titik (0,0).
Sebaliknya dengan faktor skala yang mempunyai nilai absolute lebih kecil dari 1,
akan diperoleh gambar yang lebih kecil dan mendekat ke titik (0,0).

Sebuah objek dapat diperbesar dengan persamaan sebagai berikut :

X’ = x1 * Sx
Y’ = y1 * Sy

Ket :
• x1,y1 : koordinat titik asal
• X’,Y’ : koordinat titik hasil
• Sx : faktor pembesaran horizontal (x)
• Sy : faktor pembesaran vertical (y)
Bila faktor pembesaran vertikal dan horizontal sama maka Sx = Sy.

II. PRAKTEK

Buatlah rancangan form seperti berikut :

Lalu masukan kode program seperti berikut:

27 Wawan Kusdiawan, M.Kom

 STMIK Kharisma Karawang - Modul Praktikum Grafika
Komputer

procedure TForm1.kotak;
begin
Canvas.Rectangle(x,y,x1,y1);
end;

procedure TForm1.Button3Click(Sender: TObject);

begin
Canvas.Pen.Color := clblue;
x := 110;
y := 110;
x1 := 150;
y1 := 150;

kotak;
end;

procedure TForm1.Button1Click(Sender: TObject);

begin
sx := StrToInt(EditSX.Text);
sy := StrToInt(EditSY.Text);
x := x * sx;
y := y * sy;
x1 := x1 * sx;
y1 := y1 * sy;
Canvas.Pen.Color := clred;
kotak;
end;

procedure TForm1.Button2Click(Sender: TObject);

begin
sx := StrToInt(EditSX.Text);
sy := StrToInt(EditSY.Text);
x := x div sx;
y := y div sy;
x1 := x1 div sx;
y1 := y1 div sy;
Canvas.Pen.Color := clBlack;
kotak;
end;

procedure TForm1.FormPaint(Sender: TObject);

begin
Canvas.Pen.Color := clblue;
x := 110;
y := 110;
x1 := 150;
y1 := 150;

kotak;
end;

III. TUGAS

Dengan konsep rotasi buatlah aplikasi yang dikombinasikan dengan materi

sebelumnya baik geometri dasar, kustomisasi object maupun translasi sehingga
menghasilkan aplikasi yang bermanfaat dan interaktif.

28 Wawan Kusdiawan, M.Kom

 STMIK Kharisma Karawang - Modul Praktikum Grafika
Komputer

PERTEMUAN VIII
TRASNFORMASI ROTASI

I. PENDAHULUAN

Transformasi rotasi adalah proses memutar sebuah objek geometri dari satu
posisi koordinat ke posisi koordinat lain, dengan mengacu pada sudut putar dan
salah satu titik sebagai pusat putar.

Arah putar objek adalah berlawanan arah jarum jam (clockwise). Bila
menggunakan koordinat layar maka arah sudut sebaliknya. Pada Delphi/lazarus
dan beberapa program tingkat tinggi lain, sudut () dinyatakan dalam radian.

Sebuah titik dapat di rotasi atau ditranslasikan dengan penyelesaian sebagai

berikut :
Persamaan 1 :
X1 = x.cos  – y.sin 
Y1 = x.sin  + y.cos 
Keterangan :
• x,y : koordinat titik asal
• X1,Y1 : koordinat hasil perputaran
•  : sudut putar.
Dinyatakan dalam radian, maka tranformasinya
 = (sudut_derajat/180 * ) dengan  = 22/7

Setelah persamaan 1 ditemukan selanjutnya cari nilai dx dan dy khusus untuk

titik pusat putar, dengan persamaan berikut:

Persamaan 2 :
|dx| = x – x1
|dy| = y – y1
Lalu hitung koordinat titik hasil dengan persamaan sebagai berikut :

Persamaan 3 :
X’ = X1 + dx
Y’ = Y1 + dy

II. PRAKTEK

Buatlah aplikasi baru seperti berikut :

29 Wawan Kusdiawan, M.Kom

 STMIK Kharisma Karawang - Modul Praktikum Grafika
Komputer

Lalu masukan kode programnya seperti berikut

Procedure TForm1.Line;
begin
Canvas.MoveTo(xint1, yint1);
Canvas.LineTo(xint2, yint2);
end;

procedure TForm1.ButtonGarisClick(Sender: TObject);

begin
x1 := 100; y1 := 100;
x2 := 200; y2 := 100;
Canvas.Pen.Color := clRed;
xint1 := x1;
yint1 := y1;
xint2 := x2;
yint2 := y2;
Line;
end;

procedure TForm1.ButtonTampilClick(Sender: TObject);

begin
sudut := (strToint(EditSudut.Text)/180)*22/7;

x11 := x1 * cos(sudut) - y1 * sin(sudut);

y11 := x1 * sin(sudut) + y1 * cos(sudut);
x22 := x2 * cos(sudut) - y2 * sin(sudut);
y22 := x2 * sin(sudut) + y2 * cos(sudut);

dx := x2 - x22;
dy := y2 - y22;

30 Wawan Kusdiawan, M.Kom

 STMIK Kharisma Karawang - Modul Praktikum Grafika
Komputer

x11 := x11 + dx;

y11 := y11 + dy;
x22 := x22 + dx;
y22 := y22 + dy;

xint1 := round(x11);
yint1 := round(y11);
xint2 := round(x22);
yint2 := round(y22);
Canvas.Pen.Color := clblue;
Line;
end;

procedure TForm1.Button1Click(Sender: TObject);

begin
form2 := Tform2.create (self);
form2.show;
end;

procedure TForm1.Timer1Timer(Sender: TObject);

begin
LabelJam.Caption := TimeToStr(time);
end;

III. TUGAS

Dengan konsep rotasi buatlah aplikasi yang dikombinasikan dengan materi

sebelumnya baik geometri dasar, kustomisasi object, translasi maupun scaling
sehingga menghasilkan aplikasi yang bermanfaat dan interaktif.

31 Wawan Kusdiawan, M.Kom

 STMIK Kharisma Karawang - Modul Praktikum Grafika
Komputer

PERTEMUAN IX
ANIMASI

I. PENDAHULUAN

Animasi adalah proses menampilkan, menghapus dan menampilkannya lagi

pada koordinat yang berbeda secara simultan suatu obyek dan dilakukan
berulang sehingga terlihat seolah-olah obyek tersebut bergerak.

Obyek animasi dapat berupa teks atau gambar. Animasi biasanya digunakan
untuk memvisualisasikan suatu proses sehingga akan lebih menarik dan lebih
mudah untuk dipahami. Sebagai contoh animasi untuk lampu lalu lintas, animasi
sensor pintu kereta api dan lain-lain.

Animasi adalah proses menampilkan, menghapus dan menampilkannya lagi

pada koordinat yang berbeda secara simultan suatu obyek dan dilakukan
berulang sehingga terlihat seolah-olah obyek tersebut bergerak.

Obyek animasi dapat berupa teks atau gambar. Animasi biasanya digunakan
untuk memvisualisasikan suatu proses sehingga akan lebih menarik dan lebih
mudah untuk dipahami. Sebagai contoh animasi untuk lampu lalu lintas, animasi
sensor pintu kereta api dan lain-lain.

II. PRAKTEK

Buatlah aplikasi baru seperti berikut :

Lalu masukan kode programnya seperti berikut

32 Wawan Kusdiawan, M.Kom

 STMIK Kharisma Karawang - Modul Praktikum Grafika
Komputer

procedure TFormAnimasi.Timer2Timer(Sender: TObject);

begin

memo1.top := memo1.top -1;

if memo1.top <= panel1.height - memo1.height then

memo1.top := 600;

end;

procedure TFormAnimasi.Timer1Timer(Sender: TObject);

begin

Image2.Left := Image2.Left -1;

if Image2.Left <= panel1.height - Image2.height then

memo1.left := 600;

end;

III. TUGAS

Dengan konsep animasi buatlah aplikasi yang dikombinasikan dengan materi

sebelumnya baik geometri dasar, kustomisasi object, translasi, scaling maupun
animasi sehingga menghasilkan aplikasi yang bermanfaat dan interaktif.

33 Wawan Kusdiawan, M.Kom

 STMIK Kharisma Karawang - Modul Praktikum Grafika
Komputer

PERTEMUAN X
COMPUTER BASED TRAINING

I. PENDAHULUAN

Pembelajaran merupakan suatu kegiatan melaksanakan kurikulum suatu

lembaga pendidikan agar dapat mempengaruhi para siswa mencapai tujuan
pendidikan yang telah ditetapkan.

Dari segi perspektif komunikasi, pembelajaran pada hakikatnya adalah proses

komunikasi yaitu proses penyampaian pesan dari sumber pesan melalui
saluran/media tertentu ke penerima pesan.

Pesan, sumber pesan, saluran/media dan penerima pesan adalah komponen-

komponen proses komunikasi. Pesan yang akan dikomunikasikan adalah isi
ajaran ataupun didikan yang ada dalam kurikulum, sumber pesannya bisa guru,
siswa, orang lain ataupun penulis buku dan produser media; salurannya adalah
media pendidikan dan penerima pesannya adalah siswa atau juga guru.

CAI (Computer Assisted Instructions) hakekatnya merupakan penawaran baru

dalam cara pembelajaran. Komputer sebagai media akan lebih banyak
membantu siswa menemukan hal-hal baru yang lebih menarik dibandingkan
dengan cara-cara konvensional yang lebih berpusat pada guru.
Walaupun sudah kita ketahui bersama, bahwa cara-cara belajar dan mengajar,
serta pemerolehan informasi pembelajaran tiap individu berbeda, namun secara
garis besarnya, dapat dikategorikan menjadi dua, yaitu:
• computer-based training (CBT) dan
• Web-based training (WBT).

• CBT merupakan proses pendidikan berbasiskan komputer, dengan

memanfaatkan media CDROM dan disk-based sebagai media pendidikan
(Horton, 2000).
• Dengan memanfaatkan media ini, sebuah CD ROM bisa terdiri dari video klip,
animasi, grafik, suara, multimedia dan program aplikasi yang akan digunakan
oleh peserta didik dalam pendidikannya.
• Dengan CBT, proses pendidikan melalui classroom tetap dapat terlaksana,
sehingga interaksi dalam proses pendidikan dapat terus berlangsung, yang
dibantu oleh kemandirian peserta didik dalam memanfaatkan CBT.
• CBT biasanya memuat konten secara linear, seperti membaca sebuah buku
online atau manual. Untuk alasan ini mereka sering digunakan untuk
mengajarkan proses statis, seperti menggunakan perangkat lunak atau
menyelesaikan persamaan matematika.

II. PRAKTEK

Buatlah aplikasi baru seperti berikut :

34 Wawan Kusdiawan, M.Kom

 STMIK Kharisma Karawang - Modul Praktikum Grafika
Komputer

• Membuat apliaksi CBT untuk mengenal elemen anggota tubuh binatang

• Objek binatang yang diambil : Gajah
• Kemampuan program mengidentifikasi bagian anggota tubuh gajah, ketika
kursor mengarah ke salah satu anggota bagian tubuh misalnya kuping,
bagian tersebut akan diblok dan tampil keterangan tentang nama bagian
anggota tubuh tersebut dalam bahasa indonesia dan english beserta
fungsinya
Langkahnya :
• Aktifkan adobe photoshop
• Buka file gambar Gajah.jpg
• Lalu potong bagian-bagian yang dibutuhkan, misalnya kuping, mata, gading,
belalai dll
• Gunakan komponen Rectangular Marque tool lalu copy sesuai ukuran yang
dikehendaki
• Buat file baru, klik file New | Ok lalu klik Edit | Paste
• Selanjutnya klik tombol blur tool lalu lakukan blur pada bagian yang
dikehendaki
• Simpan dengan nama file baru dalam format JPG

35 Wawan Kusdiawan, M.Kom

 STMIK Kharisma Karawang - Modul Praktikum Grafika
Komputer

procedure TFormCBT.Kuping;
begin
Image2.Visible := true;
Image3.Visible := true;
Memo1.Clear;
Memo1.Lines.Add('Bahasa Indonesia : Kuping');
Memo1.Lines.Add('Bahasa Inngris : Ear');
Memo1.Lines.Add('Fungsi : Mendengar');
Memo1.Visible := true;
end;

procedure TFormCBT.Sembunyi;
begin
Image2.Visible := false;
Image3.Visible := false;
Memo1.Visible := false;
end;

procedure TFormCBT.Image1MouseMove(Sender: TObject; Shift:

TShiftState; X, Y: Integer);
begin
sembunyi;
end;

procedure TFormCBT.Label3MouseMove(Sender: TObject; Shift:

TShiftState; X,Y: Integer);
begin
kuping;
end;

36 Wawan Kusdiawan, M.Kom

 STMIK Kharisma Karawang - Modul Praktikum Grafika
Komputer

procedure TFormCBT.Label2MouseMove(Sender: TObject; Shift:

TShiftState; X, Y: Integer);
begin
kuping;
end;

procedure TFormCBT.FormActivate(Sender: TObject);

begin
sembunyi;
end;

III. TUGAS

Dengan konsep computer based training buatlah aplikasi untuk

memvisualisasikan sebuah materi untuk mempermudah memahami konsep
amteri tersebut dan agar siswa lebih tertarik untuk mempelajarinya.

37 Wawan Kusdiawan, M.Kom