多媒體與VR

課程總覽


學校日簡報

學校日簡報五年級上學期

單元一:攝影與暗房技術

一、數位相機(Digital Camera),是一種利用電子感測器光學影像轉換成電子數據的照相機,有別於傳統照相機通過光線引起底片上的化學變化來記錄圖像。數位相機的成像原理,如下圖:

傳統相機

數位相機

二、相機正確的拿法:

三、拍攝步驟:

(自動數位相機會自動控制光圈、快門,不需要人工操作)
進階學習補充資料:老羊攝影

小試一下: 相機模擬器

作業   請試拍兩張照片,上傳Google Classroom

第一張:背景和風車都模糊,但是主角清楚。

第二張:背景和風車都清晰。

四、課前預備:
想要在家裡複習上課所學,請自行在家先安裝 「 gimp 」這套免費又安全的繪圖軟體,建立學習環境,可以自已嚐試安裝軟體看看,老師將怎麼樣安裝的方式錄成影片,自己依照影片操作步驟在家裡安裝看看,完成的話可以在家裡練習:

開機有看到這個符號的電腦是windows作業系統的電腦

有蘋果符號的電腦是Mac作業系統的電腦
(上面也可以特別另外安裝 Windows作業系統)

五、數位暗房技術是指透過電腦影像處理軟體對相片進行編輯和調整,常用的功能包含:

剪裁照片

在照片上拖曳出要剪裁的範圍,然後在框框中間點一下。

調整曝光

亮度:調整相片的明暗度。可用於調整曝光。

對比:提高或降低相片上明暗的差異度。

2. 調整局部曝光:「顏色」→「色階」

色階統計圖:將相片的的所有色點依照明暗度統計出數量所繪製的長條圖。右邊是亮部,左邊是暗部。

色階統計圖下方有三個三角形的按鈕,可用於調整局部曝光。

亮度的按鈕往左移,可以將亮部調暗。暗部的按鈕往右移,可以將暗部調亮。中間的按鈕可以調整中間色(人臉屬於中間色調)

色偏校正與運用

色相:旋轉色環後,套用到相片上,會將所有的顏色轉換成新的顏色。可用於色偏校正。

亮度:調整相片的明暗度。可用於調整曝光。

飽和度(彩度):彩度為 -100 時,會變成灰階相片,彩度為 100 時會變成霓虹色。

運用範例:將色相調整為微黃,飽和度調整為 -60 左右,照片會變成老照片。

對焦

「濾鏡」→「加強品質」→「銳利化」

加強相片品質

「濾鏡」→「加強品質」→「去除紅眼」「去除斑點」

自動調整工具

匯出圖片

從檔案選單選取「Export As...」,輸入檔名:「班級座號.jpg」,然後按兩次「匯出」按鈕。

單元二:借位攝影之影像合成

借位攝影

利用遠近距離造成的懸殊比例進行構圖,而產生的趣味相片。例如:

本單元我們經透過影像合成技術,來創作借位攝影作品。每一組需要決定背景圖一張,並討論每個人在照片上的位置以及姿勢。

下載背景圖時請注意版權問題:

共同討論:

影像合成注意事項

影像去背的方法

有許多影像處理軟體、攝影軟體(包含:平板電腦上的 App)提供去背功能,在電腦上常用的去背工具則包含:

使用線上去背工具

使用預覽程式去背

使用 Gimp 去背

並不是所有的圖片格式都可以儲存去背後的圖片,通常儲存去背的圖片會使用 GIF 或 PNG 格式,因為這兩種格式都可以儲存 alpha 圖層(右圖中顯示為西洋棋盤圖案的部分)。

老師示範1:智慧型的去背工具,建議人物單純時使用。

老師示範2搭配 Remove.bg 的 AI 快速去背,建議人物複雜時使用。


圖層與透視法之關係

作品範例

單元三:沈浸式學習體驗

什麼是3R?

初學入門教學

CoSpaces 教育帳號申請

CoSpaces VR 體驗

登入成功後,可以點選左上角的「畫廊」,觀摩世界各國優秀創作者所設計的空間


創建 CoSpaces 虛擬空間

設定空間環境


3D 物件

加入 3D 模型到虛擬空間中

撰寫程式碼

單元四:動物大合唱

聲波

聲波聲音的傳播形式聲波是一種平行波,由物體振動產生,通過介質(例如:空木頭)傳播並能被人或動物聽覺器官所感知。

使用聲音剪輯軟體 Audacity 把時間軸放大可以清楚觀察到波形。聲波上下振盪的幅度稱為「振幅」代表聲音的大小,聲波疏密的程度稱為「音頻」代表聲音的高低,越密集聲音越高,越分散聲音越低。

右側圖片來自 Wikipedia

上下震盪即振幅

越密集聲音越高

Audacity 是免費的自由軟體,可以從官方網站(點右圖)直接下載取得。

功能包含:

Audacity 操作練習

外接錄音、播放設備

錄音

用來儲存聲音以及編輯聲音的地方稱為「音軌」,不同聲音儲存在不同音軌才可以分開進行剪輯,錄在同一音軌的話沒辦法單獨剪輯一個聲音。「混音」是指將多個聲音合併成一個聲音,也就是說混音會把多個音軌變成一個音軌。匯出成聲音檔時,Audacity 會自動幫我們進行混音。

觀察音波

修改振幅

聲音的強度為「聲壓」,可以使用分貝計」測量,做為參考基準人類平常講話的音量約 60 分貝,詳細資訊請看「噪音小百科

修改音頻

如何取得背景音樂?

合法、免費的背景音樂,可以從 https://www.youtube.com/audiolibrary/  取得。

合法、免費的背景音樂,也可以從 https://pixabay.com/music/ 取得。

動物大合唱製作步驟

作品範例一:動物大合唱

作品範例二:小朋友背「紅豆生南國 DJ Remix +動物音合唱」

示範操作:一步一步教你如何做動物大合唱

範例檔案下載 (需先自行解壓縮) :按此下載

使用平板怎麼辦?

家裡沒有電腦無法安裝 audacity 的同學,可以使用平板在應用程式商店搜尋「ferrite」,找到 ferrite recording studio 這個 App。使用平板完成作業並上傳到 classroom 裡面,請參考以下影片示範操作:

動物大合唱_ipad.mov

單元:大魚吃小魚

遊戲體驗

請先玩玩這個 Scratch 遊戲:大魚吃小魚點擊這裡取得原始檔案

共同討論

共 4 個角色,小魚 3 隻、大魚 1 隻

大魚由玩家控制,目標是吃掉小魚

小魚由電腦控制,在舞臺游來游去

透過滑鼠操作

小魚被吃掉後過一段時間會自動復活

從舞台左邊邊緣出現

程式實驗

請閱讀程式碼後,回答問題。

大魚的程式

小魚的程式

當滑鼠不動時,大魚也會停下來。但如果把「與鼠標的間距」判斷程式拿掉的話,大魚會不停地左右翻轉。

使用右轉積木讓小魚轉彎,但轉彎的幅度限制在左轉 20 度和右轉 20 度之間

小魚方向會突然變化,比較不合理,而且玩家將會無法預測小魚的位置,遊戲變得只靠運氣不需要技巧。

請修改小魚隨機取數的範圍,然後實驗看看是否與剛才的討論結果相同。

Scratch 提供的碰撞偵測積木總共有以下三種:

請仔細觀看老師示範選取顏色的操作,然後依序把碰撞偵測積木擺放到程式裡,實驗看看不同積木有著什麼樣不同的效果?

小魚程式使用「定位到 x y」積木,把 x 座標固定在 -200,讓小魚從舞台邊緣游進來,如果不固定 x 座標小魚有可能會突然出現在舞台中央,好像小魚會瞬間移動一樣很不合理!

流程圖

流程圖(flow chart)是用來表示工作流程的一種方塊圖表,它以不同類型的框代表不同種類的步驟,每兩個步驟之間則以箭頭連接,代表步驟之間的順序關係。

常用的流程圖方塊包含:

範例:決定出門要不要帶傘

範例:設計一個逃命的遊戲

大魚吃小魚流程圖(點擊前面的連結,取得原始檔案)

大魚吃小魚流程圖.drawio

請仔細觀察上面大魚吃小魚的流程圖,並比對程式碼,回答以下問題:

流程圖中的「開始」是指哪一個積木?

當綠旗子被點擊

流程圖中的「大魚嘴巴張開」是利用哪個積木完成步驟的?

「造型換成」積木

流程圖中的「大魚嘴巴動畫」是指哪一段程式?

「重複 2 次」積木和積木中間的切換造型程式

當小魚需要觸發大魚的動作時,使用了「廣播 訊息」和「當接收訊息」積木,在流程圖上如何表示呢?

使用「小圓」圖示,並將訊息寫在小圓中央,可能需要兩個或更多的小圓,視程式需要而定。

畫流程圖時,需要照抄程式碼的內容嗎?還是要寫成人類容易理解的句子?

流程圖的文字只要能表達設計者的意圖就好,因為照抄程式碼可能無法說明程式執行的目的。

請將上面的流程圖,按右上角圖示開啟在新分頁,然後下載檔案並上傳到自己的「我的雲端硬碟」裡備用。

打開我的雲端硬碟,按左側的新增按鈕,點選「更多」,在選單中找到「diagrame.net」並點擊。(如果找不到這個選項,請先「連結更多應用程式」搜尋「draw.io」應用程式)

請看老師示範並練習繪製流程圖:

遊戲改良

全班共同討論:

大魚吃小魚遊戲應該怎麼改良會更好玩?

參考答案:

如果想要在遊戲裡面計分,我們需要使用「變數」。所謂「變數」(Variable)是指一個可以用來儲存數值或資訊的記憶體空間,以及相對應的符號名稱識別字,通常會依照其使用目的來命名。

切換到「變數」分類後,可以看到有一個系統預設的變數叫做「my variable」,請在變數上按滑鼠右鍵,選擇「重新命名變數」,請將名稱改為「分數」。

要顯示分數在舞台上,請將變數「分數」左邊的框框打勾。

使用變數必須要進行「初始化」,也就是在遊戲開始時將分數歸零。這個程式可以寫在舞台上。

在小魚被吃掉時,增加分數,這個程式請寫在小魚中。分數可以自訂,也可以根據不同小魚給予不同分數。


如果想要畫面更繽紛好看,可以修改小魚的造型,利用「填滿」工具塗上不同顏色。

然而修改顏色後,碰撞偵測程式就會偵測不到,所以需要修改判斷條件如右圖。

需要增加小魚請自行複製小魚角色,然後新增新造型,把舊造型刪除即可。

如果有變更造型,記得要修改碰撞偵測程式喔!

修改流程圖

將先前下載的流程圖,上傳到自己的雲端硬碟中,然後打開來修改流程圖。

請依照自己改寫的程式內容,在流程圖中加入新方塊,然後在方塊中加入新的文字敘述,說明程式的目的,若有必要可以增加新的流程方塊,或修改連結線以及箭頭方向。

本單元將以修改後的流程圖進行評分。

在平板電腦編輯及繳交流程圖

ipad 繳交流程圖作業.mp4

附錄:Draw.io 教學影片

魔幻水族箱

這是發生在魔法王國奧蘭多的冒險故事。奧蘭多國王為了招待來自偏遠小國納尼亞的冰雪女王,決定舉辦魔幻水族箱博覽會,國王確信位於冰河地區的納尼亞王國,就算是貴為女王也絕對沒有看過色彩繽紛的魔法魚群,這將可以為女王帶來最大的驚喜,也能展現魔法王國威盛的國力。

 

你是眾多候補大法師其中一人,只要製作出贏得女王讚賞的魔幻水族箱,極有可能繼任懸缺已久的大法師之位,贏得進入靈廟接受天啓並獲得究極技能的機會。你當然不願意錯過這個機會……

學習單:使用 Scratch 模擬水族箱生態,包含:向量繪圖、醉漢走路演算法、條件分支判斷。

矮人工匠的絕活

如果想要襯托出魔幻魚的神秘和獨特性,沒有一個與眾不同的水族箱是辦不到的,這是你深思熟慮的結論。為此,你來到了王國最熱鬧的工藝品大街,尋找著名的矮人工匠-尤亞。

任務:

請從 Scratch 範例圖庫選取一張適當的背景圖,或是從網路下載海底景觀圖片,調整圖片位置和大小蓋住整個舞台。

海巫婆的指導

拿到矮人工匠尤亞的得意之作後,接下來必須獲得魔幻魚,這雖然可以借助魔法進行自由創作,但要讓魔法魚能在水族箱中演出曼妙的泳姿,需要一些特別的靈感。、這個時候不如去拜訪海巫婆,說不定龍宮底下的洋流能激發什麼創意?

任務:

請自行繪製新角色,必須是水下生物,魔法魚是一種不存在於真實世界的魚,擁有越多特色,你的魚就會越成功。請撰寫魚的游泳程式,如右圖。並參考還巫婆的意見,創作額外加分內容。


海巫婆的建議:


聖女的祈禱

魔法魚必須食用一種名為 Mana 的魔素結晶才能存活,聽說只有虔誠的人才能在祈禱中引發神蹟,獲得神靈賜與的高純度 Mana。Mana 純度越高,魔法魚的天命就越長,甚至能夠達到永生不死的境界。這只能去求助住在神宮的聖女幫忙了....

任務:

請自行繪製 Mana,使用畫筆在旋轉中心點幾下畫出一個小小的不規則的點。由於高純度的 Mana 不可以碰觸到水族箱邊緣,以免造成水族箱破裂,請依照聖女的指示,找出 Mana 開始掉落的 Y 座標,以及掉落到水族箱碰觸底部之前的高度,將這兩個座標記錄下來。並撰寫餵食 Mana 的程式,如右圖。請將程式中的兩個變數換成你剛剛測量出來的數字。



宰相的關切

在前往宮殿的途中,你被衛兵攔下來,接著被帶往議事廳去面見宰相。宰相與你已將退休的父親是摯友,因為擔心老是闖禍的你,會搞砸這個出人頭地的機會,所以特別來關心一下。為了讓宰相安心,你邀請他餵魚,體驗一下將要呈現給女王和國王的驚喜。

任務:

為了讓 Mana 和魔幻魚產生互動,你必須建立一個變數:「餵食」,變數一開始設為 0,當 Mana 顯示出來時設為 1,當 Mana 再度隱藏時設為 0。

請修改 Mana 的掉落程式,將重複執行的結束條件,從原本的「Y 座標 < 結束掉落的高度」,改成「Y 座標 < 結束掉落的高度 或 碰到魔幻魚」,從一個條件變成兩個條件,這樣可以模擬魔幻魚吃掉 Mana 的效果。


最後請修改魔幻魚的程式,使用「如果...否則...」積木進行「分支條件判斷」,當變數 「餵食」 大於 0(或等於 1),魚面朝 Mana 向游去,否則維持原來的右轉隨機取數程式。

國王的恩寵

在宰相的安排下,你的水族箱被佈置在博覽會場的正中央。當歡迎儀式結束後,國王帶著女王來到會場中央,被眼前的奇觀所震撼,一雙眼睛始終沒有離開過你的魔幻水族箱,這是當然的,畢竟這個作品是透過王國眾多傑出之士的幫助才造就的。

 

於是,你理所當然就任奧蘭多王國的大法師,至於靈廟內的天啟考驗以及最後的究極技能,則是另一個故事了。

任務:

雖然水族箱已經大致完成了,但是為了展現恢宏的氣勢,你需要更多魔幻魚。使用重複執行和建立分身積木,產生額外 10 隻魔幻魚,將原來的程式修改為「分身產生時」執行,請將魔幻魚的本體隱藏起來,但分身產生時必須要顯示出來。