Nodify

一開始是在試作 Photoshop 中的色彩範圍選取功能，成功了之後，忽然想加上些圓圈看看，後來又把圓圈連線起來。

就成了常見的節點連線的畫面，有興趣的人可以搜尋 " Node Garden "。

這次將節點集中到某個色彩區域，點和線的顏色使用原本的圖片上的色彩，就形成了滿有趣的畫面。

使用的是 WPF(C#)



第二天為了實驗多一點效果，做了一個介面。後來想試試看串成連續的影片，於是加上了批次算圖的功能。

又自拍了一些影片來作測試，看起來還滿有趣的。



建議開 720P (線條比較清楚一些)

(有個小技巧的地方在於：每一張並不是全部重畫，與上一張相同範圍的點會留在原地，所以畫面比較不會一直亂跳動。)

VScanner 掃描、分割的好夥伴

一次奇妙的機會下去當一天的文書工讀生，大部分的工作是打字、核對資料和掃描發票。

發票一共有上百張，每一次都放入一張進掃描-->"預視"-->等待-->框選-->掃描-->等待-->下一張，這樣反覆交替。

就算一次把把多張一起掃，到繪圖軟體裡剪裁時，還是得一張一張剪，一張一張存，實在有點耗損青春。

於是這個 VScanner 的構想就浮現出來了。


「 VScanner 可以一次掃描所有東西之後，快速選取、直接自動分開儲存各個部分。」

用起來十分方便容易，比起一張一張掃描應該快上不少。

具體的操作看下面的影片就能了解了：




做文書工作的人，可能常常要掃描很多份證件之類的，這就會是個很方便的工具。


「什麼人做什麼樣的程式。」是我常常拿來開玩笑的一句話。

每次做完一個程式時，最後我都會多一個步驟叫做"貼心化"，這個步驟有時候還更花時間

就待有緣人去體會了。


下載：

　　VScanner 下載 (Vista & Window7)

　　VScanner_xp 下載 (xp)

ColorViewer

直接預覽調整算圖後的顏色。

可以在線上給夥伴、上司、客戶選擇要的顏色，或者當顏色喬不定，而花一堆時間反覆算出來看時，這會是一個很方便的工具。

(下方flash如沒出現，請稍候 30 秒 )





這三張其實各有用意 (得要很仔細看)：

‧第一張：從反射的影像顏色不變，說明不是單靠改變整張色相來達成的。

‧第二張：FG中，物體間相互反彈的滲色(地板上)，也會跟著改變。

‧第三張：反射到其他物體上的鏡像，也會跟著變色。



雖然看起來很厲害，但其實只是依照著 RGB 光的三原色的原理而已，成本是先算出四張。

如下圖分別是：紅、綠、藍、黑(黑很容易被忽略掉)



把上述四張圖疊在一起，"紅、綠、藍"的混和模式改成"加亮(lighten)"，黑色則不動當底。

這時就會得到一張白球的圖片，原理看如下圖左邊就能了解。

接著各自調整圖層的透明度，也就是改變三色的比例，就可以調成各種顏色了。

可以直接在 Photoshop 做也行。




其實這次真正難的是選顏色的圓盤，因為改色的原理是 RBG，但選色是用 HSV (只因讓人比較好選)

HSV 和 RBG 之間的轉換比起想像中複雜，也超過我能解釋的範圍。

有興趣的人可以搜尋一下：rgb hsv convert

3DScanner

市面上有一種3D實物掃描的機器，一台相機和一個會旋轉的檯子

只要把真實的物件放上去，相機就會開始邊轉邊拍，最後到電腦上就好像有了一個會轉的3D物件一樣。

如果在加上紅外線掃瞄就可以得到距離，借此算出真的3D模型，並用相片自動上貼圖。《參考:NextEngine》

再進一步就是結合打光，變成一個大球體，也就是著名的 Light Stage 了。《參考:LightStage》

但這裡要討論的是沒有紅外線的版本，也就是只單純照了很多張照片，再依據互動來依序播放，感覺起來就像是真的3D物件一樣。

市面上已經有這樣的產品了，這次合作的台大昆蟲系也有這樣的器材。



先說明一下這事要做的目標，是使用 Flash 呈現一隻能自由轉動的3D蝴蝶。

由於 Flash 的3D效能還是無法呈現精緻的蝴蝶，所以使用假的3D效果是比較可行的方案

於是就得在3D軟體( Maya )裡製造出類似3D實物掃描的機制，把每個角度的圖片算出來

匯入到 Flash 裡面，讓 ActionScript 去依照互動方式決定要播哪一張

---

首先是 Maya (Python)

這次嘗試使用 Python 來編寫，也算是藉機來學習一下。

一開始第一個想到的解決方式，是使用球狀的攝影機陣列，如下圖(左)。

產生出來攝影機陣列十分壯觀，任何東西都不需要轉動，只要依次算出下個攝影機的影像即可

看似容易，但剛做完便想起 MEL/Python 控制算圖實在太過麻煩，於是就放棄了這個做法。




第二個方法是實物掃瞄機的相反，如上圖(右)

也就是移動攝影機來拍攝，而不是轉動物件。

最後採用了這種方法，困難度較低，算出攝影機有key的範圍即可





這就是算出來的圖片，原先設定經緯各36格(上圖n=36)，算出來的圖片就是 36*36 = 1296張

由於想要能夠背景透明，最後輸出是 800px*800px (PNG)

---

瘦身

1296 張帶著 alpha 圖層的圖片，真的不是個小數目。

匯入到 Flash 裡只要超過 470 張就會當機，於是就得想辦法減肥一下。

　‧降低經緯數：降太多會感到不順暢的感覺，所以只把縱向的數目減半 ( 18*36 = 648 )

　‧對稱圖像鏡射：由於蝴蝶是左右對稱的，也就是可以左右共用同一張圖，所以橫向也減了將近一半 ( 18*19 = 342 )



最後總張數一共是 342 張，比起原本的 1296 少了 3/4。

---

接著是 Flash ActionScript 的部分

真正難度較大的部分其實是在 ActionScript 如何去判斷該顯示哪一張

為了節省圖片，所以還需要判斷鏡射，鏡射完還得右移，增加了許多難度。

由於實在太多張圖，曾經嘗試了三種匯入的方式：

　1.全部匯入到影格內，依編號移動到對應的影格上：操作順暢，匯入、輸出花時間。

　2.一開始載入全部圖片：等待載入太久，大約要1~2分鐘以上，不可行。

　3.即時載入對應圖片：載入需費時，會出現閃耀，操作不順。



最後只好選擇第一個方法，雖然每次測試時都要等上個 2~3 分鐘，但操作還算順暢。



製作了一個叫做 3DScannerMir 的類別，只要給它 x,y 的位置，它就會傳回對應的圖片編號

得到編號後，再移動到該影格即可

最後產生出來的 swf 檔大小為 6MB 左右

後來精緻了蝴蝶模型，翅膀加入透明漸層和翅脈，檔案大小一下子膨脹到 22MB



342 張 PNG 差不多是 Flash 的極限了，時常會記憶體不足

整個做下來比我想像中的還要複雜一些

最後要用上的時候是彩色的，由於只是測試，所以只用單色

整個做得完整一點的話，算是個滿好用的展示 3D 物件的方法，不用開 Maya，在網路上即可呈現精緻的模型。

下面放的是最後 6MB 版本的成品嘍。 可以使用滑鼠拖曳看看 -end