LAPORAN TUGAS

PRAKTIKUM GRAFIKA KOMPUTER

MODUL 1 – 5

Isa Basalamah
20180810028
Teknik Informatika 2018 B

PROGRAM STUDI TEKNIK INFORMATIKA

FAKULTAS ILMU KOMPUTER
UNIVERSITAS KUNINGAN
2020
 MODUL 1
PENGENALAN APLIKASI DELPHI

PRE TEST
1. Jelaskan apa yang dimaksud dengan properties dan event!
Jawab:
 Properties: bertujuan untuk mendefinisikan atribut atau setig suatu objek.
 Event: sebuah pristiwa atau kejadian yang diterima oleh suatu objek.
2. Jelaskan fungsi dari komponen, label dan button!
Jawab:
 Label berfungsi untuk menambahkan tulisan dalam form.
 Button berfungsi untuk tombol tekan dengan tulisan diatasnya.
3. Sebutkan dan jelaskan 3 event yang ada pada komponen button!
Jawab:
 OnClick: perubahan akan terjadi bila button diklik.
 OnMouseMove: perubahan akan terjadi bila kursor diarahkan pada button.
 OnMouseUp: event yang dipanggil Ketika tombol mouse dilepaskan.

PRAKTIKUM
Praktikum 1
1. Jalankan aplikasi delphi 7 pada deskop laptop atau computer.
2. Sebelum membuat program delphi 7 disarankan untuk menyimpan program terlebih
dahulu dengan cara Klik File => Save Project As.
3. Muncul kotak dialog Save Unit1 As beri nama dengan nama Latihan 1.pas dan beri
nama project1.dpr kemudian klik Save.
4. Rancang form1 seperti pada gambar dibawah.

5. Double klikk pada Button 1 (Modifikasi) kemudian masukkan program.

6. Jalankan dengan menekan tombol F9 dan amati hasilnya, jika benar seperti berikut:
 Tampilan awal sebelum menekan Button Modifikasi.

 Tampilan sesudah menekan tombol modifikasi.

Praktikum 2
1. Tambahkan form 2 pada project11.dpr dengan cara klik menu File kemudian pilih
New Form.

2. Rancang Form 2 seperti pada gambar dibawah:

3. Double klikk pada Button1 (+) kemudian masukkan kode program seperti berikut:
 Kode Program
  Hasil kode program yang sudah dijalankan.

4. Double klik pada Button2 (*) kemudian masukkan kode seperti berikut:
 Kode Program

 Hasil kode program yang sudah dijalankan

5. Double klik pada Button2 (-) kemudian kode program seperti berikut:
 Kode Program
  Hasil kode program yang sudah dijalankan.

POST TEST
1. Buatlah sebuah form 3 yang berisi komponen-komponen seperti dibawah ini:

Keterangan: Tulisan label1 akan berubah sesuai pilihan Ketika radio Buttonn
dipilih dan tombol Modifikasi di klik.

Jawab:
 Kode Program
 Hasil Program
TUGAS
1. Jelaskan fungsi dari kode program Lebel1.Font.Color=clGreen;
Jawab:
Fungsinya untuk merubah warna tulisan dalam form (label) menjadi warna hijau.

PENJELASAN
Pada modul 1, pengantar dan pengenalan delphi ini memahami apa yang Namanya
Lebel1.Font.Color=clGreen; yaitu untuk merubah warna font tulisan “label” dan memahami
tentang StrToInt, IntToFloat, dan FloatToStr yang mana kode-kode tersebut berfungsi
sebagai pengembalian data dan sebaliknya.
 MODUL 2
MENGGAMBAR DI CANVAS

PRETEST
1. Jelaskan dungsi canvas.moveto dan canvas.lineto!
Jawab:
 Canvas.moveto berfungsi untuk menempatkan posisi awal garis.
 Canvas.lineto berfungsi untuk menempatkan posisi akhir garis.

2. Apakah penulisan kode program didelphi harus menggunakan huruf kecil

semua?
Jawab:
Dalam kode program di delphi huruf besar dan kecil tidak masalah karena delphi
menggunakan Bahasa pascal bukan javascript yang casesensitive.

3. Sebutkan beberapa obyek yang bisa dibentuk dari garis dan titik!
Jawab:
 Obyek Dotted
 Obyek Dashed
 Obyek Solid

PRAKTIKUM
Praktikum 1
1. Jalankan aplikasi delphi 7 pada desktop laptop atau computer.
2. Sebelum membuat program delphi 7 disarankan untuk menyimpan program terlebih
dahulu dengan cara klik File => Save Project As.
3. Muncul kotak dialog Save Unit1 As beri nama dengan nama Latihan 1.pas dan beri
nama project1.dpr kemudian klik Save.
4. Rancangan form1 seperti pada gambar dibawah:

5. Double klik pada Button1 Garis Horizontal kemudian masukkan kode program seperti
berikut:
 Kode Program

 Hasil Program
6. Double klik pada Button2 Garis Vertikal kemudian masukkan kode program seperti
pada gambar:
 Kode Program

 Hasil Program

7. Double klik pada Button3 Garis Diagonal 1 kemudian masukkan kode program
seperti pada gambar:
 Kode Program

 Hasil Program
 8. Double klik pada Button 4 Garis Diagonal 2 kemudian masukkan kode program
seperti pada gambar:
 Kode Program

 Hasil Program

Praktikum 2
1. Tambahkan form 2 pada project1.dpr dengan cara klik menu File kemudian pilih New
Form.

2. Rancang seperti ini:

3. Double klik pada Button1 Elipse kemudian masukkan kode program seperti pada
gambar:
 Kode Program

 Hasil Program

4. Double klik pada Button2 Rectangle kemudian masukkan kode program seperti pada
gambar:
 Kode Program

 Hasil Program
 5. Double klik pada Button3 Polygon kemudian masukkan kode program seperti pada
gambar dibawah:
 Kode Program

 Hasil Program

POST TEST
1. Buatlah gambar mobil!
Jawab:
 Kode Program:
  Hasil Program.

TUGAS
1. Buat obyek kendaraan lain menggunakan canvas!
Jawab:
 Kode Program
  Hasil Program

PENJELASAN
Pada modul 2 ini kita dapat memahami apa yang Namanya Canvas.MoveTo, Canvas.LineTo,
Canvas.Rectangle, Canvas.Ellipse dan lainnya. Dan sedikit memahami letak penyesuaian titik
(x, y).
 MODUL 3
MENGGAMBAR GARIS MENGGUNAKAN ALGORITMA DDA DAN
BRESENHAM

PRETEST
1. Sebutkan dan jelaskan kelebihan dari algoritma DDA!
Jawab:
 DDA (Digital Deferensial Analyser) adalah algoritma pembentukan garis
berdasarkan perhitungan dx maupun dy, menggunakan rumus dy=m.dx
 Kelebihannya yaitu hasil perhitunganmya dapat dikonversikan menjadi nilai
integer.

2. Sebutkan dan jelaskan kelebihan dari algoritma Bressenham!

Jawab:
 Bressenham mengembangkan algoritma klasik yang lebih menarik, karena
hanya menggunakan perhitungan matematika dengan bilangan integer.
 Kelebihannya yaitu tidak perlu membulatkan nilai posisi setiap pixel setiap
waktu dan konversi nilai integernya dapat diadaptasikan untuk menggambar
sebuah lingkaran.

3. Jelaskan perbedaan antara DDA dan Bressenham!

Jawab:
 DDA: garis dibulatkan dengan menentukan dua endpi=oint yaitu titik awal
dan titik akhir.
 Bressenham: tidak perlu membulatkan nilai posisi setiap pixel setiap waktu.

PRAKTIKUM
Praktikum 1
1. Buatlah rancangan from1 seperti berikut:
2. Isi property dari rancangan tersebut.

3. Kemudian pilih objek Form1. Pada event OnPaint klik dua kali sebelah kanannya,
kemudian ketikkan kode program seperti berikut:
4. Double klik pada button DDA, setelah muncul halaman CodeEditor, maka tuliskan
kode program seperti berikut:

5. Double klik pada button Bresenham, setelah muncul halaman CodeEditor, maka
tuliskan kode program berikut:
6. Double klik pada button Refresh, setelah muncul halaman CodeEditor, maka tuliskan
kode program berikut:

7. Double klik pada button Close, setelah muncul halaman CodeEditor, maka tuliskan
kode program berikut:

Hasil dari kode program yang dijalankan:

POST TEST
Buatlah sebuah form yang berisikan menu yang didalamnya terdapat DDA dan
Bresenhem.
Jawab:
 Perancangan Form

 Output
TUGAS
Buatlah langkah-langkah untuk membuat menu!
Jawab:
Pilih Toolbar => Standard => Klik Main Menu

Klik dipojok kiri atas Form sehingga seperti berikut:

Lalu klik kanan => Menu Designer => atau double klik.
Klik Kotak => lalu isi Caption sehingga seperti berikut:

Double klik pada menu DDA:

Lalu akan tampil seperti berikut:

Lalu isi kode program seperti diatas.

PENJELASAN
Pada modul 3, dapat mengetahui proses pembuatan garis di grafika computer menggunakan
algoritma DDA dan Algoritma Bresenham dan Polinom. Dimana Algoritma DDA
membentuk garis berdasarkan perhitungan x dan y dengan rumus y = m.x dua endpoint yaitu
titik awal dan titik akhir. Algoritma DDA setiap titik koordinat yang membentuk garis
diperoleh oleh perhitungan lalu dikonversikan menjadi nilai integer. Sedangkan algoritma
Bressenham hanya menggunakan perhitungan matematika dengan bilangan integer.
Algoritma Garis Bressenham disebut juga midpoint line algoritma yaitu algoritma konversi
penambahan nilai integer yang dapat diadaptasi untuk menggambar sebuah lingkaran.
 MODUL 4
MENGGAMBAR LINGKARAN

PRETEST
1. Sebutkan dan jelaskan tentang algoritma madpoint!
Jawab:
Algoritma madpoint merupakan algoritma pembuatan garis dan kurva dengan dasar
operasi bilangan integer yang menonjolkan ciri kecepatan algoritma lingkaran
bressenham, sehingga algoritma ini dapat dipakai sebagai algoritma pembuatan grafik
yang menentukan kecepatan.

PRAKTIKUM
Praktikum 1
1. Buatlah rancangan from1 seperti pada gambar dibawah:
2. Double klik pada Button1 Midpoint setelah muncul halaman CodeEditor, maka
ketikkan kode program berikut:
o Kode Program

o Hasil Program
3. Double klik pada Button2 Simetris 4x setelah muncul halaman CodeEditor, maka
ketikkan kode program berikut:
o Kode Program

o Hasil Program
4. Double klik pada Button3 Bressenham setelah muncul halaman CodeEditor, maka
ketikkan kode program berikut:
o Kode Program

o Hasil Program
 o Hasil keseluruhan Button dari Button1 sampai Button3

POST TEST
Buatlah sebuah form2 yang berisi manu seperti berikut:

Jawab:
 Script Midpoint

 Script Simetri 4x
 Script Bresenham

 Hasil Madpoint.
  Hasil Simetri 4x

 Hasil Bresenham

PENJELASAN
Pada modul 4 ini dapat memahami dari algoritma midpoint yang pembuatan garis dan kurva
dasar operasi bilangan integer yang menonjolkan ciri kecepatan algoritma lingkaran
bressenham dan dapat mengetahui skala-skala pembuatan dari suatu objek.
 MODUL 5
TRANSLASI OBJEK 2D

PRE TEST
1. Sebutkan dan jelaskan kegunaan komponen StringGrid!
Jawab:
Komponen visual Delphi yang digunakan menyajikan data dalam bentuk lajur atau
grid. Beberapa property yang sering digunakan dalam komponen StringGrid
diantaranya:
o ColCount: Properti ColCount digunakan untuk menentukan jumlah kolom pada
StringGrid.
o RowCount: Properti RowCount digunakan untuk menentukan jumlah baris pada
StringGrid.
o FixedCols: Properti FixedCols menyatakan jumlah kolom tetap (kolom judul)
yang berada dikolom paling kiri dari table. Kolom tersebut tidak akan tergulung
jika pengguna melakukan scrolling secara horizontal.
o FixedRows: Properti yang menyatakan jumlah baris tetap (baris judul) yang
berada dikolom paling atas dari table. Baris tersebut tidak akan tergulung jika
pengguna melakukan scrolling secara vertikal.
o Cells: Properti ini menyatakan konten sel pada alamat (kolom, baris). Melalui
property Cells dapat diakses data-data pada masing-masing cell. Tipe datanya
berupa string sehingga data-data non string harus dikonversikan dulu sebelum
dimasukkan ke dalam property tersebut.

2. Jelaskan apa yang dimaksud dengan Translation vector dan Scalling vector!
Jawab:
o Translation Vector adalah jalur perpindahan yang mempresentasikan vector
oleh semua titik dari suatu objek pada suatu jalur lurus sehingga menempati
posisi baru.
o Scalling Vector adalah penskalaan vector yang membuat suatu objek berubah
ukurannya baik menjadi kecil maupun membesar secara seragam atau tidak
seragam.
PRAKTIKUM
Praktikum 1
1. Buatlah rancangan form1 seperti berikut:

2. Isi property setiap komponen.

Komponen Properti Nilai

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
Button1 Name Button1
Caption Segitiga
Button2 Name Button2
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
3. Buatlah deklarasi konstanta dan matrik dibawah uses, seperti pada gambar berikut:

4. Kemudian pilih objek Form1, double klik pada form yang kosong, kemudian ketikkan
kode program berikut:
5. Kemudian tambahkan juga kode pada objek Form1, klik Form1, kemudian pilih objek
Form1. Pada event OnPaint double klik disebelah kananya, kemudian ketikkan kode
program berikut:

6. Kemudian tambahkan juga kode pada objek Form1, klik Form 1. Kemudian pilih
objek Form1. Pada event OnShow double klik disebelah kanannya, kemudian
ketikkan kode program berikut:

7. Kemudian ketikkan kode program berikut pada FormShow:

8. Tambahkan kode program berikut dibawah type:

9. Kemudian tambahkan juga kode program berikut dibawwah var:

10. Kemudian pilih objek Button1 (segitiga), double klik kemudian ketikkan program
berikut:

11. Lalu pilih objek Button2 (Translasi), double klik lalu ketikkan kode program berikut:
12. Kemudian pilih objek ButtonUlang (Ulang), double klik kemudian ketikkan kode
program berikut:

13. Kemudian pilih objek ButtonKeluar (Keluar), double klik kemudian ketikkan kode
program berikut:

14. Jalankan program dengan menekan tombol F9 atau dengan cara mengklik menu Run.
POST TEST
Buatlah sebuah form2 yang berisi program untuk membuat objek 2D bentuk segiempat
dan bisa melakuan translaasi.
Jawab:
 Tampilan awal form2

 Pendeklarasian konstanta

 Pendeklarasian procedure:
 Pendeklarasian variable dan objek

 Kode program formCreate:

 Kode program formPaint:

 Kode program fromShow:

 Kode program obyek2D:

 Kode program MatrikTranslasi2D:

 Kode program MatrikKaliTransformasi2D:

 Kode program button segiempat:

 Kode program button translasi:

 Kode program button ulang:

 Kode program button keluar:

Hasil dari kode program diatas:

PENJELASAN
Pada Modul 4 ini, mengetahui proses menggambar translasi dan rotasi objek 2D.
Dalam pemodelan dua dimensi didapati berbagai objek dapat dimodelkan menurut
kondisi tertentu, dan objek yang dimodelkan perlu dimodifikasi. Pemodifikasian ini
dilakukan dengan berbagai operasi fungsi dan operasional. Lalu selanjutnya
mengetahui transformasi translasi yaituoperasi yang menyebabkan perpindahan objek
2D sejajar dengan sumbu X dan Y.