Tugas Grafika Komputer membuat Translasi, Skala, dan Rotasi dengan menggunakan program Processing

1. Translasi
 

Translasi adalah memindahkan suatu objek sepanjang garis lurus dari suatu lokasi koordinat tertentu ke lokasi yang lain.

Translasi dilakukan dengan penambahan translasi pada suatu titik koordinatdengan  translation vector atau shift vector, yaitu (t_x, t_y), dimana :

t_x : translasi vector sumbu x

t_y : translasi vector sumbu y

Koordinat baru titik yang ditranslasi dapat diperoleh dengan menggunakan rumus :

 x’ = x + t_x

y’ = y + t_y

Dimana (x, y) adalah koordinat asal suatu objek sedangkan (x’, y’) koordinat baru objek setelah ditranslasi.

Contoh:

Untuk menggambarkan translasi suatu objek yang berupa segitiga dengan koordinat:

A (50,20), B(100,100), dan C(50,100) dengan translation vector (100,100),

pertama tama dihitung koordinat hasil translasi satu demi satu.

T_Vektor = (50,20)

Titik A  (50,20)

x’= (50+100) = 150

y’= (20+100) = 120

Hasil translasi Titik A’ = (150,120)

Titik B(100,100)

x’= (100+100) = 200

y’= (100+100) = 200

Hasil translasi Titik B’ = (200,200)

Titik C (50,100)

x’= (50+100) = 150

y’= (10+100) = 110

Hasil translasi Titik C’ = (150,110)

Listing translasi yang digunakan dalam program Processing :

{

size(300,300);

background(255);

noStroke();

beginShape(TRIANGLES);

fill(220);

vertex(50,20);

vertex(100,100);

vertex(50,100);

fill(255);

vertex(50+100,20+100);

vertex(100+100,100+100);

vertex(50+100,100+100);

fill(128);

pushMatrix();

translate(100,100);

vertex(50,20);

vertex(100,100);

vertex(50,100);

popMatrix();

endShape();

}

Tampilah dari Hasil listing diatas :

Gambar 1.1 Hasil Translasi menggunakan program Processing

2. Skala

Transformasi skala adalah perubahan ukuran suatu objek. Koordinat baru diperoleh dengan   melakukan  perkalian nilai koordinat dengan skala factor, yaitu (s_x,s_y) dimana :

s_x  = skala factor untuk sumbu x 

s_y  = skala factor untuk sumbu y. 

Koordinat  baru titik yang diskala dapat diperoleh dengan:

x’ = x . s_x

y’ = y . s_y

Skala factor s_x dan s_y dapat diberikan sembarang nilai positif. Nilai lebih dari 1 menandakan bahwa sebuah objek diper-besar sedang nilai nilai kurang dari 1         menunjukkan bahwa objek diperkecil.

Contoh:

Untuk menggambarkan skala suatu objek yang merupakan segi empat dengan koordinat  A(50,20), B(100,100), C(50,100) dan D (100,30) diskala dengan skala factor (5,4), pertama-tama dihitung koordinat hasil skala satu demi satu. 

S_Vektor = (5,4)

Titik A (50,20)

x’= (50.5) = 50

y’= (20.4) = 80

Hasil skalaTitik A’ = (50,80)

Titik B (100,100)

x’= (100.5) = 500

y’= (100.4) = 400

Hasil skalaTitik B’ = (500,400)

Titik C (50,100)

x’= (50.5) = 250

y’= (100.4) = 400

Hasil skalaTitik C’ = (250,400)

Titik D (100,30)

x’= (100.5) = 500

y’= (30.4) = 70

Hasil skala titik C’ = (500,70)

Listing skala yang digunakan dalam  program Processing :

void setup()

{

size(400,400);

background(255);

stroke(128);

rect(50, 20, 20, 50);

stroke(0);

pushMatrix();

scale(5.4);

rect(50, 20, 20, 50);

popMatrix();

}

Tampilan dari hasil listing diatas :

Gambar 2.1 Hasil Skala menggunakan program Processing

3. Rotasi

Rotasi dua dimensi pada suatu objek akan memindahkan objek tersebut menurut garis melingkar. 

Untuk  melakukanrotasi diperlukan sudut rotasi θ dan pivot    point(x_p,y_p). 

Nilai positif dari sudut rotasi menentukan arah rotasi berlawanan dengan arah jarum jam. Sedangkan  sudut rotasi negative memutar objek    searah dengan jarum jam.

Rotasi suatu titik terhadap pivot point (xp, yp) menggunakan bentuk trigonemetri, sebagai berikut:

x’ = x_p + (x – x_p) cos θ – (y – y_p) sin θ

y’ = y_p + (x – x_p) sin θ + (y – y_p) cos θ

Contoh:

Untuk menggambarkan rotasi suatu objek yang merupakan segitiga dengan koordinat  A(50,20), B(100,100), dan C(50,10)0  dirotasi dengan sudut rotasi 30⁰, terhadap titik pusat koordinat cartesian (20,10).

Xp=10

Yp=10

R_vektor = (10,15)

Titik A = (10,10)

x’= 10+(50-10)cos 30⁰ – (20-10)sin 30⁰

= 10+(40) . 0,9 – (10) . 0,5

=40

y’= 10+(50-10)sin 30⁰ + (20-10)cos 30⁰

= 10+(40) . 0,5 – (10) . 0,9

=16

Hasil dari rotasi titik A’= (40,16)

Titik B = (100,100)

x’= 10+(100-10)cos 30⁰ – (100-10)sin 30⁰

= 10+(90) . 0,9 – (90) . 0,5

=45

y’= 10+(100-10)sin 30⁰ + (100-10)cos 30⁰

= 10+(90) . 0,5 – (90) . 0,9

= -31

Hasil dari rotasi titik B’= (45,-31)

Titik C = (50,100)

x’= 10+(50-10)cos 30⁰ – (100-10)sin 30⁰

= 10+(40) . 0,9 – (90) . 0,5

= 0

y’= 10+(50-10)sin 30⁰ + (100-10)cos 30⁰

= 10+(40) . 0,5 – (90) . 0,9

=-56

Hasil dari rotasi titik C’= (0 ,-56)

Listing yang digunakan pada program Processing:

void setup()

{

size(200,200);

background(255);

smooth();

fill(220);

noStroke();

beginShape(TRIANGLES);

vertex(50,20);

vertex(100,100);

vertex(50,100);

stroke(255,0,0);

vertex(40,16);

vertex(45,-31);

vertex(0,-56);

pushMatrix();

translate(10,10);

rotate(radians(30));

fill(0);

popMatrix();

endShape();

}

Tampilan dari hasil listing diatas :

Gambar 3.1 Hasil Rotasi menggunakan program Processing