OLED 绘制数学图形

教学原文参考：OLED 绘制数学图形

这篇文章会使用 micro:bit 连结 OLED1306 显示器，搭配「变数」、「三角函数」、「重复回圈」等积木，在 OLED 上绘制「正弦波形」以及「圆形」两种数学图形。

相关文章参考：变数、三角函数、重复回圈。

micro:bit 连接 OLED1306 显示器

按照下图，使用「扩充板、杜邦线、面包板」，将 micro:bit 连接 OLED1306 显示器。

加入 OLED1306 积木

开启 MakeCode 的扩展功能，搜寻「oled」，从搜寻结果中选择「OLED12864_I2C」的项目，点选加入 OLED1306 显示器积木。

OLED1306 积木完整教学：OLED1306 显示器。

绘制「正弦波形」

「正弦波形」是什麽呢？是一种来自三角函数中的正弦​比例的曲线波形，当 x 不断改变时，透过震幅、角度和正弦函数计算 y 座标，模拟周期性的波形图案。

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

( y0：y 轴位置、n：震幅大小、deg：角度 )

更多详细正弦波形公式，可以参考：The General Sinusoidal Function

了解公式原理後，就可以开始设计 OLED 的绘图程序：

• 按照公式，先放入对应的 x、y、y0、n、deg 变数，并设定数值。
• 使用重复回圈，重复 128 次 ( 因为 OLED 的 x 方向解析度只有 128 点 )
• 每次重复时
  • 计算 y 座标 ( *注意！MakeCode 的三角函数使用「弧度」，要将角度除以 57.7 转换 *)。
  • OLED 绘制在 (x,y) 绘制亮点。
  • x 增加 1。
  • deg 增加 20。

完成後，启动 micro:bit，OLED 就会画出正弦波形。

绘制「圆形」

「圆形」是透过三角函数，计算圆周上的 x 与 y 座标所画出的图形。

圆形座标公式 ( x0、y0 为圆心座标，r 为半径，deg 为角度 )：

• x 座标：x0 + r × cos(deg)
• y 座标：y0 + r × sin(deg)

首先新增一个名为 circle 的函式，替函式加入 x0、y0、r 和 deg 四个参数，透过函式绘制圆形。

了解公式原理後，就可以开始设计 OLED 的绘图程序：

• 按照公式，编辑 circle 函式内容。
• 使用计次回圈，重复 deg 次 ( 360 度可以画出圆形，180 度可以画出半圆形 )。
• 每次重复时计算 x、y 座标，并在 OLED 绘制亮点。
• 函式编辑完成後，於启动时呼叫 circle 函式。

完成後，启动 micro:bit，OLED 就会画出圆形。

如果需要修改「起始角度」，可以把 circle 函式增加一个 deg0 的参数，计算角度时，先加上 deg0，就能够指定起始的角度。

下图的例子，按下 A 按钮时，OLED 会画出左边的半圆形，按下 B 按钮时，OLED 会画出右边的半圆形。

范例解答

• 范例解答：OLED 绘制正弦波形

• 范例解答：OLED 绘制圆形

关於我

大家好，我是 OXXO，是个即将迈入中年的斜杠青年，如果对我有点兴趣(笑，可以与我联系，一起来做点有玩又有创意的东西吧！

• OXXO.STUDIO 部落格
• OXXO.STUDIO 粉丝团
• Steam 教育学习网
• Steam 教育学习网粉丝团