[fChart, Python] 以 fChart 馭 Python：巢狀迴圈（7/11）

 以 fChart 馭 Python：

巢狀迴圈（7/11）

Ted Lee的土饅頭（To Mentor）工坊

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

Blog：http://gg.gg/TedLeeBlog/

Aug. 13, 2022

[1]

接續著本 fChart 系列前文《以 fChart 馭 Python：練 fChart 了沒？（1/11）》（https://reurl.cc/oeDGN3），我們將針對圖1 的「10 大項目之 6」的 5 個實例（可從https://reurl.cc/RXXDqr 下載），從

原始問題描述到以流程圖表達解法，

再對照流程圖寫出 Python 語法程式

的過程詳細說明整個的問題解決（problem solving）過程。

圖 1：10 大項目之 6

[micro:bit, 流程圖, fChart] 從流程圖學程式邏輯：使用 fChart

 從流程圖學程式邏輯：使用 fChart

Ted Lee的土饅頭（To Mentor）工坊

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

Blog：http://gg.gg/TedLeeBlog/

Aug. 10, 2022

[1]

綜觀各類積木程式（Google Blockly、MIT Scratch、MakeCode…）的學習，學員們拉完／玩積木後是否都已學會了程式設計的「邏輯」了呢？還是只是拼拼湊湊地在玩拼圖遊戲而已？

程式設計的訓練目在培養解決問題（problem solving）能力（圖 1），在這一方面，陳會安老師以自己研發的流程圖識讀工具 fChart 精編了 150 道題目（https://reurl.cc/m3G2XW） 來協助初學者從流程圖轉換到 Python、C、Java…等各程式語言語法。

圖 1：問題解決流程

因此，本文第 1 至 3 小節以問題形式來包裝所有程式語言都會支援的循序結構（sequential structure）、選擇結構（selective structure）和重複結構（repetitive structure）結構化程式設計共通的三大結構來呈現圖 1 的完整解題過程。

在第 4 小節中，我們從 fChart 150 題中選出符合這三大結構的三個示例來說明如何用這 150 題來熟悉圖 1 後半中流程圖識讀並能以 MakeCode 程式來實現的轉換過程。

註：fChart 能用的「有限」流程圖符號（symbols）如圖 2。原作者陳會安老師總是再三強調：就是因為它只有幾個少少的符號，所以將問題解法以流程圖來表達是很容易學會的！

圖 2：fChart 包含的流呈圖符號

[micro:bit, 電子學] 小彼特 V2 版之科普電子學：觸控（touch sensing）

 小彼特 V2 版之科普電子學：觸控（touch sensing）

Ted Lee的土饅頭（To Mentor）工坊

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

Blog：http://gg.gg/TedLeeBlog/

Aug. 6, 2022

[1]

接

圖 1：10 大項目之 5

[fChart, Python] 以 fChart 馭 Python：迴圈和條件（6/11）

以 fChart 馭 Python：

迴圈和條件（6/11）

Ted Lee的土饅頭（To Mentor）工坊

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

Blog：http://gg.gg/TedLeeBlog/

July 20, 2022

[1]

接續著本 fChart 系列前文《以 fChart 馭 Python：練 fChart 了沒？（1/11）》（https://reurl.cc/oeDGN3），我們將針對圖1 的「10 大項目之 5」的 4 個實例（可從此處 下載），從

原始問題描述到以流程圖表達解法，

再對照流程圖寫出 Python 語法程式

的過程詳細說明整個的問題解決（problem solving）過程。

圖 1：10 大項目之 5

[micro:bit, 小彼特, BLE, 藍牙] 你的小彼特（micro:bit）藍牙好配嗎？

 你的小彼特（micro:bit）藍牙好配嗎？

Ted Lee的土饅頭（To Mentor）工坊

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

Blog：http://gg.gg/TedLeeBlog/

July 18, 2022

[1]

小彼特的藍牙配對 [2] 一直是小彼特粉絲們心中的痛，眼看著明明有板載的無線通訊功能可用，但就是看的到連不到，著實氣人。本文在放棄數年後，因一個新訊息而重燃起一絲絲希望。

終於，經過日以繼夜的努力，在 V2 的主板上以 100% 的成功率實測出一套建立藍牙連線的 SOP 供讀者們做後續應用。

[fChart, Python] 以 fChart 馭 Python：迴圈結構（5/11）

以 fChart 馭 Python：

迴圈結構（5/11）

Ted Lee的土饅頭（To Mentor）工坊

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

Blog：http://gg.gg/TedLeeBlog/

June 26, 2022

[1]

接續著本 fChart 系列前文《以 fChart 馭 Python：練 fChart 了沒？（1/11）》（https://reurl.cc/oeDGN3），我們將針對圖1 的「10 大項目之 4」的 26 個實例（可從此處 下載），從

原始問題描述到以流程圖表達解法，

再對照流程圖寫出 Python 語法程式

的過程詳細說明整個的問題解決（problem solving）過程。

圖 1：10 大項目之 4

[micro:bit, maker] 小彼特一筆畫完

 小彼特一筆畫完

Ted Lee的土饅頭（To Mentor）工坊

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

Blog：http://gg.gg/TedLeeBlog/

June 10, 2022

[1]

馬上實作，拿在手上感受

我：你可以自己畫出一筆點亮所有 LED 燈嗎？

孩：可以，馬上用筆畫出兩種。

我：那能畫出所有可能點亮的方法嗎？

孩：A…（搔頭狀），沒辦法。

我：我也沒辦法，可能性有很多，而且我畫完四個也累了。但是，電腦不怕累，可以一直工作。我可以把任務交給它，讓他發揮專長。接著從口袋拿出小彼特展示給他看。頓時，小孩的眼睛閃閃發光，問說這怎麼辦到的？

─── 小彼特的超級優點就是：馬上實作，拿在手上感受。

問題說明

從小彼特的中心點出發，找出任一條可連接 25 顆 LED 的畫法，但已畫過的點不能再重複經過（圖 1 為四種可能的畫法）。讀者們可以使用圖 2 的學習單動手畫畫看，也可以相互比一比，看看誰能畫出最多種不同的走法。

圖 1：從中心點出發的四種畫法

圖 2：一筆畫完學習單

問題分析

首先，我們以圖 3 座標軸的第一象限來定位小彼特板子上的這 25 顆 LED。圖 4 為一筆畫完的走法分析，其中，圖 4 左黃色座標格表示圖 4 右選擇的走法。

圖 3：小彼特 25 顆 LED 定位座標軸

圖 4：走法分析

麥客友（ Escher Hsieh）的解方

我們在這篇 FB 分享文章（https://reurl.cc/QLkDa2）提到使用小彼特來實作的概念後，麥客友 Escher 立刻以遞迴（recursion）的程式設計技巧實作（implement）出這個問題的解法（https://reurl.cc/anDmvD）。

程式的想法很簡單：

邊往前畫邊灑下麵包屑作記號（遞迴），走不通就沿著麵包屑返迴（backtrack）再重新找路。其中，下一步的選擇順序（order） 如圖 5 中 1~4 的逆時鐘（counter clockwise）方向所示，即調整對應的 x 或 y 座標。

圖 5：尋路順序 

Ted Lee 的解析

首先，以圖 6 的方式定義了五個一維陣列 list0~4[] 代表小彼特板載 25 顆 LED 的狀態：

1 表示尚未走過；

0 表示已走過。

圖 6：陳列的初始狀態

另外，程式中定義了以下四個副程式來處理深度優先（Depth-First Search，DFS） [2] 的尋路方式：

1. setLED()：設定 LED  (x, y) 是否被畫到（記錄變數 value = 0）。
2. findPath()：遞迴找路副程式，這是這隻程式的菁華所在。它的設計邏輯是：
   往上下左右四個方向去甞試畫畫看。
   如果可以將 25 顆 LED 畫盡，那就是找到了一種畫法。
   否則，代表此路不通，退回前若干步後再換一條沒走過的路重試。
3. shwoPath()：顯示找出的一筆畫完路徑（path）。
4. getLED()：取得 LED (x, y) 的值（有畫到 (x, y)， value = 0；否則，value = 1）。

其中，它們之間的呼叫關係（call sequence）整理於圖 7 所示。

圖 7：副程式之間呼叫關係

最後，我們將 Escher 的程式碼再整理加註於此（https://reurl.cc/9GY3lx）供讀者細細詳參。

MakeCode 中的程式碼追蹤（code trace）技巧

上小節所整理的敘述除向原作者請益的結論之外，我們是用 MakeCode 裡的小瓢蟲（debugger）進入單步執行（single-step execution）的除錯模式（debug mode）來一步步模擬與追蹤程式的執行過程──這個程式「 閱讀」技巧目非常、超級重要，精熟它必定有助於讀懂他人程式碼的思考邏輯（圖 8）。其中，讀者可以比較一下由積木程 JavaScript 進入除錯模式的差異性。後者才有中斷點（breakpoints）可以插入觀察。

圖 8：MakeCode 的除錯模式

還可以怎麼玩

可能有讀者會和筆者一樣，小時候有玩過一筆畫一個圖案（https://reurl.cc/YvoNX4）或寫一個字（https://reurl.cc/NAm91p）。一筆畫問題在資訊科學（Computer Science，CS）領域有一個古典的研究叫尤拉路徑（Eulerian path）（https://reurl.cc/anDm9Q），而資訊科學家（computer scientists）也就從此開展出一串圖論（Graph Theory）問題的新研究領域，有興趣的讀者可以從此處再繼續深入研究之。

延伸思考

麥客友的參考作品給了我們一個思考的方向。讀者們，我們是否還能夠再進一步改良（improve）它呢？

1. 從 (2, 2) 出發，共有幾種不同畫法？
2. 隨機選出發點 (x, y)，x, y = 0~4？
3. 為什麼程式找到路後不會停？能讓它停下來嗎？
4. 能隨機找路嗎？

註：教學情境的營造──有溫度的畢典

疫情肆虐讓許多學校都只能辦遠距畢典。xx 的孩子們，你們的身體內都流淌著遠征探索的血液，xx 特使團將出動 SNG（Satellite News Gathering）車到每位畢業生家裡現場採訪，請規畫一條不重複而且能串連每個家庭的完美路線。

[micro:bit, maker] 猛龍搶珠

 猛龍搶珠 [1]

Ted Lee的土饅頭（To Mentor）工坊

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

Blog：http://gg.gg/TedLeeBlog/

Jun 4, 2022

[2]

讓金龍爭奪隨機出現的龍珠。

從觀察中建立編程邏輯直覺

請讀者們觀察本文最開頭的 GIF 動畫，比參照題目的要求，拿張白紙動手寫出／畫出該動畫可能的操作流程，而這個流程就是本文的編程邏輯。

設計

龍珠（LED 亮度最亮）會隨機出現在 5*5 的 LED 矩陣（matrix）上。

按 A 以列為主（row major），則由左到右，再由上到下搜尋；

按 B 以行為主（column major），則由上到下，再由左到右尋找。

程式解說

程式一開始時讓 micro:bit 出現開機的愛心圖示，然後讓按鈕控制變數 sw 設定成 -1，其中，。

接著，按下 A 時清除畫面後開始由左到右、由上到下尋找龍珠，尋找的流程如圖 1 所示（我們利用 micro:bit 的重複執行 forever() 函式的特性，按鈕按下時在事件積木中設定對應 sw 旗標（flag）值，然後等到輪到 forever() 取得執行權時即進入圖 1 的執行邏輯。）此外，讀者們可以動動腦再想一想：圖 1 的流程圖中有幾個迴圈呢？為什麼？

另一方面，按下 B 的處理邏輯和 A 相同，可參考圖 1 的做法修改之。

圖 1：按鈕 A 的控制流程

完整程式碼如圖 2 所示，讀者可連至此自行下載。

圖 2：完整程式碼

挑戰

舉出其他搜尋（search）的方法，例如：由右到左，再由上往下。並修改範例程式來實現（implement）你的想法！

學習參考

本單元配合南一書局七年級資訊科技第二冊 6-3 節的重複結構（repetitive structure）。

[micro:bit, maker] 拆地雷

 拆地雷 [1]

Ted Lee的土饅頭（To Mentor）工坊

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

Blog：http://gg.gg/TedLeeBlog/

Jun 1, 2022

[2]

micro:bit 上滿佈著 25 顆地雷，請趕快通報掃雷小組盡速來拆除。

圖 1：micro:bit 5*5 雷區

從觀察中建立編程邏輯直覺

請讀者們觀察本文最開頭的 GIF 動畫，比參照題目的要求，拿張白紙動手寫出／畫出該動畫可能的操作流程，而這個流程就是本文的編程邏輯。

設計

按 A+B 重新開局。

按 A 後再按 B 隨機選出要拆除的第 (i, j) 顆地雷，i, j = 0~4。其中，micro:bit 的 LED 矩陣座標系統定位如圖 2：

圖 2：LED 矩陣座標系統

程式解說

完整程式碼如圖 3，以下我們來詳細說明程式的設計邏輯：

1. 開局：按鈕 A+B。如圖 3，在按鈕的ㄈ字形事件處理（event handling）積木（blocks） 內置入將 25 顆 LED 全部點亮的積木。思考：要不要先將所有 LED 清除再點亮呢？為什麼？

2. 拆彈定位：按下鈕 A 隨機選 0~4 的 X 座標位置 i；按下按鈕 B 隨機（random）選 0~4 的 Y 座標 j。

3. 拆除炸彈：當 (i, j)是亮著（請參考 MakeCode 的積木使用說明文件）時將之關閉，表示該炸彈已清除。

圖 3：完整程式碼

挑戰

加上計時功能，設定一分鐘內要全數拆完 25 顆地雷才算過關。或者，讓 micro:bit 上的地雷改為每次玩時是隨機佈 n 顆地雷，n = 1~25。註：感謝黃教授提供「暗雷」玩法，我們修改規則如下：

按 A+B 時 25 顆 LED 全亮（表示雷區範圍）開局並隨機產生 1~25 顆暗雷。

按 A 時，掃雷大隊依序移動探雷。

按 B 確認是否找到地雷。若是誤判，則發出錯誤音效。否則，將 LED 變暗表示該顆地雷已被成功拆除。

相關作品

在這段影片中，我們使用了信標（beacon）技術來尋找炸彈並拆除它。相關的程式碼都放在影片留言處。

另外，我們仿做了賴盈志老師的手作做品，也實際動手做出了一個版本。

學習參考

本單元配合南一書局七年級資訊科技第二冊 6-2 節的選擇結構（selective structure）。

[micro:bit, maker] 小彼特（micro:bit）創客（maker）趣之燈條篇

   小彼特（micro:bit）創客（maker）趣之燈條篇 [1]

Ted Lee的土饅頭（To Mentor）工坊

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

Blog：http://gg.gg/TedLeeBlog/

May 14, 2022

[2]

以小彼特做為機電整合控制的開發板一直是這塊板子想要引導年輕學子培養數位創意（digital creativity）的願景（vision）。

本場分享以「燈」為主題，從曼陀羅（Mandala）創意思考工具觀察其在生活中的相關應用場景，並結合小彼特的各種控制方法來開展出創客創作的設計思考（design thinking）。

因為疫情嚴峻，主辦單位不得不臨時改採遠距的方式舉辦。而筆者也以 MakeCode 便於同時開發傳送與接受廣播遙控程式的 Multi Editor 介面並配合微軟創意獨具的燈條模擬環境來展式電控程式的開發流程。

最後，我們也整理了數件過往專案合作的中大型作品來展示燈條的一系列創作集。

從曼陀羅玩起

我們使用試算表（speeadsheet）繪製了雙層九宮格的曼陀羅，最中心的內層是用來發想燈條在日常生活中應用到的場合。依序將想到的答案填入外環的八個格子時，試算表會立即將之顯示到第二外層以開展出可以用小彼特來控制的方式。

完成這個曼陀羅的腦力激盪的同時等同於設計了在某個場景下操做燈條的方法（圖 1），例如：遙控聖誕樹彩燈。

圖 1：生活中的燈條及其控制之雙層曼陀羅

專案架構

每一個大程式專案都是從小的程式片斷所積累，或者說：大程式是可以拆解（decompose）為若干功能獨立（functional dependent）的小程式。

首先，我們會先介紹燈條控制的三個基本動作（燈條控制三部曲）。接著，是廣播的控制邏輯（廣播控制三部曲）。最後，將前兩項組成「遙控燈」的操作。

燈條控制三部曲

燈條控制的完整程式範例如圖 2 所示，讀者們可以從這裡下載。

圖 2：燈條控制三部曲

因為燈條屬於小彼特的外接硬體，如圖 3 所示，在使用前需要先加入美商 Adafruit 為它撰寫的擴充積木包（extension blocks）。註：新像素（neopixel）為其內部用語。

圖 3：燈條擴充積木

相同地，我們 Arduino 界最富盛名的 Blink 來測試小彼特開發的軟硬體平台：

步驟一：在 on start 中初始化（initialize）燈條物件 strip，積木最右的格式參數用預設值（default），中間的參數要配合硬體上燈珠數（讀者可以試試大於或小於實際燈珠數會如何？），最左邊的參數是燈條接在小彼特的哪一隻接腳（pin）上（因為小彼特預設 P0 腳是和板載的（built-in）蜂鳴器（buzzer）共線路，強烈建議保留給它專門用來控制聲音之用。

步驟二：設定燈條要顯示的顏色。

步驟三：關閉燈條。

註：為了教學統一起見，只要燈條顏色有異動就請加上 show 積木！

廣播控制三部曲

我們採用十分適合廣播程式開發的雙拼工具 MakeCode Multi Editor（使用這個相同功能的網站 BuildBee 亦可）。完整的範例程式可參考圖 4 所示。

圖 4：廣播三部曲

在圖 4 中，我們設定共同的廣播群組代碼為 13。當 Tx 按下 A 時傳送 （"TedLee",  14）；Rx 收到後，確認發送者是 TedLee 後，就播出 hello 音效（sound effect）。

步驟一：設定廣播群組（group），群組代碼為 0~255，共 256 組。

步驟二：撰寫傳送端（transmitter）控制程式。

步驟三：撰寫接收端（receiver）控制程式。

依照圖 4 寫好 Tx 和 Rx 之後，在 MakeCode Multi Editor 中用模擬器（simulator）直接測試：當 Tx 按下 A 時，Rx 就播出 hello──讀者們應該會和我們一樣跳起來：居然可以在同一畫面上模擬出廣播的收送結果啊！

註：很神奇的，在 MakeCode Multi Editor 上編輯的程式 Tx 和 Rx，會存到瀏灠器快取（cache）中，打開 MakeCode 時就會看到它們，如圖 5 所示。

圖 5：MakeCode Multi Ediot 和 MakeCode 均存在同一瀏灠器快取處

加在一起：遙控燈

將以上兩小節的參考程式合併後就可以像圖 6 一般輕鬆地組成一隻使用廣播來遙控燈條的程式了（在 Rx 中，我們再進一步地將燈條控制改用 blink() 函式（function） 來處理）。其中，歷史總是分分合合。然而，程式也只不過是拼拼湊湊罷了：

數個基元小程式 ---合併---> 大程式

大程式 ---拆解（dempose）---> 數個基元小程式

圖 6：廣播遙控燈條

創客作品集

筆者雖然身在教學現場，但仍不斷期許自己能多方面應用所學，並能將之回饋到教學上。因此，卡路里大作戰這件作品是我們和台北市仁愛國中楊昌珣老師的跨領域（cross disipline）合作專案產出。我們依照男、女國中的體型分成四個類型來計算跑步一分鐘所消耗的卡路里（carloine）熱量。
氣有多長這件創作是用來將音量以燈條做視覺化（visualization）呈現。

聖誕樹是將燈條固定在以 PP 板設計的聖誕樹造形上，並以編程來實現各種燈條的閃爍樣式（patterns）。

最後，和新北市三重區明志國中共同開發酷跑遊台灣大型教具，在一分鐘之內，會不斷的累加三位環台跑者的步伐（已發表專文於《「酷跑遊台灣」之機電整合分享：新北市108年資訊科技教育成果展專案》）。

附錄 1：燈條原理

我們選用的是 WS2812B 可程化（programmable）的 +5V 軟管燈條（圖 7），它的資料手冊（datasheet）可從這裡查看。其中，我們可以看到燈條上的每顆燈珠 VDD（電源）、VSS（接地）是全部各自串聯在一起，而 24 位元（RGB 3 色，每色 256 階）控制訊號是以 DIN - DOUT - DIN - DOUT …相接。註：因為我們是要接到小彼特上自行設定燈條樣式，所以，要找像 WS2812B 這類型的燈條才符於使用。 讀者若不清楚它們的採購方式，可在本文下方留言版中詢問，或者到我們的臉書社團上來一起討論。

圖 7：WS2812B 軟管燈條

附錄 2：燈條還可以怎麼玩？

文末，我們想邀請有興趣的讀者們一起來想想這個用 Arduino 控制的光彈效果是否也能改用小彼特來實現呢？或者，像我們在《讓我們Py在一起：手勢控制PowerPoint放映切換》所展示的，能否用手勢（gestures）來控燈呢？歡迎大家在本文下方的留言版中一起討論，或者也可以到我們的臉書社團上一起來分享。