PhotoMosaic-Artifact開發計畫 (1)

這周放假耍廢的過程中, 忽然想到個想做的東西了。 之前有架個介紹自己side project的網站, 雖然基本上是完工了, 可是首頁以外的其他頁就是以介紹資訊為主, 背景整個白的感覺有點單調, 不過要是直接放一張圖或是某種顏色又會影響視覺資訊, 想著想著就想到, 自己以前買過一款馬賽克拼圖, 如果用馬賽克照片加上透明處理, 感覺會是很不錯的網頁素材。

先來穿插個不相關的回憶事件(藉機推坑?), 過去有段日子自己十分著迷於拚圖, 不像CG或繪畫那樣單一張圖已經是成品, 那種一塊一塊組織起來的圖不僅別有特色, 組裝拼圖的過程也是種享受(or 折磨?)。 過去幾年收藏&組裝的拚圖中, 最讓我印象深刻的就是研究所考試那段時間入手的化物語馬賽克風格拚圖了, 請看下面這張圖:

這1000片的拚圖總共是由3255張CG組合起來的, 當時看到這拚圖就決定立馬入手, 那段時間剛好是辭掉公務員, 專心準備研究所考試的時候, 當時每天利用讀完書的時間(大概PM10:00~12:00)去拚這個拚圖, 然後花了我一個多月的時間才拚完...(汗)。

馬賽克拼圖跟一般拚圖最大的不同在於, 一般拚圖可以先用顏色去分組, 然後就可以拼湊一大塊一大塊, 可是馬賽克風格的拚圖顏色根本是亂跳的, 沒辦法用顏色去拚..., 所以後來我都是靠那3000多張cg去分類, 拼圖2~3片當成一小塊, 就這樣一堆一小塊的分組去慢慢拼出來, 當時真的拚到某種不知名的東西消失又出現的感覺了XDD 

當然最後完成時也是前所未有的爽, 認真說花這麼多時間換這爽度也算蠻值得的(?)。


回歸正題, 想起這段記憶後, 就想到這個應該有不少online網站或工具可以幫人轉這種馬賽克相片圖吧, 找了一下果然找到了,  像是下面這個網站就可以幫人製作馬賽克相片:

http://www.easymoza.com/index.php

不過我想要的如果用線上工具就太麻煩了, 畢竟組成一張大相片的素材圖少則幾百張, 多則幾千幾萬張, 這種需求不可能免費給你使用, 所以當然就只能自己做了, 首先決定去github上找找看有沒有大神釋出好用的tool (畢竟影像處理我幾乎不懂啊, 要從零開始也太恐怖...)。

找了一下大致上有找到兩款看起來還算能用的:

1. https://github.com/codebox/mosaic
2. https://github.com/eflorit/mosaic-generator

比較了一下, mosaic是用python寫的, 而mosaic-generator則是用php, 雖然常理上我應該二話不說直接選python, 不過試用後發現問題很大, mosaic本身就是很單純的幫你用提供的素材去組圖, 並沒有做顏色協調處理, 所以要是素材圖的樣式太少, 生成圖的顏色就會整個失真掉, 就像下面這樣:

原圖

mosaic轉換後

因為自己影像處理幾乎沒底子, 所以決定直接試下一個mosaic-generator, 這個tool除了有改善顏色問題的參數可以調以外, 還有額外處理讓相鄰圖片不重複, 以效果來說十分的出色, 一樣的圖片跟素材圖, 轉換出來的效果如下:

上面這張圖是拚圖極細緻的情況生成的圖, 不過這樣雖然大圖好看, 不過每個小圖都只會是糊糊的顏色, 就沒有馬賽克相片的美了, 下面這張則是把小圖放大, 解析度調低的結果, 就很有馬賽克照片的感覺了。

上面測試的結果還不錯, 再來就要玩真的了, 把我之前蒐集的EVA畫冊跟遊戲CG作為素材, 再做一張EVA的馬賽克照片, 因為這次的素材非常大, 我又同時放大原圖跟小圖解析度, 這次轉換就不像上面那張2~3分鐘就好, 光是轉換就花了快一小時, 結果果然跟我想像的一樣好:

原圖

mosaic-generator轉換結果

這張輸出不僅僅是大圖精細, 連小圖都很清楚, 想看原圖可以看下面連結:

https://i.imgur.com/RVts2q6.jpg


再來就是開發計畫了, 不過與其說開發計畫不如說是改良計畫吧, 這個tool雖然本身很不錯, 不過個人覺得還有些東西可以做:

1. 使用環境要裝php + MySQL, 明明有先把素材圖轉成小圖存成檔案了, 為什麼還要使用DB去處理, 這也太搞工..., 感覺是為了省I/O跟記憶體的關係才這樣做..., 這塊打算來想想該怎麼優化, 認真看了下code會這樣做主要是要儲存各小檔的平均顏色訊息, 這樣之後組圖時才能找到最適用的小圖, 這邊打算換用SQLite或是直接在記憶體處理掉, 不然為了這tool要裝MySQL真的有點瞎...。

2. 基本上對php不是很熟, 改造完之後也想加上GUI做成跨平台的應用程式, 這邊打算整個用python改寫, GUI則是一樣用electron做。

3. 影像尺寸沒有參數化, input只支援jpg, 這邊就是跟著補完變更好用些, 然後看有沒有更多優化功能可以做。

4. 不僅僅是支援圖片素材, 我想讓tool也能直接處理多個影像檔, 直接給tool一整套動畫, 然後就能用這些動畫當素材做出想要的馬賽克照片, 

暫時想到的就是這些吧, 原本是想網站的素材用什麼好, 結果不知不覺就變成為了素材去做tool了, 人生真妙XD