Transformasi objek dan transformasi system koordinat Processing

Memahami model transformasi objek dan Membuat animasi tingkat dasar

 

Processing memiliki fungsi built- in yang membuatnya mudah bagi Anda untuk memiliki objek dalam sketsa gerak,  memutar, dan tumbuh atau menyusut. Tutorial ini akan memperkenalkan Anda ke  proses Translation,Rotate,dan  Scalling sehingga Anda dapat menggunakannya dalam sketsa Anda. Secara  mendasar teknik animasi adalah Translation (pergeseran), Rotation (perputaran) dan Scalling (penskalaan), dengan mengkombinasi ketiga proses tersebut nantinya anda akan mendapatkan sebuah objek yang dianimasi.

Pada kesempatan kali ini saya hanya akan membahas mengenai Translation (pergeseran).

Translation

Seperti yang anda ketahui, layar yang disediakan processing adalah selayaknya sepotong kertas grafik. Jika kita ingin melakukan proses translasi sebenarnya terdapat dua pemikiran. Sebagai contoh adalah sebuah persegi sederhana dengan kode rect(20,20,40,40) seperti terlihat pada gambar 3.1.

 

Gambar 3.1. Objek persegi sederhana

Jika anda ingin memindahkan persegi tersebut ke koordinat 60 unit ke kanan dan 80 unit kebawah, pada pemikiran pertama adalah bahwa anada langsung memindahkan objek kearea tersebut dengan cara menambahkan nilai x dengann 60 dan nilai y dengan 80, sehingga kodenya adalah rect(20+60,20+80,40,40) seperti terlihat pada gambar 3.2 dan program 3.1.

Gambar 3.2. Proses pemindahan objek dengan translasi

Tapi ada cara yang lebih menarik untuk melakukannya, yaitu memindahkan kertas grafik sebagai gantinya, perhatikan gambar 3.3. Jika Anda memindahkan kertas grafik 60 unit kanan dan 80 unit ke bawah, Anda akan mendapatkan hasil persis visual yang sama. Memindahkan sistem koordinat seperti ini disebut translation.

Gambar 3.3. Proses translasi sistem koordinat

Hal penting untuk diperhatikan dalam diagram sebelumnya adalah bahwa, persegi panjang yang bersangkutan, itu tidak bergerak sama sekali tetap sudut kiri atas adalah masih di (20,20). Bila Anda menggunakan transformasi, hal yang menarik tidak pernah mengubah posisi sistem koordinat. Berikut ini adalah kode yang digunakan untuk melakukan transformasi objek dan transformasi system koordinat.

Program 3.1

void setup()
{
size(200, 200);
background(255);
noStroke();
fill(192);
rect(20, 20, 40, 40);
fill(255, 0, 0, 128);
rect(20 + 60, 20 + 80, 40, 40);
}

Program 3.2

void setup()
{
size(200, 200);
background(255);
noStroke();
fill(192);
rect(20, 20, 40, 40);
fill(0, 0, 255, 128);
pushMatrix();
translate(60, 80);
rect(20, 20, 40, 40);
popMatrix();
}

Mari kita lihat kode terjemahan lebih terinci. PushMatrix () adalah fungsi built–in yang menyelamatkan posisi sistem koordinat. Translasi (60, 80) bergerak pada sistem koordinat 60 unit dan 80 unit kanan bawah. Rect (20, 20, 40, 40) mempoisikan persegi panjang di tempat yang sama awalnya. Ingat,  objek tidak bergerak Namun grid bergerak sebagai gantinya. Akhirnya, popMatrix () mengembalikan sistem koordinat  awal sebelum Anda melakukan translasi.

Anda bisa melakukan translasi (-60,-80) untuk memindahkan grid kembali ke posisi semula. Namun, ketika Anda mulai melakukan operasi yang lebih canggih dengan sistem koordinat, akan lebih mudah untuk menggunakan pushMatrix () dan popMatrix () untuk menyimpan dan mengembalikan status daripada harus membatalkan semua operasi Anda.