Transformasi 2D pada Processing

  A.  Gambar Rumah

·         Translating

Source code:

         

void setup() {

size(500, 300);

//posisi awal

fill(192);

triangle(200,100, 275,40, 350,100);

rect(200,100, 150,100);

//posisit erakhir

fill(0,300,100,100);

pushMatrix();

translate(60,80);

triangle(200,100, 275,40, 350,100);

rect(200,100, 150,100);

popMatrix();

}

Screenshot:

·         Scalling

Source code:

         

void setup() {

size(800, 600);

//posisiawal

fill(192);

triangle(200,100, 275,40, 350,100);

rect(200,100, 150,100);

//posisiterakhir

fill(0,300,100,100);

pushMatrix();

scale(2.0);

triangle(200,100, 275,40, 350,100);

rect(200,100, 150,100);

popMatrix();

}

Screenshot:

·         Rotating

Source code:

void setup() {

size(800, 500);

//posisiawal

fill(192);

triangle(200,100, 275,40, 350,100);

rect(200,100, 150,100);

pushMatrix();

rotate(radians(45));

//posisi akhir

fill(255);

triangle(200,100, 275,40, 350,100);

rect(200,100, 150,100);

popMatrix();

}

Screenshot:

  B. Gambar Orang

·         Translating

Source code:

         

void setup(){

size(500, 800);

fill(192);

  // Kepala

ellipse(250,285,100,100);

  // Badan

rect(178,335, 150,200);

  // Lengankanan

rect(78,335, 100,50);

rect(78,385, 50,100);

  // Lengankiri

rect(328,335, 100,50);

rect(378,385, 50,100);

  // Kaki kanan

rect(178,535, 50,100);

rect(178,635, 50,100);

  // Kaki kiri

rect(278,535, 50,100);

rect(278,635, 50,100);

fill(200, 100, 150, 100);

pushMatrix();

translate(60,80);

    // Kepala

ellipse(250,285,100,100);

  // Badan

rect(178,335, 150,200);

  // Lengankanan

rect(78,335, 100,50);

rect(78,385, 50,100);

  // Lengankiri

rect(328,335, 100,50);

rect(378,385, 50,100);

  // Kaki kanan

rect(178,535, 50,100);

rect(178,635, 50,100);

  // Kaki kiri

rect(278,535, 50,100);

rect(278,635, 50,100);

popMatrix();

}

Screenshot:

·         Scalling

Source code:

         

void setup(){

size(800, 800);

fill(192);

  // Kepala

ellipse(250,285,100,100);

  // Badan

rect(178,335, 150,200);

  // Lengankanan

rect(78,335, 100,50);

rect(78,385, 50,100);

  // Lengankiri

rect(328,335, 100,50);

rect(378,385, 50,100);

  // Kaki kanan

rect(178,535, 50,100);

rect(178,635, 50,100);

  // Kaki kiri

rect(278,535, 50,100);

rect(278,635, 50,100);

pushMatrix();

fill(0,0,255,128);

scale(2.0);

    // Kepala

ellipse(250,285,100,100);

  // Badan

rect(178,335, 150,200);

  // Lengankanan

rect(78,335, 100,50);

rect(78,385, 50,100);

  // Lengankiri

rect(328,335, 100,50);

rect(378,385, 50,100);

  // Kaki kanan

rect(178,535, 50,100);

rect(178,635, 50,100);

  // Kaki kiri

rect(278,535, 50,100);

rect(278,635, 50,100);

popMatrix();

}

Screenshot:

·         Rotating

Source code:

         

void setup(){

size(800, 800);

fill(192);

  // Kepala

ellipse(250,285,100,100);

  // Badan

rect(178,335, 150,200);

  // Lengankanan

rect(78,335, 100,50);

rect(78,385, 50,100);

  // Lengankiri

rect(328,335, 100,50);

rect(378,385, 50,100);

  // Kaki kanan

rect(178,535, 50,100);

rect(178,635, 50,100);

  // Kaki kiri

rect(278,535, 50,100);

rect(278,635, 50,100);

pushMatrix();

  rotate(radians(-25));

fill(0);

    // Kepala

ellipse(250,285,100,100);

  // Badan

rect(178,335, 150,200);

  // Lengankanan

rect(78,335, 100,50);

rect(78,385, 50,100);

  // Lengankiri

rect(328,335, 100,50);

rect(378,385, 50,100);

  // Kaki kanan

rect(178,535, 50,100);

rect(178,635, 50,100);

  // Kaki kiri

rect(278,535, 50,100);

rect(278,635, 50,100);

popMatrix();

}

Screenshot:

C.   Gambar Balok

·         Translating

Source code

void setup(){

size(500,500);

fill(192);

smooth();

quad(150,200, 250,200, 250,300, 150,300);

quad(150,200, 220,120, 315,120, 250,200);

quad(315,120, 315,220, 250,300, 250,200);

fill(0,60, 100, 100);

pushMatrix();

translate(60,80);

quad(150,200, 250,200, 250,300, 150,300);

quad(150,200, 220,120, 315,120, 250,200);

quad(315,120, 315,220, 250,300, 250,200);

popMatrix();

}Screenshot

 

·         Scalling

Source code:

         

void setup(){

size(800,700);

fill(192);

smooth();

quad(150,200, 250,200, 250,300, 150,300);

quad(150,200, 220,120, 315,120, 250,200);

quad(315,120, 315,220, 250,300, 250,200);

fill(0,60, 100, 100);

pushMatrix();

scale(2.0);

quad(150,200, 250,200, 250,300, 150,300);

quad(150,200, 220,120, 315,120, 250,200);

quad(315,120, 315,220, 250,300, 250,200);

popMatrix();

}

Screenshot:

·         Rotating

Source code:

void setup(){

size(500,500);

fill(192);

smooth();

quad(150,200, 250,200, 250,300, 150,300);

quad(150,200, 220,120, 315,120, 250,200);

quad(315,120, 315,220, 250,300, 250,200);

  //fill(200, 100, 150, 100);

pushMatrix();

  rotate(radians(-15));

fill(255);

quad(150,200, 250,200, 250,300, 150,300);

quad(150,200, 220,120, 315,120, 250,200);

quad(315,120, 315,220, 250,300, 250,200);

popMatrix();

}

Screenshot:

Xiexie!!

Read More

Membuat bentuk sederhana menggunakan aplikasi Processing

Membuat Bentuk sederhana menggunakan aplikasi processing

Tugas 

1. 

penyelesaian :

a. Listing
    size(250, 150);
    line(100, 50, 200, 50);
    line(100, 100, 200, 100);
    line(100, 50, 100, 100);
    line(200, 50, 200, 100);
    line(100, 50, 150, 20);
    line(200, 50, 150, 20);

b. Listing
    size (650,650);
    background(128, 128, 128);

   //kepala
   rectMode(CENTER);
   ellipse(300, 120, 100, 100);

   //badan
   rect(300, 245, 100, 150);

   //tangan
   rect(220, 185, 60, 30);
   rect(380, 185, 60, 30);
   rect(395, 230, 30, 60);
   rect(205, 230, 30, 60);

   //kaki
   rect(265, 350, 30, 60);
   rect(265, 400, 30, 60);
   rect(335, 350, 30, 60);
   rect(335, 400, 30, 60);

c. Listing
    size(500,500);
    background (128, 128, 128);

    line(100,50,200,50);
    line(70,120,170,120);

    line(70, 120, 70, 200);
    line(70, 200, 170, 200);
    line(170, 120, 170, 200);

    line(200, 50, 200, 150);

    line(170, 200, 200, 150);
    line(170, 120, 200, 50);
    line(70, 120, 100, 50);

Xiexie!!

Read More

Latihan Soal Output Primitif

Tugas 1.

1. Buat sebuah garis yang menghubungkan dari titik (20,10) sampai dengan titik (30,18) dengan menggunakan algoritma DDA.

Penyelesaian

a. Mencari

   ∆x = x1- x0 = 30-20 = 10

   ∆y  = y1 – y0 = 18 – 10 = 8

b. Hitung dan bandingkan nilai absolute nya

    |x| = 10

    |y| = 8

c. Hitung step, karena |x| > |y| , maka step = |x| = 10, maka diperoleh :

   X_inc =  ∆x/ step = 10/10 = 1

   Y_inc =  ∆y/  step = 8/10 = 0,8

2. Buat sebuah garis yang menghubungkan dari titik (20,10) sampai dengan titik (30,18) dengan menggunakan algoritma Bressenham.

a.       Mencari

 ∆x = x1- x0 = 30-20 = 10

 ∆y = y1 – y0 = 18 – 10 = 8

b.      Parameter p0

P0 = 2 ∆y -  ∆x  = 6

c.       Increment

 2 ∆y  = 16

 2 ∆y - ∆x = -4

Xiexie!!

Read More