從想法（ideas）到實現（implementation）：
我是怎麼用程式解決問題的？
Line：ted2016.kpvs
Email：Lct4246@gmail.com
FB：http://gg.gg/TedLeeFB/
Email：Lct4246@gmail.com
FB：http://gg.gg/TedLeeFB/
Blog：http://gg.gg/TedLeeBlog/
Nov. 6, 2021
[1]
問題
在micro:bit（文後皆以小彼特稱之）官方MakeCode平台（https://makecode.microbit.org/）的5×5 LED點矩陣（dot matrix）中，畫出左下、左上、右上及右下四個直角三角形（圖1）[2]。
想法：觀察（observe）
我們先猜測：會畫一個方向就能畫出其他方向。所以，我們大膽的把問題縮小四分之一：「如何畫出一個左下的直角三角形？（圖2）」。我們將之攤到試算表（Spreadsheet）繪製成觀察圖（observation diagram）中以利後續觀察。
接著，我們考慮小彼特上這25顆LED的定位方式，它是被擺放在直角座標軸的第一限象（正X、正Y）上，如圖3所示。
圖3：小彼特的LED定位系統。
最後，我們可以再細部構思出其他3個三角形的雷同結構（圖4）。
圖4：其他3個三角形的觀察圖。
想法：解析（Analyze）
先固定Y軸的一列，然後再從左到右掃瞄X軸。接著再往下移動一列，再掃瞄…再移動，再掃瞄…。
根據上面的策略，我們甞試採用「之字型掃瞄法」來推演左下直角三角形的點亮方法。
步驟1：根據圖3的定位系統，逐一填入圖2的觀察圖。如下圖6所示，先填妥綠網底的各顆LED座標，然後將Y軸中i的變化情形填入黃網底處。最後，我們可以輕鬆地將i和j的變化情歸納到藍網底這兩格。其中，i表示X軸由左到右（0~4）依序掃瞄；j表示Y軸由上到下（0~4）位序掃瞄。而i與j交會處即點亮該LED。
步驟2：重複步驟1的方法，就能全數完成圖7的所有觀察圖。
想法：流程圖（Flowchart）
承上節，我們的破題策略是圖5的之字形掃瞄法：由上到下掃瞄，過程中，再由左到右掃。緊接著，我們從圖6中歸納出：
上到下掃瞄用j來控制，j = 0~4；左右掃瞄用i來控制，i = 0~j。
整理一下，就可畫出圖8的流程圖。其中，粉紅色網底包在無網底的內部，正好對應到巢狀for迴圈（nested for-loop），如圖9所示。
圖9：流程圖對應到巢狀for迴圈結構。
實現
經由上述的觀察與歸納過程而導出的流程圖方是編程之母。有了流程圖，就好像孔明當年在隆中想出的木牛流馬設計圖一樣，離用程式語言寫出執行程序就不遠了。
為了程式簡潔起見，我們採用模組化（modualized）程式設計結構的方式寫成以下的程式碼：
#副程式：左下直角三角形
def show1():
for j in range(0, 4 + 1): #由上到下掃
for i in range(0, j + 1): #由左到右掃
led.plot(i, j) #點亮位置(i, j)的LED
#主程式
show1()
依此類推，四個直角三角形組成的完整程式碼如下所示，讀者可由 https://reurl.cc/gzxKAX 下載我們發佈（publish）到MakeCode上的專案（project）。其中，我們還加上了第三個最外層的迴圈（用times變數控制）來讓每個直角三角形依序閃爍三次。展示的GIF動畫如圖10所示。
圖10：完整的GIF專案動畫。
#副程式1：畫直角三角形（直角在左下）
def show1():
basic.clear_screen()
for times in range(0, 1):
for j in range(0, 4 + 1):
for i in range(0, j + 1):
led.plot(i, j)
basic.pause(50)
#basic.pause(300)
#basic.clear_screen()
#basic.pause(300)
#副程式2：畫直角三角形（直角在右上）
def show2():
basic.clear_screen()
for times in range(0, 1):
for j in range(0, 4 + 1):
for i in range(j, 4 + 1):
led.plot(i, j) #(4 - i + j, j)
basic.pause(50)
basic.pause(300)
basic.clear_screen()
basic.pause(300)
#副程式3：畫直角三角形（直角在右下）
def show3():
basic.clear_screen()
for times in range(0, 1):
for j in range(0, 4 + 1):
for i in range(4 - j, 4 + 1):
led.plot(i, j)
basic.pause(50)
basic.pause(300)
basic.clear_screen()
basic.pause(300)
#副程式4：畫直角三角形（直角在右上）
def show4():
basic.clear_screen()
for times in range(0, 1):
for j in range(0, 5):
for i in range(0, 4 - j + 1):
led.plot(i, j)
basic.pause(50)
basic.pause(300)
basic.clear_screen()
basic.pause(300)
#主程式
show1()
show2()
show3()
show4()
學習任務
筆者已將本文應用至國九資訊科技的Python教學上[2]。我們設計了以下的三節課135分鐘來引領學生走過一趟完整的編程思維之旅。我們設計的檢核表如圖11所示。
第1節：畫一，使用單層for迴圈。
第2節：畫左下直角三角形，使用雙層for迴圈。
第3節：畫左上、左下、右上、右下4個直角三角形並各別閃爍3欠，使用3層for迴圈。
圖11：學習任務檢核表。
教學翦影
結語
流程圖是編程邏輯之母（積木程式不是） ~陳會安老師[3]
一轉眼，筆在中學資訊領域已任教十年了，小彼特教學也逾4年餘[4]。有時候時常在想，當編程從專業走到通識，吾人到底在教什麼？
直到日前領受陳會安老師醍醐灌頂，日前又受到張隆君教授[7]啟發，遂完整的打通了圖12的編程通識教育流程。
問題解決過程是一連串的邏輯思維活動，從科學的觀察與歸納法則而得出解方的流程圖，之後才是由程式設計接手。現今雖然知識爆炸、科技日進千里，然而，一般的普羅大眾要培育是編程邏輯是還是建立能畫出圖示的前半部腦內思維活動。如何用電腦解決真實問題是一連串的why、why、why的邏輯思考力訓練。而程式只是實現的工具之一罷了！
%3CmxGraphModel%3E%3Croot%3E%3CmxCell%20id%3D%220%22%2F%3E%3CmxCell%20id%3D%221%22%20parent%3D%220%22%2F%3E%3CmxCell%20id%3D%222%22%20value%3D%22%22%20style%3D%22edgeStyle%3DorthogonalEdgeStyle%3Brounded%3D0%3BorthogonalLoop%3D1%3BjettySize%3Dauto%3BfontFamily%3DTimes%20New%20Roman%3BfontSize%3D18%3Bdashed%3D1%3B%22%20edge%3D%221%22%20source%3D%224%22%20target%3D%225%22%20parent%3D%221%22%3E%3CmxGeometry%20relative%3D%221%22%20as%3D%22geometry%22%2F%3E%3C%2FmxCell%3E%3CmxCell%20id%3D%223%22%20style%3D%22edgeStyle%3DorthogonalEdgeStyle%3Brounded%3D0%3BorthogonalLoop%3D1%3BjettySize%3Dauto%3Bhtml%3D1%3BfontFamily%3DTimes%20New%20Roman%3BfontSize%3D18%3BentryX%3D0%3BentryY%3D0.5%3BentryDx%3D0%3BentryDy%3D0%3BexitX%3D0.5%3BexitY%3D1%3BexitDx%3D0%3BexitDy%3D0%3B%22%20edge%3D%221%22%20source%3D%224%22%20target%3D%227%22%20parent%3D%221%22%3E%3CmxGeometry%20relative%3D%221%22%20as%3D%22geometry%22%3E%3CArray%20as%3D%22points%22%3E%3CmxPoint%20x%3D%22249%22%20y%3D%22525%22%2F%3E%3C%2FArray%3E%3C%2FmxGeometry%3E%3C%2FmxCell%3E%3CmxCell%20id%3D%224%22%20value%3D%22%E6%83%B3%E6%B3%95%EF%BC%88ideas%EF%BC%89%22%20style%3D%22ellipse%3BwhiteSpace%3Dwrap%3Bhtml%3D1%3Baspect%3Dfixed%3BfontFamily%3DTimes%20New%20Roman%3BfontSize%3D18%3B%22%20vertex%3D%221%22%20parent%3D%221%22%3E%3CmxGeometry%20x%3D%22174%22%20y%3D%22320%22%20width%3D%22150%22%20height%3D%22150%22%20as%3D%22geometry%22%2F%3E%3C%2FmxCell%3E%3CmxCell%20id%3D%225%22%20value%3D%22%E5%AF%A6%E7%8F%BE%EF%BC%88implementation%EF%BC%89%22%20style%3D%22ellipse%3BwhiteSpace%3Dwrap%3Bhtml%3D1%3Baspect%3Dfixed%3BfontFamily%3DTimes%20New%20Roman%3BfontSize%3D18%3B%22%20vertex%3D%221%22%20parent%3D%221%22%3E%3CmxGeometry%20x%3D%22492%22%20y%3D%22315%22%20width%3D%22160%22%20height%3D%22160%22%20as%3D%22geometry%22%2F%3E%3C%2FmxCell%3E%3CmxCell%20id%3D%226%22%20style%3D%22edgeStyle%3DorthogonalEdgeStyle%3Brounded%3D0%3BorthogonalLoop%3D1%3BjettySize%3Dauto%3Bhtml%3D1%3BfontFamily%3DTimes%20New%20Roman%3BfontSize%3D18%3BexitX%3D1%3BexitY%3D0.5%3BexitDx%3D0%3BexitDy%3D0%3BentryX%3D0.5%3BentryY%3D1%3BentryDx%3D0%3BentryDy%3D0%3B%22%20edge%3D%221%22%20parent%3D%221%22%3E%3CmxGeometry%20relative%3D%221%22%20as%3D%22geometry%22%3E%3CmxPoint%20x%3D%22460%22%20y%3D%22524%22%20as%3D%22sourcePoint%22%2F%3E%3CmxPoint%20x%3D%22572%22%20y%3D%22474%22%20as%3D%22targetPoint%22%2F%3E%3CArray%20as%3D%22points%22%3E%3CmxPoint%20x%3D%22572%22%20y%3D%22524%22%2F%3E%3C%2FArray%3E%3C%2FmxGeometry%3E%3C%2FmxCell%3E%3CmxCell%20id%3D%227%22%20value%3D%22%E6%B5%81%E7%A8%8B%E5%9C%96%EF%BC%88flowchart%EF%BC%89%22%20style%3D%22ellipse%3BwhiteSpace%3Dwrap%3Bhtml%3D1%3Baspect%3Dfixed%3BfontFamily%3DTimes%20New%20Roman%3BfontSize%3D18%3B%22%20vertex%3D%221%22%20parent%3D%221%22%3E%3CmxGeometry%20x%3D%22354%22%20y%3D%22470%22%20width%3D%22110%22%20height%3D%22110%22%20as%3D%22geometry%22%2F%3E%3C%2FmxCell%3E%3C%2Froot%3E%3C%2FmxGraphModel%3E
- 六種授權條款。
- 編程邏輯之重複結構：巢狀for迴圈，https://reurl.cc/82zdqR。
- 陳會安老師簡介：https://tinyurl.com/ykyvgeae，陳會安老師FB：https://tinyurl.com/yfk6ym82。
- 筆者的小彼特教學：https://tinyurl.com/ygqm5rcu。
- 張隆君教授FB：https://tinyurl.com/yh2zsrdy。
沒有留言:
張貼留言