MIKROKONTROLER

UNIT 2B
PROCESSING

Disusun Oleh:
Bagus Yayan Wicaksono (18/431944/SV/15915)
Muhammad Aldi N.P.H (18/431954/SV/15925)

LABORATORIUM INSTRUMENTASI DAN KENDALI

TEKNIK ELEKTRO DAN INFORMATIKA

SEKOLAH VOKASI

UNIVERSITAS GADJAH MADA

2019
1. Pendahuluan

a. Latar Belakang

GUI atau kepanjangan dari Graphical User Interface merupakan

salah satu model interaksi antara manusia dan komputer. Selain GUI, ada
juga model yang lain seperti Character User Interface (CUI) yang sering kita
kenal dengan command line. Dari sisi kenyamanan (attitude), kedua model
ini memiliki fungsinya masing – masing. Fungsi CUI biasanya adalah
administrator sistem berbasis sistem operasi LINUX.
Bagi mereka, CUI dirasakan lebih nyaman dibandingkan dengan
GUI, bahkan setelah GUI pada LINUX berkembang dengan pesat, mereka
tetap bertahan untuk menggunakan CUI. Pengguna GUI biasanya adalah
mereka yang sudah terbiasa dengan sistem operasi Windows. Graphical
Unit Interface, merupakan perangkat pertama untuk mengendalikan fungsi-
fungsi suatu software, dan membuat pengguna mudah untuk memahami
bagaimana menggunakan software tersebut.
Kita dapat mengasumsikan bahwa GUI merupakan sebagai bagian
dari suatu software yang pertama kali ditangkap mata (secara interface).
Dimana suatu software akan kelihatan bagus, jika GUI tersebut tampak
menarik. Java GUI sendiri secara umum sama dengan pemahaman GUI
sendiri, namun disini GUI pada java adalah salah satu dari fasilitas Java
dalam mengembangkan suatu aplikasi dengan memberikan suatu interface
yang nantinya akan disesuaikan dengan kebutuhan suatu aplikasi, baik skala
kecil dan besar.
Intinya, GUI pada Java adalah komponen-komponen penyempurna
dalam sebuah sistem, seperti komponen navigasi, graphic, interface
desktop, komponen menu, sinkronisasi antar interface dan semuanya yaitu
dirancang dengan penelitian yang baik, dimana nantinya aplikasi tersebut
dapat dengan mudah dioperasikan user.

b. Tujuan

Adapun tujuan dari praktikum ini adalah :

1. Mengetahui dan memahami aplikasi processing
2. Mengetahui pemrograman menggunakan processing

2. Teori Dasar

Processing adalah bahasa pemrograman dan lingkungan

pemrograman (development environment) open source untuk memprogram
gambar, animasi dan interaksi. Digunakan oleh pelajar, seniman, desainer,
peneliti, dan hobbyist untuk belajar, membuat prototipe, dan produksi.
Processing digunakan untuk mengajarkan dasar-dasar pemrograman
komputer dalam konteks rupa dan berfungsi sebagai buku sketsa perangkat
lunak (software) dan tool produksi profesional.Processing bebas untuk
didownload dan tersedia untuk GNU/Linux, Mac OS X, dan Windows.
Processing adalah suatu projek terbuka yang diinisiasi oleh Ben Fry
dan Casey Reas. Berkembang dari ide-ide yang dieksplorasi di Aesthetics
and Computation Group (ACG) di MIT Media Lab. Projek ini kini terus
diperbaiki dan dikelola oleh sejumlah kecil tim voluntir. Processing
mengaitkan konsep software pada prinsip-prinsip bentuk rupa, gerak, dan
interaksi. Processing mengintegrasikan suatu bahasa pemrograman,
lingkungan pemrograman, dan metodologi pengajaran ke dalam sistem
terpadu.
Lingkungan Pemrograman Processing terdiri dari teks editor
terintegrasi dan jendela tampilan untuk menampilkan program. Jika tombol
“run” ditekan, program akan mengkompilasi dan berjalan di jendela grafis
(jendela tampilan). Dari jendela lingkugan utama, bisa menjalankan,
menghentikan, menyimpan, membuka, dan mengeksport file.

Gambar 2.1
Processing menggunakan sistem koordinat kartesian dengan titik
asal terletak di sudut kiri-atas. Bila program berukuran lebar 320 piksel
dan lebar 240 piksel, maka koordinat [0, 0] terletak di kiri-atas dan
koordinat [320, 240] terletak di kanan bawah
Gambar 2.2
 Tampilan sketch dari aplikasi Processing mempunyai beberapa
tombol yaitu ada tombol RUN dan STOP, yang akan anda gunakan untuk
menjalankan dan memberhentikan program. Dan ada juga tombol new,
open, save dan export.

Gambar 2.3
untuk tombol lain, anda mungkin sudah paham fungsinya. tapi ada
tombol spesial yang paling saya suka di processing, yaitu tombol Export.
untuk diketahui aplikasi yang dibuat di processing bisa dieksport ke 3
Platform Sistem Operasi yaitu Windows, dan Mac Linux dan ke Web.

3. Prosedur Percobaan

a. Alat dan Bahan

 Komputer atau Laptop
 Software Processing

b. Langkah Percobaan

Pada praktikum kali ini, aplikasi Processing diprogram untuk

membuat suatu gambar. Berikut langkah-langkahnya :
a) Buka modul praktikum dan baca unit yang akan dipraktikkan.
b) Buka aplikasi Processor
c) Tuliskan coding yang akan dijalankan
d) Kemudian compile codingan tersebut dengan klik tombol
“Run”.
e) Lihat outputnya apakah sudah sesuai dengan coding yang telah
dibuat.
f) Bila sudah sesuai klik tombol “Stop” untuk menutup
4. Data Praktikum
5. Analisis dan Pembahasan

1. Latihan 1
Pada latihan 1 Buatlah objek dibawah ini dengan menggunakan
fungsi translate(). Membuat bentuk robot dengan kode program
sebagai berikut :

size(360,360); //ukuran layar yang digunakan

rect(160, 0, 40, 40); //membuat kepala
rect(140,42,80,80); //membuat badan

ellipseMode(CENTER); //fungsi ellips

ellipse(172,12,10,10); //membuat mata
pushMatrix(); //fungsi mendorong matriks
translate(16,0); //menggeser x 16 point
ellipse(172,12,10,10); //ellips yang digeser
popMatrix(); //fungsi memunculkan matriks

rect(120, 42, 17, 50); //membuat tangan

pushMatrix(); //fungsi mendorong matriks
translate(103,0); //menggeser x 103 point
rect(120, 42, 17, 50); //persegi yang digeser
popMatrix(); //fungsi memunculkan matriks

rect(144,124,34,110);
pushMatrix();
translate(37,0);
rect(144,124,34,110);
popMatrix(); //rect(160, 0, 40, 40); // Draw rect at new 0,0

Pada program diatas terdapat beberapa fungsi yaitu

• Size digunakan untuk mengatur panjang lebar window
• Rect digunakan untuk membuat dan mengatur besar ukuran persegi
• Ellipse merupakan fungsi membentuk bangun elips/lingkaran
• EllipseMode digunakan untuk mengatur letak koordinat
• Translate digunakan untuk fungsi translasi
• pushMatrix digunakan untuk mendorong matrik
• popMatrix digunakan untuk memunculkan matrik
2. Latihan 2
Pada latihan 2 Buatlah objek dibawah ini dengan menggunakan fungsi
translate(). Membuat bentuk robot dengan lengan terangkat dengan kode
program sebagai berikut :

size(360,360); //ukuran layar yang digunakan

rect(160, 0, 40, 40); //membuat kepala
rect(140,42,80,80); //membuat badan

ellipseMode(CENTER); //fungsi ellips

ellipse(172,12,10,10); //membuat mata
pushMatrix(); //fungsi mendorong matriks
translate(16,0); //menggeser x 16 point
ellipse(172,12,10,10); //ellips yang digeser
popMatrix(); //fungsi memunculkan matriks

pushMatrix(); //fungsi mendorong matriks

translate(-21,73); //koordinat translasi
rotate(radians(-45)); //sudut putar
rect(120, 42, 17, 50); //membuat tangan
popMatrix(); //fungsi memunculkan matriks

pushMatrix(); //fungsi mendorong matriks

translate(108,98); //koordinat translasi
rotate(radians(-45)); //sudut putar
rect(120, 42, 17, 50); //persegi yang digeser
popMatrix(); //fungsi memunculkan matriks

rect(144,124,34,110); //membuat kaki

pushMatrix(); //fungsi mendorong matriks
translate(37,0); //koordinat translasi
rect(144,124,34,110); //persegi yang digeser
popMatrix(); ////fungsi memunculkan matriks

Pada program diatas terdapat beberapa fungsi yaitu

• Size digunakan untuk mengatur panjang lebar window
• Rect digunakan untuk membuat dan mengatur besar ukuran persegi
• Ellipse merupakan fungsi membentuk bangun elips/lingkaran
• EllipseMode digunakan untuk mengatur letak koordinat
• Translate digunakan untuk fungsi translasi
• pushMatrix digunakan untuk mendorong matrik
• popMatrix digunakan untuk memunculkan matrik
6. Kesimpulan

Berdasarkan data dan analisis, dapat disimpulkan bahwa :

1) GUI ( Graphical User Interface ) merupakan suatu komponen penting di
dalam aplikasi computer modern
2) GUI dapat memudahkan pengguna ketika mrnggunakan aplikasi, selain itu
GUI juga berfungsi untuk menambah nilai estetika suatu aplikasi
3) Di zaman sekarang ini tidak ada multimedia interaktif tanpa GUI