Transformasi 2D

Affine Transform
• Sebelum di-render, ada kemungkinan sebuah
objek geometri mengalami transformasi.

• Transformasi pada komputer grafik secara

umum disebut dengan affine transform.

• Affine Transform terdiri dari: Translation,

Rotation, Reflection, Scaling, Shearing.
 Transformasi Dasar 2D

Beberapa cara transformasi yang umum adalah :

1. Translasi : objek dipindahkan ke lokasi baru tanpa
mengubah bentuk, ukuran atau orientasinya.
2. Rotasi : objek dirotasi (diputar) terhadap titik tertentu
tanpa mengubah bentuk dan ukurannya
3. Scalling : objek diperbesar atau diperkecil.

4. Translasi dan rotasi disebut juga sebagai rigid body

transformation yaitu transformasi yang hanya
mengubah posisi objek, tanpa mengubah bentuknya
 Translasi
• Translasi dilakukan dengan penambahan
translasi pada suatu titik koordinat dengan
translation vector, yaitu (tx,ty), dimana
– tx adalah translasi menurut sumbu x dan
– ty adalah translasi menurut sumbu y.
• Contoh Untuk menggambarkan translasi
suatu objek berupa segitiga dengan koordinat
A(10,10) B(30,10) dan C(10,30) dengan
tx,ty(10,20), tentukan koordinat yang
barunya ?
• 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)
• Sebuah garis dengan koordinat A(10,10) dan
B(15,30) ditranslasikan dengan translation
vector (10,20).
public void paint(Graphics g) {
super.paint(g);
Graphics2D g2d = (Graphics2D) g;
g2d.setColor(new Color(20, 150, 150));
g2d.fillRect(20, 20, 80, 50);
g2d.translate(150, 50);
g2d.fillRect(20, 20, 80, 50);

}
 Penskalaan

Penskalaan adalah suatu operasi yang

membuat suatu objek berubah
ukurannya baik menjadi mengecil
ataupun membesar secara seragam atau
tidak seragam tergantung pada faktor
penskalaan (scalling factor) yaitu (sx,sy)
yang diberikan.
Pada proses ini perlu dispesifikasikan dua hal
yaitu :
1. Faktor penskalaan: sx & sy real: (0..N]
2. Titik acuan (xf,yf)
• Jenis penskalaan ada dua yaitu uniform dan
diferensial.
• Penskalaan Uniform terjadi bila factor vertical
sama dengan horizontal
• Diferensial jika kedua factor tersebut berbeda.
 Penskalaan terhadap titik (0,0)
Penskalaan terhadap titik (0,0)

x’ = x . sx
y’= y . sy

– Bentuk objek berubah

– Posisi objek berubah
– 0<S<1: lebih dekat ke (0,0) objek diperkecil
– S=1: ukuran tetap
– 1<S: lebih jauh dari (0,0) Objek di perbesar

Bila (sx,sy) mempunyai nilai yang sama, maka skala disebut

dengan uniform scalling.
penskalaan terhadap titik (Xf,Yf)
Untuk penskalaan terhadap titik (Xf,Yf) dapat
dirumuskan sebagai berikut :
Penskalaan terhadap titik (xf,yf)
x’= xf + (x-xf).sx
y’= yf + (y-yf).sy
 Contoh Soal
• Untuk menggambarkan skala suatu objek
berupa segitiga dengan koordinat A(10,10)
B(30,10) dan C(10,30) dengan (sx, sy) (3,2),
tentukan koordinat yang barunya ?
• 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)
Persegi panjang dengan koordinat (4,2),
(10,2), (4,4), (10,4) Scalling factor ½

Koordinat persegi panjang sesudah transformasi (2,1),

(5,1), (2,2), (5,2)
 Perputaran (Rotasi)

• Putaran adalah suatu operasi yang

menyebabkan objek bergerak berputar pada
titik pusat atau pada sumbu putar yang dipilih
berdasarkan sudut putaran tertentu.
• Untuk melakukan rotasi diperlukan sudut
rotasi dan pivot point (xp,yp) dimana objek
akan dirotasi.
• Putaran biasa dilakukan pada satu titik terhadap suatu
sumbu
– sumbu x,
– sumbu y atau
– garis tertentu yang sejajar dengan sembarang sumbu
tersebut.
• Titik acuan putaran dapat sembarang baik di titik pusat
atau pada titik yang lain.
• Aturan dalam geometri, jika putaran dilakukan searah
jarum jam,
– maka nilai sudutnya adalah negatif.
– Jika sebaliknya nilai sudutnya adalah positif.
Cos
 Contoh

• Untuk menggambarkan rotasi suatu objek

berupa segitiga dengan koordinat A(10,10),
B(30,10) dan C(10,30) dengan sudut rotasi 30o
terhadap titik pusat cartesian (10,10),
dilakukan dengan menghitung koordinat hasil
rotasi tiap titik satu demi satu.
=Titik C’ (0,28)
public void paint(Graphics g) {
super.paint(g);
Graphics2D g2d = (Graphics2D) g;
g2d.setColor(new Color(150, 150, 150));
g2d.fillRect(20, 20, 80, 50);
AffineTransform tx1 = new AffineTransform();
tx1.translate(110, 22);
tx1.scale(0.5, 0.5);

g2d.setTransform(tx1);
g2d.fillRect(0, 0, 80, 50);
AffineTransform tx2 = new AffineTransform();
tx2.translate(170, 20);
tx2.scale(1.5, 1.5);
g2d.setTransform(tx2);
g2d.fillRect(0, 0, 80, 50); }
• Buat programnya!
• g2d.translate(180, 50);
g2d.rotate(Math.PI/4);
• The rotate() method performs rotation.
• *that the rotation parameter is in radians.