Processing彩色字母网格项目如何实现运行时颜色及亮度动态变化

失效原因说明 #

你修改fill参数后没有生效，核心原因是原示例的绘制逻辑默认写在了仅执行一次的setup()函数中，画面渲染完成后不会主动刷新。要实现动态变化效果，需要将绘制逻辑迁移到Processing自动循环执行的draw()函数中，同时引入随帧更新的颜色变量。

具体实现步骤 #

• 声明全局变量存储动态颜色值和变化方向，避免每次执行draw时变量被重置

  // 存储红色通道动态值
  float redValue = 0;
  // 控制数值增减方向，1为增加，-1为减少
  int changeDir = 1;
  // 定义网格单元格大小
  int gridCellSize = 40;
  

• 改造setup()函数，仅保留初始化类逻辑

  void setup() {
    // 只设置窗口大小、字体尺寸这类不需要重复执行的配置
    size(800, 800);
    textSize(24);
  }
  

• 在draw()函数中先清空上一帧画面，再更新颜色数值

  void draw() {
    // 清空上一帧内容，避免画面叠加
    background(0);
    // 更新红色通道数值
    redValue += changeDir;
    // 数值触达边界时反转方向，实现1-255往复循环
    if(redValue <= 0 || redValue >= 255) {
      changeDir *= -1;
    }
  

• 接着在draw()中写网格绘制逻辑，调用fill时传入动态更新的红色值

  // 遍历网格绘制随机字母
    for(int x = 0; x < width; x += gridCellSize) {
      for(int y = gridCellSize; y < height; y += gridCellSize) {
        // 使用动态变化的红色值设置填充色
        fill(redValue, 0, 0);
        // 生成A-Z的随机大写字母
        char randomLetter = char(int(random('A', 'Z' + 1)));
        text(randomLetter, x, y);
      }
    }
  }
  

拓展效果实现 #

如果想要实现亮度动态变化的效果，可以在setup中切换为HSB颜色模式，固定色相和饱和度后，仅更新明度通道即可：

void setup() {
  size(800, 800);
  textSize(24);
  // 切换为HSB颜色模式，三个参数分别对应色相、饱和度、明度，取值范围均为0-255
  colorMode(HSB, 255);
}

// draw函数中fill改为：
fill(10, 200, brightValue);

内容的提问来源于stack exchange，提问作者noobFriendy