Kembali
pada pembelajaran mata kuliah Komputer Grafis.
Pembelajaran kali ini merupakan pertemuan ketiga dari mata kuliah Komputer
Grafis. Pada pertemuan ketiga ini, dalam teori, mahasiswa mendapatkan
pembelajaran sedikit mengenai struktur data yaitu struktur data untuk komputer
grafis. Perlu diketahui, struktur data sangat diperlukan dalam dunia
programming. Untuk itu, disarankan agar mahasiswa dapat menguasai yang namanya
struktur data. Struktur data yang digunakan untuk komputer grafis ini tidak
terlalu sulit sampai pada linked list dan sebagainya. Struktur data yang
digunakan pada komputer grafis ini hanya struktur data sederhana. Sebagai
contoh, pada pertemuan yang lalu kita pernah membuat bangun segitiga. Dalam
bangun segitiga kita memerlukan 3 titik. Misalkan P1, P2, dan P3. Seperti
gambar di bawah ini:
Dalam
deklarasi delphi, 3 titik tersebut dapat dituliskan deklarasinya dengan cara:
Var
P1x, P1y, P2x, P2y, P3x, P3y : integer;
Jika
harus menuliskan proses penggambaran garis agar membentuk segitiga seperti
gambar tersebut, untuk 3 titik kita masih bisa menggunakan cara seperti pada
pertemuan yang lalu yaitu seperti berikut ini:
Image1.Canvas.MoveTo(P1x,P1y);
Image1.Canvas.LineTo(P2x,P2y);
Image1.Canvas.LineTo(P3x,P3y);
Image1.Canvas.LineTo(P1x,P1y);
Penulisan
kode di atas adalah permisalan kita secara cepat menggambarkan ketiga titik
menjadi segitiga. Yang ditulis di dalam kurung bukan titik yang sebenarnya
melainkan hanya memberitahu alur kita menggambar. Untuk titik koordinatnya bisa
dilihat pada pertemuan yang lalu. Kembali ke pembahasan semula, jika kita
menggambar segitiga, kita masih bisa menggunakan model penulisan seperti di
atas. Bagaimana jika yang ingin ita gambar adalah gambar bintang dengan 5
titik? Tentu masih bisa kita tuliskan 6 baris kode program seperti pada
segitiga. Tetapi bagaimana jika titik yang harus digambarkan mulai terhitung
dalam kategori yang banyak? Misalkan 26 titik, apakah menulis kode program
satu-satu adalah cara efektif? Tentunya itu bukan hal yang efektif bagi
programmer jaman sekarang ini.
Struktur data yang digunakan untuk komputer
grafis antara lain dapat menggunakan array ataupun record. Akan lebih mudah
jika kita dapat menguasai penggunaan record. Jika kita hanya menggunakan array,
maka untuk membuat dua buah bangun atau lebih kita harus mendeklarasikan array
untuk setiap bangun. Untuk lebih jelasnya, di bawah ini merupakan contoh penulisan
program tidak dengan array dan menggunakan deklarasi array untuk menuliskan
program bangun datar bintang 5:
Penulisan kode program tanpa array:
Penulisan
kode program tanpa menggunakan array untuk membuat bintang seperti pada gambar
di atas kurang lebih seperti itu. Selanjutnya kita akan mencoba menggunakan
array dan record aray.
Berikut
ini contoh penulisan kode program untuk membuat bintang dengan array:
Seperti
itulah penulisan kode program dengan array, namun jika kita lihat penulisan seperti
di atas masih terlalu banyak membuang baris, masih bisa diatur penulisan kode
programnya. Kita move titik pertaman penulisan ke titik yag ke 5, dengan begitu
kita tidak perlu memberikan LineTo pada akhir kode program setelah looping for.
Penulisannya seperti berikut ini:
Dengann
penulisan seperti di atas, kita menghemat 1 baris dan lebih efektif lagi
dibandingkan kode program sebelumnya. Jika dibandingkan dengan penulisan tanpa
array, maka penulisan kode program dengan menggunakan struktur data array akan
jauh lebih efektif. Perbedaan tersebut pasti akan dirasakan saat kita membuat
program dengan menggunakan struktur data array dengan tanpa struktur data
array. Jika masih membuat bintang 5 mungkin tidak menggunakan array atau record
masih bisa, tetapi jika yang ingin kita buat terdiri atas 30an titik. Bagaimana
cara kita menuliskan kode programnya? Masihkah kita mau menuliskan kode program
yang berulang sama tetapi tanpa menggunakan pengulangan? Tentu jika ditulis
satu-satu akan sangat membuang waktu.
Berikut ini akan dibahas sedikit lagi penulisan
dengan menggunakan record.
Penulisan
kode program dengan menggunakan record awalnya agak membingungkan, tapi cara
ini sangat membantu kita ketika dalam satu program kita harus membuat beberapa
bangun, jika membuat 2 bangun masih bisa menggunakan deklarasi array saja,
namun jika bangun yang dibuat mencapai 5 buah bangun, maka akan lebih mudah
bagi kita untuk menggunakan record alasannya karena untuk membuat 5 buah bangun
kita hanya perlu mendeklarasikan variabel untuk masing-masing array dari 1 buah
record yang telah dibuat. Sepertinya penjelasan ini sedikit membingungkan.
Untuk itu, coba kita lihat terlebih dahulu contoh penulisan record untuk 1
bangun 2 Dimensi:
Dari
gambar di atas, TBangun merupakan suatu record. Untuk menulis record, harus
didahulukan penulisan Type. Record yang kita kenal pada delphi konsepnya sama
dengan Struct yang ada pada bahasa pemrograman C++. Variabel X dan Y adalah
field dari record TBangun. Sedangkan untuk variabel bintang yang ada dalam Var,
merupakan variable array yang dibentuk dari record TBangun. Dan cara mengakses
variabel serta atribut record/fieldnya seperti yang ada pada gambar di atas
yaitu: bintang[“indeks ke berapa”].”NamaField” := “Nilai”. Itu adalah format
penulisan untuk mengisi nilai dari variabel bintang dari record TBangun.
Penulisan pada programnya tidak memerlukan tanda kutip.
Yang
saya maksudkan di atas bahwa menggunakan record lebih mempermudah kita dalam
membuat lebih dari satu bangun dalam satu program adalah kita hanya perlu
mendeklarasikan satu type record, selanjutnya kita hanya perlu mendeklarasikan
variabel array untuk tiap bangunnya. Jadi setiap array tidak dideklarasikan
titiknya/fieldnya karena field itu yang menjadi titiknya sudah dideklarasikan
sebagai record. Masih membingungkan? Mari kita lihat gambar di bawah ini:
Kita
lihat pada gambar di atas, kode program deklarasi variabel segitiga sebagai
array dari record TBangun. Itu yang saya maksudkan lebih mudah untuk membuat
banyak model bangun datar dengan hanya mendeklarasikan satu type record. Banyak
bangun yang bisa dibuat dengan field yang sama. Segitiga bisa langsung
mengakses X dan Y yang ada pada record TBangun. Cara mengaksesnya sama dengan
variabel bintang. Penulisannya seperti di bawah in:
Untuk
lebihh memperjelas pemahaman kita semua, langsung saja mulai saya bahas latihan
yang dibuat saat praktikum pada pertemuan 3 yaitu struktur data untuk komputer
grafis dalam bangun 2 dimensi. Seperti biasa kita siapkan program delphi kita
dan save Unit dengan nama Utama dan project dengan nama Prak03.
Step 1:
Siapkan tampilan seperti berikut ini:
Pada
pertemuan tiga ini sudah tidak dibahas lagi bagaimana cara membuat garis bantu
pada image dan untuk membuat image tersebut seperti gambar di atas ada di mana.
Untuk mengetahui letak objek image dan cara membuat garis bantu lebih detailya
silahkan baca pada pertemuan dua yang lalu.
Step 2: Buat garis bantu untuk image seperti tampilan di
bawah ini:
Kode Program:
Step 3: deklarasi record,
variabel dan variabel array dari record
Step 4: menulis kode program
untuk prosedur OnClick pada button segitiga
Pada
kode program yang diberi tanda, jangan lupa untuk menjumlahkan titik x dengan
variable garis bantu A dan untuk titik y yaitu variabel garis bantu B dikurangi
titik y. Untuk apa? Untuk konversi dari cartesius ke delphi (pembahasan ada
pada pertemuan 2 - Komputer Grafis 2).
Berikut ini adalah hasil tampilan button
segitiga saat dicompile:
Dari
gambar di atas, dapat kita lihat ketika tombol segitiga di klik seetlah user
memasukkan angka pada X1, Y1, X2, dan Y2 maka gambar segitiga muncul.
Pada
step berikutnya, kita akan membahas bagaimana membuat fungsi button bintang,
membuat fungsi bintang ini kita tetap menggunakan type record yang sama, yang
berbeda hanya pada deklarasi variabel arraynya. Setelah membahas button bintang
ini mungkin kita sudah mulai bisa melikat bahwa penggunaan record lebih efektif
daripada kita harus mengetikkan semua kode program satu-satu ataupun hanya
dengan array. Langsung saja kita lihat ke step selanjutnya:
Step 5:
menulis kode program untuk prosedur OnClick pada button bintang. Berikut scriptnya:
Dan berikut ini adalah merupakan hasil tampilan
dari kode program tersebut untuk button bintang 5:
Setelah
melihat kode program di atas dan hasil tampilannya saat di compile, mungkin
sudah cukup terasa lebih efisien. Hanya perlu mendeklarasikan satu kali record
selanjutnya jika ingin membuat berapa bangun pun sama. Hanya perlu
mendeklarasikan variabel array untuk record yang nantinya digunakan untuk
membuat bangun-bangun yang diinginkan.
Berikut
ini adalah kode program dari bangun yang terakhir dibuat pada pertemuan ini
yaitu bangun segi lima.
Step 6:
menulis kode program untuk prosedur OnClick pada button segi lima. Berikut
scriptnya:
Berikutnya adalah tampilan saat button segi lima
di klik:
Tidak
banyak penjelasan lagi untuk button segi lima ini karena sama dengan button
segi tiga, maupun bintang 5. Berikutnya adalah membuat tombol hapus. Untuk
menghapus pun sudah pernah dibahas pada pertemuan 2 yang lalu. Untuk itu dalam
pertemuan 3 ini hanya diberikan kode programnya dan tampilannya saja.
Step 7 : menulis kode program untuk prosedur OnClick
pada button Hapus. Berikut scriptnya:
Dapat kita lihat bahwa kode program ini sama
dengan yang pernah kita bahas pada pertemuan 2 yang lalu. Untuk itu, jika ada
yang belum terlalu jelas, dapat melihat kembali pembahasan pada pertemuan 2
yang lalu. Berikut ini adalah tampilan saat button hapus di klik:
Tampilan
di atas menunjukkan bahwa gambar yang ada telah berhasil dihapus.
Sampai di sini pembahasan Komputer Grafis pertemuan 3. Ikuti terus pembahasan untuk pertemuan-pertemuan selanjutnya.
Semoga bisa bermanfaat.. ^.^
No comments:
Post a Comment