2011台北世界設計大展

 

這次的設計大展廣告打很兇，台北市街上到處都是旗幟，捷運廣告箱也很多，讓此行還沒見到廬山真面目的我相當期待，雖然在路上花了很多時間才找到世貿一館。

我們走進展場內後，還摸不著頭緒，因此就挑最近的一個展覽區域觀看，第一個看見的是有關於建築方面的室內設計，這張照片展示的是室內擺設如何影響到冷熱空氣的對流與該設計如何將熱空氣導引出去，將冷空氣吸進來達到通風的效果，這個設計是在牆面後方保留一個小夾層空間讓熱空氣導引出去，是個很創新有趣的想法。我看懂之後向與我同行的唐儷純討論一番。

這張原本看不太懂，以為為何要在光源處挖這麼大一個洞？

而且角落部分還是很陰暗，似乎沒有達到很好的效果？

原來這個設計是想利用水的折射將光線引導進室內

這張圖片做了說明，我後來才發現底下原來有說明。

這張圖利用的折射更加明顯，半個房間都很亮了！

如此一來小小空間不必裝燈泡也能夠很亮！

這個概念不禁讓我想到我在網路上曾經看過這個設計的實際應用，在困苦人家當中，只要鑽一個小洞，不會造成漏水，就可以引進＂大量＂的光線進入室內。實在是非常偉大的設計概念。

下一個展場

一台很具設計感又復古的重型機車

一個很具環保與愛護動物觀念的公園椅子，可以放在公共空間，

一方面提供人們休息，後方的洞孔也可以提供小動物們休息

這個音板會隨個聲音跳動，有點像是骨牌效應，

但是沒有看到關於這塊板子的說明。

藝術與科技的結合，就是最新的體感遊戲。

但是怎麼將之結合，還需要合適的主題。

看到左上角的龜餮，我第一時間就想到台南赤崁樓最有名的象徵

果不其然，這個設計是台南的學校設計的

九種用具代表龍的九個兒子

IPAD上的識別卡軟體，可以提供瘖啞人士或是小朋友使用

也可以建立自己的圖卡，上圖我們就新增一個圖卡，還可以錄音。

最後我們找到一個外國學校，上面有提供一些葉子，我們可以把葉子摘下來帶走作紀念，但是上面也提供一些環保概念的資訊要提醒我們保護環境。

離開前與台北101合影。

此行的感想就是，隨著科技的進步，設計的腳步也隨著科技跟進，其中裡面有一張會動的海報，是在倒數你烤一個麵包的期間，就有多少孩子因為飢餓死亡，這非常令人震撼，尤其在麵包跳起的那一瞬間，我正在看展覽，但卻已經發生這麼多悲慘的事情，這真是一個很厲害的創舉！也是我印象最深刻的一個。

工科最令人詬病的地方就是，作品往往缺乏設計感，於是我在這點努力學習，讓自己的作品更有Sense，其中直覺性也是很重要的一環，人家覺得你的作品不漂亮，不直覺，不容易上手操作，第一印象就是對你的作品打折扣，或認為不夠專業。因此我在寫程式時現在都很注意直覺化，很努力地朝簡單易懂操作的方向前進，不管我後台必須為這個看似直覺的功能付出多大的代價，但是我寧缺勿濫，也因此我這次的作業在美觀上下了非常大的功夫，很多功能都不是我本來就會的，包括程式的icon我都特地去挑過，為的就是希望即使功能陽春，即使只是個作業，我也希望能把它做好，做美。

【作業程式的icon】

【力求美觀的程式介面】

不只是設計展，這門課讓我對於美學，程式功力都提升了一級。

HW2

這次的作業對我來說是個很大的挑戰 

所以拖這麼久才交。

作業內容總共需要四個，分別是模糊化，銳利化，撒鹽以及中值濾波器

對於.NET在處理這四個部分時，最主要的程式碼就在於

類似BCB的ScanLine，在.NET裡，則是這段程式碼

BitmapData bdata = btarget.LockBits(new Rectangle(0, 0, btarget.Width, btarget.Height), ImageLockMode.ReadWrite, PixelFormat.Format24bppRgb);/*鎖住存放圖片的記憶體*/

            int TotalByteWidth = btarget.Width;/*計算每行的像點所佔據的byte 總數*/

            unsafe/*直接利用指標, 更改圖檔的內容*/

            {

                byte* ptrLine = (byte*)bdata.Scan0;/*像素資料的起始位址*/

                for (int y = 0; y < btarget.Height; y++)

                    for (int x = 0; x < TotalByteWidth; x++)

                    {

　　　　　　　//要處理的部分

                    }

                ptrLine += bdata.Stride - TotalByteWidth; // 跳過剩下的 Padding bytes

            }

            btarget.UnlockBits(bdata);

            ptarget.Refresh();

而在模糊化，銳利化與中值濾波器這三個功能最相似的地方就在於要做矩陣存放圖素，要三條才能重新計算該點的值，模糊化與銳利化是相對的，權重的分配很重要。

【首先讀取一張圖像】

【這是銳利化，效果不明顯請點大圖查看】

【這是模糊化，效果不明顯請點大圖查看】

接下來就是撒鹽與中值濾波器

【灑很多的鹽】

【鹽撒太多導致濾波時很多雜點去不掉】

原本很早就做得差不多了，但是因為結果尚不滿意還在調整中一直還沒交

但是作業繳交期限快到了，還是把結果呈現出來。

這個作業主要目的是Edge Detection，尤其對於影像處理在處理人臉的部份時

銳利化與濾波器變得很重要，而我從GetPixel改為直接修改記憶體位置，

也是一個很有趣的體驗，因為一不小心，就可能導致記憶體損毀當掉了。

HW3

第三次的作業看了同學們的範例大概知道要怎麼寫，但是由於我主程式的程式碼實在有點亂，所以我就另闢一個新天地來存放這次的作業，而不透過主程式。

一、首先點開主程式後打開回家作業裡的"Color Model"

二、點開之後可以看到已經有三塊色塊，這是在上課時寫的，
左上角的色塊為紅藍漸層，右上為藍綠漸層，右下為紅綠漸層，
左下角有兩個Bar，上可以調整三個色塊的缺少色，下則是將色塊轉為HSI Model

三-1、我們先調整RGB Bar 可以看到缺少色增加後的效果
將游標移進色塊中就可以得知每個點的RGB值，下圖為游標在右上色塊某個點上，
我們可以明確得知這個點RGB值的R值為0，也就是缺少紅色。

【游標在右上色塊某個點上，RGB值的R值為0】

加上缺少色就是左上加上綠色，右上加上紅色，右下加上藍色
以下為加上後的結果，以128及255為例。

 

【RGB Bar Value=128】 

【RGB Bar Value=255】

我們可以看到RGB Bar在調整後，色塊間銜接的縫隙就出現了，不像Value=0時這麼漂亮，這是因為色塊間怎麼去去呈現增加後的值我調整很久還是調整不好，但結果是正確的就好。

【游標在右下角某點時，缺少色藍色值=RGB Bar Value=255】

三-2、接下來輪到HSI Bar 轉換公式如同老師上課及wiki上所言，這裡不贅述。
HSI Bar 調整的是I值。

 【HSI Bar Value=63 AND RGB Bar Value=0】

 【HSI Bar Value=255 AND RGB Bar Value=255】

四、接下來就是要指定一張圖片並將顏色重新給定
我們先載入一張圖片，載入時並將之轉換為灰階。

接下來只要在左邊色塊任意點選一點，即可將顏色重新給定。

以上就是這次作業的成果。
其實這個作業沒有遇到太大的困難，有一部份在上課就已經寫好了，
轉HSI公式部分其實網路資料相當豐富，將維基百科裡的公式套用進程式就可以了，
其他同學可以把色彩模型轉為漂亮的圓形，但是我倒是沒想過要做(光想到要畫圓就頭痛)。

有些同學反應在最後調整圖形色彩時濃度越來越深變黑的問題，我一開始也有遇到，
但是後來將調整的BITMAP NEW一個執行個體再去調整就不會影響到原本的BITMAP了。
不過這個解法是.NET的解法，BCB如何解決就請其他同學參考其他人的解法囉 : )。

HW1

這次選修老師的影像處理課程，雖然老師是使用BCB進行教學，但是因為我對於C#比較熟練，因此作業的形式我都以C#來製作。

目前程式的外觀

【基本視窗】

第一次使用MDI的模式來撰寫程式，以父容器的方式來包覆子程式的呈現方式以前沒有做過，因此這次這樣製作感覺非常新鮮，也稍微做了一些美化，看起來比較專業一些。

【開啟圖片】

程式一次可以載入多張圖片，這是很直覺也很基礎的功能，但要考慮到當執行指令時，到底是要對哪個子視窗執行命令，則必須做個紀錄的動作，不然程式不知道你到底要對哪個視窗下指令。因此我寫了一個全域變數來存放目前正在執行的視窗。

功能介紹
目前一共寫了以下幾種功能可以使用：
1.開檔
2.存檔
3.負片(指標)
4.負片(非指標)
5.灰階(指標)
6.咖瑪值設定
7.直方圖
8.直方圖均化

負片：

【負片後(左圖)】

指標版：使用指標直接對記憶體進行修改，速度飛快，執行時間0.01秒(這個方法類似於老師BCB所使用的方法)。
非指標版：使用Bitmap的GetPixel(x,y)以及SetPixel(x,y,Color)來進行顏色的存取，速度極慢，執行時間1.3秒。

灰階：

【灰階後(右圖)】

將彩色的圖片轉為灰階，使用指標直接將RGB顏色相加後除3再將所得值放回記憶體中即完成。記得將RGB三種顏色都要設為所得值。

咖瑪：

【咖瑪預覽視窗】

當設定值大於1~20間時，圖片會變暗，中間的調整棒可以左右移動來比較。值得注意的地方是當使用者初次輸入1.2時，右邊的預覽圖即呈現1.2的結果。但是若是此時使用者再輸入1.3時，圖片應該以最原始的原圖來設定咖瑪而不是目前預覽的這張，所以不能直接對預覽圖片進行修改。

【左右調整預覽框來進行比較】

若是設定值介於0.001~1之間，會變得比較亮。

【調整咖瑪值後】

按下確定鈕後才對子視窗內的圖片進行修改

復原：

【復原結果】

任何動作執行不滿意時都可以透過復原來回復盛上一個畫面，圖示為將調整後的咖瑪復原後還原成執行調整咖瑪前的圖。

作業重點：直方圖

【直方圖呈現】

就呈現圖片的直方圖。利用DrawLine繪圖的方式來製作，需要注意的是比例縮放的問題，為了避免直方圖超出繪製框或是縮得太小，必須先計算最長的那根，把它當作頂，其他的就按照比例縮小，就不會超出框框了。

作業重點2：直方圖均化

【均化前】

【均化後(網頁為老師往置放的結果，一樣)】

直方圖均化的部分因為老師上這堂課的時候我有事情回家一趟缺席因此沒有聽到，再下一堂課聽老師再講解一次還是聽不太懂。網路上關於直方圖均化的介紹及資料也不多，因此這部分其實我一直沒有搞懂，程式碼參考網路別人的演算法，程式碼不長，我想若有時間我會再仔細研究深入了解。

以下附上部分程式碼畫面：