Kuliah

GRAFIKA KOMPUTER

Processing 

Processing adalah bahasa pemrograman dan lingkungan pemrograman (development environment) open source untuk memprogram gambar, animasi dan interaksi. Digunakan oleh pelajar, seniman, desainer, peneliti, dan hobbyist untuk belajar, membuat prototipe, dan produksi. Processing digunakan untuk mengajarkan dasar-dasar pemrograman komputer dalam konteks rupa dan berfungsi sebagai buku sketsa perangkat lunak (software) dan tool produksi profesional. Processing mengaitkan konsep software pada prinsip-prinsip bentuk rupa, gerak, dan interaksi. Processing mengintegrasikan suatu bahasa pemrograman, lingkungan pemrograman, dan metodologi pengajaran ke dalam sistem terpadu.

Membuat Translasi, Skala dan Rotasi 

=TRANSLASI=
Translasi adalah memindahkan suatu objek sepanjang garis lurus dari suatu lokasi koordinat tertentu ke lokasi yang lain. Translasi dilakukan dengan penam-bahan 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 (10,10), B (30,10), dan C(10,30) dengan translation vector (10,20),  pertama tama dihitung koordinat hasil translasi satu demi satu.

Diketahui :

• T_Vektor = (10,20)
• Titik B(30,10)
• Titik C (10,30)

Jawab :

          Titik A  (10,10)

                  x’= (10+10) = 20

                  y’= (10+20) = 30

                  Hasil translasi Titik A’ = (20,30)

          Titik B(30,10)

                  x’= (30+10) = 40

                  y’= (10+20) = 30

                  Hasil translasi Titik B’ = (40,30)

          Titik C (10,30)

                  x’= (10+10) = 20

                  y’= (30+20) = 50

                  Hasil translasi Titik C’ = (20,50)

Listing translasi yang digunakan dalam program Processing :

void setup()

{

size(300,300);

background(255);

noStroke();

beginShape(TRIANGLES);

fill(220);

vertex(10,10);

vertex(30,10);

vertex(10,30);

fill(255);

vertex(10+10,10+20);

vertex(30+10,30+20);

vertex(10+10,30+20);

fill(128);

pushMatrix();

translate(10,20);

vertex(10,20);

vertex(30,10);

vertex(10,30);

popMatrix();

endShape();

}

Tampilan dari hasil listing translasi diatas :

 

 =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(10,10), B(30,10), C(30,20) dan D (10,20) diskala dengan skala factor (3,2), pertama-tama dihitung koordinat hasil skala satu demi satu. 

Diketahui : 

• S_Vektor = (3,2)
• Titik A (10,10)
• Titik B (30,10)
• Titik C (30,20)
• Titik D (10,20)

 Jawab :

            Titik A (10,10)

                   x’= (10.3) = 30

                   y’= (10.2) = 20

                   Hasil skalaTitik A’ = (30,20)

            Titik B (30,10)

                   x’= (30.3) = 90

                   y’= (10.2) = 20

                   Hasil skalaTitik B’ = (90,20)

            Titik C (30,20)

                   x’= (30.3) = 90

                   y’= (20.2) = 40

                   Hasil skalaTitik C’ = (90,40)

            Titik D (10,20)

                   x’= (10.3) = 30

                   y’= (20.2) = 40

                   Hasil skala titik C’ = (30,40)

Listing skala yang digunakan dalam  program Processing :

void setup()

{

size(400,400);

background(255);

stroke(128);

rect(10, 30, 30, 10);

stroke(0);

pushMatrix();

scale(3.2);

rect(10, 30, 30, 10);

popMatrix();

}  Tampilan dari hasil listing skala diatas :


 


=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(10,10), B(30,10), dan C(10,30  dirotasi dengan sudut rotasi 30⁰, terhadap titik pusat koordinat cartesian (10,10).

Diketahui:

• Xp=10
• Yp=10
• R_vektor= (10,15)
• Titik A = (10,10)
• Titik B = (30,10)
• Titik C = (10,30)

Jawab :

           Titik A = (10,10)

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

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

                      = 10

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

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

                      = 10

                   Hasil dari rotasi titik A’= (10,10)

           Titik B = (30,10)

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

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

                      = 28

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

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

                      = 20

                   Hasil dari rotasi titik B’= (28,20)

           Titik C = (10,30)

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

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

                      = 0

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

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

                      = 28

                  Hasil dari rotasi titik C’= (0 ,28)

Listing yang digunakan pada program Processing:

void setup()

{

size(200,200);

background(255);

smooth();

fill(220);

noStroke();

beginShape(TRIANGLES);

vertex(10,10);

vertex(30,10);

vertex(10,30);

stroke(255,0,0);

vertex(10,10);

vertex(28,20);

vertex(0,28);

pushMatrix();

translate(10,10);

rotate(radians(30));

fill(0);

popMatrix();

endShape();

}

Tampilan dari hasil listing rotasi diatas :

 






Keterangan :
Untuk aplikasi Processing bisa didownload disini....


Nama : Rendy Rolyandely
Nim    : 3101 09 02 1273
STMIK Banjarbaru