Penerapan Matriks pada Transformasi Objek 2D ( Translasi, Penskalaan, Rotasi) dalam Grafika Komputer

A. Pengertian

Matriks adalah bagian ilmu aljabar linear yang merupakan bilangan real yang disusun dalam baris dan kolom yang berbeda dalam sebuah tanda kurung. Matriks banyak berperan dalam perkembangan sistem komputer salah satunya dalam grafika komputer.

Grafika komputer merupakan ilmu komputer yang berfokus pada pembuatan maupun manipulasi gambar (visual) secara digital. Grafika komputer terdiri dari grafika 2D dan 3D. Pada komputer, gambar 2D dan 3D memiliki prosedur untuk menampilkan output pada layar. Untuk menampilkan output tersebut, objek gambar yang dimodelkan perlu dimodifikasi. Pemodifikasian ini dapat diproses dengan melibatkan operasi dari fungsi transformasi geometri.

Pada kesempatan kali ini, penulis akan berfokus untuk membahas mengenai transformasi dalam grafik 2D. Transformasi pada grafik 2D bekerja pada objek koordinat x dan y. Yang dimana objek tersebut berupa titik, garis dan bentuk.

Dalam transformasi geometris 2D terdapat beberapa transformasi, diantaranya translasi (pergeseran), penskalaan, putaran (rotasi), refleksi, dan shaer. Transformasi ini, kemudian dikenal dengan transformasi affine, yang merupakan transformasi yang memindahkan objek tanpa merusak bentuk.

Nah, dikesempatan ini penulis hanya akan berfokus pada tiga dari 5 transformasi geometri 2D tersebut yaitu transformasi translasi (pergeseran), penskalaan, dan putaran (rotasi), berikut uraiannya

B. Transformasi Dua Dimensi

1. Translasi

Translasi adalah operasi yang menyebabkan perpindahan objek dari satu tempat ke tempat lain. Perubahan ini dilakukan sejajar degan sumbu x dan y dengan menambahkan jarak translasi dari Tx ke Ty posisi koordinat asli (x,y) untuk memindahkan posisi baru (x’,y’).  Dengan :

x’= x + Tx (titik asal sebelum translasi)            

y’=y+Ty (titik baru hasil translasi)

Tx adalah translasi menurut sumbu x dan Ty adalah translasi menurut sumbu y.

Sehingga persamaan matriks tunggalnya adalah

Berikut gambaran transformasi pada translasi dari P(x,y) ke titk P’(x’,y’)

(b)/dok. pri

Gambar (1) dan (2) dikutip dari jurnal :Computer graphics: 2D and 3D Affine Transformation | Burhan Saleh - Academia.edu

Contoh.

Tentukan koordinat baru, untuk menggambarkan translasi objek segitiga dengan koordinat A(10,10), B(30,10), dan C (10,30) dengan tx,ty (10,20) !

Penyelesaian

A  :      x’=10+10=20 

y’=10+20=30 

A’=(20,30) 

B  :      x’=30+10=40 

y’=10+20=30 

B’=(40,30)  

C  :      x’=10+10=20 

y’=30+20=50 

C’=(20,50)

2. Penskalaan

Penskalaan merupakan operasi yang mengubah ukuran suatu objek (membesar atau mengecil) secara seragam atau tidak seragam yang bergantung pada faktor penskalaan yaitu (xs,xy). Keseragaman pensekalaan berarti skalar yang digunakan sama untuk semua komponen dan apabila sebaliknya disebut dengan ketidakseragaman penskalaan.

x’= x + sx (x,y) = titik asal sebelum diskala

y’ = y + sy (x’,y’) = titik setelah diskala

atau

x’ = x . sx

y’= y . sy

keterangan : xs = faktor pensakalaan menurut sumbu x

                           xy = faktor penskalaan menurut sumbu y

dari rumus di atas, dapat diformulakan dalam matriks sebagai

P’ = P . S

Dimana,

(3)/dok. pri

Gambar (3) dikutip dari jurnal :Computer graphics: 2D and 3D Affine Transformation | Burhan Saleh - Academia.edu

Ketentuan skala yaitu, jika nilai lebih dari 1 ( sx, sy > 1) berarti objek mengalami pembesaran. Jika sebaliknya berarti objek akan diperkecil. Bila (sx,sy) nilainya sama maka skala disebut uniform scalling, jika sebaliknya disebut differential scalling

Contoh skala matriks dan gambarnya

(4)/dok. pri

Gambar (4) dikutip dari jurnal :Transformation of an Object in Computer Graphics: A Case Study of Mathematical Matrix Theory | Manoj Kumar Srivastav - Academia.edu

contoh

Tentukan koordinat baru yang menggambarkan skala objek berupa segitiga dengan koordinat A ( 10,10) B (30,10), dan C (10,30) dengan (sx,sy) (3,2).

   Penyelesaian

    A  :    x’   =10*3 =30                  

              Y’      =10*2 =20 

               A’     =(30,20) 

    B  :     x’      =30*3 =90 

               Y’     =10*2 =20 

               B’      =(90,20)   

    C  :    x’      =10*3 =30 

              Y’     =30*2 =60 

               c’      =(30,60)

3. Rotasi

Objek yang diposisikan ulang di sepanjang jalur melingkar dalam bidang xy disebut rotasi. Untuk melakukan rotasi diperlukan sudut dan pivot point (xp, yp) dimana objek akan dirotasi.

Putaran bisa dilakukan pada satu titik terhadap suatu sumbu tertentu misalnya sumbu x, sumbu y atau garis tertentu yang sejajar dengan sumbu tersebut. Pada transformasi ini objek diputar terhadap titik asal. Sudut akan bernilai posistif jika diputar searah jarum jam dan bernilai negatif jika berlawanan arah jarum jam.

Sehingga persamaannya sebagai berikut:

(5)/dok. pri

Diketahui:

(6)/dok. pri

Lakukan Substitusi, maka :

(7)/dok. pri

Sehingga rotasi dinyatakan :

(8)/dok. pri

Rotasi titik terhadap pivot:

(9)

Gambar (5), (6), (7), (8), dan (9) di kutip dari jurnal :Modul Grafika Komputer.pdf (unpad.ac.id)

Berikut gambar grafik rotasi

(10)Transformasi_2D.pdf (dinus.ac.id)

untuk memudahkan perhitungan, dapat digunakan matriks berikut

(10)Transformasi_2D.pdf (dinus.ac.id)

Gambar (10) dan (11) dikutip dari : Transformasi_2D.pdf (dinus.ac.id)

Dimana:

 sin (θ) dan cos( θ) adalah fungsi linier dari θ,

  x’ kombinasi linier dari x dan y

  y’ kombinasi linier dari x dab y

contoh.

Untuk menggambarkan rotasi suatu objek berupa segitiga dengan koordinat A(10,10), B(30,10) dan C(10,30) dengan sudut rotasi 300° terhadap titik pusat cartesian (10,10), dilakukan dengan menghitung koordinat hasil rotasi tiap titik satu demi satu.

Penyelesaian

Titik A 

x’= xp+(x - xp) cos ɵ  - (y - yp) sin ɵ

   =10+(10-10)*0.9 – (10-10)*0.5 = 10 

y’= yp+(x - xp) sin ɵ   + (y - yp) cos ɵ   

   = 10+(10-10)*0.5 – (10-10)*0.9 = 10 

   Titik A’(10,10) 

Titik B 

x’ = xp+(x - xp) cos ɵ   - (y - yp) sin ɵ   

    =10+(30-10)*0.9 – (10-10)*0.5 = 28 

y’ = yp+(x - xp) sin ɵ   + (y - yp) cos ɵ   

    = 10+(30-10)*0.5 – (10-10)*0.9 = 20

    Titik B’(28,20)

Titik C 

x’ = xp+(x - xp) cos ɵ   - (y - yp) sin ɵ   

     =10+(10-10)*0.9 – (30-10)*0.5 = 0

y’   = yp+(x - xp) sin ɵ   + (y - yp) cos ɵ   

       = 10+(10-10)*0.5 – (30-10)*0.9 = 28 

       Titik C’(0,28)

C. Referensi

Modul Grafika Komputer.pdf (unpad.ac.id)

Computer graphics: 2D and 3D Affine Transformation | Burhan Saleh - Academia.edu

Transformation of an Object in Computer Graphics: A Case Study of Mathematical Matrix Theory | Manoj Kumar Srivastav - Academia.edu

Komposisi Transformasi Geometri dengan Matriks (+2 Contoh Soal dan Bahas) – idschool.net

Transformasi_2D.pdf (dinus.ac.id)