02.26 「圖形化編程」Micro:bit 螺旋線

通過 介紹的 龜龜擴展庫，我們瞭解了 烏龜圖形

螺旋線原理

我們先來看下面這張圖，圖中的數字代表了線段的長度

可以看到螺旋線是按照這樣的順序畫出來的，

1. 畫出長度為 n 個單位的線(這裡 1 個單位可能不只 1 像素，可能是 多個 像素，這樣畫出的螺旋線才會有間隔)
2. 方向左轉 90 度(當然也可以右轉) ，然後再畫出長度為 n 個單位的線
3. 方向再左轉 90 度(如果第 2 步是右轉那麼這裡也是右轉)，畫一條 長度為 n+1 個單位的線
4. 再左轉 90 度，畫一條 長度為 n+1 個單位的線
5. 重複 3 到 4 步

實現原理

上面的步驟簡化一下，就變成

1. 畫一條 n 個單位的線，左轉90度
2. 畫一條 n 個單位的線，左轉90度
3. 把 n 增加 1

這裡 1 2 步可以用一個 循環 2 次的 循環

除此之外，我們還需要畫圖和清除圖形，原理也很簡單，我們只要調整筆刷的亮度，畫圖的時候亮度為128，清除圖形的時候亮度設置為0，然後筆刷按照相同的路線再走一遍，圖形就被清除啦

代碼實現

首先打開 makecode(https://makecode.microbit.org/) 網站，然後按照 的方法添加 龜龜擴展庫

畫螺旋線函數

1. 創建一個 函數，命名為 luoxuanxian
2. 從 turtle 分類下拖入一個 home 模塊，讓每次函數執行時，烏龜在 led 點陣的中間，也就是 (2,2) 這個點
3. 從 turtle 分類下拖入一個 pen down 模塊，表示每次執行函數就讓畫筆落下
4. 創建一個變量，命名為 n，表示線段的長度
5. 從 循環 分類下拖入一個 對於從 0 至 x 的值 模塊，改為 對於從 0 至 4 的 n，表示循環 5 次，每次循環把 0 到 4 這 5 個值中的一個賦值給變量 n
6. 再從 循環 分類下拖入一個 重複 x 次
   模塊，改為 重複 2 次，用來畫兩條長度為 n + 1 的線段
7. 從 turtle 分類下拖入一個 forward x steps 模塊，改為 forward n + 1 steps，表示，向前移動 n+1 步，也就是畫一條長度為 n+1 的線，因為 n 從 0 開始，所以需要在 這裡 +1 讓它從 1 開始
8. 從 turtle 分類下拖入一個 turn right 模塊，表示向右旋轉 90 度，這裡也可以選擇 turn left，方向相反

按鈕響應事件

分別給 A B 按鈕添加響應事件

1. 當按鈕 A 按下時，從 turtle 分類下拖入一個 set brightness 模塊，改為 set brightness 128，然後調用 luoxuanxian 函數
2. 當按鈕 B 按下時，從 turtle 分類下拖入一個 set brightness 模塊，改為 set brightness 0，然後調用 luoxuanxian 函數，這樣就能達到清除圖形的效果啦

完整程序圖

特別說明

細心的你可能注意到了實現效果裡最後螺旋線出現了奇怪的動作，這是因為 led 點陣屏幕的限制，如果超過 led 點陣，會被循環處理，也就是如果已經向上到達屏幕邊緣，再往上移動，會被處理成光標移動到屏幕最下方，然後接著向上移動，同時我們加了右轉，所以當光標移動到最下方之後又往右移動了 n 步

是不是覺得太簡單了？沒關係，我們知道了畫烏龜圖形的基本原理，下節教程我們一起來畫下面這個更復雜的圖形，敬請期待啦

閱讀更多 暴王不暴燥 的文章

關鍵字: 螺旋線 圖形化 烏龜