Komputer Grafis 3

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.. ^.^

Komputer Grafis 2

Kembali pada pembelajaran mata kuliah Komputer Grafis. Pembelajaran kali ini merupakan pertemuan kedua dari mata kuliah Komputer Grafis. Pada pertemuan kedua ini mahasiswa diharapkan sudah kenal dengan pemrograman Delphi seperti yang sudah diperkenalkan pada pertemuan 1 yang lalu. Pada pertemuan ini, mahasiswa langsung diajak untuk mempraktekkan bagaimana cara menggambar sebuah garis, persegi panjang (rectangle), elipse, dan membuat segitiga dengan menggunakan Delphi.

Sebelum masuk dalam pembahasan di lab, ada baiknya kita membahas terlebih dahulu dasar-dasar dari cara menggambar. Yang di maksud di sini adalah bahwa perlu kita ketahui jika berbicara mengenai menggambar dan koordinat, yang terbayang di pemikiran umum dalam dunia pendidikan adalah “Koordinat Cartesius”. Sedangkan dalam koordinat komputer atau jika dalam Delphi yang kita kenal dengan koordinat canvas, koordinat itu dibuat dalam bentuk matriks. Yang menjadi masalah adalah banyak orang yang memikirkan koordinat cartesius saat menggambar pada komputer atau Canvas dalam program komputer (Delphi). Berikut ini contoh masalah yang dihadapi saat menggambar pada canvas dengan pemikiran ukuran pada koordinat cartesius:

Terlihat dari gambar di atas, bayangan yang ada dalam pemikiran kita terbiasa dengan koordinat cartesius. Menurut kita gambar akan menjadi segitiga seperti gambar kiri atas. Tetapi setelah digambarkan pada koordinat computer/canvas, hasilnya menjadi terbalik. Bayangkan jika kita akan membuat arsitektur bangunan, hasilnya bangunan itu akan terbalik jika kita menggambar di computer dengan pemikiran titik koordinat cartesius.

Lalu, bagaimana cara mengatasi masalah tersebut? Sudah terbiasa berpikir dengan koordinat cartesius akan suit untuk diajak berpikir dengan menggunakan koordinat komputer. Cara yang diberikan pada mahasiswa adalah dengan menggunakan yang namanya konversi. Yaitu konversi dari titik koordinat cartesius menjadi koordinat canvas/komputer.

Pertanyaan berikutnya, bagaimana cara konversi titik koordinat tersebut?

Misalkan ini adalah gambar koordinat cartesius dengan titik P(0,0) dan sebelah kanan (garis biru) adalah titik bantu yang kita buat pada program Delphi untuk mengkonversi :

Gambar di atas adalah titik bantu yang kita buat pada Delphi (garis biru) yang jadi titik konversi kita adalah titik P(0,0) = Q(400,300). Berikut ini gambar jika keduanya kita gabungkan untuk memperjelas pemahaman:

Masuk dalam contoh soal:

Penjelasan dapat dilihat pada gambar. Untuk lebih jelasnya akan langsung dibahas mengenai pembuatan garis-garis ini dalam Delphi. Sebagai informasi, bahwa pada pertemuan kedua ini mahasiswa diperbolehkan menggunakan rectangle dan elipse dalam membuat gambar persegi dan elipse karna untuk perkenalan cara menggunakan. Untuk pertemuan berikutnya, membuat persegi harus menggunakan garis. Rectangle hanya digunakan untuk menghapus gambar. Perlu diketahui, untuk menggambar, yang kita butuhkan adalah object image. Kita hanya bisa menggambarkan image pada frame dan canvas. Jika pada bahasa pemrograman lain seperti java, kita bisa menggambar di mana saja, termasuk di panel. Tetapi untuk Delphi, menggambar hanya bisa dilakukan pada canvas atau frame. Lebih disarankan untuk menggambar pada canvas agar tidak sulit untuk mengatur ukuran.

Sebelum kita memulai, ada tiga hal lagi yang menjadi prinsip dalam konversi koordinat cartesius ke dalam koordinat canvas, yaitu:

1.  Input dan simpan titik-titik dalam koordinat cartesius
2. Hitung atau proses dalam koordinat cartesius
3. Gambar dalam koordinat Delphi (sebelumnya lakukan konversi dari cartesius ke Delphi)

Sepertinya sudah terlalu banyak dasar dan langkah-langkah yang dibahas dari yang ada di atas, selanjutnya langsung saja kita mulai untuk membuat bangun-bangun dan garis dengan menggunakan Delphi7.

Berikut ini langkah-langkahnya:

Step 1: Buka Delphi7 dan simpan Unit dengan nama Utama dan Project dengan nama Prak02, lalu buat object seperti yang ada pada gambar di bawah ini:

Step 2: Buat variable untuk garis bantu. Di sini kita gunakan A sebagai sumbu X dan B sebagai sumbu Y. berikut ini deklarasi variablenya:

Step 3: Setelah mendeklarasikan variabel, kita buat garis bantu pada saat form dujalankan. Klik form, pilih dan double klik event on show dan isikan script berikut ini:

Penjelasan kode di atas:

A := Image.Width div 2; artinya A diisikan dengan nilai dari panjang gambar dibagi 2, maka di dapat nilai setengahnya. Jika panjang gambar 800, maka A=400.

B := Image.Height div; sama halnya dengan A, nilai B diisi dengan nilai tinggi gambar dibagi 2. Jika tinggi gambar 600, maka nilai B=300.

Image.Canvas.Pen.Color := clBlack; artinya kita akan menggambar dengan menggunakan warna hitam

Image.Canvas.Pen.Style := psDot; artinya kita akan membuat garis dengan style titik-titik

Image.Canvas.Pen.Width := 1; artinya kita mengatur ketebalan dari garis yang kita buat (dalam px)

Image.Canvas.MoveTo(A,0); artinya kita akan menggambar dari mulai titik A,0. Jika pada contoh di atas, A = 400, maka akan mulai digambarkan dari titik (400,0).

Image.Canvas,LineTo(A,Image.Height); artinya kita menggoreskan garis titik-titik tersebut mulai dari titik A yang sudah di move ke (A,0) digariskan sampai pada titik (A,600). 600 merupakan tinggi gambar.

Setelah garis vertical bantuan didapat, kita move titik gambar ke titik (0,B) dari X=0 dan Y=B yaitu 300 dengan perintah Image.Canvas.MoveTo(0,B)

Image.Canvas.LineTo(Image.width,B); artinya menggambar mulai dari titik 0 sampai 800 (width dari image) dengan Y mulai dari B=300)

Setelah kita melakukan penuliasan script tersebut semuanya, maka garis bantuan akan muncul saat kita mengcompile program kita. Lebih jelasnya dapat dilihat pada gambar di bawah ini:

Lihat gambar di ata, hasil compile sudah menampilkan adanya garis bantu unuk memulai menggambar pada Delphi.

Step 4: Masuk ke tahap selanjutnya yaitu kita akan coba untuk membuat garis. Pilih button garis dan isikan kode program pada event OnClick.

Dari kode program di atas, berarti kita menggunakan pen dengan warna merah dengan ketebalan 1px, dan stylenya adalah dash karena tidak diubah lagi dari kita membuat garis bantu tadi, maka akan otmatis tetap mengikuti yang dari awal. Untuk mengubahnya, perlu dituliskan kode program Image.Canvas.Pen.Style := psSolid; maka akan berubah menjadi garis lurus nyata.

Pada kode program di atas juga terdapat MoveTo (A+X1, B-Y1); artinya kita memindahkan titik awal menggambar ke koordinat x,y dengan ukuran x = titik A (titik bantu) ditambah X1 dan y = titik B (titik bantu) dikurangi Y1. Dari mana mendapatkan cara hitung seperti ini? Dari rumus awal untuk mengkonversi. Yang dimasukkan oleh user pada kotak edit adalah koordinat cartesius, agar gambarnya sesuai di dalam Delphi, dibutuhkan konversi dari cartesius ke koordinat canvas. Jadi untuk menggambar garis harus dikonversikan dengan titik bantu. Konversi ini juga akan digunakan untuk menggambarkan rectangle, elipse, dan segitiga. Setelah kita menulliskan kode program tersebut, mari kita lihat tampilannya saat di compile:

Gambar di atas adalah saat angka dimasukkan oleh user dan button garis diklik yang menghasilkan garis miring titik-titik merah. Selanjutnya kita akan membuat kode program untuk membuat rectangle.

Step 5:Berikutnya yang akan dibuat adalah kode program pada button rectangle. Gambar di bawah ini adalah kode program pada event OnClick ButtonRectangle:

Saya akan membahas kode program yang diberi tanda merah. Pada kode tersebut, terdapat 4 titi koordinat, yaitu X1, Y1, X2, Y2 yang masing-masing titik tersebut dihitung dengan menambahkan dan menguragkan titik dari pada garis bantu yaitu titik A dan B. Hal tersebut dilakukan dengan maksud untuk mengkonversikan koordinat cartesius menjadi koordinat canvas (sama halnya dengan yang dilakukan pada ButtonGaris). Berikut ini adalah tampilan ButtonRectangle saat diklik setelah di compile:

Selanjutnya, kita akan membuat kode program pada ButtonElips.

Step 6: pilih event OnClick pada ButtonElips.

Berikut ini kode programnya:

Pada kode di atas, perhatikan yang diberi tanda merah. Jika dilihat sekilas, penulisan kode tersebut sama dengan penulisan kode program pada ButtonRectangle. Yang membedakannya hanya pada kata kunci Ellipse. Jika pada rectangle menggunakan kata kunci Rectangle. Maka hasil tampilannya adalah sebagai berikut:

Gambar elips mungkin tidak terlalu jelas karena warnanya kuning, untuk itu diberi tanda dengan kotak merah. Selanjutnya akan dibahas mengenai kode program untuk ButtonSegitiga. Kode programnya adalah sebagai berikut:

Step 7: Membuat kode program pada Button Segitiga. Pilih event OnClick pda ButtonSegitiga

Kode programnya adalah sebagai berikut:

Pada kode program tersebut, perhitungan segitiga untuk titik puncaknya berada ditengah-tengah dari rectangle, jadi titik tengahnya untuk X adalah (X1+X2)/2. Jika dikonversi maka A+((X1+X2)/2), dan Y = B-Y1. Tampilannya adalah sebagai berikut:

Hasilnya adalah segitiga berwarna abu-abu. Selanjutnya kita akan membuat ButtonHapus, button yang terakhir. Dimana logikanya jika seorang pelukis sedang melukis, saat ada kesalahan yang dilakukan adalah menimpa gambar itu dengan cat putih. Sama halnya dengan menggambar dengan Delphi. Tidak ada cara untuk menghapus, yang ada hanya menimpa gambar yang ada dengan warna putih. Jadi seolah-olah gambar seperti dihapus. Barikut ini akan dibahas lebih lanjut mengenai button hapus.

Step 8: Membuat kode program ButtonHapus dengan event OnClick.

Pada kode di atas, cara menghapus adalah dengan rectangle, yaitu dari titik 0 sampai dengan panjang image, dan dari nol sampai tinggi gambar. lalu ada kode FormUtama.FormShow(NIL); yang dimaksud adalah ketika menimpa gambar yang ada dengan rectangle, agar garis bantu tetap ada maka langsung dipanggil form show, yang dimana form show tersebut berfungsi untuk membuat garis bantu seperti yang telah dibahas di bagian atas untuk membuat garis bantu. Jadi ketika menimpa gambar dengan warna putih, langsung memanggil form show agar garis bantu titak hilang.. NIL artinya tidak ada parameter yang dikirimkan saat form show dipanggil. Berikut dalah tampilannya:

Gambar di atas adalah ketika sudah banyak gambar yang dibuat. Dan ketika ButtonHapus diklik, maka yang terjadi adalah seperti pada gambar di bawah ini:

Gambar yang telah dibuat hilang tapi garis bantu masih tetap ada. Itulah fungsi mengapa kita panggil FormShow yang di dalam fungsi itu berisi kode program untuk membuat garis bantu. Jadi ketika menimpa gambar dengan warna putih, yang dilakukan selanjutnya adalah langsung membuat garis bantu.

Sampai di sini dulu pembahasan Komputer Grafis pada pertemuan 2 ini. Ikuti terus pembahasan untuk pertemuan-pertemuan selanjutnya ya.. 

Semoga bisa bermanfaat.. ^.^