Saturday, December 31, 2016

Home » » Grafika Komputer dengan Processing-Bentuk Dasar-(bagian II)

Grafika Komputer dengan Processing-Bentuk Dasar-(bagian II)

9:33 PM    No comments

Assalamualaikum, wr. wb. Apa kabar sobat semua?
Kali ini ane mau melanjutkan materi sebelumnya Grafika Komputer dengan Processing (bagian I), Jika sobat belum membacanya ane sarankan baca dulu, sebab materi berikut ini tentu saja berkaitan dengan materi sebelumya.

Bentuk Dasar


Hal pertama yang harus diketahu terlebih dahulu adalah bentuk dasar, atau dalam bahasa gaul nya output primitives, dimana instruksi ini merupakan instruksi dasar dari terbentuknya bentuk yang lebih komplit.
Dalam grafika komputer terdapat empat bentuk dasar, yaitu


  1. Titik (point)
    Untuk menggambar sebuah titik digunakan instruksi point(x,y), dimana nilai x adalah jarak titik dari kiri layar (sumbu x) dan y adalah jarak titik dari atas layar (sumbu y), atau lebih singkatnya disebut dengan istilah koordinat. Koordinat tersebut dihitung dengan satuan pixels.

  2. Garis (line)
    Untuk menggambar garis digunakan instruksi line(x1,y1,x2,y2), dimana x1,y1 adalah koordinat awal garis dan x2,y2 adalah koordinat ujung/akhir garis. Garis yang terbentuk mengikuti warna pena(pen) yang digunakan. Pena memiliki warna hitam sebagai warna bawaan (default), mengganti warna pena dapat dilakukan dengan instruksi stroke(x) untuk wana skala abu-abu dan stroke(r,g,b) untuk warna lain. Ini sama halnya dengan mengganti warna background seperti yang sudah dijelaskan pada bab sebelumnya. Selain itu kita juga dapat mengatur ketebalan(weight) dan model pena. Instruksi yang digunakan untuk mengatur ketebalan pena adalah strokeWeight(x) sedangkan untuk mengatur model pena digunakan instruksi strokeCap(mode), dimana mode yang tersedia adalah SQUARE, ROUND dan PROJECT.
    Untuk lebih jelasnya perhatikan contoh beritut : 

       size(400,200);  
   background(255);     
   point(10,10);//buat titik di koordinat x=10 dan y=10
   line(20,10,120,10);  //buat garis dari koordinat x=20, y=10 hingga x=120, y=10
   stroke(255,0,0);  //Ganti warna pena menjadi warna merah
   strokeWeight(5);  //Ganti ketebalan pena menjadi 5 pixels
   point(10,20);  //buat titik di koordinat x=10 dan y=20  
   line(20,20,120,20);  //buat garis dari koordinat x=20, y=20 hingga x=120, y=20
   stroke(0,255,0);  //Ganti warna pena menjadi warna hijau   
   strokeCap(SQUARE);  //Ganti model pena = SQUARE
   point(10,30);  //buat titik di koordinat x=10 dan y=30  
   line(20,30,120,30);  //buat garis dari koordinat x=20, y=30 hingga x=120, y=30
   stroke(0,0,255);  //Ganti warna pena menjadi warna biru;
   strokeCap(ROUND);  //Ganti model pena = ROUND
   point(10,40);  //buat titik di koordinat x=10 dan y=40
   line(20,40,120,40);  //buat garis dari koordinat x=20, y=40 hingga x=120, y=40
   stroke(255,128,0);  //Ganti warna pena menjadi warna orange;   
   strokeCap(PROJECT);  //Ganti model pena = PROJECT
   point(10,50);  //buat titik di koordinat x=10 dan y=50  
   line(20,50,120,50);  //buat garis dari koordinat x=20, y=50 hingga x=120, y=50

    c. Bentuk persegi 

    Bentuk dasar lainnya adalah bentuk persegi yang mencakup bentuk segi tiga (triangle), segi empat beraturan (square) dan segi empat tidak beraturan (quad). Lalu bagaimana jika ingin membuat segi lima, enam, tujuh dan seterusnya? Tenang, masih ada jurus pamungkas yang dapat menangani semua bentuk persegi dengan instruksi :

    beginShape(mode);
    vertex(x,y);
    vertex(x,y);
    …
    vertex(x,y);
          endShape();

    parameter mode yang tersedia adalah POINTS, LINES, TRIANGLES, TRIANGLE_FAN, TRIANGLE_STRIP, QUADS dan QUAD_STRIP.

    vertex(x,y) merupakan instruksi untuk memasukkan titik koordinat yang akan digunakan untuk membentuk persegi, jadi persegi yang terbentuk akan sesuai dengan mode dan posisi titik koordinat yang dimasukkan melalui instruksi vertex(x,y) tersebut.

    berikut adalah instrruksi-instruksi yang digunakan :


  3. Formula dan Contoh
    Output

    Formula :
    triangle(x1,y1,x2,y2,x3,y3);

    contoh :
    triangle(50,0,0,100,100,100);



    Formula :
    square(x1,y1,width,height);

    contoh :
    square(0,0,100,50);

    Formula :
    quad(x1,y1,x2,y2,x3,y3,x4,y4);

    contoh :
    quad(0,0,100,0,75,50,25,50);

    Untuk yang berikut ini silahkan masukkan sendiri angkanya :)
    Ingat, Nilai x untuk menentukan posisi kiri-kanan titik koordinat dan nilai y untuk menentukan posisi atas-bawah titik koordinat. Good luck!


    Formula
    Output

    beginShape();
    vertex(x1, y1);
    vertex(x2, y2);
    vertex(x3, y3);
    vertex(x4, y4);
    endShape();

    beginShape();
    vertex(x1, y1);
    vertex(x2, y2);
    vertex(x3, y3);
    vertex(x4, y4);
    endShape(CLOSE);

    beginShape(POINTS);
    vertex(x1, y1);
    vertex(x2, y2);
    vertex(x3, y3);
    vertex(x4, y4);
    endShape();

    beginShape(LINES);
    vertex(x1, y1);
    vertex(x2, y2);
    vertex(x3, y3);
    vertex(x4, y4);
    endShape();

    beginShape(TRIANGLES);
    vertex(x1, y1);
    vertex(x2, y2);
    vertex(x3, y3);
    vertex(x4, y4);
    vertex(x5, y5);
    vertex(x6, y6);
    endShape();

    beginShape(TRIANGLES_STRIP);
    vertex(x1, y1);
    vertex(x2, y2);
    vertex(x3, y3);
    vertex(x4, y4);
    vertex(x5, y5);
    vertex(x6, y6);
    vertex(x7, y7);
    endShape();

    beginShape(TRIANGLES_FAN);
    vertex(x1, y1);
    vertex(x2, y2);
    vertex(x3, y3);
    vertex(x4, y4);
    vertex(x5, y5);
    endShape();

    beginShape(QUADS);
    vertex(x1, y1);
    vertex(x2, y2);
    vertex(x3, y3);
    vertex(x4, y4);
    vertex(x5, y5);
    vertex(x6, y6);
    vertex(x7, y7);
    vertex(x8, y8);
    endShape();

    beginShape(QUADS_STRIP);
    vertex(x1, y1);
    vertex(x2, y2);
    vertex(x3, y3);
    vertex(x4, y4);
    vertex(x5, y5);
    vertex(x6, y6);
    vertex(x7, y7);
    vertex(x8, y8);
    endShape();

    beginShape();
    vertex(x1, y1);
    vertex(x2, y2);
    vertex(x3, y3);
    vertex(x4, y4);
    vertex(x5, y5);
    vertex(x6, y6);
    endShape(CLOSE);

    Sebagai bahan latihan, silahkan obok-obok koding untuk menghasilkan output seperti berikut :)
     
  4. Bentuk Melingkar

    Setelah mempelajari bentuk persegi, kini saatnya kita membahas bentuk melingkar. Ada 2 instruksi yang dapat kita gunakan untuk membuat objek bentuk melingkar, yaitu :


    • ellipse(x,y,width,height);


    Dari gambar diatas dapat diketahui bahwa koordinat x,y merupakan titik tengah dari lingkaran (ellipse), hal ini berbeda dengan koordinat x,y pada persegi (rect) yang merupakan titik sudut kiri atas dari persegi (silahkan lihat lagi pembahasan tentang persegi).

    • arc(x,y,width,height,begin,end);




        Jika ellipse berupa lingkaran utuh, maka arc merupakan bentuk lingkaran yang tidak utuh alias terpotong. Pembentukannya sama dengan pembentukan ellipse, hanya saja ditambahkan dari lokasi awal (begin) dan akhir (end) dari tali busur (arc) yang ingin dibentuk. Lalu berapa nilai begin dan end tali busur tersebut? Bukankah titik koordinat harus memenuhi syarat minimal x dan y? Yap, nilai begin dan end bukan berupa titik koordinat, namun nilai dari sudut radian. Ingat, dalam derjat lingkaran penuh adalah 3600, namun dalam radian lingkaran penuh adalah 2p. Untuk lebih jelasnya perhatikan perbandingan sudut derjat dengan radian pada gambar berikut:

      Untuk lebih afdhol-nya pemahaman anda, mari kita coba untuk mempraktekkannya. (instruksi setelah tanda "//" adalah komentar, jadi tidak perlu diketik!)
       
     size(400,400); //atur ukuran layar 400x400 pixels;  
 background(255); //atur warna layar = putih;  
 stroke(255,0,0); //atur warna pena = merah;  
 ellipse(100,100,150,150); //buat ellipse di lokasi 100,100 dengan jari2 150 pixels;  
 stroke(0,255,0); //atrur warna pena = hijau;  
 arc(300,100,150,150,-PI/4,PI); //buat arc di lokasi 300,100 dengan jari2 150 px busur awal = -PI/4 dan akhir = PI;  
 stroke(0,0,255); //atrur warna pena = biru;  
 arc(100,300,150,150,3*PI/4,2*PI);//buat arc di lokasi 100,300 dengan jari2 150 px busur awal = 3*PI/4 dan akhir = 2*PI;  
 stroke(255,128,0); //atrur warna pena = orange;  
 arc(300,300,150,150,-PI/2,PI/4);//buat arc di lokasi 300,300 dengan jari2 150 px busur awal = -PI/2 dan akhir = PI/4;  
 stroke(0); //atur warna pena = hitam;  
 strokeWeight(3); //atur ketebalan pena = 3;  
 point(100,100); //titik tengah ellipse;  
 point(300,100); //titik tengah arc hijau;  
 point(100,300); //titik tengah arc biru;  
 point(300,300); //titik tengah arc orange;

    Demikian materi bentuk dasar Grafika Komputer, semoga bermanfaat.
    Jangan ketinggalan berita, Nantikan episode berikutnya tentang Gradasi Warna

0 comments:

Post a Comment