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

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 360⁰, 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
   

Read More

Grafika Komputer dengan Processing-[Pengenalan Grafika Komputer]-(bagian I)

Assalamualaikum wr. wb. Apa kabar sobat semua? Kali ini saya ingin berbagi sedikit ilmu tentang Grafika Komputer. Adapun perangkat yang digunakan adalah Processing 3.2.3

Wokeh, daripada banyak "mukadimah" mari kita langsung kemon aja... :D

  

Apa itu Grafika Komputer?

Grafika Komputer (Computer Graphic) merupakan ilmu yang mempelajari metode/cara untuk memproduksi suatu gambar, grafik atau citra realistik.

Pada hakikatnya Grafika Komputer seperti kegiatan “melukis”, dimana dibutuhkan kanvas sebagai objek yang dilukis, pena (pen) sebagai alat untuk membuat garis, dan kuas sebagai alat untuk mewarnai bidang gambar.

Apa itu Processing?

Processing merupakan perangkat lunak open source yang menyediakan bahasa pemrograman dan lingkungan pemrograman untuk pembuatan program Grafika Komputer, Pengolahan Citra dan Animasi. Untuk mendapatkan Processing, anda dapat mengunduhnya di http://www.processing.org. Processing memiliki dua versi, yaitu versi dengan java dan versi tanpa java.

Penampakan Processing 3.2.3

Processing menggunakan nama default "sketch" untuk sebuah proyek. Setiap sketch disimpan dalam sebuah direktori dan program utama disimpan dengan nama yang sama dengan nama direktori. Sebagai contoh, sketch dengan nama ‘program_pertama_ku’ akan disimpan di derektori ‘program_pertama_ku’ dengan file program ‘program_pertama_ku,pde’.

  

Screen (layar)

Seperti yang telah kita bahas sebelumnya, bahwa untuk melukis kita membutuhkan kanvas atau obek yang dilukis atau tempat melukis. Pada Processing, kanvas tersebut diberi nama screen (layar). Sebelum melukis pada screen kita perlu mengatur ukuran(size) dan warna latar (background) terlebih dahulu.

Untuk mengatur ukuran layar digunakan instruksi 

size(width,height,screenType);

dimana width adalah lebar layar, height adalah tinggi layar dan screenType adalah jenis layar (jika tidak dicantumkan maka otomatis menggunakan layar 2 dimensi (2D).

Untuk memberi warna latar digunakan instruksi

background(x)

atau 

background(r,g,b);

dimana r,g,b merupakan penggabungan dari elemen Red, Green dan Blue yang akan menghasilkan warna kombinasinya. Sedangkan x adalah nilai GrayScale yang akan menghasilkan warna hitam, abu-abu dan putih. Nilai r,g,b ataupun x memiliki rentang antara 0 hingga 255.

Untuk lebih jelasnya silahkan anda ketik perintah berikut, kemudian coba ganti angka 0 (nol) pada instruksi background(0) menjadi 128 dan 255, lihat hasilnya.

  
  size(20,200);
  background(0);

Dengan instruksi background(x) layar akan diberi warna skala abu-abu, jika kita ingin memberi warna lain, maka kita harus menggunakan instruksi background(r,g,b), perhatikan contoh berikut :

 size(400,200);  
 background(255,128,0);  

Kombinasi warna screen background

Titik koordinat

Agar sebuah gambar (objek) dapat diletakkan sesuai keinginan pada layar, tentu saja kita harus mengetahui dimana lokasi gambar tersebut harus diletakkan. Sebuah layar 2D memiliki titik koordinat (x,y) sedangkan layar 3D memiliki titik koordinat (x,y,z). Perhatikan gambar berikut :

Dari gambar koordinat layar 2D diatas dapat dilihat bahwa koordinat(0,0) berada di sudut kiri atas layar, untuk menggeser objek lebih ke kanan dapat dilakukan dengan menambah nilai x, sebaliknya untuk menggeser objek lebih ke kiri maka nilai x harus dikurangi. Sedangkan untuk menggeser objek lebih ke bawah dapat dilakukan dengan menambah nilai y dan menggeser gambar ke atas dapat dilakukan dengan mengurangi nilai y.

Sedangkan untuk mode Layar 3D, kita dapat menggeser gambar ke belakang atau ke depan dengan cara merubah nilai z.

Baiklah sobat, sampai disini dulu materi tentang Pengenalan Grafika Komputer. Jika masih penasaran, kita jumpa lagi di posting berikutnya Grafika Komputer dengan Processing-[Bentuk Dasar]-(bagian II)

Read More