【花雕学编程】Arduino动手做（249）--GC9A01蓝框红色立方体

  【Arduino】189种传感器模块系列实验（资料代码+仿真编程+图形编程）
实验二百四十九：1.28寸圆形彩色TFT显示屏 高清IPS 模块 240*240 SPI接口GC9A01驱动
项目之六十四：GC9A01园屏之倾斜 25 度的蓝框红色旋转立方体

实验开源代码

/*
  【Arduino】189种传感器模块系列实验（资料代码+仿真编程+图形编程）
  实验二百四十九：1.28寸圆形彩色TFT显示屏 高清IPS 模块 240*240 SPI接口GC9A01驱动
  项目之六十四：GC9A01园屏之倾斜 25 度的蓝框红色旋转立方体
*/

//       GC9A01---------- ESP32
//       RST ------------ NC（复位引脚，此处未连接）
//       CS ------------- D4（片选引脚，连接到ESP32的D4引脚）
//       DC ------------- D2（数据/命令选择引脚，连接到ESP32的D2引脚）
//       SDA ------------ D23 (green)（主数据输出引脚，连接到ESP32的D23引脚，绿色线）
//       SCL ------------ D18 (yellow)（时钟信号引脚，连接到ESP32的D18引脚，黄色线）
//       GND ------------ GND（接地引脚，连接到ESP32的接地端）
//       VCC -------------3V3（电源引脚，连接到ESP32的3.3V电源）

#include "SPI.h"                      // **包含 SPI 库，用于实现与 TFT 屏幕之间的串行通信，通过 SPI 协议传输数据和指令，实现对屏幕的控制**
#include "Adafruit_GFX.h"             // **包含 Adafruit GFX 图形库，提供了一系列基础的图形绘制函数，如绘制线条、三角形、填充图形等，方便进行屏幕图形的绘制**
#include "Adafruit_GC9A01A.h"         // **包含 GC9A01A 屏幕驱动库，专门针对 GC9A01A 型号的 TFT 屏幕，用于屏幕的初始化、设置和各种显示操作**

#define TFT_CS 4                      // **定义 TFT 屏幕的片选引脚为 4，片选引脚用于在多个设备连接到同一 SPI 总线上时，选择特定的设备进行通信，低电平有效**
#define TFT_DC 2                      // **定义 TFT 屏幕的数据/命令选择引脚为 2，该引脚用于区分传输到屏幕的数据是命令（控制屏幕行为）还是实际要显示的数据**
#define TFT_RST -1                    // **屏幕复位引脚（-1 表示未使用），如果设置为有效的引脚编号，可用于对屏幕进行复位操作，这里未使用复位功能**

Adafruit_GC9A01A tft = Adafruit_GC9A01A(TFT_CS, TFT_DC, TFT_RST); // **创建一个 Adafruit_GC9A01A 类的对象 tft，传入前面定义的引脚参数，用于后续对 TFT 屏幕的操作和控制**

#define SCREEN_WIDTH 240              // **定义屏幕的宽度为 240 像素，用于后续在计算图形位置和范围时确定屏幕的横向尺寸**
#define SCREEN_HEIGHT 240             // **定义屏幕的高度为 240 像素，用于后续在计算图形位置和范围时确定屏幕的纵向尺寸**
#define CENTER_X SCREEN_WIDTH / 2     // **计算屏幕的中心 X 坐标，通过将屏幕宽度除以 2 得到，方便将图形绘制在屏幕的水平中心位置**
#define CENTER_Y SCREEN_HEIGHT / 2    // **计算屏幕的中心 Y 坐标，通过将屏幕高度除以 2 得到，方便将图形绘制在屏幕的垂直中心位置**
#define CUBE_SIZE 50                  // **定义立方体的大小，即立方体每条边的长度为 50 个单位，用于确定立方体顶点的坐标范围，影响立方体的实际大小**
#define ROTATION_SPEED 0.05           // **定义立方体的旋转速度，每次循环中增加该值来改变立方体的旋转角度，该值越小，立方体旋转越慢**
#define TILT_ANGLE 25 * M_PI / 180   // **定义立方体的倾斜角度为 25 度，并将其转换为弧度制（因为三角函数使用弧度制），用于后续对立方体顶点进行绕 X 轴的倾斜变换**

float angle = 0;                     // **定义一个变量 angle，用于记录立方体的旋转角度，初始值为 0，在后续的循环中会不断更新，以实现立方体的旋转效果**
uint16_t fillColor = tft.color565(255, 0, 0);  // **定义填充颜色为红色，使用 tft.color565 函数设置 RGB 值（255, 0, 0），用于填充立方体面**
uint16_t edgeColor = tft.color565(0, 0, 255);  // **定义边框颜色为蓝色，使用 tft.color565 函数设置 RGB 值（0, 0, 255），用于绘制立方体的边框**

float cubeVertices[8][3] = {
    {-CUBE_SIZE, -CUBE_SIZE, -CUBE_SIZE},
    { CUBE_SIZE, -CUBE_SIZE, -CUBE_SIZE},
    { CUBE_SIZE,  CUBE_SIZE, -CUBE_SIZE},
    {-CUBE_SIZE,  CUBE_SIZE, -CUBE_SIZE},
    {-CUBE_SIZE, -CUBE_SIZE,  CUBE_SIZE},
    { CUBE_SIZE, -CUBE_SIZE,  CUBE_SIZE},
    { CUBE_SIZE,  CUBE_SIZE,  CUBE_SIZE},
    {-CUBE_SIZE,  CUBE_SIZE,  CUBE_SIZE}
};  // **定义一个二维数组 cubeVertices，用于存储立方体的 8 个顶点的三维坐标，每个顶点由 X、Y、Z 三个坐标值表示，根据 CUBE_SIZE 确定顶点的位置**

// **绘制填充的立方体面的函数，传入四个顶点的索引 a、b、c、d，变换后的顶点坐标数组 transformedVertices，以及填充颜色 color**
// 该函数通过绘制两个三角形来组成一个面并进行填充
void drawFace(int a, int b, int c, int d, float transformedVertices[8][2], uint16_t color) {
    tft.fillTriangle(transformedVertices[a][0], transformedVertices[a][1],
                     transformedVertices[b][0], transformedVertices[b][1],
                     transformedVertices[c][0], transformedVertices[c][1], color);
    // **使用 tft.fillTriangle 函数绘制一个三角形，用指定颜色填充，三个顶点为 transformedVertices 数组中索引为 a、b、c 的顶点**
    
    tft.fillTriangle(transformedVertices[a][0], transformedVertices[a][1],
                     transformedVertices[c][0], transformedVertices[c][1],
                     transformedVertices[d][0], transformedVertices[d][1], color);
    // **再绘制一个三角形，与上一个三角形共同组成一个面，用指定颜色填充，三个顶点为 transformedVertices 数组中索引为 a、c、d 的顶点**
}

// **绘制立方体边框的函数，传入两个顶点的索引 i、j，变换后的顶点坐标数组 transformedVertices，以及边框颜色 color**
// 为了加宽边框，通过多次绘制稍微偏移的线条来实现
void drawEdge(int i, int j, float transformedVertices[8][2], uint16_t color) {
    // 加宽边框，通过多次绘制稍微偏移的线条实现
    for (int offset = -2; offset <= 2; offset++) {
        tft.drawLine(transformedVertices[i][0] + offset, transformedVertices[i][1] + offset,
                     transformedVertices[j][0] + offset, transformedVertices[j][1] + offset, color);
        // 每次循环绘制一条线条，通过在原始坐标上加上偏移量 offset，实现线条的偏移，多次绘制形成加宽的边框效果
    }
}

void setup() {
    Serial.begin(115200);
    // **初始化串口通信，设置波特率为 115200，方便后续调试时通过串口输出信息，如状态信息、错误信息等**
    tft.begin();
    // **初始化 TFT 屏幕，使屏幕准备好接收和显示数据，进行必要的初始化设置**
    tft.setRotation(2);
    // **设置屏幕的旋转方向，这里设置为旋转 2 次（具体旋转角度根据库的定义，通常可能是 180 度），改变图形在屏幕上的显示方向**
    tft.fillScreen(tft.color565(0, 0, 0));
    // **将屏幕填充为黑色，设置背景颜色，清除屏幕上可能存在的初始杂点或残留信息，为后续绘制图形做准备**
}

void loop() {
    tft.fillScreen(tft.color565(0, 0, 0));
    // **清屏操作，每次循环开始时将屏幕再次填充为黑色，确保上一次循环绘制的图形被清除，避免对本次绘制产生干扰，实现过滤其他图形干扰的效果**

    float transformedVertices[8][2];
    // **定义一个二维数组，用于存储立方体顶点经过坐标变换后在 2D 屏幕上的投影坐标**

    for (int i = 0; i < 8; i++) {
        float x = cubeVertices[i][0];
        float y = cubeVertices[i][1];
        float z = cubeVertices[i][2];
        // **从 cubeVertices 数组中获取当前顶点的 X、Y、Z 坐标**

        // **绕 X 轴倾斜 25°**
        float tiltedY = y * cos(TILT_ANGLE) - z * sin(TILT_ANGLE);
        float tiltedZ = y * sin(TILT_ANGLE) + z * cos(TILT_ANGLE);
        // **根据三角函数计算顶点绕 X 轴倾斜后的 Y 和 Z 坐标**

        // **绕 Y 轴旋转**
        float rotatedX = x * cos(angle) - tiltedZ * sin(angle);
        float rotatedZ = x * sin(angle) + tiltedZ * cos(angle);
        // **根据三角函数计算顶点绕 Y 轴旋转后的 X 和 Z 坐标，其中 angle 为当前的旋转角度**

        // **投影到 2D 屏幕**
        transformedVertices[i][0] = CENTER_X + rotatedX;
        transformedVertices[i][1] = CENTER_Y + tiltedY;
        // **将旋转和倾斜后的坐标投影到 2D 屏幕上，通过加上屏幕中心坐标，得到在屏幕上的实际坐标，完成从 3D 坐标到 2D 坐标的转换**
    }

    // **填充立方体六个面**
    drawFace(0, 1, 2, 3, transformedVertices, fillColor);  // **前面**
    drawFace(4, 5, 6, 7, transformedVertices, fillColor);  // **后面**
    drawFace(0, 4, 7, 3, transformedVertices, fillColor);  // **左侧**
    drawFace(1, 5, 6, 2, transformedVertices, fillColor);  // **右侧**
    drawFace(0, 1, 5, 4, transformedVertices, fillColor);  // **顶部**
    drawFace(3, 2, 6, 7, transformedVertices, fillColor);  // **底部**
    // **调用 drawFace 函数，分别填充立方体的六个面，传入相应的顶点索引、变换后的坐标数组和填充颜色，实现立方体的填充绘制**

    // **绘制立方体的边框**
    int edges[12][2] = {
        {0, 1}, {1, 2}, {2, 3}, {3, 0},
        {4, 5}, {5, 6}, {6, 7}, {7, 4},
        {0, 4}, {1, 5}, {2, 6}, {3, 7}
    };
    // **定义一个二维数组 edges，存储立方体 12 条边的顶点索引，用于确定要绘制的边框线条**

    for (int i = 0; i < 12; i++) {
        drawEdge(edges[i][0], edges[i][1], transformedVertices, edgeColor);
        // **遍历 edges 数组，调用 drawEdge 函数绘制每条边，传入边的两个顶点索引、变换后的坐标数组和边框颜色，实现立方体边框的绘制，由于 drawEdge 函数中进行了加宽处理，绘制出的边框会更宽**
    }

    angle += ROTATION_SPEED;
    // **更新立方体的旋转角度，使立方体在下一次循环绘制时呈现出不同的旋转状态，实现旋转动画效果**
    delay(350);
    // **延迟 350 毫秒，控制循环的速度，从而控制立方体旋转动画的速度，使动画看起来更加流畅和自然**
}
复制代码

代码解读：

代码结构
1、初始化屏幕

使用 Adafruit_GC9A01A 控制 TFT 圆形屏幕。

设置 黑色背景。

2、定义立方体

立方体包含 8 个 3D 顶点，每个顶点都有 (x, y, z) 坐标。

3、旋转变换

先倾斜 25°（绕 X 轴）。

然后旋转（绕 Y 轴），使立方体动态旋转。

4、投影到 2D 屏幕

计算新的 (x, y) 坐标，将 3D 立方体显示到 2D 屏幕上。

5、绘制

填充红色圆点，模拟立方体的体积。

绘制蓝色边框，使轮廓清晰。

6、动画循环

每次旋转 增加一个角度，让立方体持续旋转。

使用 delay(50); 控制动画流畅度。

7、最终效果

红色填充立方体，倾斜 30°

蓝色边框，增强立体感

动态旋转，视觉流畅，无卡顿，代码结构清晰

实验场景图  动态图