Week 19: 期末專案開發夏令營暨成果發表

CAM Game Show 2011
　互動視訊遊戲開發 - 期末專案成果發表會

　地點: S5131

　每位同學成果展式: 報告 4 分鐘, 程式展示 4 分鐘。
　含: 書面報告及 Youtube 2分鐘影片。

　　1. 6/23 10:00 - 12:00

　　　　10:00 陳柏羽：上升的物體
　　　　10:10 楊景盛：快接啊!!!!!!!!!會爆炸!!!!
　　　　10:20 林東磊：打擊惡魔！
　　　　10:30 劉佳蓓：蟑螂與蜘蛛
　　　　10:40 李挺宇：打地鼠
　　　　10:50 謝慶勳：閃避碰碰球
　　　　11:00 張　懷：太空軍校生 Windows彈珠台！
　　　　11:10 張雅婷
　　　　11:20 李翼豪：KUTAR之發氣球與機智搶答
　　　　11:30 曹承凱：戳氣球遊戲
　　　　11:40 王郁棖：打地鼠
　　　　11:50 丁冠誌：大家一起收服口袋怪獸吧！

　　2. 6/23 13:30 - 16:30

　　　　13:30 黃泓清：虛擬鋼琴
　　　　13:40 沈信佑：打東東
　　　　13:50 施冠宇：攻防遊戲
　　　　14:00 王雨喬：顏色傻傻分不清楚
　　　　14:10 吳欣蓉：打不死的旦旦
　　　　14:20 鄒依潔
　　　　14:30 楊証皓：天下掉下來的大便與禮物
　　　　14:40 陳奕攸：捉烏龜
　　　　14:50 陳政男：越跑越快的球！
　　　　15:00 彭秋雯：打壁虎
　　　　15:10 劉柏成：蹦蹦兔
　　　　15:20 李挺安：沒有磚塊的打磚塊遊戲
　　　　15:30 郭鎮瑋：小畫家
　　　　15:40 顏信仁
　　　　15:50 許獻仁：正義 VS 邪惡
　　　　16:00 蔡坤廷：愛不釋手的蘋果
　　　　16:10 王柏翰：失控的擦玻璃！
　　　　16:20 游輝煒：Do Re Mi！

　　3. 6/24 10:00 - 12:00

　　　　10:00 張凱傑：戰鬥吧！忍者貓！
　　　　10:10 黃暐倫：打 Boss ！
　　　　10:20 陳星同：英雄與叛徒
　　　　10:30 林益亘：切西瓜！
　　　　10:40 簡維煜：吃飯，睡覺，打東東！
　　　　10:50 林盈睿：敲木頭
　　　　11:00 楊佳翰：植物大戰
　　　　11:10 廖平瑋：閃躲障礙物
　　　　11:20 鄭涵勻：戳烏龜！
　　　　11:30 諶德軒
　　　　11:40 阮昱貹：來玩遊戲吧！

　　4. 6/24 12:00 - 13:00　麥當勞超值午餐

　　開始點餐囉!

　　5. 6/24 13:00 - 13:30　票選活動

　　　　　a. 最佳遊戲大獎

　　　　　b. 創意獎

　　　　　c. 美工獎

　　　　　d. 音效獎

　　6. 6/24 13:30 - 14:00　課程心得分享與建議、改善

　　　a. 關於教材內容、範例程式：

　　　b. 關於作業、考試、指定閱讀：

　　　c. 關於『期末專案、視訊程式夏令營暨成果展』之進行方式：
　　　　
　

Week 17: 互動的兩個模式

1. AR mode:



W17-SP

2. interface mode:

MSDN: 以程式碼模擬滑鼠和鍵盤事件

a. 真人版洛克人大挑戰



專題初審文件

b. CAM Game Show 2009: 黃國維作品 - Virtual Joystick





膚色偵測 膚色範圍 (90 < Cb < 120、120 < Cr < 150)

相關論文: 猜拳機 (國立中山大學電機系 曹文潔 碩士論文)

c. CAM Game Show 2010: 呂誌軒作品 - 控制地球




3. 2011 互動視訊程式開發夏令營

地點: S5131
時間: 6/20 - 24 9:00 - 16:00

4. CAM Game Show 2011
互動視訊遊戲開發 - 期末專案成果發表會

地點: S5131

每位同學成果展式: 報告 4 分鐘, 程式展示 4 分鐘。
含: 書面報告及 Youtube 2分鐘影片。

a. 分成三個階段成果發表: (6/22下午抽籤決定報告時段)

1. 6/23 10:00 - 12:00
2. 6/23 13:30 - 16:30
3. 6/24 10:00 - 12:00

b. 6/24 成果展結束後, 麥當勞套餐。

Week 16: 背景影像的建立

1. 如何利用 callback function 建立背景影像?

首先, 我們先補充關於如何取背景圖的理論。

在攝影機不動的情況下拍攝靜物, 照理說, 連續兩個畫面(frame)應該是完全一樣的; 然而, 寫程式分析, 卻發現兩張畫面看起來一樣, 實際上卻有稍稍不同, 色彩值因為光線變化 (也許是因為光源閃爍, 或是空氣中的灰塵影響。), 讓不同畫面中, 相同位置的色彩值產生細微的不同。

假設在沒有雜訊的情況下,　我們所拍攝到的色彩值是 F(i,j)
第 k 個畫面的位置 (i,j) 上, 雜訊的函數為 Xk(i,j),

假設我們所擷取到的色彩值為 Fk(i,j),
因此,

Fk(i,j) = F(i,j) + Xk(i,j)

如果我們取連續 30 個畫面色彩值之總和,

F1(i,j) + F2(i,j) + ... + F30(i,j)
= [F(i,j) + X1(i,j)] + [F(i,j) + X2(i,j)] + ... + [F(i,j) + X30(i,j)]
= 30 F(i,j) + [ X1(i,j) + X2(i,j) + ... + X30(i,j) ]

如果雜訊的平均值是 0, 即

X1(i,j) + X2(i,j) + ... + X30(i,j) = 0　

再將上述式子除以 30 求平均, 那麼我們就可以得到 F(i,j)。

下列兩張圖中, 上圖是取像自單張影像, 下圖則是 30 張影像的平均影像。很明顯地, 上圖的雜訊較多, 下圖則是平滑多了!



2. 如何控制物件是否要出現在視訊擷取視窗之中

首先, 宣告一個布林變數 bool bObjectOnFrame; 來表示虛擬物件該不該出現在視訊擷取視窗中。接著, 在回呼函數中, 我們是否要去修改緩衝區記憶體中的視訊畫面資料, 完全取決於 bObjectOnFrame 的值是 true? 還是 false ? 因此, 在範例程式 W14-SP 中, 我們只要簡單地在修改緩衝區記憶體之前加入關於 bObjectOnFrame 的判斷式即可。另外, 我們新增一個按鈕, 來手動修改 bObjectOnFrame 的值, 讓虛擬物件消失, 或是重現。

範例程式 W16-SP

3. 所有作業的截止期限為 2011/06/06, 逾期不再接受補交! 請見諒 :)

Week 15: 期末專案發想

1. 期末專案發想: 請同學欣賞本課程歷年修課同學的作品。

　a) 2010 作品集

　b) 2009 作品集

　c) 2008 作品集

　d) 2007 作品集

　Homework Week 15:

　Part 1: 請同學從過去的作品中挑出一個你最喜歡的作品, 並且寫出你喜歡的主要原因。
　Part 2: 請同學開始發想期末專案, 並寫出你的初始構想。

　下課前沒有完成作業的同學, 本週記三節曠課！請見諒！
　
2. 其他相關資料:

　a) Sony PS EyeToy:

　　

　　
　
　　

　b) Apple's App.

　　
　

Week 14: 如何在視訊擷取視窗放入圖片?

1. 如何在 RGB video format 的視訊擷取視窗中加入圖片
　a. 宣告一個三維陣列, 用來預先儲存圖片的 RGB 色彩資料。
　　unsigned char ucSpottedGecko[125][155][3];
　b. 將圖片的 RGB 色彩資料讀入到三維陣列之中。
　c. 在 預覽回呼函數 中, 將圖片陣列資料放進到視訊擷取視窗的緩衝區記憶體中。

2. 如何在 YUY2 video format 的視訊擷取視窗中加入圖片


範例程式: W14-SP

3. 請同學思考下列問題:

　視訊擷取視窗中的影像物件, 如何修改範例程式,

　a. 讓視訊擷取視窗中的影像物件的背景去掉
　b. 讓影像物件在視訊視窗中移動
　c. 讓包含多張圖片的動畫檔 (GIF) 顯示在視訊擷取視窗中
　

Week 13: 視訊格式 Video Format

　　上個星期 (Week 12) 的課程內容介紹到如何存取視訊擷取視窗的緩衝區記憶體中的色彩資料, 但由於有一些同學的視訊裝置只提供 YUY2 的視訊格式, 因此執行範例程式 W12-SP 時, 就卡住了。為了解決這個問題, 這個星期, 我們就來討論: 什麼是視訊格式(Video Format)? YUY2 又是什麼?

1. 什麼是視訊格式(Video Format)?

　　所謂的視訊格式, 其實指的就是視訊裝置所拍攝到的畫面(frame), 傳送近電腦歡緩衝區記憶體的資料流(串流) 的格式。最簡單的格式就是如下圖所示的 RGB 24, 其所代表的意義就是每個像素分別各用 8 個 bits 傳送紅 R、綠 G、藍 B 的色彩值, 一共需要 24 位元, 圖素(像素, pixel)位元深度為 24。

　　下圖的畫面解析度設定為 320 * 240, 共有 76800 個像素, 每個像素需要 24 bits / 8 bites = 3 Bytes, 因此共需 76800 * 3 = 230400 Bytes 的緩衝區記憶體來儲存一個畫面的色彩資料。



　　既然傳送的畫面資料本身是色彩值, 就可以有不同的色彩表示方法 (色彩模型, 色彩空間) 來表示一個顏色。RGB 是一種色彩表示方法, YUV 色彩模型 則是另一種常見的選擇。

　　RGB 與 YUV 兩種色彩空間的轉換方法, 如下:

　　
　　

　在撰寫 RGB 與 YUV 兩種色彩空間的轉換程式時, 必須特別注意以下兩件事:

　a. 由於 U、V 色彩值可能為負數的情況, 為了儲存到 BYTE 的資料型態的記憶體中, 在儲存之前都會加上 128, 使之成為正數後再存放到記憶體中。

　b. 在電腦中 R、G、B 色彩值是用 BYTE 的正整數資料型態儲存, 適用可能範圍為 0 - 255, 然而, Y、U、V 經過轉換公式轉回 R、G、B 色彩值時, 卻有可能超出 0 - 255 之容許範圍, 所以, 存入前, 必須經過判斷後, 再放進記憶體, 以確保正確。

2. YUY2 視訊格式

　原本的 YUV 色彩空間每個像素依然需要 3 個位元組的記憶體空間來儲存色彩值, 為了更進一步節省傳輸及記憶體空間, YUY2 視訊格式便依照 "相鄰像素之色彩(UV)也會相近" 的特色, 讓 相鄰的兩個成對像素共用一組 U, V 色彩值, 所以視訊裝置傳送到緩衝區記憶體的色彩值便依序為

　　YUYVYUYVYUYVYUYVYUYVYUYV...

　因此, 在撰寫 YUY2 的視訊處理程式時, 便要特別注意, 每次必須同時處理兩個像素, 一共 4 個 bytes。

3. 使用整數資料形態運算完成 RGB 與 YUV 色彩模型之轉換:
　 MSDN: Converting Between YUV and RGB

4. www.FOURCC.org - for video codec and pixel format information.

　　

　FOURCC 關於 YUV 與 RGB 的解釋比 維基百科上的資料有用多了! 這邊的討論觸及了格式與視訊標準, 對於程式開發來說, 確實比較有幫助。
　

　
　
　範例程式: W13-SP

Week 12: 如何在視訊擷取視窗中添加物件?

1. Real Life Super Mario Bros
　
　
　
2. KOF98 真人版
　
　
　
3. 請同學思考上述影片的製作過程

4. 如果想要直接在視訊擷取視窗中直接加入下圖的物件, 該如何做?
　
　　

　

　

　抹香鯨和藍鯨不是加上去的, 攝影機拍的,是準備對戰的兩位主角喔!

　

6. 同學可以思考如何修改範例程式, 可以讓計時器開始倒數...

　
　

　　範例程式 : W12-SP

Week 11: 預覽回呼函數實作

1. 預覽回呼函數 preview callback function　

　　當視訊擷取驅動程式接收到來自視訊裝置的畫面(frame), 在 preview 模式之下, 將此畫面顯示所連結的視訊視窗之中。

　 我們可以透過 capSetCallbackOnFrame 這個函數來指定當發生 frame preview 之前, 先執行一個特定的 callback function, 即預覽回呼函數。這個預覽回呼函數的名稱可以由我們自由命名, 但是傳入的參數個數與其資料型態則必須符合 VFW 的規定。

// 使用者自行寫的預覽回呼函數必須在公用變數宣告區宣告
LRESULT CALLBACK FrameCallBack( HWND hwndCapture, PVIDEOHDR lpvhdr );

// 設定 callback function 與視訊擷取視窗之間的連結,
// 請將此行放到開啟視訊擷取視窗, 並開始 preview 的指令後

capSetCallbackOnFrame(hwndCapture, &FrameCallBack);

2. 實驗: 當程式開啟視訊擷取視窗後, 顯示預覽的畫面總數到 Label 上。

　實驗目的: 了解視訊擷取視窗之預覽回呼函數的設定與使用方法。

　範例程式: W11-SP


3. 如何關閉預覽回呼函數?

　capSetCallbackOnFrame(hwndVideo, NULL);


　　
　
4. 預覽回呼函數可以做些什麼?

　好處: 就是我們可以在畫面預覽之前, 先對畫面資料做預先處理, 例如: 加入文字、物件或特效等等。

　

　這段影片就是利用預覽回呼函數, 將龍珠放置到畫面之中, 再與攝影機所拍攝的手進行互動...　

　但, 問題是這些畫面資料到底怎麼存取呢?

5. 如何從記憶體直接擷取視訊畫面?

　透過 capSetCallbackOnFrame 這個函式設定: 當視訊擷取視窗(代碼為 hwndViedo) 取得一個 frame 後, 必須執行我們所定義的 callback function: FrameCallBack,

capSetCallbackOnFrame(hwndVideo, &FrameCallBack);

LRESULT CALLBACK FrameCallBack( HWND hwndCapture, PVIDEOHDR lpvhdr );

　在我們所自行定義的 FrameCallBack callback function 中, 有兩個輸入參數:

　a. HWND hwndVideo,

　　指明哪一個視訊擷取視窗, 即該視訊擷取視窗的 handle。

　b. PVIDEOHDR lpvhdr,

　　capSetCallbackOnFrame 這個函式會自動把視訊擷取視窗的相關資訊透過 PVIDEOHDR lpvhdr 這個結構變數, 讓 FrameCallBack callback function 來使用。

　　有關 PVIEDOHDR 這個結構的相關資訊, 可以在 vfw.h 中, 找到如下的結構定義:

/* video data block header */
typedef struct videohdr_tag {
LPBYTE lpData;　　　　　　/* pointer to locked data buffer */
DWORD dwBufferLength; 　　/* Length of data buffer */
DWORD dwBytesUsed; 　　/* Bytes actually used */
DWORD dwTimeCaptured; 　/* Milliseconds from start of stream */
DWORD_PTR dwUser; 　　/* for client's use */
DWORD dwFlags; 　　　　　/* assorted flags (see defines) */
DWORD_PTR dwReserved[4]; 　　/* reserved for driver */
} VIDEOHDR, NEAR *PVIDEOHDR, FAR * LPVIDEOHDR;

　　透過 結構 videohdr_tag 的宣告, 我們獲知擷取視窗的 data buffer 的指標可以用 lpData 這個變數來取得, 即

　　CaptureData = LPVIDEOHDR(lpvhdr);
　　ptrCapture = CaptureData->lpData;

　　// 全域變數宣告
　　LPVIDEOHDR CaptureData;
　　BYTE *ptrCapture, *ptrImage;

　　說明:
　　a. CaptureData 是全域結構變數, 其資料型態亦為 PVIDEOHDR。
　　b. *ptrCapture 與 *ptrImage 是兩個指向記憶體位址的全域指標變數。

6. 實驗: 將視訊擷取視窗的內容即時顯示於影像物件之中。

　　實驗目的: 了解視訊擷取視窗資料緩衝區的記憶體存取方法。
　
　　本實驗說穿了就是把某一塊記憶體(視訊擷取視窗資料緩衝區/data buffer) 複製到另一塊記憶體(影像物件存放色彩資料的記憶體) 之中。因此, 我們只要弄清楚兩個記憶體的起始位址, 自然可以輕鬆完成實驗。

　　透過 videohdr_tag 結構中的 lpData, 我們可以得到視訊擷取視窗的資料暫時存放區的起始位址。

　　CaptureData = LPVIDEOHDR(lpvhdr);
　　ptrCapture = CaptureData->lpData;

　　透過 TBitmap::ScanLine 這個 property 我們可以得到影像元件中, 每一列(row) 的影像資料存放的記憶體起始位置。

　　ptrImage = (BYTE *)Form1->imCW->Picture->Bitmap->ScanLine[i];

　　
　

Week 10: 如何消除雜訊的干擾?

　

1. Difference 黑白影像中所有的白點都是實質上所出現的物件嗎?
　　a. 如果不是, 哪些是雜訊呢?
　　b. 如何消除雜訊的干擾?

延續 Week 7 的討論, 我們想要忽略小白雜訊點的干擾, 只對進入畫面的大型物件互動, 最簡單的方式就是降低畫面的解析度, 那這些小雜訊點就會 "看不到" 了。

將視訊監控畫面以 8*8 大小的區塊為單位, 當區塊中的白點總數超過一半 (>31) 時, 整個區塊都輸出成白色區塊, 如下圖。

　　

從 另外一種角度思考, 其實就是把整個畫面縮小成 40*30 的大小來監控, 這樣那些小雜訊就縮小到完全沒有影響了, 如下圖。

　　　

範例程式: W10-SP

2. 什麼是 Callback Function ?

　2.1 函數的呼叫 (call) 與 結束 (return)

　在程式的執行過程中, 當主程式呼叫一個函數 (call function) 時, 程式會跳到函數繼續執行, 當遇到 return 指令時, 就會返回主程式的呼叫點繼續執行。

　2.2 Callback Function = Call + Back + Function

　當我們執行某個應用程式時, 針對 Form 上各個物件所發生的事件, 嚴格來說可以分成兩類:

　a. 由使用者觸發, 如使用者透過滑鼠或鍵盤所觸發的事件。

　　這類事件, 在 object-oriented 程式語言中, 是用 event-driven 的設計, 使用者針對個別物件, 撰寫不同事件處理程序來因應。

　b. 非由使用者觸發, 乃系統自行發生的事件。

　　如程式發生錯誤情況, 或系統做了特定事件, 如從視訊裝置擷取一個畫面。此類事件, 使用者就可以設定 callback function 來因應這些事件的發生。

3. 預覽回呼函數 preview callback function　

　　當視訊擷取驅動程式接收到來自視訊裝置的畫面(frame), 在 preview 模式之下, 將此畫面顯示所連結的視訊視窗之中。

　我們可以透過 capSetCallbackOnFrame 這個函數來指定當發生 frame preview 之前, 先執行一個特定的 callback function, 即預覽回呼函數。這個預覽回呼函數的名稱可以由我們自由命名, 但是傳入的參數個數與其資料型態則必須符合 VFW 的規定。

Week 9: 期中考

　題目:



　成績公布:

　　全班平均達 60.1 分, 剛好及格。
　　最高 96 分, 次高 88 分, 第三 84 分。



　成績分布統計圖:



　各題平均分數統計圖:



　問答題第一題之範本解答


　

Week 7: Image Processing (2)

　

　上個星期 (Week 6) 我們完成了上圖的程式講解與實作練習, 本週我們要繼續思考的問題是:

1. Difference 彩色影像要如何轉換成 Difference 黑白影像?
2. Difference 黑白影像中所有的白點都是實質上所出現的物件嗎?
　　a. 如果不是, 哪些是雜訊呢?
　　b. 如何消除雜訊的干擾?

1. imDifference 彩色影像要如何轉換成 imDifference 黑白影像?

　imDifference 彩色影像每個像素(pixel)中, 包含了紅、綠、藍 (R, G, B) 三個色彩值, 其來源是兩張影像的色彩值相減取絕對值的結果, 如果我們用 (r1, g1, b1) 代表第 1 張影像的色彩值, 用 (r2, g2, b2) 代表第 2 張影像的色彩值, 就可以將 (R, G, B) 表示成下列式子:

　(R, G, B) = ( |r1-r2|, |g1-g2|, |b1-b2| )

　如果想要把 imDifference 彩色影像(color image)轉成黑白影像(binary image), 首先要把三維色彩向量 (R, G, B) 轉換成一維的強度值(intensity), 最後在判斷是否超過我們事先設定(predefined) 的一個臨界值 iThreshold, 如果超過, 就設定成白點(255, 255, 255), 否則就設定為黑點(0, 0, 0)。

　將三維色彩向量轉換成一維的強度值的方法有很多種, 最簡單的方式就是直接求向量的長度, 換句話說, 就是將三個色彩值取平方和再開根號。另一種方式則是將其換算成灰階影像(grayscale image) 的明亮度(Luminance), 其轉換公式為

　Luminance = 0.299 * Red + 0.587 * Green + 0.114 * Blue

　

2. Difference 黑白影像中所有的白點都是實質上所出現的物件嗎?
　　a. 如果不是, 哪些是雜訊呢?
　　b. 如何消除雜訊的干擾?


　範例程式: W07-SP
　

Week 6: Image Processing (1)

1. Windows 的 圖形裝置介面 (GDI: Graphics Device Interface)

2. TCanvas::CopyRect method

3. 開啟與儲存 BMP 影像

4. TCanvas::Pixels

5. TBitmap::ScanLine



範例程式: W06-SP

Week 6 作業: 請完成範例程式所示範之所有程式, 並將執行結果上傳到作業部落格中。
　

Week 5: WebCam Programming (3)

1. 取得視訊裝置驅動程式的效能 ( capDriverGetCaps )

2. 開啟各種視訊對話視窗

　

　　a. capDlgVideoSource(hwndVideo)

　　

　　b. capDlgVideoFormat(hwndVideo)

　　

　　c. capDlgVideoDisplay(hwndVideo)

　　d. capDlgVideoCompression(hwndVideo)

　　

3. 靜態影像擷取
　 視訊畫面靜止: capGrabFrame
　 視訊畫面不靜止: capGrabFrameNoStop


　本週範例程式: W05-SP
　

Week 4: WebCam Programming (2)

1. 如何建立一個視訊擷取視窗( capCreateCaptureWindow )

註: 視窗程式設計(Programming Windows)之基本觀念:
a. 在 Windows (作業系統) 中, 『視窗』的含義非常明確, 就是指螢幕上的一個矩形區域, 用來接受使用者輸入資料或是以文字或圖形的形式顯示輸出內容。
b. Window Styles : 同學可以試試加上 WS_CAPTION 到範例程式中。

2. 連接視訊擷取視窗與視訊裝置 ( capDriverConnect )

3. 設定顯示模式 ( capPreview )

4. 取得視訊裝置驅動程式的效能 ( capDriverGetCaps )

範例程式: W04-SP

作業: 將 Week 3 與 Week 4 兩週所教的內容寫成一應用程式, 並將執行畫面貼到作業分享部落格中，並寫下至少 140 字的心得與感想。

作業繳交一覽表

註: 匈牙利命名法

　

Week 3: WebCam Programming (1)

1. Viedo For Window (vfw.h)
　a. 請同學思考什麼是標頭檔 .h
　b. #include <vfw.h> // 這行指令是什麼意思?
　c. 延伸閱讀 C 語言之前置處理

2. 取得視訊裝置驅動程式的名稱與版本 (capGetDriverDescription)
　

範例程式: W03-SP

* 誠心建議寫程式也要做筆記。
　

Week 2: 課程說明

1. 課程評分原則:
　a. 指定閱讀 1,500 字心得報告 15%
　b. 期中考 20%
　c. 期末專案: 含展示影片, 報告與上台發表 50%
　d. 其他 15%

2. 指定閱讀書籍: 第 56 號教室的奇蹟 (報告繳交期限 3/13, 2011)

　

3. C++ Builder 官方下載點

4. 作業: 到 sky.com 玩一個 WebCam Game, 然後發表140字的心得到 作業分享部落格 中。