多媒體與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 教學影片