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)