Pemograman: Belajar Processing Bagian 2

Haloo.. Selamat datang di A.R.T, masih di belajar tentang pemograman dengan processing kali ini kita belajar, beberapa simple source code di processing yang bisa digunakan sebagai dasar pemahaman tentang processing. bagi yang belum belajar di bagian pertama, dan belum mengerti sama sekali tentang instalasi processing, bisa membaca dulu artikel saya sebelumnya di Pemograman: Belajar Processing

oke, mari kita mulai dengan simple source code di processing. pada dasarnya di processing kita bisa mengatur screen resolution pada sketch yang nantinya akan dirender, kita bisa mengaturnya sesuai dengan kebutuhan dan desain aplikasi yang ingin dibuat. misal kita ingin membuat screen resolusi seluas 480x120 maka yang kita lakukan adalah, mengCoding source codenya di sketch seperti ini:

size(480, 120);

nah sekarang, coba anda klik tombol play maka dia akan membentuk screen resolution sebesar 480x120 seperti gambar dibawah ini: 

selanjutnya, jika kita membuat gambar, pasti kita akan awali dengan tanda "titik". dari tanda titik tersebut, kita bisa merangkai dan mendesain semua gambar yang kita inginkan. bahkan menurut kepercayaan orang sufi islam, bahwa seluruh yang ada didunia ini berawal dari tanda titik yang dibuat Tuhan.  seperti misalnya kita ingin membuat bentuk segitiga, maka kita akan awali dengan tanda titik atau point untuk melakukan projeksi terhadap gambarnya. misal seperti gambar dibawah ini:

bisa dilihat dari gambar diatas, ada tanda point atau titik yuang digunakan untuk menyatukan satu gambar ke gambar lainnya. nah konsep dari processing adalah seperti itu, untuk membuat gambar atau melakukan manipulasi gambar dari satu pixel ke pixel lainnya, kita membutuhkan script bernama Point. 

Point di processing akan mendefinisikan X-Coordinate yang akan diikuti oleh Y-Coordinate. intinya kita bisa mengatur dimana letak posisi point itu akan ditaruh atau ditempatkan di sketch processing kita. sebagai contoh, misal kita ingin menempatkan Point di tengah sketch, maka yang harus kita lakukan adalah, menSetting Point koordinat X dan Y point tersebut. sekarang, coba anda jalankan source berikut:

size(480, 120); 

point(240, 60);

coba anda klik play, dan perhatikan baik-baik di tengah sketch akan ada titik kecil, benar? itulah Point. dari titik tersebut kita bisa menggambar image yang kita inginkan di processing.

ok, sekarang kita sudah belajar basic processing, sekarang saatnya kita coba berexperimen dengan beberapa gambar dengan processing. mulai dengan menggambar garis panjang denga processing, anda bisa gunakan parameter line untuk melakukannya. silahkan anda jalankan source code dibawah ini:

size(480, 120); 

line(20, 50, 420, 110);

darimana saya mendapatkan ukuran line tersebut? anda bisa menggunakan parameter line dibawah ini, dari situ anda bisa mengatur koordinat X dan Y, kemudian mengaplikasikannya di processing. 

mau coba yang lain?, oke kita coba membuat segitiga dengan processing, kita akan gunakan parameter triangle di processing. silahkan jalankan kode dibawah ini:

size(480, 120); 

triangle(90, 50, 30, 5, 6, 70);

nah begitu seterusnya, sekarang untuk latihan, silahkan anda kerjakan parameter basic shapes dibawah ini. saya sudah menyiapkan parameter koordinatnya, silahkan anda bereksperimen dengan processing, jika anda berhasil, maka anda sudah mengerti konsep processing, dan kita siap melanjutkan ke tutorial bagian ke-3

selamat bereksperimen dengan matematikan dan processing (^0^). semoga berhasil guys, dan sampai ketemu di Belajar Processing Bagian 3. kita akan mencoba eksperimen yang lebih kompleks lagi. ciaooo..

Read More

Pemograman: Belajar Processing

Halo.. Selamat datang di A.R.T, saya sebulan ini belum update tutorial lagi, karena harus menyelesaikan proyek Augmented Reality saya, alhamdulillah sekarang sudah selesai, dan sekarang kita akan belajar pemograman lagi. 

oke, beberapa hari ini di grup A.R.T dan beberapa teman berkonsultasi sama saya, tentang apa saja yang dibutuhkan untuk membangun AR?, semua pertanyaan itu selalu saya jawab "Kamu Seneng bahasa Pemograman apa?" ada yang menjawab "Saya gak Jago pemograman paman, tapi saya bisa sedikit Java dan C++"

sebenarnya, saya tidak bertanya "Kamu Bisa Bahasa Pemograman apa?" yang saya tanya "Kamu Senang Bahasa Pemograman apa?" senang dan bisa adalah dua sisi yang berbeda, anda bisa melakukan sesuatu tapi jika tidak menyenanginya, anda tidak akan mendapatkan apa-apa, tetapi jika anda menyukai atau menyenangi sesuatu tetapi "belum" mengusainya, pasti lama-lama akan mengusainya, kenapa? karena anda punya usaha untuk bisa mengusasinya. 

seperti anda menyenangi seseorang, awalnya anda belum dekat karena anda belum berkenalan, tapi karena anda berusaha untuk dekat, makanya anda bisa dekat dengan dia. begitu juga dengan pemograman, banyak dari kita yang sudah ketakutan dulu untuk melakukannya, padahal bahasa pemograman itu mudah jika mempunyai keinginan untuk mengusainya. 

yapp, itu cuma sedikit intermezzo dari saya. oke, setelah saya melakukan banyak polling, ternyata rata-rata banyak dari kita menyukai bahasa Java dan C++, mungkin karena sering dipelajari di kampus dan tutorialnya paling banyak, untuk itu saya akan berbagi tentang Java dengan Processing dan juga Open CV dengan C++. kenapa harus dua itu, karena dua library itu yang paling mudah penggunannya terutama untuk di AR, Processing dan OpenCV. tapi untuk sekarang, kita akan belajar processing terlebih dahulu. 

sebelumnya akan saya jelaskan dulu tentang Processing. Processing adalah sebuah Engine pemograman seperti Visual C++ dari Microsoft. Processing sendiri bersifat Open Source, dan mudah digunakan. pada dasarnya, Processing digunakan untuk melakukan Pengolahan Citra dengan bahasa pemograman Java. dan, kelebihannya, dengan processing kita bisa meminimalisir penggunaan kode yang kompleks, jadi dengan processing kita tidak perlu menggunakan code yang kompleks.

tapi ada kelemahan dari Processing yaitu masalah library tambahan di Processing. terkadang banyak library di processing yang kurang stabil, dan Instalasinya yang sulit. terutama bagi yang menggunakan windows 7 seperti saya, sangat sulit untuk mendapatkan update librarynya. seperti saya, saat mencoba belajar AR dengan Nyar Processing, saya terbentur masalah instalasi library, sampai harus berputar-putar di forum processing untuk mencari solusinya, dan yang saya tidak senangi, moderator disana seperti tidak mau membantu permasalahan yang ada, tapi tidak apa-apa, kalau anda rajin searching di google, banyak blogger dan freelancer processing yang akan membantu masalah kita. 

oke, dari tadi kebanyakan cerita.. langsung aja kita belajar processing. pertama-tama, anda harus mendownload Processing di situs resminya di http://processing.org/ - jika anda download, mungkin versi terakhir adalah processing 1.5.1, anda bisa mendowload versi terbaru, sedangkan saya hanya menggunakan processing 1.2.1, karena masih sama saja fasilitasnya. 

jika sudah didownload, ekstrak di harddisk anda, kemudian jangan lupa untuk membuat shortcut processing di dekstop biar mudah di akses. selanjutnya, buka processing, maka anda akan mendapatkan layar sketch. di layar ini tempat anda akan melakukan image processing dengan Java. 

jika sudah dibuka, coba anda buka di folder document di windows anda, maka anda akan mendapatkan folder bernama processing, folder itu otomatis dibuat, saat pertama kali anda menjalankan processing. 

balik lagi ke sketch, anda bisa melihat ada beberapa tombol di processing. ada tombol play dan stop, yang akan anda gunakan untuk menjalankan dan memberhentikan program. ada juga tombol new, open, save dan export

untuk tombol lain, anda mungkin sudah paham fungsinya. tapi ada tombol spesial yang paling saya suka di processing, yaitu tombol Export. untuk diketahui aplikasi yang dibuat di processing bisa dieksport ke 3 Platform Sistem Operasi yaitu Windows, dan Mac Linux dan ke Web. 

khusus untuk web cara eksportnya gampang, anda cuku klik tombol export di depan sketch atau bisa klik file > export, atau bisa tekan tombol CTRL+E. nantinya hasil export akan disimpan di folder processing di document, dalam bentuk Jar dan HTML. tapi untuk diketahui, karena web ini berbasis java maka anda wajib menginstall Java Plugins untuk Browsing anda. 

dan untuk mengeksport ke 3 platform Windows, Mac, dan Linux. caranya gampang, klik file > export application, kemudian anda bisa menCeklist platform yang ingin anda export.

nah seperti itulah basic dari processing. mudah dan simple. oke, ini baru perkenalan dengan processing, next lesson, kita akan belajar source code dasar processing. oke guys, semoga memberikan gambaran tentang processing, terutama buat Java Addict yang pengen ngembangin AR dengan Java,. semoga bermanfaat, see you guys later. Ciaooo.. 

Read More

Pemograman: Image Processing Manipulation with Java Processing and JMRyon - Motion Detection

Hello guys, Selamat datang di A.R.T setelah tutorial sebelumnya kita belajar Instalasi JMRyon dan belajar Manipulasi Pixel. sekarang kita coba belajar membangun Motion Detection dengan JMRyon. kedengarannya memang sedikit rumit, tapi sebenarnya mudah. 

konsep dari Motion Detection ini adalah dengan melakukan pelacakan terhadap GLOB Processing, yang merupakan library untuk melakukan pencocokan terhadap pola. pada kasus kita sekarang, kita ingin melakukan pencocokan terhadap pixel warna, dengan menganalisis satu pixel ke pixel lainnya, kelihatannya memang sulit, tapi sebenarnya mudah. 

yang cukup kita lakukan adalah, mengaktifkan library JMyron.findGlobs dan menyempurnakan pencarian dengan JMyron.minDensity (int val) dan JMyron.maxDensity (int val) (yang keduanya mengambil piksel-dianggap sebagai input). 

oke, daripada kelaamaan di teory, silahkan ngeCoding dengan Source Code dibawah ini:

import JMyron.*;

JMyron theMov;
int[][] globArray;

void setup() {
  size(640, 480);

  theMov = new JMyron();
  theMov.start(width, height);
  theMov.findGlobs(1);
  theMov.trackColor(255, 255, 255, 255);

  stroke(255, 0, 0);  // red outline
}

void draw() {
  theMov.update();
  int[] currFrame = theMov.image();

  // draw each pixel to the screen
  loadPixels();
  for (int i = 0; i < width*height; i++) {
    pixels[i] = currFrame[i];
  }
  updatePixels();

  // draw the glob bounding boxes
  globArray = theMov.globBoxes();
  for(int i = 0; i < globArray.length; i++) {
    int[] boxArray = globArray[i];

    // set the fill colour to the average of all colours in the bounding box
    int currColor = theMov.average(
      boxArray[0], 
      boxArray[1], 
      boxArray[0] + boxArray[2], 
      boxArray[1] + boxArray[3]);
    fill(red(currColor), green(currColor), blue(currColor));

    rect(boxArray[0], boxArray[1], boxArray[2], boxArray[3]);
  }
}

public void stop() {
  theMov.stop();
  super.stop();
}

dari contoh diatas, kita membuat sebuah Bounding Box (Satu Kesatuan Box) diantara banyak Globs. anda bisa melihatnya diantara box yang besar dengan box yang kecil. warna utama dari Bounding Box, dalam hal ini warna abu-abu, akan menjadi warna keseluruhan untuk Pixel. coba anda arahkan tangan anda seperti gambar dibawah, maka pixel terpecah dan rata-rata warna masih tetap sama dengan Bounding Box.

bagaimana bisa terjadi? kita menggunakan tehnik JMyron.trackColor(int red, int green, int blue, int tolerance) untuk melakukan determinasi warna mana yang harus dicocokan oleh Globs. makanya saat anda mengarahkan tangan anda ke Bounding Box, Globs langsung memecah menjadi beberapa pixel, dan menyesuaikan dengan warna baru. bisa dilihat, ada pixel globs yang berwarna  abu-abu tua. itulah konsep dasar dari Motion Detection JMRyon. silahkan dipelajari Source Code diatas, selamat belajar dan semoga berhasil. 

Read More

Pemograman: Image Processing Manipulation with Java Processing and JMRyon

Hello Selamat datang di A.R.T - pada tutorial kali ini saya akan membahas khusus manipulasi image processing dengan JMRyon Library. *sedikit curhat* saya pernah stress menghadapi library ini, karena instalasinya yang susah, tapi akhirnya berhasil setelah dibantu oleh teman-teman di forum processing. 

jadi saya bakal sedikit berbagi ilmu, tentang pengalaman saya belajar library ini, luar biasa mudahnya dan bahasa pemogramannya mudah dimengerti. yang penting anda tau konsep bahasa pemograman terstruktur atau OOP dengan Java. 

okeh, kita mulai saja belajarnya, apa itu JMRyon? JMyron (alias WebcamXtra) adalah library External untuk memanipulasi gambar tanpa harus menggunakan source code yang rumit, jadi degan JMRyon kita bisa membuat Image manipulasi seperti photoshop secara real time dengan WebCam. dengan JMRyon kita bisa menambahkan efek motion tracking, color tracking, pixel manipulation dll.  

untuk mendevelop JMRyon anda harus menginstall librarynya terlebih dahulu. dan saat instalasi library ini yang pernah membuat saya stress seharian.. haha. tapi tenang saja, nanti saya pandu untuk menginstall librarynya.

Note: Saya Menganggap Kalian sudah Menginstall Processing beserta Librarynya. Jika anda Masih Baru dengan Processing, silahkan Belajar dulu di TUTORIAL ini. 

oke, pertama-tama download JMRyon Library disini. silahklan download Download JMyron 0025, karena itu versi terbaru yang tidak memerlukan library tambahan seperti Windig dan Quicktime untuk menginstallnya.

setelah didownload, lalu diekstrak dan buka folder JMyron0025, kemudian didalam folder tersebut, Copy-paste folder JMyron kedalam folder libraries processing.

sekarang, coba geh buka folder JMRyon tersebut di folder libraries Processing. pasti ada folder dengan nama "copy these into processing root or system32", itu maksudnya kita disuruh mengCopy dua file library yang ada di file tersebut yaitu "DSVL.dll" dan "myron_ezcam.dll" kedalam Sytem32 Windows kita. So, Go Ahead buka windows Explorer, masuk ke C:/Windows/System32 - kemudian copy file DSVL.dll" dan "myron_ezcam.dll" kedalam folder System32 anda.

next, langkah selanjutnya yang banyak orang tidak tau (*termasuk saya awalnya :p), anda download file MSVCP71.DLL dan Msvcr71.dll  yang bisa anda dapatkan di link ini >> DOWNLOAD DISINI - setelah didownload copy-paste kedua file tersebut kedalam folder Sytem32 Windows anda. 

oke, jika sudah langkah terakhir tapi tidak wajib, hanya optional. buka folder JMyron0025 yang kita download sebelumnya, kemudian copy paste folder JMyron Examples ke dalam folder Examples Processing anda. 

Contoh: saya gunakan Processing 1.2.1 - saya install processing tersebut ke Drive C:/ maka saya copy folder JMRyon Examples ke C:/Processing 1.2.1/Examples/ 

jika sudah, sekarang buka Processing anda, lalu untuk permulaan Copy-Paste Source Code dibawah ini. Source Code tersebut, untuk menjalankan kamera kita.

import JMyron.*;

JMyron theMov;

void setup() {
  size(320, 240);
  
  theMov = new JMyron();
  theMov.start(width, height);
  theMov.findGlobs(0);
}

void draw() {
  theMov.update();
  int[] currFrame = theMov.image();

  // draw each pixel to the screen
  loadPixels();
  for (int i = 0; i < width*height; i++) {
    pixels[i] = currFrame[i];
  }
  updatePixels();
}

public void stop() {
  theMov.stop();
  super.stop();
}

kemudian jalankan play, maka akan ada Video Live Camera di Komputer kita. jika anda berhasil maka JMRyon anda sudah berhasil dijalankan. selamat. anda berhasil menginstall JMRyon. 

sekarang kita coba jalankan source code yang lain. kita akan melakukan Image Manipulation, dengan JMRyon. coba anda jalankan source code dibawah ini, dan lihat yang terjadi. 

import JMyron.*;

int NUM_SQUARES = 20;

JMyron theMov;
int sampleWidth, sampleHeight;
int numSamplePixels;

void setup() {
  size(320, 240);

  theMov = new JMyron();
  theMov.start(width, height);
  theMov.findGlobs(0);

  sampleWidth = width/NUM_SQUARES;
  sampleHeight = height/NUM_SQUARES;
  numSamplePixels = sampleWidth*sampleHeight;
}

void draw() {
  theMov.update();
  int[] currFrame = theMov.image();

  // go through all the cells
  for (int y=0; y < height; y += sampleHeight) {
    for (int x=0; x < width; x += sampleWidth) {
      // reset the averages
      float r = 0;
      float g = 0;
      float b = 0;

      // go through all the pixels in the current cell
      for (int yIndex = 0; yIndex < sampleHeight; yIndex++) {
        for (int xIndex = 0; xIndex < sampleWidth; xIndex++) {
          // add each pixel in the current cell's RGB values to the total
          // we have to multiply the y values by the width since we are 
          // using a one-dimensional array
          r += red(currFrame[x+y*width+xIndex+yIndex*width]);
          g += green(currFrame[x+y*width+xIndex+yIndex*width]);
          b += blue(currFrame[x+y*width+xIndex+yIndex*width]); 
        }
      }

      r /= numSamplePixels;
      g /= numSamplePixels;
      b /= numSamplePixels;

      fill(r, g, b);
      rect(x, y, sampleWidth, sampleHeight);
    }
  }
}

public void stop() {
  theMov.stop();
  super.stop();
}

Yapp,, sekian dulu yah tutorialnya. nanti saya lanjutkan lagi tutorial Image Processing ini. silahkan pelajari dulu source code diatas. Semoga Berhasil dan See Yaa..

Read More

Augmented Reality Motion Detection: AR Bubble Game with Processing and OpenCV

Hallo.. Selamat datang di A.R.T - setelah kemarin belajar Modelling dan Image Processing dengan VRML. kali ini A.R.T bawa tutorial yang lebih "Wahhh.." lagi. saya kemarin sempat searching beberapa tutorial AR dan tidak sengaja ketemu tutorial Motion Detection dengan Processing dan OpenCV dari si Evil Genius bernama Andy Best. tutorialnya bisa anda temukan disini >> http://andybest.net/2009/02/processing-opencv-tutorial-2-bubbles/

tapi sayang, tutorialnya tidak begitu jelas. maksudnya dia tidak menjelaskan langkah-langkah menginstal Library OpenCV, dia hanya memberikan source code ARnya. jadi saat programnya dijalankan, selalu ada Warning Error "OpenCV.dll not Found" padahal file library tersebut saya cek ada tapi tidak bisa dibaca oleh Processing, saya juga baca di komentar pembacanya, ada juga yang mengalami hal yang sama, tapi tidak ada penjelasan dari Andy untuk mengatasi masalah ini.

akhirnya, saya googling dan menemukan forum processing, ternyata banyak yang mengalami hal yang sama. setelah saya baca diskusinya. akhirnya saya menemukan masalahnya, kita harus menginstall OpenCV_1.1pre1a. setelah diinstal, restart komputer dan akhirnya bisa jalan. well, itu sedikit pengalaman dari saya, oke langsung saja tutorialnya biar kalian bisa mengikutinya.

Note: saya menggunakan Windows XP Sp3 untuk Menjalankan AR ini. 

1. Download Processing 1.2.1 (*saya belum coba di Processing 1.5.1)

2. Download GS Video 0.8

3. Download OpenCV_1.1pre1a

A. Instalasi Processing 1.2.1 

saya coba pandu instalasinya terlebih dahulu. dimulai dari Processing 1.2.1 - setelah didownload ekstrak processing 1.2.1 di drive harddisk anda mana saja. kemudian buat shortcut Processing di dekstop biar mudah di aksesnya.

selanjutnya, buka folder processing 1.2.1 dan bukalah processing.exe - tunggu sampai loading selesai. jika layar sketch telah terbuka, coba cek di My Document maka anda akan mendapatkan folder baru bernama processing - folder ini otomatis dibuat, disaat pertama kali anda menjalankan processing.

next, buka folder processing di my document dan buatlah folder baru bernama libraries

B. Instalasi GSVideo 0.8

Instalasi Processing selesai. sekarang, kita install library GSVideo 0.8 - saya anggap kalian sudah mendownload library tersebut. sekarang tinggal ekstrak di dalam folder C:\Documents and Settings\Your Name\My Documents\Processing\libraries

C. Instalasi OpenCV_1.1pre1a 

nah di bagian sini yang kadang suka salah. saya langsung saja coba pandu yah. double clik OpenCV_1.1pre1a kemudian anda akan mendapatkan Welcome Session, cukup klik Next saja. saya akan kasih tau nanti dibagian yang paling penting.

bagian paling terpenting saat instalasi adalah, JANGAN LUPA BERI TANDA CHECKLIST DI PATH SEBELUM DIINSTAL. (*maaf capslock, biar gak salah :p)

selanjutnya download Open CV Library for Processing disini - setelah didownload. ekstrak dan copy paste Open CV library ke folder libraries processing di My Document.

instalasi library selesai. selanjutnya kita ngeCoding. buka Processing 1.2.1 anda, dan copy coding dibawah ini. kalo mau di ketik biar paham juga gpp.. :p

import hypermedia.video.*;          //  Imports the OpenCV library

OpenCV opencv;                      //  Creates a new OpenCV object
PImage movementImg;                 //  Creates a new PImage to hold the movement image
int poppedBubbles;                  //  Creates a variable to hold the total number of popped bubbles
ArrayList bubbles;                  //  Creates an ArrayList to hold the Bubble objects
PImage bubblePNG;                   //  Creates a PImage that will hold the image of the bubble
PFont font;                         //  Creates a new font object

void setup()
{
  size ( 640, 480 );                      //  Window size of 640 x 480
  opencv = new OpenCV( this );            //  Initialises the OpenCV library
  opencv.capture( 640, 480 );             //  Sets the capture size to 640 x 480
  movementImg = new PImage( 640, 480 );   //  Initialises the PImage that holds the movement image
  poppedBubbles = 0;                  

  bubbles = new ArrayList();              //  Initialises the ArrayList

  bubblePNG = loadImage("bubble.png");    //  Load the bubble image into memory
  font = loadFont("Serif-48.vlw");        //  Load the font file into memory
  textFont(font, 32);                    

}

void draw()
{
  bubbles.add(new Bubble( (int)random( 0, width - 40), -bubblePNG.height, bubblePNG.width, bubblePNG.height));   //  Adds a new bubble to the array with a random x position

  opencv.read();                              //  Captures a frame from the camera  
  opencv.flip(OpenCV.FLIP_HORIZONTAL);        //  Flips the image horizontally
  image( opencv.image(), 0, 0 );              //  Draws the camera image to the screen
  opencv.absDiff();                           //  Creates a difference image
 
  opencv.convert(OpenCV.GRAY);                //  Converts to greyscale
  opencv.blur(OpenCV.BLUR, 3);                //  Blur to remove camera noise
  opencv.threshold(20);                       //  Thresholds to convert to black and white
  movementImg = opencv.image();               //  Puts the OpenCV buffer into an image object

  for ( int i = 0; i < bubbles.size(); i++ ){    //  For every bubble in the bubbles array
    Bubble _bubble = (Bubble) bubbles.get(i);    //  Copies the current bubble into a temporary object
 
    if(_bubble.update() == 1){                  //  If the bubble's update function returns '1'
      bubbles.remove(i);                        //  then remove the bubble from the array
      _bubble = null;                           //  and make the temporary bubble object null
      i--;                                      //  since we've removed a bubble from the array, we need to subtract 1 from i, or we'll skip the next bubble
 
  }else{                                        //  If the bubble's update function doesn't return '1'
      bubbles.set(i, _bubble);                  //  Copys the updated temporary bubble object back into the array
      _bubble = null;                           //  Makes the temporary bubble object null.
    }
  }

  opencv.remember(OpenCV.SOURCE, OpenCV.FLIP_HORIZONTAL);    //  Remembers the camera image so we can generate a difference image next frame. Since we've
                                                             //  flipped the image earlier, we need to flip it here too.
  text("Bubbles popped: " + poppedBubbles, 20, 40);          //  Displays some text showing how many bubbles have been popped

}

class Bubble
{

  int bubbleX, bubbleY, bubbleWidth, bubbleHeight;    //  Some variables to hold information about the bubble

  Bubble ( int bX, int bY, int bW, int bH )           //  The class constructor- sets the values when a new bubble object is made
  {
    bubbleX = bX;
    bubbleY = bY;
    bubbleWidth = bW;
    bubbleHeight = bH;
  }

  int update()      //   The Bubble update function
  {
    int movementAmount;          //  Create and set a variable to hold the amount of white pixels detected in the area where the bubble is
    movementAmount = 0;
 
    for( int y = bubbleY; y < (bubbleY + (bubbleHeight-1)); y++ ){    //  For loop that cycles through all of the pixels in the area the bubble occupies
      for( int x = bubbleX; x < (bubbleX + (bubbleWidth-1)); x++ ){
     
        if ( x < width && x > 0 && y < height && y > 0 ){             //  If the current pixel is within the screen bondaries
          if (brightness(movementImg.pixels[x + (y * width)]) > 127)  //  and if the brightness is above 127 (in this case, if it is white)
          {
            movementAmount++;                                         //  Add 1 to the movementAmount variable.
          }
        }
      }
    }
 
    if (movementAmount > 5)               //  If more than 5 pixels of movement are detected in the bubble area
    {
      poppedBubbles++;                    //  Add 1 to the variable that holds the number of popped bubbles
      return 1;                           //  Return 1 so that the bubble object is destroyed
 
   }else{                                 //  If less than 5 pixels of movement are detected,
      bubbleY += 10;                      //  increase the y position of the bubble so that it falls down
   
      if (bubbleY > height)               //  If the bubble has dropped off of the bottom of the screen
      {  return 1; }                      //  Return '1' so that the bubble object is destroyed
   
      image(bubblePNG, bubbleX, bubbleY);    //  Draws the bubble to the screen
      return 0;                              //  Returns '0' so that the bubble isn't destroyed
    }
 
  }

}

maaf agak berantakan.. karena keterbatasan Blogger.. hehe. sekarang simpan file dengan nama bubble_game.pde. selanjutnya kita akan memasukkan objek Bubblenya dalam bentuk bubble.png dan juga Serif-48.vlw, caranya drag bubble tersebut ke processing anda. nanti dia secara otomatis didalam folder bubble_game di folder processing di my document, dia akan membentuk folder baru bernama data.

nah sekarang klik Play, maka akan ada game bubble dengan tehnik motion detection. arahkan tangan anda untuk memecahkan bubble-bubble tersebut, dan posting disini berapa skor yang anda dapat yah. :)

oke guys, thanks for reading my tutorial. dan jika mau source code jadinya, silahkan klik link ini untuk full source code. tinggal di copy paste saja di folder processing anda. selamat mencoba dan semoga berhasil.. bye.. bye.. bye..

Read More

Modelling dan Animasi: Flip Book

Hello Selamat datang di A.R.T - masih inget tutorial Buku yang pernah saya buat sebelumnya? nah tutorial kali ini saya akan sedikit membahas membuat animasi buku tersebut. jadi kita ingin membuat animasi kertas terbuka, jadi seolah-seolah seperti menggerakan kertas demi kertas di buku. kalau di bahasa inggris-kan namanya Flip Book. 

membuat animasi Flip Book ini, sangat mudah. yang penting anda sudah memahami tools-tools dasar 3DSMax. misal seperti fungsi Select and Move, Rotate, Unfiorm Scale, Spline, Box, dll - tehnik animasi ini juga bisa dipakai untuk membuat putaran animasi pintu mobil. jadi intinya, animasi dasar ini bisa jadi bahan pengetahuan kalian tehnik-tehnik rahasia animasi di 3DSMax yang jarang dibahas di buku-buku 3DSMax.

Oke, supaya tidak penasaran dengan bentuk animasinya. silahkan kalian pelajari tehnik animasi ini, di video tutorial HD yang telah kami persiapkan. selamat belajar, dan selamat mencoba. Gud Luck..!!

DOWNLOAD HD VIDEO TUTORIAL FLIP BOOK

password: arteam

Warning

Dilarang MengUpload Video Tutorial Kami atas Nama Pribadi maupun Kelompok di Channel Video Streaming Apapun,. terutama Channel Youtube. Mohon pengertian dan kerjasamanya.

Regard

ARTeam

Read More

Modelling: Tutorial Membuat Mug dengan 3DSMax

Hallo Lads.. Selamat datang di A.R.T - di tutorial kali ini saya akan membahas cara membuat Mug. dan seperti biasa tutorial ini akan saya kemas dalam bentuk Video. Oke, saya rasa kalian sudah tau apa itu Mug yah, karena sering kita pakai setiap hari untuk minum. memang kelihatannya, membuat Mug di 3DSMax terlihat sulit, padahal caranya mudah, asal kalian tau tehniknya. 

percaya atau enggak, kita bisa membuat Mug hanya dengan Line. Yapp, cuma hanya dengan Line kita bisa membuat Mug Cantik, jadi tidak perlu menggunakan tehnik polygon atau circle untuk membuat Mug. Tehnik membuat Mug ini nantinya bisa kalian pakai nantinya, buat yang ingin membuat perabotan rumah tangga dengan 3DSMax. 

pada dasarnya, kita bisa membuat Mug dengan tehnik Spline. apa itu tehnik Spline? well tehnik ini sudah saya bahas saat kita membuat Top Hat sebelumnya. tapi tehnik Spline kali ini jauh berbeda dari Top Hat, tehnik Spline ini seperti Magic yang bisa menyulap Line menjadi Mug Cantik seperti Mug 3D saya di gambar diatas. biar gak penasaran cara buatnya, langsung saja download HD Tutorial dari saya dibawah ini. selamat belajar, dan jika ada yang bingung silahkan ditanyakan disini. 

DOWNLOAD VIDEO TUTORIAL MUG

password mediafire and rar: arteam

Screenshot

Warning

Dilarang MengUpload Video Tutorial Kami atas Nama Pribadi maupun Kelompok di Channel Video Streaming Apapun,. terutama Channel Youtube. Mohon pengertian dan kerjasamanya.

Regard

ARTeam

Read More

Modelling: Tutorial Membuat Top Hat dengan 3DSMax

Hello Guys.. Selamat datang di A.R.T - tutorial kali ini masih ngebahas Modelling dengan 3DSMax 9. tapi dengan tema yang berbeda, jika sebelumnya kita berhasil modelling dengan Polygon. kali ini, kita akan melakukan modelling Top Hat atau Topi Tinggi.

buat yang sering nonton sulap klasik pasti tau topi tinggi yang sering dipakai pesulap untuk menyimpan kelinci dan burung merpatinya, atau buat penggemar Slash Ex.GnR pasti tau Top Hat dia. nah, kita akan mencoba melakukan modelling topi tersebut dengan tehnik Nurbs. 


apa itu Nurbs? Nurbs adalah fasilitas di 3DSMax untuk melakukan desaining Baju, Topi, Celana, Jacket dll yang berbau fashion dalam Model 3D View. fasilitas ini merupaka fasilitas unggulan di 3DSMax, yang memudahkan kita untuk membuat model-model fashion dalam bentuk 3D. oke, untuk belajar silahkan kalian download video tutorial kami di link dibawah ini. selamat belajar

DOWNLOAD HD VIDEO TUTORIAL TOP HAT

Password Mediafire: arteam

screnshot

Warning

Dilarang MengUpload Video Tutorial Kami atas Nama Pribadi maupun Kelompok di Channel Video Streaming Apapun,. terutama Channel Youtube. Mohon pengertian dan kerjasamanya.

Regard

ARTeam

Read More

Modelling: Tutorial Membuat Buku dengan 3DSMax

Hello Mate, seperti janji saya. saya akan membahas Modelling dengan 3DSMax. tapi tutorial ini cuma 3DSMax saja yah, saya belum sanggup bermain di Blender. pada tutorial pertama ini, kita akan belajar membuat Buku dengan 3DSMax 9. membuat meja belajar ini, sangat mudah, cocok buat yang baru belajar 3DSMax. maka saya memilih membuat tutorial ini, sebagai permulaan.

Oke Lads.. Supaya mudah belajarnya, saya sudah siapkan video tutorial Modelling Buku dengan 3DSMax 9. kalian bisa mengikuti tutorialnya step by step. sengaja tidak saya tulis di blog, karena takutnya kalian tidak jelas, jadi saya buatkan Videonya dalam format HD Video. silahkan download video tutorialnya dari link dibawah ini.

Video Tutorial Book's Modelling with 3DSMax 9

pass mediafire: arteam

Screenshot

Selamat belajar Folks, semoga berhasil dengan Modelling 3Dnya. jika ada yang bingung, jangan ragu untuk bertanya. oke, sekian dulu tutorial modelling kali ini, tunggu tutorial modelling 3D kami selanjutnya. See Yaa.

Warning

Dilarang MengUpload Video Tutorial Kami atas Nama Pribadi maupun Kelompok di Channel Video Streaming Apapun,. terutama Channel Youtube. Mohon pengertian dan kerjasamanya.

Regard

ARTeam

Read More

Augmented Reality Markerless With Metaio Part 3

Hellooo Lads.. kita ketemu di Tutorial Metaio Part 3, setelah sebelumnya kita berhasil membuat AR dengan Fiduciary Marker. maka di Part 3 ini, kita akan membuat AR dengan Markerless. well, untuk membuat marker di Metaio, itu penggunaanya mudah, paling hanya saat mengCapture gambarnya saja yang agak sedikit susah, karna saat anda mememgang marker untuk di capture, anda harus memegang marker tegak lurus, agar tidak miring saat dijadikan marker di Metaio. 

Oke, langsung saja, untuk membuat marker di Metaio. klik dulu tombol Webcam dibawah, untuk mengaktifkan USB Camera atau Camera Laptop anda. 

setelah kamera jalan, arahkan marker anda ke kamera, dalam hal ini saya gunakan buku Prestashop saya. anda bisa gunakan marker yang lain yang anda suka.

(Note: Saya Sarankan gunakan marker dari cover buku, biar gampang dipegang untuk mendapatkan hasil tegak lurus. kalau marker kertas, sedikit susah dipegang sehingga marker yang dicapture jadi tidak tegak lurus)

kemudian, kalau marker sudah diarahkan ke kamera, klik tombol Capture

setelah di Capture, maka save hasilnya di folder yang mudah anda jangkau. misalnya saya simpan di folder My Picture Document. jangan lupa markernya diberi nama, baru disimpan. saya memberi nama marker saya, marker_buku

Oke, Calon marker sudah jadi selanjutnya kita akan membuat markernya di Metaio caranya, klik tombol Tools > Planar Markerless Configuration

di menu Configuration, klik tombol Create Patch

kemudian klik tombol Search di menu Load Image for Patch, lalu pilih gambar yang kita capture sebelumnya.

jika sudah dipilih, sekarang, klik Edit Region

di menu region selector, drag area yang akan diseleksi (*susah dicontohin :p) - intinya, gerakan saja mouse di area marker, sehingga membentuk plane biru seperti gambar dibawah,. kalau sudah klik Ok

kemudian di Patch Size, masukkan luas region marker menyesuaikan dengan plane biru yang kita buat sebelumnya. misalnya, saya membuat plan biru tadi berukuran 325X294 maka di Patch Size saya masukkan juga ukuran yang sama.

sekarang kita Save marker yang sudah dibuat, dengan mengklik tombol save, simpan dengan nama marker anda, di drive mana saja yang penting anda mudah menjangkaunya. saya simpan dengan nama marker_buku.xml

kalau sudah disimpan tutup menu configuration, dan kita kembali ke Metaio. sekarang,. klik tombol obeng  lagi, dan di menu tracking configuration pilih marker_buku.xml atau nama marker anda yang sebelum anda buat - gak perlu saya jelaskan lagi yah cara milihnya, karna sudah ada di tutorial Part 2

nah kembali lagi ke Category Object dengan mengKlik tombol Cube Hijau, lalu pilih Objek yang anda suka. saya memilih Knight of Dragon aja.

setelah itu, arahkan marker ke kamera.. dan tadaaaa..selamat anda berhasil membuat AR dengan Markerless.. seperti gambar dibawah..

oke Folks, sekian tutorial Metaio dari saya. intinya Metaio is AMAZING sayang harganya selangit, semoga ada klien saya yang berbaik hati membelikan lisensi Metaio untuk saya.. haha. Aminnn.. Oke, I Hope You Make it Through, and Wait for My Markeless Next Tutorial.. Bye.. Bye.. 

Read More