星期四, 10月 26, 2006

Week 6: 課程紀實 (2006/10/26): TCanvas::CopyRect

今天的課程是延續上週 8-puzzle 控制介面實作 的題目, 同學回家思考後, 在課堂上白板寫下的問題集中在程式開發的前半段。




因此, 今天的課程重點在於:
1. 如何將影像內容複製到另外其他影像之中。
2. 如何讓一個影像物件移動。

我在課堂上當場寫了以下這個示範程式, 左圖是一張 300*300 大小的 bmp 影像, 當我們用滑鼠在影像上啟動 MouseDown 的事件時, 我們利用 OnMouseDown 事件處理程序中的 ( X, Y ) 座標定義出一個 TRect 物件 - Rect(X, Y, X+100, Y+100), 然後在使用 TCanvas::CopyRect 這個 method 從大張影像中複製 Rect(X, Y, X+100, Y+100) 這個範圍到小張影像的 Canvas 中。



程式包含宣告的部份, 僅僅只有短短的四行, 如下:

TRect TileRect, OIRect; //宣告兩個 rectangle 物件

TileRect = Rect(0,0,100,100);
//必須貼滿小張影像, 所以範圍從 (0, 0) 到 (100, 100)

OIRect = Rect(X,Y,X+100,Y+100);
//大張影像滑鼠點擊在 (X, Y) 上

Image2->Canvas->CopyRect(TileRect, Image1->Canvas, OIRect);
// 利用 TCanvas::CopyRect method 來處理複製的動作

為了讓同學明白什麼是 method? 我們決定用另外一種直接對 TCanvas::Pixel property 直接做處理, 希望同學可以體會出其實 method 就是針對該物件常會用到的程式, 用 method 這個名詞包裝起來而以。

for (i=0;i<100;i++)
 for (j=0;j<100;j++)
  Image2->Canvas->Pixels[i][j]=Image1->Canvas->Pixels[i+X][j+Y];

上面這段程式, 是一樣可以做到同樣的複製效果的!!

至於如何讓影像物件移動, 其實只要去改變影像的 Top 與 Left 兩個屬性值即可。

Image2->Top = Image2->Top + 100;
//影像往下移動 100 點

Image2->Left = Image2->Left + 100;
//影像往右移動 100 點
 

本週程式的實作過程, 我們發現同學們對於影像的開啟後, 顯示於螢幕的大小與影像本身的大小之間的關係是模糊的, 因此, 本週我們希望同學回去研究影像元件的 AutoSize 與 Stretch 兩個屬性的關係。同學可以嘗試在 form 上放置四個大小為 200*200 的影像元件, 設定成不同組合的 AutoSize 與 Stretch。程式執行時, 開啟一張100*100 大小的影像, 比較看看有什麼不同的執行結果。另外, 再針對一張 300*300 的影像實驗, 分析兩次實驗結果有什麼不同 ?
 

星期四, 10月 19, 2006

Week 5: 課程紀實 (2006/10/19): Study Sharing

一早在往學校的車上, 和黃老師討論著今天課程的主題, 我們發現雖然大部分同學寫出了部分塗鴉板的功能, 不過程式細部的觀念仍然有待釐清, 我們考量到這門課是未來多媒體學程相關課程的基礎, 因此, 我們當下決定今天課程除了 思考 8-puzzle 的作法 之外, 程式練習的部份, 不要有新的進度, 讓同學停下腳步, 好好回顧一下自己寫的每一行程式, 是不是都能完全掌握, 也趁著這個機會, 讓同學彼此分享程式開發的甘苦與學習所得。



首先, 黃老師請同學先互相討論 8-puzzle 程式的演算法, 然後請 小溫 上台分享牠的想法 ( 左圖 )。接著, 在圖片分割的部份, 家甫 指出可以使用 TCanvas::CopyRect method 從一張圖片複製到另外一張圖片。

在塗鴉板的程式開發上, 哲宇的程式 寫的很不錯, 我們也請他上台分享程式開發的歷程與心得, 我們也藉由哲宇的程式來請同學思考哪些指令應該放在哪一個事件處理程序中才合理。接著, 由 博欽 分享如何讓塗鴉時, 螢幕不致發生閃爍的情況, 關鍵就在 TWinControl::DoubleBuffered 這個屬性必須設定為 true。

除此, 同學也比較了用 TCanvas::Pixels 這個屬性 (property) 來劃一個點的方法, 與用 Tcanvas::LineTo 這個 method 來劃一條線兩者之間在塗鴉板程式之間的差異性。這邊還有一個題目可以請同學去思考, 就是 BCB 的 method 到底是什麼? 用 method 來處理與直接對 property 處理有什麼差別 ?




今天的課程, 我和黃老師都感受到雖然表面上許多同學都可以寫出塗鴉功能來, 其實程式的細節還是有許多空間可以去仔細思考與討論的!!
 

星期一, 10月 16, 2006

Week 5: 課程實作預告: 8-puzzle 的遊戲介面實作

數位媒體概論 Week 5 的程式課程實作題目為: 8-Puzzle 的遊戲介面實作。同學可以參考 iafrica.com 網站中的 slider puzzle game 當作範例。已經完成上週程式的同學, 可以預先思考本週的題目, 把遭遇的問題先準備好, 一進教室就可以先寫在白板上。

8-Puzzle 是資訊相關科系的資料結構討論到 Search 主題, 或是在人工智慧課程討論到 Heuristic Search 主題, 必定會使用的範例。同學們在我們的課程中, 利用滑鼠觸發事件處理程式, 就可以把控制介面完成。將來, 有興趣還可以替你的程式加入 "人工智慧", 讓你的程式可以自己完成 puzzle ! 對一個資工大二的學生, 應該很酷, 也很了不起的 ! 同學, 衝吧! 加油!

星期四, 10月 12, 2006

Week 4: 課程紀實 (2006/10/12): TCanvas & TColor



今天的數位媒體課程一開始, 黃老師同樣延續上星期的題目, 出了一題程式給同學思考: 如何在影像上塗鴉。

第二堂課, 我開始講解要完成這個題目, 需要具備什麼基本概念, 引導同學去探究 TImage::Canvas 這個 property 有什麼好玩的地方。我們從音樂創作與繪圖創作本質的異同開始談起, 希望同學了解一張影像 ( image ) 或者一張畫布 ( canvas ) 的最基本組成元素就是一個像素或畫素 ( pixel )。在一張乾乾淨淨的畫布上, 塗上各式各樣的顏色, 就變成一張影像了。




接著, 我們說明如何透過 TCanvas::Pixels 這個 property 來讀取或寫入像素的色彩值。BCB 提供了 TColor type 這個列舉資料型態 ( enum ), 而所有常用的色彩值, BCB 也都事先定義了相對應的以cl 為開頭的常數 ( const ) 提供程式設計師方便使用, 例如: clBlack = 0x00000000; clRed = 0x000000FF; clGreen = 0x0000FF00; clBlue = 0x00FF0000。除此, BCB 還提供了一個方便的 RGB macro, 讓使用者可以將我們熟悉的 R, G, B 色彩值轉換成所對映的數字。

本週同學的回家作業是: 弄清楚什麼是 AnsiString...

星期六, 10月 07, 2006

News: 傳 Google 欲以 16 億美元併購 YouTube

(法新社舊金山六日電)
http://news.yam.com/afp/computer/200610/20061007414923.html

華爾街日報今天報導,有消息來源傳出,搜尋引擎巨擘 Google 計畫以十六億美元,併購全球知名線上影音網站 YouTube。但是,Google 與 YouTube 兩家公司皆不願對此傳言發表評論。



YouTube 於二零零五年由華裔陳士駿及賀利共同在矽谷創立,目前員工僅有二十多人。因為其上載影音內容的豐富性與知名度,已佔有百分之四十三以上的線上影音分享內容 市場,平均每天有超過一億個錄影內容被瀏覽、每個月約有兩千萬瀏覽人次。其中也包括許多使用者上載的中文影音內容。

於此同時,根據研究統計機構資料,類似 YouTube 影音內容分享的 Google 影音頻道,今年八月份約有一千三百萬瀏覽人次,而在同一月份,YouTube 則有超過三千四百萬瀏覽人次。

業界對 Google 併購 YouTube 的傳言議論紛紛。去年,新聞集團才以五億八千萬美元總額併購社交網絡網站 MySpace,造成業界轟動。不過, YouTube 執行長賀利先前曾在演講場合中表示,公司不以被併購為目標,並在未來有公開上市的可能性。然而,紐約郵報曾於上月報導,有資料來源顯示, YouTube 不會以少於十五億美元的價格被併購。

有分析人士認為,YouTube 在全球的知名度,並不亞於 Google,想要併購 YouTube 的買家,其實也不只 Google 一家公司,其他的大型網路搜尋引擎或消費科技公司都有可能購買意願。不過,不僅併購價錢是因素之一,有關 YouTube 的著作權爭論、如何增加廣告收入等,都將是考量因素。

由於使用者上載內容,YouTube 一直有著作權方面處理的問題。不久前,YouTube 才與 NBC 及華納音樂簽訂合約,同意合作授權,以協助降低在這方面的爭論,也帶來相當收入,並開拓更清晰的商業模式。
 

星期四, 10月 05, 2006

Week 3: 課程紀實 (2006/10/05)


今天的數位媒體概論的第一堂課, 黃老師請同學思考的問題是: 利用滑鼠指到影像中的特定像素, 並將此像素的位置與色彩值顯示出來? 同學們遭遇問題時, 同樣可以寫到白板上分享, 討論。今天同學寫的問題如下:
1. Book 6-3 Form1 視窗怎麼跑出來的? OK
2. 顯示 x, y 軸的程式是要寫在 Form 裡, 還是 Image 裡? (因為滑鼠要點兩下) OK
3. 試著打了範例程式 6-4 那個顯示位置的函數, 不知道如何讓它成為 TForm1 的一員。 OK
4. 怎麼把 Label 跟 Edit 跟 Text 結合 ? OK
5. 程式一樣打上去卻無法執行! OK
6. 如何讓要放到 Image 裡的圖片符合影像框框的大小? OK
7. 要如何將 Labeled Edit 上方的 LabeledEdit1 去除? OK
8. 存檔時該存 Form 還是元件呢? 該如何重新開啟呢 ?
9. 程式碼是要另外寫, 不能塞進去嗎? 不能改函數名稱嗎? OK

根據同學提出來的問題, 我們發現有些問題是由於同學對於物件導向程式設計 ( object-oriented programming ) 的架構不熟所導致, 因此我們今天特地講解了什麼是物件(object), 屬性(property), 事件(event), 與方法(method)。並用 BCB 中的 Object Inspector 作示範, 用實例來講解這些名詞之間的關係。果然許多同學所提出的問題就迎刃而解了。

第三堂課, 我們開始討論 podcasting , 博欽卉妤 都上台與大家分享! 之後, 我們從早期用收音機的收聽廣播, 到後來也可以用網路收聽廣播, 到最近的podcasting 訂閱的方式收聽, 討論各個時期的限制與技術演進, 讓同學了解其實這些演進都是由於使用者的需求, 配合科技的進步所共同促成的。

本週我們請同學回去查的題目是: BCB 的專案儲存後, 會產生哪些不同的檔案, 分別扮演什麼功能!