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