iT邦幫忙

2021 iThome 鐵人賽

0
自我挑戰組

micro:bit 從入門到精通系列 第 42

Day42 ( 電子元件 ) OLED 繪製數學圖形

OLED 繪製數學圖形

教學原文參考:OLED 繪製數學圖形

這篇文章會使用 micro:bit 連結 OLED1306 顯示器,搭配「變數」、「三角函數」、「重複迴圈」等積木,在 OLED 上繪製「正弦波形」以及「圓形」兩種數學圖形。

相關文章參考:變數三角函數重複迴圈

micro:bit 連接 OLED1306 顯示器

按照下圖,使用「擴充板、杜邦線、麵包板」,將 micro:bit 連接 OLED1306 顯示器。

micro:bit - OLED 繪製數學圖形

加入 OLED1306 積木

開啟 MakeCode 的擴展功能,搜尋「oled」,從搜尋結果中選擇「OLED12864_I2C」的項目,點選加入 OLED1306 顯示器積木。

OLED1306 積木完整教學:OLED1306 顯示器

micro:bit - OLED 繪製數學圖形

繪製「正弦波形」

「正弦波形」是什麼呢?是一種來自三角函數中的正弦​比例的曲線波形,當 x 不斷改變時,透過震幅、角度和正弦函數計算 y 座標,模擬週期性的波形圖案

正弦波形 y 座標公式:y = y0 + n × sin(deg)

( y0:y 軸位置、n:震幅大小、deg:角度 )

更多詳細正弦波形公式,可以參考:The General Sinusoidal Function

micro:bit - OLED 繪製數學圖形

了解公式原理後,就可以開始設計 OLED 的繪圖程式:

  • 按照公式,先放入對應的 x、y、y0、n、deg 變數,並設定數值。
  • 使用重複迴圈,重複 128 次 ( 因為 OLED 的 x 方向解析度只有 128 點 )
  • 每次重複時
    • 計算 y 座標 ( *注意!MakeCode 的三角函數使用「弧度」,要將角度除以 57.7 轉換 *)。
    • OLED 繪製在 (x,y) 繪製亮點。
    • x 增加 1。
    • deg 增加 20。

micro:bit - OLED 繪製數學圖形

完成後,啟動 micro:bit,OLED 就會畫出正弦波形。

micro:bit - OLED 繪製數學圖形

繪製「圓形」

「圓形」是透過三角函數,計算圓周上的 x 與 y 座標所畫出的圖形。

圓形座標公式 ( x0、y0 為圓心座標,r 為半徑,deg 為角度 ):

  • x 座標:x0 + r × cos(deg)
  • y 座標:y0 + r × sin(deg)

首先新增一個名為 circle 的函式,替函式加入 x0、y0、r 和 deg 四個參數,透過函式繪製圓形。

micro:bit - OLED 繪製數學圖形

了解公式原理後,就可以開始設計 OLED 的繪圖程式:

  • 按照公式,編輯 circle 函式內容。
  • 使用計次迴圈,重複 deg 次 ( 360 度可以畫出圓形,180 度可以畫出半圓形 )。
  • 每次重複時計算 x、y 座標,並在 OLED 繪製亮點。
  • 函式編輯完成後,於啟動時呼叫 circle 函式。

micro:bit - OLED 繪製數學圖形

完成後,啟動 micro:bit,OLED 就會畫出圓形。

micro:bit - OLED 繪製數學圖形

如果需要修改「起始角度」,可以把 circle 函式增加一個 deg0 的參數,計算角度時,先加上 deg0,就能夠指定起始的角度

micro:bit - OLED 繪製數學圖形

下圖的例子,按下 A 按鈕時,OLED 會畫出左邊的半圓形,按下 B 按鈕時,OLED 會畫出右邊的半圓形。

micro:bit - OLED 繪製數學圖形

micro:bit - OLED 繪製數學圖形

範例解答

關於我

大家好,我是 OXXO,是個即將邁入中年的斜槓青年,如果對我有點興趣(笑,可以與我聯繫,一起來做點有玩又有創意的東西吧!


上一篇
Day41 ( 電子元件 ) 電流急急棒
下一篇
Day43 ( 電子元件 ) 觸碰開燈 ( 引腳按下 )
系列文
micro:bit 從入門到精通46

尚未有邦友留言

立即登入留言