Materi 5

Transformasi 2D

Transformasi 2D

Processing memiliki-fungsi-fungsi yang langsung dapat dipergunakan untuk memindah (menggerakkan),

memutar, dan mengubah ukuran objek: translate, rotate, dan scale.

Translate

Seperti dalam pembahasan sebelumnya, ruang kerja Processing adalah seperti selembar kertas, di mana
jika kita ingin menggambar sesuatu, kita perlu menentukan koordinatnya di atas kertas tersebut.
 rect(20 + 60, 20 + 80, 40, 40) – move Translate

Dari gambar di atas, ada satu perbedaan jelas, yaitu bahwa pada gambar kedua fungsi Translate tidak
mengubah posisi objek namun posisi dari sistem koordinat yang dipergunakan.

Hal pentingnya di sini adalah bahwa objek rect tersebut sama sekali tidak berubah koordinatnya (posisi
kiri atas tetap (20,20).

Berikut ini adalah contoh perintah untuk menggambar sebuah rectangle berwarna merah transparan,
lalu sebuah rectangle berwarna biru transparan.

void setup()
{
size(200, 200);
background(255);
noStroke();

// membuat rect pada posisi awal dengan warna abu-abu

fill(192);
rect(20, 20, 40, 40);

// membuat rect warna merah transparan dengan mengubah nilai koordinat objek
fill(255, 0, 0, 128);
rect(20 + 60, 20 + 80, 40, 40);

// membuat rect warna biru dengan mengubah grid-nya.

fill(0, 0, 255, 128);
pushMatrix();
translate(60, 80);
rect(20, 20, 40, 40);
popMatrix();
}

Dalam perintah-perintah di atas ada dua fungsi yang mungkin perlu diingat yaitu pushmatrix() dan
popmatrix(). Bagi Anda yang pernah memprogram dengan menggunakan bahasa assembly perintah
push dan pop pasti sudah tidak asing lagi. Dalam processing, pushmatrix() dipergunakan untuk
menyimpan posisi sistem koordinat pada saat itu, sedangkan popmatrix() untuk mengembalikan nilai
sistem koordinat yang telah disimpan tadi.

Dalam kode di atas, tampak bahwa perintah translate (60,80) dipergunakan untuk memindahkan sistem
koordinat ke kanan sebanyak 60 unit dan ke bawah 80. Perhatikan bahwa rect ketiga ditulis dengan nilai
(20, 20, 40, 40), persis seperti rect pertama.

Dalam hal ini tentu saja kita dapat menambahkan perintah translate (-60, -80) untuk mengubah sistem
koordinat ke posisi awal, namun demikian, penggunaan pushmatrix() dan popmatrix() akan jauh lebih
mudah jika dibandingkan dengan apabila kita harus mengingat semua translasi yang dilakukan.

Keuntungan Penggunaan Push-Pop

Bandingkan kedua kode program berikut ini:

void setup()
{
size(400, 100);
background(255);
for (int i = 10; i < 350; i = i + 50)
{
house(i, 20);
}
}
void house(int x, int y)
{
triangle(x + 15, y, x, y + 15, x + 30, y + 15);
rect(x, y + 15, 30, 30);
rect(x + 12, y + 30, 10, 15);
}

void setup()
{
size(400, 100);
background(255);
for (int i = 10; i < 350; i = i + 50)
{
house(i, 20);
}
}
void house(int x, int y)
{
pushMatrix();
translate(x, y);
triangle(15, 0, 0, 15, 30, 15);
rect(0, 15, 30, 30);
rect(12, 30, 10, 15);
popMatrix();
}

Rotate

Rotation
Selain menggeser grid, kita juga dapat menggunakan fungsi rotate() untuk memutar grid. Fungsi ini
hanya menggunakan satu nilai, yaitu nilai radian jumlah rotasinya. Dalam processing, semua fungsi yang
berkaitan dengan rotasi diukur dalam radian, bukan dalam derajat. Dalam bentuk derajat, sebuah
lingkaran memiliki nilai 360 derajat, namun dalam radian, lingkaran memiliki nilai 2pi. Berikut ini
perbedaannya.
Namun demikian, karena sebagian besar manusia menggunakan bentuk derajat, Processing
memfasilitasi hal ini dengan memberikan fungsi radians(), di mana nilai yang dimasukkan ke dalamnya
akan secara otomatis diubah menjadi derajat. Selain itu, Processing juga memiliki fungsi degrees() yang
mengubah radian menjadi derajat.

void setup()
{
size(200, 200);
background(255);
smooth();
fill(192);
noStroke();
rect(40, 40, 40, 40);

pushMatrix();
rotate(radians(45));
fill(0);
rect(40, 40, 40, 40);
popMatrix();
}

Memutar objek berdasarkan pivot point

void setup()
{
size(200, 200);
background(255);
smooth();
fill(192);
noStroke();
rect(40, 40, 40, 40);

pushMatrix();
// ubah posisi grid sesuai dengan pivot dari rect
translate(40, 40);

// putar grid
rotate(radians(45));

// buat rect
fill(0);
 rect(0, 0, 40, 40);
popMatrix();
}

Scale

Transformasi sistem koordinat terakhir adalah pengubahan ukuran (scaling), dan seperti dua
transformasi lainnya, yang diubah ukurannya di sini adalah grid-nya. Perhatikan contoh berikut:

void setup()
{
size(200,200);
background(255);

stroke(128);
rect(20, 20, 40, 40);

stroke(0);
pushMatrix();
scale(2.0);
rect(20, 20, 40, 40);
popMatrix();
}

Q1. Ubah program di atas untuk membuat gambar di mana kotak kedua (yang besar) sudut kiri atasnya
sama dengan kotak yang pertama.

Satu hal yang terlihat jelas adalah bahwa kotak tersebut tampak berubah posisinya, meskipun
sebenarnya tidak karena koordinat kiri atasnya tetap (20,20). Perhatikan juga dalam gambar yang
dihasilkan bahwa garisnya juga lebih tebal.

Urutan
Seperti halnya posisi perintah-perintah lain yang kita masukkan ke dalam proses, urutan memainkan
peranan penting. Proses rotasi yang diikuti dengan translasi dan diikuti lagi dengan pengubahan ukuran
hasilnya tidak sama dengan proses translasi  rotasi  skala. Perhatikan kode berikut ini.

void setup()
{
size(200, 200);
background(255);
smooth();
line(0, 0, 200, 0);
line(0, 0, 0, 200);

pushMatrix();
fill(255, 0, 0); // kotak merah
rotate(radians(30));
translate(70, 70);
scale(2.0);
rect(0, 0, 20, 20);
popMatrix();

pushMatrix();
fill(255); // kotak putih
translate(70, 70);
rotate(radians(30));
scale(2.0);
rect(0, 0, 20, 20);
popMatrix();
}

Contoh Tambahan

float angle = 0;
void setup()
{
size(400,400);
background(0);
}

void draw() {
translate(mouseX, mouseY);
rotate(angle);
fill(255,105,180);
rect(-45,-15,50,70);
angle += 0.1;
}

void setup()
{
size(700,400);
background(64,224,208);
}
void draw()
{
translate(mouseX, mouseY);
scale(mouseX / 100.0);
fill(32,178,170);
ellipse(-15, -15, 30, 30);
}

Latihan dan Tugas Untuk Praktikum

1. Download file mobil.png dan ketikkan perintah-perintah berikut:

2. Tambahkan screenshot dari listing program dan hasilnya.
3. Jelaskan tentang interaktivitas yang terdapat dalam program tersebut, misalnya apa yang terjadi
jika user menekan tombol panah ke atas, dan sebagainya.
4. Tambahkan kreativitas Anda, misalnya mengubah latar belakang, menampilkan gambar jalan,
pohon, dan sebagainya (dengan menggunakan objek-objek sederhana seperti rect, ellipse,
curveVertex, bezierVertex); jelaskan apa yang Anda tambahkan. TULIS DALAM LAPORAN UNTUK
MINGGU DEPAN!.