Komputer Grafis 7

Kembali lagi dalam pembahasan komputer grafis. Tidak terasa, sudah sampai dengan pembahasan ke tujuh. Setelah ini harus menghadapi Ujian Tengah Semester. Sebelum lebih jauh membahas kegiatan pada Komputer Grafis 7 ini, pada Komputer Grafis 6 kode program mengenai rotasi masih ada kesalahan, untuk itu, sebelum kita membahas yang ketujuh ini ada baiknya bagi para pembaca yang mengikuti pembahasan ini untuk ikut memperbaiki latihan yang dibuat selama enam pertemuan yang lalu. Dari kode program yang saya tuiskan di pembahasan yang lalu yang membuat rotasi bintang menjadi tidak sempurna adalah dikarenakan ada ketidak tepatan penggunaan tipe data pada deklarasi variabel. Kode program yang telah direvisi ini hanya diganti tipe data integer menjadi floating point semua yaitu dengan tipe data double, namun tidak hanya tipe data yang berubah, penulisan untuk pengambilan data dari textbox pun berubah dan menggambarpun ada yang berubah yaitu pada saat penghitungan translasi, scaling, atau rotasi tidak digunakan “round”. Penggunaan round hanya untuk pembulatan pada saat kita menggambar. Berikut ini adalah kode program yang sudah diperbaiki, lebih jelasnya bisa dibaca pada komentar yang ada pada kode program berikut:

Nah, demikian yang dapat saya perbaiki dari kode rogram yang salah pada pembahasan yang lalu. Kembali pada Komputer Grafis Pertemuan 7 yang membahas kelanjutan dari pertemuan 6 yaitu mengenai Komposit. Jika pada pertemuan 6 dibahas mengenai cara 1 untuk menghitung dan menggambar hasil komposit scaling dan rotasi, maka pada pertemuan 7 ini akan dibahas mengenai cara 2 menghitung dan menggambar komposit scaling dan rotasi. Cara 1 dan cara 2 ini harus menghasilkan hasil yang sama. Jika pada cara 1 kita melakukan satu per satu tahapannya, pada cara 2 kita harus menghitung matriks perkaliannya terlebih dahulu baru memasukkan rumus matriks terebut dalam kode program kita. Cara 2 ini lebih mempersingkat penulisan kode program, namun harus menghitung dulu untuk mendapatkan rumus dari matriks tersebut.berikut ini adalah perhiungan untuk mendapat rumus matriks:

Scaling:

Maka di dapatlah rumus untuk Scaling:

X’ = SX(X+TX)-TX

Y’ = SY(Y+TY)-TY

Dan untuk Rotasi, perhitungannya sebagai berikut:

Maka didapatlah rumus Rotasi:

X’ = X.cosθ – Y.sinθ + TX.cosθ – TY.sinθ –TX

Y’ = X.sinθ + Y.cosθ + TX.sinθ + TY.cosθ - TY 

Setelah kita mendapat rumus tersebut, kita sudah bisa membuat pivot point untuk scaling maupun rotasi. Langsung saja kita bahas pada kegiatan praktikum lab pembuatan kode program untuk pivot point scaling dan rotasi cara kedua ini.

Seperti biasa, pertama yang harus ditunjukkan adalah tampilan form yang akan kita buat nanti. Tidak jauh berbeda dengan form yang telah kita buat pada pertemuan 6 yang lalu. Di sini saya hanya mengganti nama untuk pivot point scaling dan rotasi cara 1 menjadi komposit scaling dan rotasi 1. Berikut ini tampilan awal formnya:

Langsung saja kita beralih untuk pembuatan kode program pada button Komposit Scaling 2, berikut kode programnya:

Terlihat bahwa pada saat menghitung, kita hanya perlu memasukkan rumus yang telah kita hitung dengan matriks pada awal pembahasan tadi. 

Berikut ini adalah tampilan fungsi button Komposit Scaling 2 saat program dijalankan:

Terlihat dari tampilan di atas bahwa objek bintang membesar sebanyak 2 kali dan tetap pada posisi tersebut, ini berarti hasil sama dengan ketika kita menekan tombol Komposit Scaing 1. Kode program dikatakan benar jika hasil cara 1, 2 dan 3 memberikan hasil komposit yang sama.

Berikut ini adalah penulisan kode program untuk Button Komposit Rotasi 2:

Kode program pada saat menghitung rotasi juga kita gunakan rumus yang telah kita hitung dengan matriks pada awal pembahasan pertemuan 7 ini. Tampilan saat dijalankan adalah:

Tampilan di atas adalah ketika button Komposit Rotasi 2 di klik satu kali. Jika di klik berkali-kali akan berputar di tengah, tidak bergerak sama halnya dengan button Komposit Rotasi 1.

Pada pertemuan 7 ini hanya dilakukan pratikum untuk cara 2 namun ketika mencoba-coba lagi untuk cara ketiga ternyata berhasil, jadi saya masukkan juga untuk yang cara ketiga ini. Pada cara ketiga, kita menulis program dengan mengalikan matriks pada program. Jadi singkatnya kita membuat kode program untuk perkalian matriks yang kita lakukan seerti pada cara 2. Jika pada cara dua kita menghitung di kertas, pada cara ketiga ini semua perkalian ditulis dalam kode program dengan looping for. Awalnya sedikit membingungkan dan bahkan saya tidak mengerti mengapa bisa seperti itu penulisan kode programnya, namun jika dibaca benar-benar alur dari setiap looping nantinya kita akan mengerti. Penulisan kode program tidaklah mutlak seperti yang akan saya sampaikan di bawah ini. Semua tergantung dari pola pikir atau logika berpikir para pembaca. Kode program setiap kita bisa saja berbeda. Setelah mendapat penjelasan seperti ini, saya mengerti dengan penulisan seperti ini, mungkin dari para pembaca ada yang berbeda. Seperti apa kode program untuk cara ketiga yang saya coba uraikan, kita liat penulisan kode programnya di bawah ini:

Kita sediakan variabel untuk array yang akan menampung matriks 3x3 yaitu matriks tp untuk translasi ke pusat, r untuk rotasi, s untuk scaing, ta untuk translasi ke awal, temp1 dan temp 2 untuk menampung hasil perkalian matriks 3x3. Kita juga menyediakan matriks 1x3 untuk hasil dan pengali x dan y. sulit untuk dibayangkan tapi coba saja untuk dibayangkan denga model perhitungan matriks yang telah dibahas di awal pembahasan pertemuan ini. Untuk matriks 3x3 kita deklarasikan dengan array 2 dimensi, penuisannya bisa kita lihat pada kode program di atas. Untuk lebih jelasnya seperti apa penulisannya, kita lihat untuk scaing cara 3 berikut ini:

Sedikit lebih rumit mungkin untuk memahami, tapi pelan-pean dibaca pasti akan mengerti. Mungkin penjelasan di atas juga belum terlalu jelas, semoga bisa dipahami. Berikutnya adalah kode program untuk Komposit Rotasi Cara 3:

Pembahasan mengenai tugas jika titik pivot point diubah dari titik (0,0) menjadi titik di P2. Jika pada pembahasan komposit sebelumnya kita membuat komposit scaling dan rotasi pada titik (0,0), maka pada tugas ini kita akan membuat komposit scaling dan komposit rotasi dengan titik acuan (pivot point) pada titik P2, yaitu pada titik bintag[2].x dan bintang[2].y. untuk membuat agar bintang bisa scaling dan rotasi dengan titik pivot point pada P2, kita hanya perlu mengganti nilai xpivot dan ypivot pada program. Potongan program yang perlu diganti adalah sebagai berikut:

Pada prosedur button gambar kita hanya perlu mengubah titik Xpivot dan Ypivot menjadi seperti kode program di atas yang diberi tanda merah. Sisanya kode program sama, tidak perlu diubah lagi.

Tampilannya sebagai berikut:

Untuk scaling:

Sampai di sini pembahasan untuk Komputer Grafis 7. Untuk cara 3 jika ada revisi lagi akan saya tambahkan pada pertemuan selanjutnya. Untuk sementara ini hasilnya sudah sama dengan tampilan cara 1 dan cara 2.

Beristirahat sejenak untuk mempersiapkan Ujian Tengah Semester.. Komputer Grafis 8 akan segera di post lagi ya.. Jadilah pembaca setia blog ini ya.. Thx

Semoga bermanfaat ^.^

Komputer Grafis 6

Kembali pada pembahasan Komputer Grafis. Pada pertemuan ini masih dibahas seputar transformasi geometri. Jika pada pertemuan-pertemuan yang lalu dibahas mengenai translasi, scaling, dan rotasi, maka pada pertemuan ini akan dibahas mengenai tranasformasi geometri komposit. Apa yang dimaksud dengan komposit?

Jika sebelumnya kita melakukan scaling di luar titik (0,0) maka objek 2D yang kita perbesar atau perkecil akan bergeser saat dilakukan scaling (perbesar atau perkecil). Sedangkan jika kita melakukan scaling atau rotasi pada saat objek berada di titik pusat (0,0) yaitu di tengah-tengah grafik pada koordinat cartesius, objek yang di scaling akan membesar atau mengecil tanpa bergeser. Mengapa hal itu dapat terjadi? Seperti itulah komposit, jadi kita akan membuat objek yang disclaing ataupun dirotasi tetapi tidak bergeser dan tetap di posisi itu hanya objeknya membesar, mengecil, atau berputar. Mengapa bisa tidak bergeser? karena titik x dan y berada di titik (0,0) jika kita masukkan pada rumus scaling maupun rotasi hasilnya akan didapat angka 0 (nol), jadi tidak aka bergeser.  Hal ini terlihat jelas pada saat kita melakukan rotasi. Pada pertemuan 5, kita melakukan rotasi, namun rotasi itu seperti bumi yang mengelilingi matahari. Untuk membuat objek berputar seperti bumi berputar pada porosnya harus dilakukan komposit. Seperti itu kurang lebih ilustrasinya.

Untuk melakukan komposit, salah satu cara yang dibahas pada pertemuan ini adalah dengan perhitungan menggunakan pivot point atau sederhananya sama dengan titik pusat dari objek yang akan dieksekusi baik scalling maupun rotasi.

Ada tiga cara untuk melakukan komposit:

Cara Pertama

Lakukan transformasi translasi satu per satu, setelah itu lakukan transformasi penyusun transformasi komposit secara berurutan (misalnya: scaling atau rotasi), tapi ingat selama proses komposit ini objek jangan digambar. Setelah selesai melakukan transformasi komposit secara berurutan, lakukan transformasi translasi untuk mengembalikan objek ke posisi semula, baru gambar objeknya.

Cara Kedua

Cari rumus kompositnya (Hati-hati, cara ini tidak fleksibel).Untuk cara ini diperlukan perhitungan matriks homogen berordo 3x3 (untuk objek 2D). disebut juga dengan Affine Matriks. Selama ini kita mengenal rumus untuk translasi, scaling, dan rotasi. Translasi: X’ = X + TX  dan  Y’ = Y + TY didapat rumus ini dari matriks di bawah ini:

Dari matriks di atas kita dapat melihat hasilnya yaitu X’ = X + TX dan Y’ = Y + TY dan 1=1. Maka didapatlah rumus translasi untuk X’ dan Y’.

Scaling: X’ = X * SX dan Y’ = Y * SY didapat dari matriks di bawah ini:

Dari matriks di atas, didapatlah rumus untuk X’ dan Y’

Rotasi: X’ = X.Cosθ – Y.Sinθ dan Y’ = X.Sinθ + Y.Cosθ diperoleh dari matriks berikut:

Dari perhitungan matriks di atas lah didapatkan rumus rotasi

Cara Ketiga

Akan dibahas pada pertemuan selanjutnya.

Pada pertemuan 6 ini akan dibahas komposit dengan menggunakan cara pertama. Ilustrasi perhitungannya dapat dilihat di bawah ini:

Gambar di atas adalah merupakan posisi awal segitiga. Segitiga tersebut akan discaling dan hasilnya segitiga tersebut tidak berpindah tempat tetapi membesar tetap di titik hitam tersebut.

Yang seperti itulah yang disebut komposit. Seperti apa cara kerja yang pertama. Berikut ilustrasi scaling dari posisi awal (segitiga biru) ke posisi akhir (segitiga merah):

Dari ilustrasi di atas, mula-mula segitiga biru dengan titik hitam dipindahkan ke titik hitam (0,0). Perhatikan gambar tersebut. Setelah berpindah ke titik tengah (0,0) segitiga baru discaling perbesar yang menghasilkan segitiga merah. Langkah terakhir, segitiga merah akan dikambalikan ke posisi titik hitam awal (tempat segitiga biru). Yang peru digambarkan dalam program nantinya hanya posisi awal dan posisi akhir, selama proses jangan digambarkan. Ilustrasi di atas hanya unuk menjelaskan alur proses scaling, jadi digambarkan dan dibedakan warnanya agar lebih mudah untuk dilihat perubahannya.

Saya rasa untuk landasan teori mengenai komposit cukup sampai di sini. Selanjutnya akan dibahas prakteknya dengan menggunakan delphi 7. Masih sama seperti pada pertemuan sebelumnya, kita bisa menggunakan form sebelumnya hanya tinggal menambahkan beberapa label, edit box dan button untuk pivot poin. Pada pertemuan ini akan dibuat di hal yaitu pivot point rotasi untuk rotasi objek pada titik pusat dan pivot point scaling untuk membuat objek membesar da mengecil dengan acuan titik pusat. Seperti biasa kita harus menyiapkan form untuk interfacenya. Tampilannya seperti berikut ini:

Kita dapat mendesain ulang seperti tampilan di atas atau langsung menambahkan dari form yang sudah kita buat di pertemuan sebelumnya. Yang penting button yang diberi tanda seperti gambar di atas kita tambahkan pada form kerja kita.

Langkah selanjutnya kita tambahkan variabel xpivot dan ypivot untuk menampung nilai yang didapatkan dari perhitungan dengan X1, X2, Y1, dan Y2. Berikut deklarasinya:

Jika kita membuat form baru tanpa melanjutkan dari pertemuan sebelumnya, di atas adalah deklarasi untuk variabel penampung yang akan kita gunakan nantinya dalam membuat aplikasi pivot point ini. Jika penulisan kode program belum jelas, tidak usah khawatir, pada akhir pembahasan akan ada full kode programnya untuk pembuatan form pada pertemuan ini. Yang sekarang dijelaskan hanya potongan program yang bersangkutan dengan pembahasan pertemuan ini dan keterangan fungsi dan logika jalannya program. Lanjut ke langkah selanjutnya yaitu membuat fungsi atau prosedur untuk gambar, button gambar di sini kembali dibahas karena pada langkah ini saat kita menggambarkan objek, nilai xipvot dan ypivot akan langsung dihitung dan akan langsung dicetak pada edit box untuk Xpivot dan Ypivot. Berikut ini adalah kode programnya:

Dari kode program di atas, maksdunya adalah bahwa pada saat kita menggambar, nilai pivot point untuk x dan y sudah langsung dibuat atau dihitung. Dan langsung dicetak atau diisi ke editbox XPivot dan YPivot. Sehingga pada saat kita jalankan, tampilannya adalah sebagai berikut:

Nilai XPivot dan YPivot akan terisi secara otomatis saat button gmbar diklik.

Langkah selanjutnya adalah untuk fungsi atau prosedur button Pivot Point Scaling:

Untuk kode scaling dan translasi pertama tanpa penulisan image line to juga bisa, karena seharusnya hnya ditampung pada variabel dan pada saat translasi untuk kembali ke posisi awal baru digambar (ingat aturan cara 1). Nanti akan dituliskan kode program tanpa line to selama proses pada bagian pivot point rotasi. Sebenarnya ini hanya pengembangan dari rumus translasi, scaling, dan rotasi yang telah kita gunakan untuk membuat kode program pada pertemuan-pertemuan yang lalu. Kita lihat tampilannya adalah sebagai berikut:

Terlihat bahwa objek bintang bertambah besar dan tidak bergeser seperti saat kita menekan tombol scaling. Barikutnya akan dibahas untuk pembuatan pivot point rotasi:

Terlihat dari kode di atas bahwa menggambar hanya dilakukan pada saat objek dikembalikan ke posisi semula. Hasil tampilannya adalah sebagai berikut:

Dari hasil di atas terlihat bahwa bintang berputar 30° tanpa berpindah tempat, hanya berputar para titik tengahnya. Berikut ini adalah kode program keseluruhan dari praktikum ini:

Demikian pembahasan pada komputer grafis 6 ini. Untuk rotasi masih ada kesalahan yang membuat perputaran bintang menjadi tidak sempurna. Untuk itu pada pertemuan selanjutnya akan coba untuk diperbaiki kesalahan ini.

Tetap jadi pembaca setia blog ini ya.. semoga bisa bermanfaat.. ^.^