PRAKTIKUM 1

Pengantar Grafika Komputer Dan Pengenalan

Processing 3.5.4
Apakah Grafika Komputer Itu?
Grafika Komputer (Computer Graphic) adalah seperangkat alat yang terdiri dari hardware dan software untuk
memproduksi suatu gambar, grafik atau citra realistik untuk seni, game komputer, foto dan film animasi. Grafika
Komputer merupakan bagian yang paling paling sulit di bidang komputer, karena selain harus mengerti bahasa
dan logika pemrograman juga dibutuhkan kemampuan analisis serta pemahaman matematik.
Banyak cara dan variasi untuk menghasilkan gambar dengan komputer. Seringkali dihadapkan pada masalah
algoritma dan pemrograman untuk menghasilkan citra yang realistik. Hal ini adalah sesuatu yang lumrah, sehingga
diperlukan pendekatan sesederhana mungkin dan pemahaman algoritma untuk mendapatkan citra realistik
Processing untuk percobaan Grafika Komputer

Processing merupakan perangkat lunak open source yang menyediakan bahasa pemrograman dan lingkungan
pemrograman bagi orang-orang yang ingin membuat program pengolahan citra, animasi dan suara. Processing
digunakan dalam berbagai tahap seperti: belajar, membuat prototype sampai pasda tahap produksi. Processing
dibuat dengan tujuan untuk memberikan fasilitas belajar pemrograman computer dalam konteks visual. Processing
dapat diunduh di https://processing.org/download/ . Ada dua versi processing yang tersedia, yaitu versi tanpa java
dan versi dengan java.

Setelah berhasil melakukan download, maka lakukan ektrak file processing

MODUL GRAFIKA KOMPUTER – FIKOM UM METRO 1

Hasil Ekstrak dan untuk menjalankannya klik pada icon processing:

Gambar dibawai ini adalah tampilan utama/lingkungan kerja Processing

Keterangan gambar:
Bagian Tabs : adalah tempat dimana file yang terdiri dari banyak sketch ditempatkan. Ada kalanya
bagian-bagian tertentu dari program perlu ditulis secara terpisah dari program
utamanya. Program utama dan program pendukung dapat ditulis secara terpisah
dengan sistem multi tab.
Area Text Editor : adalah tempat dimana kita akan menuliskan program.
Message Area : merupakan tempat dimana berbagai pesan dari Processing dikeluarkan, misalnya
terjadi error.
Bagian Console : merupakan area tempat ditampilkannya output-output program dalam bentuk console,
misalnya menampilkan hasil perhitungan, data-data berupa numerik dan string, serta
data komunikasi secara serial.

Processing menggunakan istilah Sketch untuk proyek yang ditulis menggunakan processing. Setiap sketch
disimpan dalam direktori terpisah dan program utama disimpan di file nama yang sama dengan nama direktori.
Sebagai contoh, sketch dengan nama ‘latihan’ akan disimpan di derektori ‘latihan’ dengan file program
‘latihan,pde’.

MODUL GRAFIKA KOMPUTER – FIKOM UM METRO 2

Program Pertama:

Mempersiapkan layar
Layar yang dimaksud adalah area untuk menampilkan objek. Perintah yang digunakan adalah : size(width,height).
Sebagai contoh size(200,200), hal ini berarti ukuran layar adalah 200 x 200.
Script: Hasil:

// Atur layar menjadi 200, 200, sehingga lebar jendela adalah 200 piksel
// dan ketinggian jendela adalah 200 piksel
size(200, 200);
background(0);

Pewarnaan Latar
Warna yang digunakan dalam processing adalah penggabungan dari elemen Red, Green dan Blue (RGB) atau
warna Grayscalle (abu-abu). Untuk memberikan warna latar (background) digunakan perintah background(x) atau
background(r,g,b). kisaran nilai warna yang digunakan adalah antara 0 sampai dengan 255. sebagai contoh
background(128), hal ini berarti warna latar adalah grayscale dengan nilai 128. Jika ditulis background(255,0,0)
akan mengakibatkan warna latar menjadi merah, karena nilai merah disi nilai 255 dan hijau serta biru adalah 0.
Script: Hasilnya:

size(200, 200);
background(#ffcc00);

Program kedua:
Buatlah objek elips dengan titik pusat berada pada 50 piksel dari kiri, 52 piksel dari atas, lebar elips sebesar 90
piksel dan tinggi elips juga sebesar 90 piksel.
Script: Hasil:

ellipse(50, 52, 90, 90);

Apabila dalam penulisan script terdapat kesalahan, maka akan muncul gambar berikut:

MODUL GRAFIKA KOMPUTER – FIKOM UM METRO 3

Program ketiga:
Kembangkan program agar menjadi lebih menarik. Ketiklah skrip berikut dan amatilah hasilnya.
Script: Hasilnya:

void setup(){
size(500, 300);
smooth();
}

void draw(){
ellipse(mouseX, mouseY, 90, 90);
if (mousePressed) {
fill(200);
}

else {
fill(255);
}
}

Maksud program tersebut adalah sebagai berikut:

void setup() : adalah bagian menuliskan inisiasi awal dari program kita. void setup() akan dieksekusi
hanya sekali. Pada bagian ini, kita akan membuat sebuah layar dengan ukuran 500 x 300
piksel. Fungsi smooth menampilkan gambar yang halus (anti aliasing).
void draw(). : program utama akan dituliskan pada void draw(). Bagian ini adalah berisi kumpulan skrip
yang akan dieksekusi secara terus-menerus, sampai tombol Stop ditekan. Di dalam fungsi
void draw(), kita membuat sebuah objek elips dengan ukuran 90 x 90 piksel. Karena
pengaruh fungsi mouseX dan mouseY, maka posisi elips akan mengikuti posisi mouse.
fill : Jika mause ditekan, maka elips akan berubah warna menjadi abu-abu.. Jika sebaliknya,
maka akan warna elips akan putih. Warna elips dikontrol oleh fungsi fill. Dalam fungsi fill,
dapat memasukkan nilai keabuan (dari 0 sampai 255). Nilai 0 akan sepenuhnya
menghasilkan warna hitam, dan 255 menghasilkan putih. Nilai antara 0 dan 255
menghasilkan warna keabuan.

Tugas:
1. Setelah melakukan percobaan diatas, buat layar output dengan ukuran bebas tetapi dengan bentuk
bujur sangkar, kemudian beri warna kuning, kemudian ungu, dan coklat.
2. Buatlah warnanya menjadi berbeda pada percobaan 3.

MODUL GRAFIKA KOMPUTER – FIKOM UM METRO 4