【花雕学编程】Arduino动手做(249)---ESP32 1.28寸 TFT GC9A01屏幕之简易旋转万花筒动画

在这里插入图片描述

37款传感器与模块的提法,在网络上广泛流传,其实Arduino能够兼容的传感器模块肯定是不止37种的。鉴于本人手头积累了一些传感器和执行器模块,依照实践出真知(一定要动手做)的理念,以学习和交流为目的,这里准备逐一动手试试多做实验,不管成功与否,都会记录下来——小小的进步或是搞不掂的问题,希望能够抛砖引玉。

【Arduino】189种传感器模块系列实验(资料代码+仿真编程+图形编程)
实验二百四十九:1.28寸圆形彩色TFT显示屏 高清IPS 模块 240*240 SPI接口GC9A01驱动

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
实验开发板使用ESP32

在这里插入图片描述
在这里插入图片描述

实验模块接线示意图

在这里插入图片描述
在这里插入图片描述

【Arduino】189种传感器模块系列实验(资料代码+仿真编程+图形编程)
实验二百四十九:1.28寸圆形彩色TFT显示屏 高清IPS 模块 240*240 SPI接口GC9A01驱动
项目实验之三十二:简易旋转万花筒动画

实验开源代码

/*
  【Arduino】189种传感器模块系列实验(资料代码+仿真编程+图形编程)
  实验二百四十九:1.28寸圆形彩色TFT显示屏 高清IPS 模块 240*240 SPI接口GC9A01驱动
  项目实验之三十二:简易旋转万花筒动画
*/

//       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"
#include "Adafruit_GFX.h"
#include "Adafruit_GC9A01A.h"

// 定义屏幕引脚
#define TFT_CS 4        // 片选引脚
#define TFT_DC 2        // 数据/命令引脚
#define TFT_RST -1      // 重置引脚(未使用时设置为 -1)

// 初始化屏幕对象
Adafruit_GC9A01A tft = Adafruit_GC9A01A(TFT_CS, TFT_DC, TFT_RST);

// 定义颜色数组
uint16_t colors[] = {
    
    GC9A01A_RED, GC9A01A_ORANGE, GC9A01A_YELLOW, GC9A01A_GREEN, GC9A01A_CYAN, GC9A01A_BLUE, GC9A01A_MAGENTA, GC9A01A_WHITE};
int numColors = sizeof(colors) / sizeof(colors[0]);

// 动画参数
#define SCREEN_CENTER_X 120
#define SCREEN_CENTER_Y 120
#define RADIUS 100         // 圆形屏幕的半径
#define NUM_SHAPES 12      // 万花筒图形数量
#define ROTATION_SPEED 5   // 旋转速度(度/帧)
#define SHAPE_SIZE 40      // 单个图形的大小

void drawKaleidoscope(float rotationAngle) {
    
    
    // 清屏
    tft.fillScreen(GC9A01A_BLACK);

    // 绘制多个图形组成万花筒
    for (int i = 0; i < NUM_SHAPES; i++) {
    
    
        // 计算每个图形的旋转角度
        float angle = rotationAngle + i * (360 / NUM_SHAPES);
        float radian = angle * 3.14159 / 180;

        // 计算图形的中心点
        int x = SCREEN_CENTER_X + RADIUS * cos(radian);
        int y = SCREEN_CENTER_Y + RADIUS * sin(radian);

        // 获取颜色
        uint16_t color = colors[(i + (int)(rotationAngle / 20)) % numColors];

        // 绘制三角形
        int x1 = x;
        int y1 = y - SHAPE_SIZE / 2;
        int x2 = x + SHAPE_SIZE / 2;
        int y2 = y + SHAPE_SIZE / 2;
        int x3 = x - SHAPE_SIZE / 2;
        int y3 = y + SHAPE_SIZE / 2;

        tft.fillTriangle(x1, y1, x2, y2, x3, y3, color);
    }
}

void setup() {
    
    
    Serial.begin(115200);         // 初始化串口
    Serial.println("Rotating Kaleidoscope Animation");

    tft.begin();                  // 初始化屏幕
    tft.setRotation(0);           // 设置屏幕方向
    tft.fillScreen(GC9A01A_BLACK); // 清屏设置为黑色背景
}

void loop() {
    
    
    static float rotationAngle = 0;  // 初始化旋转角度

    // 绘制旋转万花筒动画
    drawKaleidoscope(rotationAngle);

    // 更新旋转角度
    rotationAngle += ROTATION_SPEED;
    if (rotationAngle >= 360) {
    
    
        rotationAngle = 0; // 重置角度循环
    }

    delay(10); // 控制动画帧速率
}

代码说明

1、独特的旋转万花筒效果:

绘制多个等距分布的彩色三角形,并通过旋转角度不断变化位置,形成动态万花筒特效。

2、动态颜色渐变:

图形颜色从 colors[] 中动态获取,并根据帧数切换颜色,实现渐变效果。

3、流畅动画:

动态更新旋转角度,带来平滑的旋转效果。

使用 delay(50) 控制帧速率,每秒显示约 20 帧,动画流畅自然。

4、圆形屏幕的极致利用:

图形位置以屏幕中心为基准,完美适配圆形屏幕的特性。

5、效果描述

屏幕显示一个以中心为基准的动态万花筒,彩色的三角形随着旋转角度逐步改变位置和颜色。

效果流畅炫酷,适合圆形屏幕展示,让观看者眼前一亮。

动画的色彩变化和旋转速度可通过调整参数进行定制。

实验场景图 动态图

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述