Komputer Grafis 4

Transformasi Geometri 2D (Translasi & Scalling)

Kembali dalam pembahasan komputer grafis. Pertemuan ini merupakan pertemuan yang keempat. Pada pertemuan keempat ini, akan dibahas mengenai Transformasi Geometris. Dalam transformasi geometris, ada 3 hal yang wajib kita tahu yaitu translasi (pergeseran), scalling (penskalaan), dan rotasi (perputaran). Pada pertemuan kali ini hanya akan dibahas mengenai translasi dan scalling. Untuk rotasi akan dibahas pada pertemuan selanjutnya. Untuk yang pertama kita akan membahas mengenai transformasi geometri untuk translasi (pergeseran).

Mendengar yang namanya transformasi, jika terdapat satu titik lau titik tersebut berpindah ke tempat lain, maka titik tersebut dikatakan “bergeser”. Transformasi pasti berpindah tempat. Begitu pula dengan translasi yang merupakan bagian dari transformasi geometri. Jadi karena bergeser maka berarti titik itu mengalami transformasi geometri. Pergeseran yang kita ketahui adalah searah dengan sumbu X dan serah dengan sumbu Y. lebih jelasnya dapat kita lihat pada gambar di bawah ini:

Kita lihat pada gambar di atas, titik semula adalah yang berwarna biru, P(2,2). Titik tersebut mengalami pergeseran yang ditandai dengan titik berwarna hijau, yaitu pergeseran terhadap sumbu X dan sumbu Y. Titik semula P(2,2) mengalami pergeseran terhadap sumbu X dan sumbu Y sehingga bergeser ke titik P’(5,4) yang berwarna merah. Jadi titik P mengalami pergeseran sumbu X sebanyak 3 dan sumbu Y sebanyak 2. Banyaknya pergeseran pada sumbu X itulah yang disebubt dengan TX, dan banyaknya pergeseran pada sumbu Y disebut TY. Dalam komputer grafis, pergeseran ini harus dihitung satu-satu yaitu sumbu X dan sumbu Y dihitung secara tersendiri. Sehingga diperoleh rumus untuk menghitung sumbu X setelah bergeser adalah X’=X+TX dan untuk sumbu Y adalah Y’=Y+TY. Pada contoh gambar di atas, maka:

X’=X+TX  =>  X’=2+3  =>  X’=5

Y’=Y+TY  =>  Y’=2+2  =>  Y’=4

Setelah melihat contoh pergeseran pada gambar di atas, maka diperoleh fenomena dari TX dan TY, yaitu:

Implementasi pergeseran dalam program delphi adalah sebagai berikut ini:

X’ dan X yang kita maksudkan jika pada program adalah variabel yang sama dengan prinsip X yang sekarang adalah X yang sebelumnya ditambah dengan TX. Jadi jika pada penjelasan teori dijelaskan X’=X+TX, seolah-olah X’ dan X adalah variabel yang berbeda, namun sebenarnya X’ dan X adalah variabel yang sama. Sama halnya dengan Y’ dann Y. Selanjutnya sebelum kita masuk ke pembahasan praktikum lab, kita akan membahas sedikit mengenai teori dari penskalaan atau Scalling.

Penskalaan/Scalling termasuk dalam transformasi geometris. Mengapa? Jawabannya adalah termasuk transformasi geometris karena ketika sebuah gambar atau garis diperbesar sebenarnya kedua atau lebih titiknya mengalami pergeseran koordinat yang membuat garis atau gambar tersebut lebih besar atau lebih kecil dari aslinya. Pada pergeseran, operand yang kita gunakan adalah penjumlahan, sedangkan dalam penskalaan operand matematika yang ita gunakan adalah kali. Hal itu biasa didengar saat kita ingin memperbesar atau memperkecil gambar.pertanyaannya adalah, “berapa kali?”. Lebih jelasnya coba kita lihat gambar di bawah ini:

Pada gambar di atas, titik-titik yang membentuk garis biru merupakan ukuran awal atau asli. Sedangkan yang berwarna merah adalah hasil dari perbesaran sebanyak 2 kali. Jika pada translasi digunakan TX dan TY, maka dalam scalling yang digunakan adalah SX dan SY. Dari gambar di atas, hasil perbesaran tidak tepat sejajar dengan garis biru/garis awalnya. Terlihat bahwa garis tersebut menngalami perpindahan titik juga. Oleh arena itulah, scalling/penskalaan juga termasuk dalam golongan transformasi geometri. Rumus yang diperoleh dari penskalaan adalah: untuk sumbu X’=X*SX dan  untuk sumbu Y adalah Y’=Y*SY. Sama halnya dengan translasi, pada scalling perpindahan setiap titik juga dihitung terpisah untuk sumbu X dan sumbu Y.

Jika pada translasi terdapat fenomena TX dan TY, pada Scalling juga terdapat fenomena, yaitu fenomena SX dan SY. Seperti apa fenomena tersebut, kita lihat di bawah ini:

Implementasi Scalling dalam delphi dapat ditullis seperti berikut:

X’ dan X yang kita maksudkan jika pada program adalah variabel yang sama dengan prinsip X yang sekarang adalah X yang sebelumnya dikali dengan SX. Jadi jika pada penjelasan teori dijelaskan X’=X*SX, seolah-olah X’ dan X adalah variabel yang berbeda, namun sebenarnya X’ dan X adalah variabel yang sama. Sama halnya dengan Y’ dan Y. penjelasan ini sama dengan penjelasan pada translasi.

Selanjutnya kita akan langsung membahas kegiatan yang dilakukan saat praktikum komputer grafis pada pertemuan 4 ini. Pada pertemuan ini masih sama dengan pada pertemuan 3. Jika pertemuan 3 kita membuat 3 buah bangun datar, yaitu segitiga, bintang lima, dan segi lima, maka pada pertemuan 4 ini kita hanya membuat satu buah bangun yaitu bintang lima. Tidak hanya itu, penjelasan di atas sudah dibahas sedikit mengenai teori translasi dan scalling. Pastinya dalam praktikum kali ini akan diterapkan bagaimana kita membuat bangun bintang lima tersebut bergeser dan bisa diperbesar atau diperkecil.

Yuk, langsung saja kita lihat pembahasan mengenai praktikum transformasi geometri 2D ini.

Step 01: Siapkan Lembar Kerja Pada Delphi

Buka program delphi dan simpan unit dengan nama Utama dan project dengan nama Prak04:

Step 02: Masukkan Objek Yang Dibutuhkan

Masukkan Objek-Objek seperti pada gambar berikut:

Buat 8 buah objek label dan Edit untuk X1, Y1, X2, Y2, TX, TY, SX, dan SY. Buat 5 buah objek button untuk button menggambar, hapus, keluar, translasi, dan scalling.

Step 03: Membuat Garis Bantu Pada Image1

Pada bagian Var, dideklarasikan tx, ty, sx, dan sy dengan tipe double untuk translasi dan scalling.

Step 04: Membuat Kode Program Untuk Menggambar Bintang Lima

Step 05: Membuat Kode Program Untuk Menghapus Gambar

Step 06: Membuat Kode Program Untuk Button Translasi

Terlihat bahwa pada button translasi kita tidak usah menggambar bintang lagi, yang diperlukan hanya membuat perulangan dengan menjumlahkan X dan Y dari X dan Y yang semula sudah digambar bintangnya. Sebelumnya, paling awal kita panggil button hapus terlebih dahulu sehingga bintang yang semula kita gambar tidak muncul lagi. Namun, jika ingin menggambar lagi juga boleh saja, hasilnya akan sama saja. Penulisannya seperti di bawah ini:

Kita lihat, sama hasilnya hanya saja pada kode program kedua ini kita menggambar ulang dengan menambahkan langsung setiap array dari bintang dengan TX dan TY, lalu pada saat pengulangan kita mengulang sama seperti saat menggambar bintang. Kedua cara penulisan ini menghasilkan hasil yang sama. Hanya saja, sepertinya utuk cara yang pertama dirasaka lebih efektif dibandingkan cara kedua ini.

Selanjutnya kita akan membahas mengenai pembuatan kode program untuk Scalling. Penulisan pada scalling juga sama ada dua cara seperti translasi.

Step 07: Membuat Kode Program Untuk Button Scalling

Penulisan cara kedua adalah seperti berikut:

Step 08: Membuat Kode Program Untuk Keluar Dari Program

Step 09: Compile/Run Program Dan Hasilnya Saat Translasi

Berikut ini tampilan saat button Translasi diklik:

Step 10: Compile/Run Program Dan Hasilnya Saat Scalling

Pada gambar di atas, posisi bintang sengaja diletakkan di tengah dengan melakukan translasi terlebih dahulu agar pada gambar berikutnya ini lebih terlihat kalau bintang akan membesar dari ukuran semula. Berikut ini tampilan saat button Scalling diklik:

Demikian pembahasan komputer grafis 4 ini. Semoga bisa bermanfaat.. sampai bertemu lagi di pembahasan selanjutnya ya.. ^.^