GUI TRANFORMASI

Mata Kuliah: Komputer Grafik

Disusun Sebagai Bahan Acuan Petunjuk Pelaksanaan Pratikum Dan Salah Satu
Syarat Untuk Melaksanakan Pratikum Pada Laboratorium Komputer
Universitas Pembangunan Panca Budi
Medan

Penyusun:
MUHAMMAD RISKI RIDHA (1414370393)
KELOMPOK 1

PROGRAM STUDI SISTEM KOMPUTER

FAKULTAS ILMU KOMPUTER
UNIVERSITAS PEMBANGUNAN PANCA BUDI
MEDAN
2016

GUI TRANFORMASI

A. GUI Transformasi
(Graphic User Interface) yang digabungkan dengan 3 bentuk transformasi yaitu :
Scale (Pembesaran), Translation (Perpindahan), Rotate (Perputaran)

Berikut programnya dan tutorial cara menjalankan program :

Keterangan gambar di atas:

1. Warna Background: Slider ini berfungsi sebagai pengatur warna latar
belakang program. Pemilihan warna hanya terdapat warna putih dan hitam
saja, dikarenakan value slider yang digunakan hanya 1 dan bernilai 0
255.
2. Tebal Garis: Slider ini berfungsi untuk menampilkan garis objek yang
akan dimunculkan dengan ketebalan garis yang dapat disesuaikan sampai
0-30.
3. Skala: Slider ini berfungsi untuk menampilkan objek dan kemudian dapat
disesuaikan ukuran yang akan ditampilkan. Objek dalam program ini
hanya dapat disesuaikan dari 0 200 pixel.

4. Rotasi: Slider ini berfungsi untuk memutar objek yang telah ditampilkan,
dari 0o 360o.
5. Translasi: Slider ini terbagi atas 2 jenis, dikarenakan dalam perpindahan
digunakan sumbu X dan Y.

Berikut tampilan dari pengunaan slider Warna background :

Pada gambar diatas objek diberi warna dengan slider dengan mengubah
atau menggeser slider warna bacground ,warna pada latar belakang program dapat
di sesuai kan dengan keinginan.

Seperti pada gambar diatas slide warna background kita ubah ketengah
maka akan mengubah background menjadi abu-abu.

Selanjutnya kita akan mengatur skala, pada gambar diatas objek

dimunculkan dengan slider dengan mengubah atau menggeser slider skala sebesar
100 , maka objek akan muncul sesuai yang diminta.

Kemudia slider tebal garis ,slide ini terlihat jelas apabila objek telah di
sesuai kan skalanya ,seperti pada gambar di atas skala di atur di angka 100 dan
garis tebal di atur sedikit ke bawah ,hasilnya bisa kita liat pada gambar di atas.

Selanjutnya kita akan mengatur slide rotasi ,slide rotasi kita ubah ke angka
115 dan kita dapati gambar di atas menbuat kotak berubah posisi seperti bentuk
belah ketupat

Kemudia slider Translasi X, pada slide ini kita mengubah translasi X pada
kotak yang sudah di rotasi ke angka 115 ,translasi X kita ubah ke angka 70,
seperti yang bisa kita lihat pada gambar kotak bergerak sedikit ke bawah

Jika tadi kita mengatur slide Translasi X ,sekarang kita mengatur Translasi
Y .Translasi X kita kembalikan ke nilai 0 agar kita dapat membedakan translasi X
dan Y .Rotasi masih di angka 115 , translasi Y kita ubah ke angka 50, seperti yang
bisa kita lihat pada gambar kotak bergerak sedikit ke atas
6

Dari contoh program diatas, berikut listing program yang dibutuhkan agar
dapat digunakan dengan baik dalam Processing:
//GUI Transformasi
//Penskalaan menggunakan Slider
// Dibutuhkan G4P library
import g4p_controls.*;
PFont tulisan;
public void setup()
{
size(700,500, JAVA2D);
smooth();
tulisan = loadFont("FromCartoonBlocks-48.vlw"); //Jenis Font yang digunakan
createGUI(); //Syntax pembuat Slider
customGUI(); //Syntax kustomisasi slider
}
//syntax untuk mengambil value dari slider
void handleSliderEvents(GSlider slider)
{
println("integer value:" + slider.getValueI()
slider.getValueF());
}

"

float

value:"

//syntax kustomisasi GUI

public void customGUI()
{
}
public void draw()
{
background(slider_background.getValueI()); //warna background diambil dari
value slider "Warna Background"
//syntax judul
textAlign(CENTER);
textSize(32);
text("Kelompok 1", 230,40);
fill(#2A58F7);
textSize(24);
text("GUI Transformasi", 435,40);

//syntax memperbesar garis pada objek dengan mengambil value dari slider
"Tebal garis"
fill(#B2052E);
stroke(#085DC9);
strokeWeight(slider_garis.getValueI());
rectMode(CENTER);
//Syntax untuk menampilkan hasi skala, rotasi dan translasi
pushMatrix();
translate(330,200); //Translasi
rotate(radians(slider_rotasi.getValueI())); //Rotasi
rect(slider_x.getValueI(),slider_y.getValueI(),
slider_skala.getValueI(),
slider_skala.getValueI()); //Skala
popMatrix();
}
Untuk dapat menggunakan slider pada program diatas, aplikasi Processing
harus membutuhkan liblary G4P. G4P dapat mengubah tampilan dan bentuk slider
sesuai kebutuhan user.

B. GUI Transformasi 2
Dibawah ini juga gambar tutorial dari program yang berbeda:

Gambar di atas adalah awal pertama kali program di jalankan, program ini
menggerakan kubus dengan mengklik kubus tersebut kemudian gerakkan mouse
ke arah yang kita inginkan. Untuk dapat bergerak dengan baik, pergerakan mouse
harus tetap berada didalam kubus.

Setelah mouse digerakkan, maka kubus akan berputar sesuai arah pointer
mouse yang digerakan oleh user. Objek akan berputar secara 3 Dimensi

Berikut listing program untuk membangun program diatas

//syntax pembuatan kubus
int cubeXpos;
int cubeYpos;
int cubeSize;
float cubeXrot = 1.0f;
float cubeYrot = 1.0f;
int lastPointerX = 0;
int lastPointerY = 0;
static int defValLastX = 9999;
static int threshold = 0;
public void setup()
{
size(640, 360, P3D);
background(100);
lights();
stroke(255,0,0);
cubeXpos = width/2;
cubeYpos = height/2;
cubeSize = 100;
pushMatrix();
translate(cubeXpos, cubeYpos, 0);
rotateY(cubeXrot);
rotateX(cubeYrot);
box(100);
popMatrix();
line(0, height/2, width, height/2 );
line(width/2, 0, width/2, height );
}
//syntax untuk menggerakkan kubus
public void draw()
{
}

//kubus digerakkan dengan fungsi mouseDragged

public void mouseDragged()
{
if(mouseX > (cubeXpos-(cubeSize/2)) && mouseX <(cubeXpos-(cubeSize/2)) +
10

cubeSize && mouseY > (cubeYpos-(cubeSize/2)) && mouseY <(cubeYpos(cubeSize/2)) + cubeSize)

{
if(lastPointerX != this.defValLastX)
{
if(lastPointerX > mouseX + threshold)
{
this.cubeXrot = cubeXrot - 0.05f;
}
else if (lastPointerX < mouseX - threshold)
{
this.cubeXrot = cubeXrot + 0.05f;
}
if(lastPointerY > mouseY + threshold)
{
this.cubeYrot = cubeYrot + 0.05f;
}
else if (lastPointerY < mouseY - threshold)
{
this.cubeYrot = cubeYrot - 0.05f;
}
background(100);
pushMatrix();
translate(cubeXpos, cubeYpos, 0);
rotateY(cubeXrot);
rotateX(cubeYrot);
box(100);
popMatrix();
}
lastPointerX = mouseX;
lastPointerY = mouseY;
}
else
{
lastPointerX = defValLastX;
lastPointerY = defValLastX;
}
}

11