顯示具有 micro:bit 標籤的文章。 顯示所有文章
顯示具有 micro:bit 標籤的文章。 顯示所有文章

2023年10月5日 星期四

[microbit, 台語歌謠] 小彼特念唱台語：聲調語言是最美的歌謠

  小彼特念唱台語：

聲調語言是最美的歌謠

Line：ted2016.kpvs
Email：Lct4246@gmail.com
FB：http://gg.gg/TedLeeFB/
Blog：http://gg.gg/TedLeeBlog/

Oct. 5, 2023
[1]

台語的八調（獅虎豹鼈猴狗象鹿）就是天生的歌謠 ，不管是以台語發音來念或唱，它多變的聲調變化無一不顯透著這種語言的聽覺之美。
透過簡上仁老師的創見，我們將台語八調整合小彼特的音樂發聲來念、唱與演奏。使得科技得以完美地與台語教育結合，並展現出台語源遠流長的豐富內涵。

小彼特說台語八調

根據簡上仁老師的研究（https://reurl.cc/ga4p8L），台語的八調正好可以整理成表 1 的簡譜音調（tone）與之一一對應。

表 1：台語八調與簡譜音調對應表

我們再根據 https://reurl.cc/9R7LXO 一文詳細的簡譜識讀解說，使用 sai、ho2o、pa3a、pa3b、pih、ka5u、ka2u、tshiu7nn、lo8k 九個函式（function）（https://reurl.cc/2EzVRn）先定義好這八調的基本調（圖 1），再以上仁老師所舉的台語（唱）歌（念）謠四例來展示台語的聲調優揚之美感。

圖 1：台語八調的九個函式

小彼特念台語 1：李俊德（姓名）

筆者中文姓名為李俊德，台語的音調為二二四，經過變調後為一一四。於是我們直接呼叫圖 1 的函式來編排「點名」的念名順序（圖 2）。完整的程式碼可由 https://reurl.cc/RyW7bg 下載。


圖 2：念姓名的積木程式

小彼特念台語 2：阿公吃西瓜

上仁老師在 https://reurl.cc/5O4LdR 這部影片的 03:17~03:24 展示了台語這類因為聲調高低起伏變化而自然產生的韻律性之美。他舉例：用台語念「阿公吃西瓜」會形成「23623」的音律。因此，我們正好可以用圖 3 的小彼特音樂積木來譜寫這段念謠。完整的程式碼可由 https://reurl.cc/Do4MKQ 下載。


圖 3：「阿公吃西瓜」念謠的積木程式

小彼特念台語 3：白鷺絲、天黑黑

上仁老師在影片 https://reurl.cc/5O4LdR 的 15:02~16:05 中說明台語有著天生的語言性旋律（speech melody），也就是說只要用「念」的就能展現出旋律之美。他特別舉了台語人耳熟能詳的白鷺絲（豹豹獅 象虎獅 象獅象虎猴，331 721 71715）與天黑黑（獅象獅 獅豹猴，171 135）這兩首「念謠」來說明這個現象。我們也以圖 4 的積木程式來念誦。完整的程式碼可從 https://reurl.cc/3e7AgO 下載。

圖 4：積木程式

小彼特唱台語 4：採茶歌

相同地，我們經由上仁老師的啟發，結合小彼特的左、右、上、下傾斜四種體感（gesture sensing）與商標觸控（logo touch），分別對應到 5（sol）、6（ra）、1（do）、2（re）、3（mi）結合台語演奏教學。
首先，我們和學員介紹客語民謠重新譜台語歌詞的採茶歌簡譜（https://reurl.cc/y6Yjo6），並截取前兩小節做為演奏練習的藍本。接著，我們再將之與上述的五種手勢組合成圖 5 的演奏手勢控制（完整程式碼可由 https://reurl.cc/p5rjAl 下載）。最後，我們就能以圖 6（https://reurl.cc/V4Nvv5）的方式帶著學在動手中學唱台語歌謠了。我們實際教學的翦影請讀者們參考這裡 https://reurl.cc/a4LjDl。

圖 5：演奏手勢控制積木程式

圖 6：採茶歌演奏影片

張貼者： 於 沒有留言:
標籤： ,

2022年10月22日 星期六

[micro:bit, digitalization] 自製影像（images）數位化（digitalization）的視覺化（visualization）教具

自製影像（images）數位化（digitalization）的視覺化（visualization）教具

Line：ted2016.kpvs
Email：Lct4246@gmail.com
FB：https://pse.is/TedLeeFB

Oct. 22, 2022
[1]

108 課綱的國中端資訊科技科（https://reurl.cc/le3DG6）中明確規範了「數位化」這個主題的授課重點（圖 1）。
在我們所處環境中存在著各種形式的類比信號（analog signals）。然而，隨著電腦技術的發達，計算速度愈來愈快、記憶容量愈來愈大，因而造成將這些信號轉換成易於傳輸、儲存，並使用電腦做處理的數位形式便更加重要了。
本文將討論就影像（image）與語音（speech）兩種信號數位化的技術──數位信號處理（Digital Signal Processing，DSP），我目前已開發出的 Excel 與小彼特（micro:bit）兩平台三種版本的視覺化工具以做為拋磚引玉之期盼。註：因語音的處理技術與影像類似，本文僅選擇先以影像數位化之視覺工具為基礎，語音部份且容後文再述。

圖 1：108 科技領綱中資訊科技科的學習內容包括「數位化」的概念

關於處理上述的兩種數位信號的方法很簡單，概念上就是將之細切後再根據顆粒大小編碼，也就是說，原影像切完的顆粒會變成最小的像素（pixel），再將每個像素的 RGB 值依大小編碼成二進值。

先取樣（sampling）：分割（partitioning）　將圖 2 的愛心原始影像均等細切如圖 3，這個動作就好像在圖 2 上鋪上一層方格紙（graph papaer），格點愈密，顆粒愈小，其數量也愈多。

再量化（quantization）：編碼（encoding）　針對圖 3 中每一格點顏色的 RGB 值 [2] 轉換成對應的十進位值，例如：R = 127、G = 128、B = 129，圖 4）轉換成相對應的二進值（例如，(127, 128, 129)2 = 7F808116）。承前述，我們將圖 2 的所有格點以一位元的二進值轉換後如圖 5 所示。

圖 2：原始影像

圖 3：對影像取樣

圖 4：單一格點色彩的 RGB 值

圖 5：原始影像的量化二進值

視覺教具 1（Excel BW 版）

首先，我們最期待的視覺工具是像 DOS 時代的闇黑工具 PCTools（https://reurl.cc/W1p0mD）那般：修改影像的某塊像素值，螢幕上馬上讓狗狗的眼框帶出黑輪（https://reurl.cc/rRNEex）。

朝著這個目標前進，我們思考著用以下兩步驟來試試：

  1. 使用 Excel 的「內建函式」：如圖 6 所示，當上方 A1:E5 的 5×5 方陣（matrix）中的任何一格輸入 * 號時，在下方 A7:E11 方陣中所對應到的位置即顯示 1，表示上方此格被數化成 1（黑）。其中，下方方陣中的二進值 0（白）表示不包含在上方方陣的影像圖中。例如：當我們在上方陣的 B1 儲存格打上 * 時（已套用函式 =IF(B1 = "*",1,0)，下方陣對應的 B7  儲存格立即顯示 1。
  2. 使用 Excel 的格化條件之「醒目提示」：如圖 7 所示，當下方陣任一儲存格中的值為 1 時（上方陣對應的儲存格已打入 *），使用圖 8 中「等於」的「醒目提示」功能替它上色。
最後，設定完成後的 GIF 動畫如圖 9 所示。

圖 6：使用「函式」if()


圖 7：格式化條件之醒目提示

圖 8：醒目提示條件設定


此「影像數位化的 Excel 視覺示例V2.xlsx」檔可從 https://reurl.cc/EROVeg 下載。


圖 9：在上方的 5×5 方陣中作畫，下方隨即顯示此方陣圖數位化的二進值

視覺教具 2（Excel RGB 版）

在教具 1 中，步驟 2 是以一個位元（0/1 兩種組合）來編碼每個格點。將之擴充成三位元（8 種組合）後，我們就可以將之擴充成本教具 2（動畫展示如圖 10 所示）。其中，為了簡化起見，我們將每一格點的色彩值限縮為 r/g/b 三值。

此 .xlsx 檔可從 https://reurl.cc/EROVeg 下載。


圖 10：以三位元編碼量化

視覺教具 3（小彼特版）

小彼特教育基金會（Micro:bit Educational Foundation）（https://microbit.org）日前在小彼特的開發平台 MakeCode 上發表了資料日誌（Data Logger）的一包新的擴充積木（extension blocks）（https://reurl.cc/XVv9nj），如圖 11 所示。這個新增的功能是將板子所測得的數據直接寫成 MY_DATA.htm 網頁，並存在該小彼特的快閃記憶體（flash memory）中。


圖 11：資料日誌擴充積木

利用這個新功能，我們設計了以下這個操作方式來輔助數位化的教學：

按 A 左右移動，按 B 上下移動，按 A+B 畫點（並將此點記錄到資料日誌中）。

成果展示如圖 12 和 13 所示。


圖 12：小彼特 + 資料日誌

圖 13：「小彼特 + 資料日誌」動畫展示


和圖 3 類似，我們在資料日誌中建立相同的 5×5 影像表來記錄使用者在小彼特上繪製的圖案（圖 14）。詳細的積木程式請讀者們參考圖 15，完整程式碼可由 https://reurl.cc/4p2oZR 下載之。

圖 14：影像表格



圖 15：完整程式碼


影像、聲音數位化學習單

在還沒有發展出前述三種教具之前，筆者一直被翰林、康軒與南一三版本的國中資科九上的數位化內容僅做知識陳述所困擾，反覆思量著書本內講半天的理論，那到底我們拍好的美美照片轉成電腦能處理的二進值長的像怎樣？有沒有一種工具能讓我們改改、調調先去感受一下過程再來看理論知識呢？
在此因緣際會下，圖 14 的這份學習單就從筆者的腦袋中蹦了出來了。

圖 14：數位化學習單

[2] 光的三原色在八上理化的 4-5 光與顏色（https://reurl.cc/7p6WK1）中會教授。

張貼者： 於 沒有留言:
標籤： ,

2022年8月26日 星期五

[micro:bit, touch] 小彼特 V2 版三大新板載功能原理解說：觸控（touch）

小彼特 V2 版三大新板載功能原理解說：觸控（touch）

Line：ted2016.kpvs
Email：Lct4246@gmail.com
FB：https://pse.is/TedLeeFB

Aug. 26, 2022
[1]

2020 年 10 月，小彼特教育基金會（Micro:bit Educational Foundation）（https://microbit.org）發行了 V2 版的新版硬體，V2 只比 V1 小幅度地增加了三項主要的新板載（on board）功能（https://reurl.cc/AOM1rd）：商標觸控（logo touch）、麥克風（microphone）與蜂鳴器（buzzer）。
看熱鬧也要看門道，曹齊平老師說：


「基礎」知識的學習應該是了解底層最共通的原理、原則，而不是盲目無止盡地去競逐新科技的應用[2]。
因此，就讓我們以在 vMaker 連載的三篇文章來闡述這個學習理念，並且我們也援用曹老師的科學魔法車（https://reurl.cc/W104m7）的電學基礎小實驗，落實「動手做以建立知識直觀」的學習根本大法。

建立直觀

小彼特 V2 版在它正面的商標處板載了電容式（capacitive）觸控的功能：

當我們用指尖去輕觸這個商標時就會觸發小彼特的硬體觸控電路，然後執行對應的處理程式，

例如：播放音效。功能展示影片請參考圖 1。


圖 1：電容式觸控（https://reurl.cc/W1N2Ey）

電路原理

V2 版新加的這個觸控功能，其實是實做了一個 RC 延遲（delay）電路（圖 2）。而我們也可以用其他未實作此電路的接腳，以外接電路的方式來達成觸控的功能---甚至使用 V1 版也成（圖 3）[2]。
如圖 3 的藍色虛線所示，當手指未觸碰電路時，3V → 10MW → P8 將形成電路迴路（circuit loop）。
然而，當我們用手去觸碰圖 2 中的 A 點時，手指頭等效於圖中右邊的由 A 並接到地的電容（cpacitor）而讓電路形成延遲的效果（https://reurl.cc/XVZqqg）。此時，電路 A 點的電位會因為這個電容慢慢充電而致使電位爬升的瞬間形成「低（0） → 高（1）」的變化。所以，我們就可以利用這個原理來偵測手指是否按壓了 A 點。
也就是說，當手指觸踫了 A 點（圖 3），小彼特的 P8 腳位就會收到 0。註：讀者可自行使用電錶併接驗證之。
詳細的解說影片請參考圖 4。

圖 2：觸控等效的 RC 延遲電路

圖 3：接線圖

圖 4：原理解說影片（https://reurl.cc/eOyNmK）

程式原理

為了維持小彼特輸入接腳（pin）的高邏輯準位（logic level），圖 3 外接了一顆 10MW 的上拉（pull-up）電阻（https://reurl.cc/ERVKAn） 。所以，我們在小彼特一開機時（圖 5）就將晶片（chip）內的拉升電阻關閉。

(a)

(b)
圖 5：將小彼特晶片中 P8 腳位預設的拉升電阻關閉

接著，只要用手去觸碰 P8 腳位（圖 3），它的電壓會因為手指的等效電容短暫充電而致使 A 點（圖 2）電位降低。此時，就讓小彼特透過板載的蜂鳴器（buzzer）發出特效音（圖 6）。

圖 6：觸控程式

完整程式碼可由 https://reurl.cc/QbYpko 下載之。

關於 P0、P1 和 P2 的觸控

在小彼特的官方文件中（https://reurl.cc/7pVxv1）指出，無論是 V1 或 V2， P0、P1 和 P2 這三隻接腳已內建了觸控電路，我們可以從圖 7 的電路圖中（https://reurl.cc/XVQn8E）的紅色框標示處很清楚地看到。

圖 7： P0、P1 和 P2 內建的觸控電路

課程設計

運用小彼特的這個觸控功能，我們設計了「觸控點播」這個教學活動來引導學員們體驗它。

當玩家第一次觸碰小彼特的豬鼻子時，播第一首歌。第二次觸碰時，播第二首…。

完整的解說影片如圖 8 所示。


(a) https://reurl.cc/oQK52V
(b) https://reurl.cc/LMQ6ra
(d) https://reurl.cc/4pbWeY
圖 8：觸控點播教學解說

完整程式碼可由 https://reurl.cc/KQO3nj 下載之。

分享翦影

如圖 9 所示。

 
 
圖 9：觸控教學分享

延伸學習

1. 請讀者們試試看，如果一直按著這個觸控點（V2 版的商標或外接電路）時，會發生什麼狀況？
2. 改用商標觸控的事件積木（圖 ），試試看按下（pressed）、觸碰（touched）、放開（released）和長按（long pressed）這四種操作的控制差異性。

圖 8：流程圖與 MakeCode 程式對


3. 圖 3 的接線圖中，我們使用了 10M 做為上拉電阻，好奇心的讀者們一定會追問：為什麼選它？坐而言不如起而行，自己動手更換這顆電阻值來觀察會發生什麼事吧？（https://reurl.cc/AOM1Zp）

4. 本文介紹的電容式觸控技術正是時下流行的觸控螢幕（touch screen）的基本原理。讀者們可進一步觀看圖  的解說影片。

圖 ：觸控螢幕的原理（https://reurl.cc/4pLgeY）
[2] 基礎知識的學習應該要學萬事萬物共通性的「基本」原理，所謂「一理通，百里通」就是這個道理。抓粽子要抓繩頭，如果不斷的把力氣緊抓綁在繩尾的粽子上，一次能抓的粽子數量就有限。而且我們將發現：花了大把的時間和金錢之後，我們始終只能跟著廠商不斷推陳出新的商業模式走。如此，我們只能一直當花錢的消費者（consumer），而非學習者（learner）---基礎知識學習的教具，通常不必是花俏的昂貴玩具！
張貼者： 於 沒有留言:
標籤： , ,

2022年8月20日 星期六

[fChart, 流程圖, micro:bit] （fChart）流程圖轉（MakeCode）程式

 （fChart）流程圖轉（MakeCode）程式

Line：ted2016.kpvs
Email：Lct4246@gmail.com
FB：http://gg.gg/TedLeeFB/
Blog：http://gg.gg/TedLeeBlog/

Aug. 20, 2022
[0]

在問題解決（problem solving）的過程（https://reurl.cc/zNry7p）中（圖 1），我們要培養用流程圖（flowchart）來表達解決問題想法的能力，以便隨後能用各種工具（例如：程式、硬體、機構…）來實作（implement）出來。

 

圖 1：問題解決的流程

 

本文將從陳會安老師彙整的 fChart 150 題（文後皆以 fChart 150 稱之）流程圖範例（https://reurl.cc/bE97Q6）中展示流程圖的有限符號是很容易和各類型的程式語言（本文將以 MakeCode 的積木程式為例）對應轉換的。這個轉換練習將有助於初學者熟稔程式邏輯，也就是說，當我們能將原始問題找到了一種解法之後，只要能將之以流程圖來表示，這個解法就能以工具來實作出來。因此，我們可以說：

 

流程圖為程式邏輯之母

問題

重複顯示五次 Hi

 

上述問題改編自前述 fChart 150 中的「04.迴圈結構─01.前測_顯示5次大家好」來說明從流程圖轉換到 MakeCode 積木程式的整個操作過程。因為 micro:bit 無法顯示中文，我們將要顯示的文字修改為英文 Hi。

fChart 流程圖範例

首先，我們從圖 2 中可以看到紅框標示部份即為迴圈（loop）。迴圈的控制有三個要素：迴圈控制變數（a）、迴圈控判斷式（a <= 5）及迴圈控制變數累加（a = a + 1）。而每次進入迴圈時，我們就輸出一次 Hi。流程圖的執行結果如圖 2 右上的黑底小視窗所示。

以上這段為流程圖（認）識（與閱）讀，讀者們應該可以試著自己講給自己聽。如果能說的完整而無卡頓就代表我們真的讀懂了這個流程圖。讀懂之後再想想程式要重複輸出五次相同字串（string）─問題和這個流程圖是如何解決這個問題的─（解決問題的）想法。因此，我們的程式邏輯就能在這樣的練功過程中被紮實的建立了。

 

圖 2：fChart 流程圖及其執行結果

流程圖追蹤（trace）

結構化程式設計（structural programming）由循序、選擇進入到重複結構後，是初學者很容易卡關的點，其原因概是對某些人而言，程式執行邏輯過於抽象化所致[1]。因此，本小節詳細地展示如何追蹤迴圈執行流程及其迴圈控制變數變化的一連串過程，即變數監看（watch），來協助初學者打通程式設計的任督二脈。我們將使用 fChart的單步執行（single-step execution）功能，逐步地追蹤圖 2 的完整執行過程。讀者們請特別留意此強大的視覺化功能可以十分穩固地增進我們對程式邏輯的具體了解，但前題是紮馬步的基本功一定要自己「動手」去練、去體會！

設定 fChart 直譯器（interpreter）

1. 從 https://reurl.cc/D3m6Aj 下載「04-01.前測_顯示5次Hi.fpp」[2]並將之另存到本機資料夾的根目錄之下（文後皆以 d:\ 為例），圖 3。

(a)


(b)


(c)



(d)
圖 3：下載「04-01.前測_顯示5次Hi.fpp」

 

2. 連入 fChart 英文版的載點 https://reurl.cc/9pVEEO，將壓縮檔「fChartPython6_en.zip」下載到本機儲存[3]後將之解壓縮（要解到「根」目錄下以防止有中文徑名問題），圖 4。

 

(a)

(b)

(c)

(d)

(e)

(f)

(g)
圖 4：下載「fChartPython6_en.zip」並將之解壓縮到 d:\ 後執行「FlowProgramming_Edit.exe」

 

3. 在「fChart Interpreter 6.00」中開啟「04-01.前測_顯示5次Hi.fpp」[4]，圖 5。

 

(a)


(b)


(c)
圖 5：在 fChart 直譯器中開啟「04-01.前測_顯示5次Hi.fpp」

變數監看 ＋ 單步執行

程式設計能力的培養分成兩部份：讀和寫，而在深入這兩種練習之前，我們十分建議初學者善用 fChart 的程式執行流程追蹤功能建立兩層面的直覺（intuition）：觀察（observation）與手動控制（manual control）。我們以下列的步驟 4~6 來詳細分述之：

 

4. 在 fChart 上方的執行控制工具列（fChart Execution Toolbar）上按下執行（execute）按鈕，觀察流程圖動態執行及結果輸出的過程來體會迴圈重複執行的迭代（iteration）。

5. 按下變數監看視窗啟動按鈕後，我們可以進一步觀察到流程圖在重複輸出字串時，迴圈控制變數 a 的變化過程（由 1 一直跑到 5）。

 

圖 6：變數監看

 

6. 將延遲時間滑桿（slider）往「右」打到底即可讓 fChart 進入單步執行模式。此時可以搭配控制按鈕，按一下執行流程圖中的一個符號，圖 7。

 

圖 7：單步執行

MakeCode 程式

本文的標是以 fChart 來訓練圖 1 問題解決過程的最後一段：從流程圖（圖 2）轉換為 MakeCode 程式[5]。為了更清楚對照，我們將這兩者併排顯示於圖 8 ，而 MakceCode 的完整程式碼可從 https://reurl.cc/KQMDMy 下載。

 

 

圖 8：流程圖與 MakeCode 程式對照 

進階學習

1.         讓迴圈在「奇數次」時（即 a = 1, 3, 5）加上短音效，例如：ba ding，圖 9。

 

圖 9：ba ding 短音效

 

2.         修改圖 8 程式，使得程式在第 i 次迴圈時，閃爍 i 次 Hi，例如：i = 3，則閃爍三次 Hi。

3.         承 2，根據修改完成後的程式再以 fChart 酌修圖 2 的流程圖。

[0] 六種授權條款。
[1] 迴圈是初學程式設計最困難的部分。透過流程圖，初學者可以清楚了解其運行「過程」。如果初學者無法自行追蹤迴圈的執行過程和了解迴圈控制變數的變化，就沒有真正的學會迴圈結構──陳會安老師如是說（https://reurl.cc/8p5aQb）。
[2] 改編自陳會安老師原版的 fChart 150 的 GitHub（https://reurl.cc/9p18Oj）。
[3] 如果發生檔案有在下載但無法全部下載完時，請先暫時關閉防毒軟體。
[4] 讀者也可自行變更檔案的關聯（association）程式，在 .fpp 的 fChart 流程圖檔上雙撃時可以直接以 fChart 直譯器開啟之。
[5] 從此處就可以很容易看出流程圖和任何程式語言是可以一一對應轉換的。然而，根據陳會安老師的進一步研究，目前尚無這樣可供「自動」轉換的演算法存在。但是，人工手動轉換是可行的！
張貼者： 於 沒有留言:
標籤： , ,
訂閱： 文章 (Atom)