23浏览
查看: 23|回复: 5

[项目] 【花雕学编程】Arduino动手做(199)--递减同心填充三角形

[复制链接]
【花雕学编程】Arduino动手做(199)--递减同心填充三角形图2

【花雕学编程】Arduino动手做(199)--递减同心填充三角形图3

【花雕学编程】Arduino动手做(199)--递减同心填充三角形图1

驴友花雕  中级技神
 楼主|

发表于 昨天 10:37

【花雕学编程】Arduino动手做(199)--递减同心填充三角形

【花雕学编程】Arduino动手做(199)--递减同心填充三角形图3

【花雕学编程】Arduino动手做(199)--递减同心填充三角形图1

【花雕学编程】Arduino动手做(199)--递减同心填充三角形图2
回复

使用道具 举报

驴友花雕  中级技神
 楼主|

发表于 昨天 10:40

【花雕学编程】Arduino动手做(199)--递减同心填充三角形

  【Arduino】168种传感器模块系列实验(资料代码+仿真编程+图形编程)
  实验一百九十九:蓝屏LCD12864液晶屏 带中文字库 带背光12864-5V 并口串口
  项目之十:ESP32  ST7920屏幕之之绘制递减边长的同心填充三角形

实验开源代码

  1. /*
  2.   【Arduino】168种传感器模块系列实验(资料代码+仿真编程+图形编程)
  3.   实验一百九十九:蓝屏LCD12864液晶屏 带中文字库 带背光12864-5V 并口串口
  4.   项目之十:ESP32  ST7920屏幕之之绘制递减边长的同心填充三角形
  5. */
  6. #include <Arduino.h>
  7. #include <U8g2lib.h>
  8. #include <SPI.h>
  9. // 使用软件 SPI 适配 ESP32
  10. U8G2_ST7920_128X64_F_SW_SPI u8g2(U8G2_R0, /* Clock=*/ 18, /* Data=*/ 23, /* CS=*/ 16, /* Reset=*/ 17);
  11. int sideLength = 60;  // **初始三角形边长**
  12. int minLength = 10;   // **最小边长**
  13. int step = 2;         // **每次缩小的间隔**
  14. int centerX = 64;     // **屏幕中心 X**
  15. int centerY = 32;     // **屏幕中心 Y**
  16. void setup() {
  17.   Serial.begin(115200);
  18.   u8g2.begin();
  19.   u8g2.setPowerSave(0);  // **关闭省电模式**
  20.   u8g2.setContrast(200); // **提高对比度**
  21.   u8g2.setDisplayRotation(U8G2_R2);  // **旋转 180 度**
  22. }
  23. void loop() {
  24.   u8g2.firstPage();
  25.   do {
  26.     int s = sideLength;
  27.     while (s >= minLength) {
  28.       int x1 = centerX - s / 2;
  29.       int y1 = centerY + s / 2;
  30.       int x2 = centerX + s / 2;
  31.       int y2 = centerY + s / 2;
  32.       int x3 = centerX;
  33.       int y3 = centerY - s / 2;
  34.       u8g2.drawTriangle(x1, y1, x2, y2, x3, y3);  // **绘制空心三角形**
  35.       s -= step;  // **缩小边长**
  36.     }
  37.   } while (u8g2.nextPage());
  38.   sideLength -= step;  // **每次递减边长**
  39.   // **如果缩小到最小值,重新开始**
  40.   if (sideLength < minLength) {
  41.     sideLength = 60;
  42.   }
  43.   delay(100);  //**每0.1秒刷新一次**
  44. }
复制代码


回复

使用道具 举报

驴友花雕  中级技神
 楼主|

发表于 昨天 10:43

【花雕学编程】Arduino动手做(199)--递减同心填充三角形

本帖最后由 驴友花雕 于 2025-5-7 11:11 编辑

代码简单解读

这段代码在 ST7920 LCD 屏幕 上实现了 同心空心三角形绘制,核心逻辑如下:

1. 初始化
✅ u8g2.begin(); → 启动 ST7920 屏幕
✅ u8g2.setPowerSave(0); → 确保屏幕不会休眠
✅ u8g2.setContrast(200); → 提高对比度,让图形更清晰
✅ u8g2.setDisplayRotation(U8G2_R2); → 让屏幕旋转 180 度

2. 递减绘制三角形
✅ sideLength -= step; → 让三角形尺寸逐渐缩小
✅ while (s >= minLength) → 保证三角形不小于设定的最小值
✅ if (sideLength < minLength) sideLength = 60; → 到最小尺寸后重置为最大

3. 计算三角形坐标
✅ 计算三角形顶点:

x1 = centerX - s / 2;, y1 = centerY + s / 2; → 左下角顶点

x2 = centerX + s / 2;, y2 = centerY + s / 2; → 右下角顶点

x3 = centerX;, y3 = centerY - s / 2; → 上方顶点
✅ drawTriangle(x1, y1, x2, y2, x3, y3); → 使用 U8g2 API 绘制空心三角形

4. 画面刷新
✅ delay(500); → 每 500 毫秒更新一次显示
✅ firstPage(); do { ... } while (nextPage()); → 保证绘制流畅,无闪烁

这段代码让 ST7920 屏幕不断绘制同心空心三角形,从大到小循环展示。
回复

使用道具 举报

驴友花雕  中级技神
 楼主|

发表于 昨天 10:46

【花雕学编程】Arduino动手做(199)--递减同心填充三角形

实验场景图  动态图
【花雕学编程】Arduino动手做(199)--递减同心填充三角形图1

【花雕学编程】Arduino动手做(199)--递减同心填充三角形图2




回复

使用道具 举报

驴友花雕  中级技神
 楼主|

发表于 昨天 10:48

【花雕学编程】Arduino动手做(199)--递减同心填充三角形

【花雕学编程】Arduino动手做(199)--递减同心填充三角形图1
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

为本项目制作心愿单
购买心愿单
心愿单 编辑
[[wsData.name]]

硬件清单

  • [[d.name]]
btnicon
我也要做!
点击进入购买页面
上海智位机器人股份有限公司 沪ICP备09038501号-4 备案 沪公网安备31011502402448

© 2013-2025 Comsenz Inc. Powered by Discuz! X3.4 Licensed

mail