Processing + Swing = Grider App

用Processing來處理一些連續圖像和影片實在相當方便，簡單幾行就可以搞定。對熟悉程式碼的人來說是這麼回事，但是要給不會看程式碼的人用，還是做個圖形界面會比較方便。適逢Processing釋出2.0 beta版，就順道把先前做的影片打格子程式，也就是那個姑且被我稱作Grider的程式做了一個小小的升級改版，整合Swing為它加上簡單的使用者界面。

之前評論道Processing所使用的函式庫有點過時，那個時候我使用的版本還是1.5，而2.x版則還在相當alpha的階段。不過，前些天重新逛了Processing.org的網站，發現幾乎所有的文件與範例，都已經更新成為2.x版本，便下載了2.0b7來改寫要為影片打格子的程式。

如果你只要使用Processing基本的功能，應該是不會碰到processing.video這個package。但既然我們處理的是影片，想不碰到這個也不太可能。Processing 1.5的video是直接呼叫QTJava，但它是32位元的，而且也被Apple宣告過時。在前一個Grider版本中，我使用另外一個函式庫來處理影片，也就是GSVideo。展開Processing 2.0b7後才看到，GSVideo這個函式庫已經被包到processing.video裡頭，並且能用64位元的方式來跑。對於Mac使用者來說，真是一大福音，因為現在比較常用的版本幾乎都是64位元的，起碼從我手邊還會用到的10.6開始。

只不過，升級倒也不是沒有缺點。在1.5的版本中，processing.video本來有一個MovieMaker的class，可以直接輸出QuickTime或avi影片，這在Processing 2.0裡頭好像被拿掉了。還好，這個class對我沒有影響。

大致弄清楚Processing更動的部分後，便開始修改程式碼。首先把之前GSMovie的物件全都換回Processing裡頭的Movie，反正兩者是相同的，沒必要再去匯入一個函式庫。接著，便要開始橋接Processing和Swing兩個東西，對我來說，這是個新的挑戰。

開發Java使用者界面大致上就是兩個選擇，一個是SWT (The Standard Widget Toolkit)，另外一個就是Swing。至於AWT，那個實在太麻煩，完全不在我的考慮範圍之內。我比較熟悉的是SWT，可是偏偏在Mac上，想做個SWT_AWT的橋接，或是要內嵌個Swing物件，總是會碰到Java CocoaComponent compatibility mode的問題，更新到目前最新的版本依然沒辦法解決，只好硬著頭皮使用Swing來做使用者介面。

用WindowBuilder來拉界面節省了很多時間，免除了猜測物件長相和功能的困擾。但這得要在eclipse裡面做，意味著要將Processing的主要函式庫給拿出來。這部分在Processing.org官網上有教學，請自行參考Processing in Eclipse。比較麻煩的是processing.video裡頭的東西，除了要把幾個jar檔案一併拉出來外，還要把macosx64的資料夾一起拉出來，否則影片根本沒辦法載入。

解決影片播放的問題後，接下來要把Processing的PApplet納入Swing當中。在PApplet的技術文件裡面，有一個簡化的範例，示範如何從AWT的Frame裡面將PApplet初始化。Swing的JFrame繼承了AWT的Frame，也可以使用同樣的方式。說穿了，不過是將PApplet當做一個component塞進Swing裡頭，在最後要記得呼叫 init() 去執行PApplet的內容。

 public class ExampleFrame extends Frame {

     public ExampleFrame() {
         super("Embedded PApplet");

         setLayout(new BorderLayout());
         PApplet embed = new Embedded();
         add(embed, BorderLayout.CENTER);

         // important to call this whenever embedding a PApplet.
         // It ensures that the animation thread is started and
         // that other internal variables are properly set.
         embed.init();
     }
 }

 public class Embedded extends PApplet {

     public void setup() {
         // original setup code here ...
         size(400, 400);

         // prevent thread from starving everything else
         noLoop();
     }

     public void draw() {
         // drawing code goes here
     }

     public void mousePressed() {
         // do something based on mouse movement

         // update the screen (run draw once)
         redraw();
     }
 }

解決這些麻煩的問題之後，剩下的就是使用者介面各個功能的調整。雖說比較沒有技術上的障礙，但這個部分似乎花了最多時間，有太多觸發事件得要處理。在一陣辛勞之後，Grider算是可以用了，只要再花些時間做些測試與修正，應該就可以釋出了。