Augmented Reality dengan Processing dan NyAR4psg Library Part 3: Breakdown The Source Code

Hello Lads.. Kita ketemu di Tutorial Augmented Reality dengan Processing dan NyAR4psg Library Part 3: Breakdown The Source Code, buat yang belum membaca tutorial dua dan tutorial satu diharapkan untuk membaca tutorial dari awal agar tidak bingung. untuk melihat tutorial sebelumnya, cek link dibawah ini:

1. Augmented Reality dengan Processing dan NyAR4psg Library Part 1
2. Augmented Reality dengan Processing dan NyAR4psg Library Part 2: Installing Library dan Testing AR

yapp.. seperti judulnya, kita akan membahas source code NyarMultiTest, pemahan source code ini penting, agar kita bisa mengembangkan AR dengan Processing dan Nyar ini.  tapi buat yang sudah merasa cukup paham, dipersilahkan untuk tidak membaca tutorial ini.

Oke langsung aja, kita breakdown Skrip pertama.. 

import codeanticode.gsvideo.*;
import jp.nyatla.nyar4psg.*;
import processing.opengl.*;

skrip diatas digunakan untuk memanggil library gsvideo, agar camera stream atau layar kamera keluar. di line kedua ada adalah skrip untuk memanggil library Nyar4psg, dan skrip ketiga untuk memanggil library openGL yang sudah paket dengan Processing. OpenGL ini penting, agar objek 3D bisa direndering. 

selanjutnya di breakdown skrip kedua..

GSCapture cam;
NyARMultiBoard nya;
PFont font, font2d;

di breakdown skrip kedua, kita mendeklarasikan 3 variable. variable pertama adalah GSCapture cam; yang membutuhkan library GSVideo, jika GSVideo tidak terinstall maka program akan error dan akan ada warning "tidak menemukan library". variable ini juga akan menangkap objek dari kamera. kemudian scrip NyARMultiBoard adalah class dari nyarToolkit. class ini berfungsi untuk mengkalkulasi posisi kamera dan objek, mengenali marker, dan mengakses semua data di library NyarToolkit. kemudian yang terakhir adalah Class PFont font, font2d; digunakan untuk menampilkan keterangan skala objek dalam bentuk 2D.

selanjutnya di breakdown skrip ketiga..

void setup() {
size(640,480,P3D);
colorMode(RGB, 100);
font = createFont("FFScala", 32);
font2d = createFont("FFScala", 10);

di breakdown skrip ketiga, disini kita mengatur size layar kamera dalam hal ini kita atur ukuran 640X480, tapi disamping skala size ada skrip P3D. apa itu? P3D adalah enviroment di processing yang digunakan untuk mengatur skala di sketch processing. kemudian dibawahnya adalah color mode yang berfungsi untuk mengatur warna dari range 0 - 100. nah skrip kedua dibawahnya, digunakan untuk mengatur membuat font dan mengatur warna font. 

selanjutnya di breakdown skrip keempat..

cam=new GSCapture(this,width,height);
cam.play();

di breakdown keempat, GSCapture berfungsi untuk mengatur ukuran dimensi display kamera. dan source code keempat cam.play(); digunakan untuk mengaktifkan kamera.

selanjutnya di breakdown skrip kelima

String[] patts = {"patt.hiro", "patt.kanji"};
double[] widths = {80,80};

di breakdown ke lima, kita akan mendeklarasikan marker yang akan dipakai, dalam hal ini Nyar menggunakan marker Hiro dan Kanji, kok marker itu?.. ya jelas, wong.. nyarToolkit adeknya ARToolkit, pasti gak bakal lupa sama kakaknya.. haha. (*just kidding). - tapi yang jelas kalian bisa mengganti file hiro dan file kanji tersebut dengan tipe marker kalian dan bisa kalian tambahkan markernya, mau 3 4 5 6, terserah asal format marker (patt.*nama marker) kalian ditaruh di dalam folder data NyARMultiTest.

terus gimana cara buat marker? kalian bisa gunakan program mkpatt.exe yang ada di library ARToolkit, cara penggunaanya, liat tutorial cara membuat marker di menu ARToolkit. dan dibawah string[] patts, ada array double[] width, arrary ini berfungsi untuk mendeklarasikan ukuran marker dalam bentuk milimeter.

selanjutnya di breakdown skrip keenam..

NyARMultiBoard(this,width,height,
"camera_para.dat",patts,widths);

di breakdown skrip keenam, ada class NyARMultiBoard, class ini berfungsi untuk mengatur posisi dan calibrasi kamera. sama saja seperti ARToolkit.

selanjutnya di breakdown skrip ketujuh..

print(nya.VERSION);

di skrip ini simple, skrip ini berfungsi untuk mendeteksi versi dari nyarToolkit.

selanjutnya di breakdown skrip kedelapan

  void drawMarkerPos(int[][] pos2d){
    textFont(font,10.0);
    stroke(100,0,0);
    fill(100,0,0);

skrip diatas berfungsi untuk. mendeteksi posisi koordinat setiap sudut marker yang terdeteksi.  setelah sudut dideteksi maka akan didisplay dalam bentuk text font, dan diberi warna, agar informasi setiap sudut koordinat terbaca.

selanjutnya di breakdown kesembilan

for(int i=0;i<4;i++){
ellipse(pos2d[i][0], pos2d[i][1],5,5);
}

di skrip ini, kita mengiterasi dari 1 sampai 4 untuk menggambar elips pada setiap sudut. Indeks pertama untuk pos2d [] [] merupakan indeks sudut, dan indeks kedua adalah 0 untuk koordinat x dan 1 untuk koordinat y. dan kita atur tinggi dan lebar ellipse menjadi 5Px.


selanjutnya di breakdown kesepuluh

fill(0,0,0);
for(int i=0;i<4;i++){
text("("+pos2d[i][0]+
","+pos2d[i][1]+
")",pos2d[i][0],pos2d[i][1]); 

skrip diatas berfungsi untuk memberikan informasi koordinat setiap sudut marker uang terdeteksi. string pertama dari source code digunakan untuk menulis koordinat, dan string kedua dan ketiga adalah X dan Y koordinat yang digunakan untuk mendisplay informasi dari koordinat yang terdeteksi.

selanjutnya di breakdown kesebelas

void draw() {
if (cam.available() !=true) {
return;
}

di skrip ini berfungsi untuk mendeteksi kamera,. jika kamera terdeteksi maka kamera akan aktif, jika tidak, maka layar di sketch hanya diam berwarna abu-abu.

selanjutnya di breakdown keduabelas

hint(DISABLE_DEPTH_TEST);
image(cam,0,0);
hint(ENABLE_DEPTH_TEST);

fungsi skrip diatas adalah untuk merender objek 3D di sketch windo, maka kita harus menDisable Depth Test.

selanjutnya di breakdown ketigabelas

translate(0,0,20);
if (i == 0){
stroke(255,200,0);
box(40);
}else{
stroke(0,200,255);
sphere(25);
}

di skrip ini berfungsi untuk menampilkan objek 3D. dalam hal ini NyarMultiTest menggunakan Box dan sphere untuk testing objek ARnya.,

nah.. segitu saja, yang dapat saya jelaskan tentang skrip NyarMultiTest, sekarang kita sudah punya basic bermain AR dengan Processing. selanjutnya, kita akan modifkasi abis-abisan source code diatas, untuk membuat AR Interaktif dengan Paddle Marker. ditunggu yah.. ^_^

Posted in: