Membuat Rotasi Menggunakan Processing

Oke, sekarang saatnya membahas rotasi. Mendengar kata rotasi pasti sobat terpikir bahwa derajat?Lingkaran? Atau berputar-putar? Atau malah sobat pusing? Hehe...

Rotasi sederhananya adalah memutar grid. Jadi berbeda dengan Transisi dan Skala, dalam hal ini grid akan diputar sekian derajat sesuai yang kita inginkan. Sehingga objek seakan berpindah tempat dari posisi awalnya memutar ke posisi yang kita inginkan.

Masukan kode listing berikut :

void setup()

{

size(200, 200);

background(255);

smooth();

fill(192);

noStroke();

rect(40, 40, 40, 40);

pushMatrix();

translate(40, 40);

rotate(radians(45));

fill(0);

rect(0, 0, 40, 40);

popMatrix();

}

Save dan jalankan (run), maka akan terlihat seperti gambar berikut :

Membuat Skala Menggunakan Processing

Pada postingan saya sebelumnya sudah membahas mengenai cara membuat transisi . Pada kesempatan ini, mari kita lanjutkan belajar membuat skala menggunakan processing. Untuk skala, dalam hal ini mengubah ukuran grid sehingga objek berubah ukurannya juga. Mari kita pelajari bersama.

Masukan kode listing berikut :

void setup()

{

size(200,200);

background(255);

stroke(128);

rect(20, 20, 40, 40);

}

Save dan jalankan (run), maka akan terlihat seperti gambar berikut :

Untuk mengubah skala pada grid, maka tambahkan kode listing :

stroke(0);

pushMatrix();

scale(2.0);

rect(20, 20, 40, 40);

popMatrix();

Sehingga kode listing keseluruhan menjadi :

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();

}

Save dan jalankan (run), maka akan terlihat seperti gambar berikut :

Sebenarnya sobat pasti melihat persegi tersebut berpindah, padahal tidak sama sekali. Karena sudut kiri masih (20, 20). Kemudian sobat pasti melihat ada perbedaan ketebalan garis persegi, hal ini karena sistem koordinat sudah ditingkatkan dua kali lipat skalanya.

Selesai sudah pembahasan mengenai Transisi dan Skala, sekarang kita akan mempelajari tentang Rotasi pada postingan berikutnya. Terima kasih ! :D

Membuat Transisi Menggunakan Processing

Pada tutorial kali ini saya akan membahas cara membuat transisi menggunakan processing. Adapun penjelasan mengenai apa itu processing bisa sobat lihat di sini . Selebihnya google aja ya :D

Transisi

Untuk membuat transisi pada processing sebelumnya harus sobat ketahui bahwa lembar kerja atau tampilan hasil processing itu berupa kertas grafik yang terdiri dari kolom-kolom. Berikut ini saya akan gambar sebuah persegi panjang sederhana dengan ukuran koordinat grafik atau biasa disebut rect (20, 20, 40, 40)

Masukan kode listing berikut :

void setup()

{

size(300, 300);

background(255);

noStroke()
;

}

Save dan jalankan (run), maka akan terlihat pada gambar berikut :

Kemudian mari kita buat perpindahan atau transisinya 60 unit dan 80 unit ke kanan bawah. Caranya cukup tambahkan pada dua titik koordinat awal saja yaitu x=20 dan y=20. Sehingga menjadi (20+60, 20+80, 40, 40), maka persegi panjang akan berpindah tempat ke kanan bawah. Silahkan tambahkan kode listing berikut :

void setup()

{

size(300, 300);

background(255);

noStroke();

fill(5);

rect(20, 20, 40, 40);

fill(128);

rect(20 + 60, 20 + 80, 40, 40);

}

Save dan jalankan (run), maka akan seperti gambar berikut :

Mudah bukan? Mari kita lanjutkan belajar mengenai Skala dan Rotasi di postingan saya berikutnya.