LAPORAN PRAKTIKUM

KOMPUTER GRAFIKA

MODUL VII
“GRAPHICAL USER INTERFACE (GUI)”

NIM : 15104410020

NAMA : SEPTIAN LUKAS C

JURUSAN : TI A

TGL. PRAKTEK : 30 MEI 2017

FAKULTAS TEKNOLOGI INFORMASI

TEKNIK INFORMATIKA
UNIVERSITAS ISLAM BALITAR
2017
 LEMBAR PERSETUJUAN

MODUL VII
GRAPHICAL USER INTERFACE (GUI)

NIM : 15104410020

NAMA : SEPTIAN LUKAS C

JURUSAN : TI A

KELOMPOK :A

TGL. PRAKTEK : 30 MEI 2017

Disetujui,

Blitar, … Juni 2017

Asisten Dosen

Azis Suroni, S.Kom

 PRAKTIKUM
FAKULTAS TEKNOLOGI INFORMASI
TEKNIK INFORMATIKA

LEMBAR ASISTENSI

BAB :7

JUDUL PRAKTIKUM : GRAPHICAL USER INTERFACE (GUI)

NAMA PRAKTIKAN : SEPTIAN LUKAS CAHYONO

NIM : 15104410020

FAKULTAS : TEKNOLOGI INFORMASI

JURUSAN : TI A

TANGGAL PRAKTIKUM : 30 MEI 2017

TANGGAL ASISTENSI : 5 JUNI 2017

TANDA TANGAN :

Disetujui,

Blitar, ... Mei 2017

Asisten Dosen

Azis Suroni, S.Kom

 BAB I

PENDAHULUAN PRAKTIKUM

1.1 Event Mouse

Processing secara otomatis melacak jika tombol mouse ditekan dan tombol yang
ditekan. Nilai dari variabel mouseButton sistem baik KIRI, KANAN, atau PUSAT
tergantung tombol mana yang ditekan. Untuk membuat mouseButton, kita dapat
menggunakan fungsi mousePressed(), mouseReleased((), mouseMoved(), mouse
Dragged(). Sedangkan fungsi mouseX() dan mousey() adalah digunakan untuk
mengetahui lokasi mouse pada layar.

1.2 Fungsi mousePressed()

Fungsi ini bekerja jika tombol mouse ditekan. Nilai dari variabel sistem mousePressed
adalah true jika tombol mouse ditekan dan false jika tidak ada tombol yang ditekan.

1.3 Fungsi mouseReleased()

Fungsi mouseReleased() akan dipangil sewaktu tombol mouse dilepaskan.

1.4 Fungsi mouseMoved()

Fungsi mouseMoved() dipanggil setiap kali menggerakkan mouse dan tombol mouse
tidak ditekan.

1.5 Fungsi mouseDragged()

Fungsi mouseDragged() disebut sekali setiap kali menggerakkan mouse dan tombol
mouse ditekan. Sintak yang digunakan adalah :
void mouseDragged() {
statements
}

1.6 Event keyboard

Selain menanggapi event mouse, Processing juga menanggapi event yang berasal
dari keyboard serta menyimpan informasi dari keyboard ke dalam beberapa system
variable. Event dari system variable dari keyboard adalah:
a. Tombol keyboard ditekan, direspon melalui fungsi keyPressed()
b. Tombol keyboard dilepas, ditanggapi melalui fungsi keyReleased()
c. keyPressed, bernilai true apabila ada tombol keyboar ditekan.
d. keyCode, berisi nilai yang menyatakan tombol fungsi yang ditekan, seperti:
tombol ALT, tombol SHIFT dan sebagainya. Sebelum menggunakan variable ini
ada baiknya diuji apakah variable key berisi CODED.
e. key, berisi nilai ASCII dari tombol yang ditekan.
 BAB II

TUGAS PRAKTIKUM

2.1 Buat program jika menekan tombol keyboard D maka akan muncul animasi objek
lingkaran dan jika menekan tombol keyboard K maka akan muncul animasi
kotak, jika tidak menekan tombol keyboard apapun maka layar output dalam
keadaan kosong.
Listing Program
void setup()
{
size (500, 500, P3D);
}
void draw()
{
background(255,0,0);
if(keyPressed)
{
if(key=='k') {
background(0);
lights();
translate(width/2.0, height/2.0);
scale(50);
rotateX( map(mouseY,0,height,-PI,PI));
rotateY( (millis()*TWO_PI/10000)%TWO_PI );
pushMatrix();
directionalLight(404, 404, 404, mouseX, mouseY, -1);
scale( map(mouseX,0,width,1,1.5 ));
noStroke();
fill(160,240-map(mouseX,0,width,0,255),188);
box(3);
popMatrix();
}
else if (key=='d'){
background(0);
lights();
translate(width/2.0, height/2.0);
scale(50);
rotateX( map(mouseY,0,height,-PI,PI));
 rotateY( (millis()*TWO_PI/10000)%TWO_PI );
pushMatrix();
directionalLight(404, 404, 404, mouseX, mouseY, -1);
scale( map(mouseX,0,width,1,1.5 ));
noStroke();
fill(252,127-map(mouseX,0,width,0,255),127);
sphere(2);
popMatrix();
}
}
}

Input Program
Output Program
Tidak menekan tombol keyboard apapun

Menekan tombol D pada keyboard

Menekan tombol K pada keboard

 BAB III

PEMBAHASAN PRAKTIKUM

3.1 Program 9.1

Listing Program
void draw()
{
background(204);
line(mouseX, 20, mouseX, 80);
}
Input Program

Output Program

3.2 Program 9.2

Listing Program
void draw()
{
background(204);
line(20, mouseY, 80, mouseY);
}
Input Program
 Output Program

3.3 Program 9.3

Listing Program
void draw() {
if (mousePressed == true) {
fill(0);
}
else {
fill(255);
}
rect(25, 25, 50, 50);
}
Input Program

Output Program
3.4 Program 9.4
Listing Program
int value = 0;
void draw() {
fill(value);
rect(25, 25, 50, 50);
}
void mouseReleased() {
if(value == 0) {
value = 255;
}
else {
value = 0;
}
}
Input Program

Output Program
3.5 Program 9.5
Listing Program
int value = 0;
void draw() {
fill(value);
rect(25, 25, 50, 50);
}
void mouseMoved() {
value = value + 5;
if (value > 255) {
value = 0;
}
}
Input Program

Output Program
3.6 Program 9.6
Listing Program
int value = 0;
void draw() {
fill(value);
rect(25, 25, 50, 50);
}
void mouseDragged()
{
value = value + 5;
if (value > 255) {
value = 0;
}
}
Input Program

Output Program
3.7 Program 9.7
Listing Program
void setup()
{
size(400,300);
background(255,0,0);
}
void draw()
{
if(keyPressed)
{
if(key=='b'|| key=='a') {
fill(0);
}
}
else {
fill(255);
}
rect (25,25,50,50);
}
Input Program
 Output Program

3.8 Program 9.8

Listing Program
//event keyboard_2 dengan tombol anak panah
void setup()
{
size(400,200);
background(0);
}
color warna=color(255);
void draw ()
{
fill(warna);
rect(25,25,50,50);
}
void keyPressed()
{
if(key==CODED) {
if(keyCode==LEFT) {
warna=color(255,255,0);
}
else if(keyCode==RIGHT) {
warna=color(0,255,0);
}
}
}
 Input Program

Output Program

3.9 Program 9.9

Listing Program
//event keyboard dengan sembarang tombol
void setup() {
size(400,200);
background(255,0,0);
}
void draw ()
{
if(keyPressed==true) {
fill(0);
}
else {
fill(255);
}
rect(25,25,50,50);
}
Input Program

Output Program
 BAB IV

PENUTUP

4.1 Kesimpulan
Processing secara otomatis melacak jika tombol mouse ditekan dan tombol yang
ditekan. Dapat menggunakan fungsi mousePressed(), mouseReleased((), mouse
Moved(), mouseDragged(). Processing juga menanggapi event yang berasal dari
keyboard serta menyimpan informasi dari keyboard ke dalam beberapa system
variable. Event dari system variable dari keyboard adalah keyPressed(),keyReleased(),
keyCode, dan key.

4.2 Saran
Dari penerapan di atas maka seharusnya kita sudah bisa membuat animasi yang baik,
terlebih jika bisa membuat sebuah simulator dengan animasi processing, karena kita
sudah mempelajari dari membuat sebuah objek 2 dimensi, objek 3 dimensi, tata letak
titik koordinat, pencahayaan dan pada modul ini kita telah belajar tengtang pengaruh
mouse dan tombol-tombol pada keyboard. Karena ini modul processing yang terakhir,
sebaiknya kita lebih memperdalam dan mengembangkan pemrograman processing
sehingga dapat bermanfaat kedepannya dalam bidang grafika komputer.