【花雕学编程】Arduino动手做（249）--GC9A01蓝框红色立方体
【花雕学编程】Arduino动手做（249）--GC9A01蓝框红色立方体
【花雕学编程】Arduino动手做（249）--GC9A01蓝框红色立方体
【花雕学编程】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 = {
{-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, uint16_t color) {
tft.fillTriangle(transformedVertices, transformedVertices,
transformedVertices, transformedVertices,
transformedVertices, transformedVertices, color);
// **使用 tft.fillTriangle 函数绘制一个三角形，用指定颜色填充，三个顶点为 transformedVertices 数组中索引为 a、b、c 的顶点**
tft.fillTriangle(transformedVertices, transformedVertices,
transformedVertices, transformedVertices,
transformedVertices, transformedVertices, color);
// **再绘制一个三角形，与上一个三角形共同组成一个面，用指定颜色填充，三个顶点为 transformedVertices 数组中索引为 a、c、d 的顶点**
}
// **绘制立方体边框的函数，传入两个顶点的索引 i、j，变换后的顶点坐标数组 transformedVertices，以及边框颜色 color**
// 为了加宽边框，通过多次绘制稍微偏移的线条来实现
void drawEdge(int i, int j, float transformedVertices, uint16_t color) {
// 加宽边框，通过多次绘制稍微偏移的线条实现
for (int offset = -2; offset <= 2; offset++) {
tft.drawLine(transformedVertices + offset, transformedVertices + offset,
transformedVertices + offset, transformedVertices + 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;
// **定义一个二维数组，用于存储立方体顶点经过坐标变换后在 2D 屏幕上的投影坐标**
for (int i = 0; i < 8; i++) {
float x = cubeVertices;
float y = cubeVertices;
float z = cubeVertices;
// **从 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 = CENTER_X + rotatedX;
transformedVertices = 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 = {
{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, edges, transformedVertices, edgeColor);
// **遍历 edges 数组，调用 drawEdge 函数绘制每条边，传入边的两个顶点索引、变换后的坐标数组和边框颜色，实现立方体边框的绘制，由于 drawEdge 函数中进行了加宽处理，绘制出的边框会更宽**
}
angle += ROTATION_SPEED;
// **更新立方体的旋转角度，使立方体在下一次循环绘制时呈现出不同的旋转状态，实现旋转动画效果**
delay(350);
// **延迟 350 毫秒，控制循环的速度，从而控制立方体旋转动画的速度，使动画看起来更加流畅和自然**
}
【花雕学编程】Arduino动手做（249）--GC9A01蓝框红色立方体
代码解读：代码结构
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°
蓝色边框，增强立体感
动态旋转，视觉流畅，无卡顿，代码结构清晰
【花雕学编程】Arduino动手做（249）--GC9A01蓝框红色立方体
实验场景图动态图【花雕学编程】Arduino动手做（249）--GC9A01蓝框红色立方体
【花雕学编程】Arduino动手做（249）--GC9A01蓝框红色立方体
页:
[1]