Anda di halaman 1dari 11
“ GUI TRANFORMASI ” Mata Kuliah: Komputer Grafik Disusun Sebagai Bahan Acuan Petunjuk Pelaksanaan Pratikum

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 :

Berikut programnya dan tutorial cara menjalankan program : Keterangan gambar di atas: 1. Warna Background: Slider

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 0 o 360 o .

5. Translasi: Slider ini terbagi atas 2 jenis, dikarenakan dalam perpindahan digunakan sumbu X dan Y.

Berikut tampilan dari pengunaan slider Warna background :

Y. Berikut tampilan dari pengunaan slider Warna background : Pada gambar diatas objek diberi warna dengan

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

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

ubah ketengah maka akan mengubah background menjadi abu-abu. Selanjutnya kita akan mengatur skala, pada gambar diatas

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

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.

ke bawah ,hasilnya bisa kita liat pada gambar di atas. Selanjutnya kita akan mengatur slide rotasi

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

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

bisa kita lihat pada gambar kotak bergerak sedikit ke bawah Jika tadi kita mengatur slide Translasi

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

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.getValueF());

}

//syntax kustomisasi GUI public void customGUI()

{

}

+

slider.getValueI()

+

"

float

value:"

+

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:

Dibawah ini juga gambar tutorial dari program yang berbeda: Gambar di atas adalah awal pertama kali

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.

baik, pergerakan mouse harus tetap berada didalam kubus. Setelah mouse digerakkan, maka kubus akan berputar sesuai

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)) +

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;

}

}