DKBLOG

圖轉貼自CreativeApplications.Net，部分文翻譯自CreativeApplications.Net

原文網址 http://www.creativeapplications.net/android/mobile-app-development-processing-android-tutorial/

Processing為一套提供使用者製作圖形、動畫、互動內容的開放原始碼開發工具(環境)。非常適合比較沒有程式碼撰寫經驗的設計師、藝術家、研究者等人使用。

PS. 筆者部落格中也有關於NyARToolKit於Processing上製作擴增實境內容之範例。對Processing製作AR擴增實境的人歡迎參考。

本篇則是將CreativeApplications.Net上一篇關於以Processing撰寫Android Application的教學部分翻譯至本文中。

正文開始：

利用Processing製作一個Android上的應用程式非常的簡單。有多簡單呢？本篇教學將花不到您25分鐘即可建立一個Android應用程式。

** 跟著這篇教學，你並不需要一台Android手機。安裝最新版的Processing，已經有內建模擬器(emulator)。

** 在開始跟著教學之前，強烈建議您確認電腦有安裝Java 執行環境。Mac使用者可以直接點選[軟體更新]，Windows使用者可以到Java網站下載最新執行環境。

步驟一：安裝Android SDK

SDK (Software Development Kit) 即為軟體開發套件，我們可以輕鬆的下載後安裝，就可以開始協助我們開發應用程式。

請至下述網址安裝符合自己電腦作業系統之SDK：

http://developer.android.com/sdk

檔案下載回來後，需要解壓縮。

以Mac為例，解壓縮完畢會有一個名稱類似於"android-sdk-mac_x86"的資料夾，將此資料夾移動到硬碟中安全的目錄下，以免誤刪。

接著，進入該資料夾下的"tools"目錄中，滑鼠雙擊"android"檔案，此時會啟動terminal(終端機)，並自動開啟 Android SDK和AVD manager，如下所示：

接著，我們要利用這個AVD Manager安裝Android應用程式在編譯時所需的套件，點擊左方欄位列表的"Available Packages"，並將視窗中間的圈選框打勾。

接下來就會有一串可供下載的清單：

我們可以安裝所有的套件，或是只選擇其中幾個較新的安裝，最後按下"Install Selected"按鈕，接著按"Accept All" "Install" 即開始安裝。

現在，我們便準備好 Processing Android 所需的套件囉。

步驟二：下載可開發 Android 的 Processing IDE

原本已經是 Processing 的使用者，提醒您檢查一下您 Processing IDE 的版本號，請於以下網址下載並安裝最新版 Proceesing (撰寫此篇文章時最新版本號為 0190，搶鮮版為 0191)：

http://www.processing.org/download/

詳細的Processing Android資訊可參考：

http://wiki.processing.org/w/Android

步驟三：製作Android應用程式！

在我們製作複雜的應用程式之前，我們先以一個簡單的sketch初試牛刀，以下的程式碼希望在橘色背景的畫布正中間畫出一個白色方塊：


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

   smooth();
   noStroke();
   fill(255);
   rectMode(CENTER);     //This sets all rectangles to draw from the center point
};


void draw() {
   background(#FF9900);
   rect(width/2, height/2, 150, 150);
};

如果我們直接按下 Run 按鈕 (或 Apple+R)，Processing 會編譯我們的sketch，並在一個新的視窗中以 Java Applet 執行，此為Processing最基本的編譯與執行行為。當然，您也可以在選單列中選 "Sketch > Present"，那麼便會在全螢幕的狀態下執行您的sketch。若選擇 "File > Export" 則能將sketch編譯成 Java Applet binary，可以供您匯入網頁中。而 "File > Export Application" 則可以產生一個可獨立執行的執行檔，只要電腦中有 Java 執行環境，都可執行該程式，因此您可以將自己撰寫的程式分享給朋友 :-D。

以上三種編譯功能都與Android模式不同，什麼？Android模式？沒錯，再新的Processing中增加了一個重要的新功能，我們可以直接在Processing裡面撰寫Android Application！而程式碼的撰寫方式(語法)就如同往常您撰寫一般的Processing一樣！

從選單列中，我們可以發現以前未見過的"Android"標籤，按下去後會有一個清單，請選擇"Android Mode"，我們便來瞧瞧剛剛那個簡易的sketch在Android Mode下run(編譯並執行)會是什麼樣子吧！

* 如您在編譯與執行時，發生錯誤。請檢察您的Android SDK 有否正確安裝，並盡量更新到最新版本。

* 請注意！模擬器(emulator) 執行時需要一段時間(筆者在Core 2 Duo 2.53G/ 4G DDR3的MBP上，仍需一段時間，而且動作有點慢)。

若您覺得在模擬器上執行Android 應用程式不夠刺激，沒關係，接下來我們要將這些畫面放到Android手機上！

步驟四：在Android手機上執行程式！

重要：要讓您撰寫的Android應用程式在手機上正常運作，請務必要確認手機中 "USB除錯模式" 有打開！該功能在手機的"設定>應用程式>開發"中。如果您是Windows使用者，以可能需要作一些額外的安裝。

將您的Android裝置(手機)透過USB接到電腦上後，請在Processing的選單列中執行 "sketch > present"(或按Shift+Apple+R)即可。

非常好！如果以上步驟您都正常完成，且還想嘗試具有互動性的範例程式碼的話，請試試接下來的程式碼：


/*
World's simplest Android App!
blprnt@blprnt.com
Sept 25, 2010
*/


//Build a container to hold the current rotation of the box
float boxRotation = 0;


void setup() {
  //Set the size of the screen (this is not really necessary in Android mode, but we'll do it anyway)
  size(480,800);
  //Turn on smoothing to make everything pretty.
  smooth();
  //Set the fill and stroke colour for the box and circle
  fill(255);
  stroke(255);
  //Tell the rectangles to draw from the center point (the default is the TL corner)
  rectMode(CENTER);

};


void draw() {
  //Set the background colour, which gets more red as we move our finger down the screen.
  background(mouseY * (255.0/800), 100, 0);
  //Chane our box rotation depending on how our finger has moved right-to-left
  boxRotation += (float) (pmouseX - mouseX)/100;

  //Draw the ball-and-stick
  line(width/2, height/2, mouseX, mouseY);
  ellipse(mouseX, mouseY, 40, 40);

  //Draw the box
  pushMatrix();
    translate(width/2, height/2);
    rotate(boxRotation);
    rect(0,0, 150, 150);
  popMatrix();
};

一樣，我們使用 Present 功能(Shift+Apple+R)在 Android 手機上執行 sketch！

我們可以以手指頭在Android上與小方塊互動囉！

Have Fun :-)