Tutorial AR Processing dan Nyar4sg: Controlling The Object

Hello Guys.. Selamat datang di Augmented Reality Team (A.R.T). ok, sesuai dengan janji saya, kali ini saya akan membahas bagaimana mengendalikan objek dengan marker. jadi, misalnya seperti ini, kita mempunyai objek 3D yang sudah di Animasikan di Blender atau software 3D Lainnya, kemudian kita ingin membuat objek bergerak, jika kita suruh bergerak, berhenti jika kita suruh berhenti, berputar ke kiri jika kita suruh putar ke kiri, berputar ke kanan jika kita suruh berputar ke kanan, dll.. Awesome Hah?.. 

contohnya seperti projek yang berhasil saya buat dibawah ini:

gimana? mau buat AR seperti itu?.. Mudahh, tapi anda harus mempunyai komputer dengan spek lumayan tinggi untuk menjalankan AR ini, karna saya menjalankan AR ini dengan Processor Celeron 2.13 dan Ram 1 Gb, agak pata-patah saat dijalankan.. hehe. (*maklum komputer jadul) .. tapi belum saya coba di komputer dengan Intel Core2Duo Keatas. 

oke, sebelum kita mulai membuat AR ini, pertama-pertama anda harus mendownload objek animasi yang saya buat berdasarkan panduan dari buku Dr.Tony Mullen seorang AR Developer dan Dosen di Universitas Tokyo Jepang. anda bisa mendapatkan bukunya di Amazon.com, dan juga anda harus mendownload marker yang saya gunakan untuk belajar. yang bisa anda dapatkan disini >> Download Objek dan Marker

nah, setelah didownload, anda harus men-Print ke 3 Marker yang tersedia. setiap marker, mempunyai fungsi berbeda. marker berlogo Objek 3D warna Pink berfungsi untuk menjalankan objek 3D, marker berpola kaki berfungsi untuk memerintahkan agar objek berjalan, dan Marker berpola seperti "Tanda Berputar" berfungsi agar objek berputar ke arah yang kita inginkan. 

setelah di print, buka processing 1.2.1 anda. tapi sebelumnya, saya anggap kalian sudah memahami instalasi library AR Processing dan Nyar4sg. jika belum saya SANGAT SARANKAN anda untuk kembali ke tutorial sebelumnya disini >> Tutorial AR Processing 

kembali ke topik semula, setelah anda buka Processing 1.2.1 anda, masukkan source code berikut: (Untuk Penjelasan Source Code, akan saya jelaskan di Part 2)

/**    NyARToolkit for proce55ing/0.3.0
    (c)2008-2010 nyatla
    airmail(at)ebony.plala.or.jp

  NyARMultiBoard + NyARMultiBoardMarker by
  Charl P. Botha
*/

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

GSCapture cam;
NyARMultiBoard nya;
OBJModel annie ;
PFont font;
PVector move;
PVector xypos;

OBJModel[] anim;
int animFrames = 20;
int animFrame;
boolean animOn= true;
float turn = 0.0;
float prevangle = 0.0;

void setup() {
  size(640,480,OPENGL);
  colorMode(RGB, 100);
  font=createFont("FFScala", 32);
  cam=new GSCapture(this,width,height);
  String[] patts = {"samarker16.pat", "walkmarker16.pat", "turnmarker16.pat"};
  double[] widths = {80,80,80};
  nya=new NyARMultiBoard(this,width,height,"camera_para.dat",patts,widths);
  print(nya.VERSION);

  nya.gsThreshold=120;
  nya.cfThreshold=0.4; 
  int i;
  String filename = "";
  anim = new OBJModel[animFrames];
   
  for(i = 1; i <= animFrames; i++){
    if(i < 10){
      filename = "shootinannie-superlowpoly-tri_00000" + i + ".obj";
     }else{
       filename = "shootinannie-superlowpoly-tri_0000" + i + ".obj";
     }
     anim[i-1] = new OBJModel(this, filename, "relative", TRIANGLES);
     anim[i-1].enableDebug();
     anim[i-1].scale(15);
     anim[i-1].translateToCenter();
     anim[i-1].enableTexture();
   }
  xypos = new PVector(0, 0);
  move = new PVector(0, -1);
}

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

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

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

  background(255);
  cam.read();
  hint(DISABLE_DEPTH_TEST);
  image(cam,0,0);
 
  if (nya.detect(cam))
  {
    for (int i=0; i < nya.markers.length; i++)
    {
      if (nya.markers[i].detected)
      {
        drawMarkerPos(nya.markers[i].pos2d);
      }
    }
    if(nya.markers[1].detected){
     animOn = true;
    }else{
     animOn = false;
    }
   
    hint(ENABLE_DEPTH_TEST);

    PGraphicsOpenGL pgl = (PGraphicsOpenGL) g;
   
    if (nya.markers[0].detected){
       nya.markers[0].beginTransform();
       noStroke();
       rotateX(radians(-90));
      
       if(nya.markers[2].detected){
          turn = nya.markers[2].angle.z;
          rotate2D(move, turn-prevangle);
          prevangle = turn;
       }
       
       translate(xypos.x, xypos.y, 50);
       rotateY(turn);
      
       if(animOn){
       anim[animFrame].draw();
       xypos.add(move);
       animFrame++;
       if(animFrame == animFrames){
          animFrame = 0;
          }
        }else{ 
          anim[17].draw();
        }
       nya.markers[0].endTransform();
    }
  }
}

void rotate2D(PVector v, float theta) {
  float xTemp = v.x;
  v.x = v.x*cos(theta) - v.y*sin(theta);
  v.y = xTemp*sin(theta) + v.y*cos(theta);
}

setelah selesai kalian ngeCoding, silahkan save file dengan nama SAWalkTurn.pde - lalu, selanjutnya kita harus menDrag semua Objek 3D yang sudah saya Import menjadi Format OBJ beserta texturenya yang sebelumnya anda download ke Processing. (FYI: Processing Mendukung Format Animasi OBJ) 

sekarang setelah di drag ke processing, buka folder Processing di My Document, lalu masuk ke Folder SAWalkTurn.pde maka lihatlah didalam folder tersebut secara otomatis ada folder bernama Data yang isinya adalah semua Objek 3D, Texture, dan Patt Marker yang anda Drag sebelumnya.

selanjutnya klik Run (Icon Play), dan arahkan ketiga marker tersebut di kamera. jika anda menunjukkan marker berwarna pink maka objek 3D akan keluar tapi hanya diam, jika anda tunjukkan marker dengan pola kaki maka objek akan berjalan, dan jika anda putar marker berpola "Tanda Putaran" maka objek akan berputar, seperti di video demo saya tersebut..

Yapp.. That's it Tutorial dari saya, selanjutnya di Part 2 Kita akan membahas Source Codenya, Ditunggu Yah. Semoga Membantu and Gud Luck..!!

Posted in: